Design, Code and technology, News and culture

Introducing Gridpak

This week we quietly launched Gridpak, a tool that we hope will dramatically speed up the process of creating with Responsive Web Design layouts.

We were finding the process of creating grid systems quite laborious. Typically it involved creating three or four different grids by hand in Photoshop.

When we began to develop, we had to recreate the grids Responsively and add javascript to overlay them in the browser.

Then we would create all of the media queries and spend ages doing the maths to work out the relative widths and heights in the CSS.

Initially we looked around at frameworks and existing generators but nothing seemed to offer quite enough flexibility.

So Gridpak was born from a need to improve and speed up our own process when designing and building responsive websites. The aim of the interface is to make it quick and easy to visualise your Responsive grid system and output it in the formats you need to make a quick start to a project.

The main benefits are that Gridpak centralises the grid creation process and does all the heavy lifting of creating PNG versions of each of the grids, CSS with media queries, presentational classes and JavaScript overlay for the browser.

We wanted to make it easy to use and intuitive, more flexible than existing solutions. But designing manipulation software is hard to do well, especially when the model that the user directly manipulates is a relatively complex concept.

We needed to keep the interface as simple as possible, infusing lots of visual feedback without distracting the editor from the primary task of manipulating the layout.

The current version is still very firmly a beta product, with plans to add features incrementally over the coming months. We’re already seeing requests for features like percentages for padding and gutters and the ability to move the markers that set the end and starting points of each grid.

Gridpak will grow and evolve over time, so we’d really welcome your feedback and input. You can always send us feature requests at gridpak[at]erskinedesign.com or @gridpak. We also have a Trello board where you can comment on and vote for features, or just keep an eye on what we?re currently working on.

Grid generators and frameworks are by their very nature limited in that they produce one type of grid. Gridpak shares these limitations (although we hope to improve it’s flexibility with future releases) but we hope it will become a valuable tool to help you make a quick start to commercial projects. We know from our own experience that Gridpak saves huge amounts of time, particularly with the CSS, LESS and SCSS files.

We hope you enjoy using Gridpak and we’ll be putting up another post soon with more details about how the site was built. Check it out at http://gridpak.com/.