This article is the fifth in our new series that introduces the latest, useful and freely available tools and techniques, developed and released by active members of the Web design community. The first article covered PrefixFree1; the second introduced Foundation2, a responsive framework; the third presented Sisyphus.js3, a library for Gmail-like client-side drafts and the fourth shared with us a free plugin called GuideGuide4. Today, we are happy to present Erskine’s responsive grid generator: Gridpak.

In the near 18 months since A List Apart published Ethan Marcotte’s article Responsive Web Design5 much has changed in the way we approach our design process. The new responsive attitude described in the article embraces device agnostic design, flexibility and the undefined canvas. Whilst John Allsopp’s A Dao of Web Design6 laid the foundations for change, Ethan’s article—alongside a maturation in technologies and a coinciding mass movement towards mobile browsing—really set the scene for a new design ethos.

The Problem

Challenges and problems inevitably arise when adopting new ideas and ways of working. One of the main stumbling blocks we found as an agency was in efficiently and cost-effectively implementing one of the fundamental ingredients of responsive design: a flexible grid based layout.

This is what our typical design and development cycle for creating a responsive website with a flexible grid system used to look like:

Create 3 or 4 different sized grids by hand in Fireworks to use as a reference in the wireframing/design stage.

Create multiple grids, for desktop, tablet and phone.

Recreate the same grids with crude and often clunky browser extensions (mentioning no names) or write some JavaScript that would allow us to overlay our grid layers (exported as semi-transparent PNGs) in the browser.

Recreating the same grids in the browser.

Write LESS7 stylesheets which cut down on the maths, but still required all the base values and formulas for calculating grid widths.

Calculating percentage widths and writing CSS in order to make our website and grid responsive.

There were 2 crucial drawbacks to this approach:

It took a long time to measure up grids, create them in static graphic format, then produce long lines of LESS.

We couldn’t visualise the grids responding (sweet irony) until they were built.

At that time, most of the responsive frameworks forced you into a corner: you were required to use a pre-determined number of columns, gutters, padding and breakpoints. We felt that this undermined the ethos of a methodology that was by it’s very nature flexible.

We also felt that existing generators lacked the visual feedback that we required: we were desperate to see how our grids would react when squeezed and stretched in order to inform our decisions.

Solution

So one afternoon, dissatisfied as much with our own process as we were with the available solutions, we began to put pen to paper with the ultimate goal of creating a responsive grid generator that would:

Offer true flexibility:The interface allows the user to adjust the amount of columns in each grid, the inner padding and gutter width in either pixels or percentages, and where the breakpoints of the grid occur.

Allow the user to visualize a responsive grid system:The user can switch between and edit their grids in real-time using the tab system. They can see immediately how their grids react.

Streamline the design and development process:Gridpak outputs all of the file formats necessary to make a quick start to a responsive project. They are easy to extend, reference, or just throw away if not required. The file formats come neatly packed inside a small .zip file that includes:

PNG overlays of each grid the user has created for use in their graphics program of choice.

Stylesheets

Gridpak is not really meant to be a framework. Although its stylesheets will work “right out of the box”, they are meant to be plucked and pruned into your own stylesheets and methods of working. That’s why they only contain information which is essential for your grid system.

We had a niggle with media queries on grid based layouts when the number of columns changed between breakpoints. To solve this problem, we eschewed the use of “span_x” in our class names in the markup, preferring to use semantic naming like “news_item”. We then added our semantic class names to gridpak.css, right next to their counterpart:

In this way, our markup isn’t coupled to the CSS nor are the elements to the breakpoints. It’s a far more scalable way of doing things. Implementation is very much open to interpretation, and we look forward to seeing how people apply it to their own projects.

Gridpak uses media queries10, box-sizing and background-clip properties (although there are ways to use it without these queries.) These CSS3 properties are supported in all new browsers, as well as IE8 but we would recommend using a polyfill or detection service such as Modernizr11 to handle the degradation.

Help Us Help You

Coming soon: Baseline functionality and an ability to edit the position of the breakpoints after you have created them.

We know Gridpak is not a one-stop, cure-all panacea—it was never designed to be. Like all tools it has limitations, but we believe it is a useful part of the responsive designer’s armory. As the field evolves further we will undoubtedly see a proliferation of similar tools and approaches. People will ultimately choose the ones that work best for them and fitting to their workflows.

Since the launch, we’ve added important features like the ability to adjust gutter widths and column padding in percentages as well as in pixels. With our next release we’ll introduce a more flexible approach to allow the creation of a wider range of asymmetrical grids… but we can go much further. That’s why we’ve open sourced the Gridpak codebase on Github12. We’d love to see it become a truly collaborative effort where people get into the code and make their own improvements.

Feedback

We hope that Gridpak13 will grow and evolve over time, so we’d really welcome your feedback and input. You can send feature requests to gridpak@erskinedesign.com14 or @gridpak15 on Twitter. We also have a Trello board16 where you can comment on and vote for features, or even just keep an eye on what we’re currently working on. We, at Erskine Design17, have found Gridpak to be a great resource for our day-to-day client work, so we hope you enjoy using it as much as we do… and we do.

Erskine Design is an award winning creative agency based in Nottingham, England. They are renowned for producing websites that combine thoughtful design with ingenious technology. Their clients range from established brands to start-ups. You can follow Erskine on Twitter @ErskineDesign or visit their website http://erskinedesign.com.

Lucas

darius

Responsive design is not about catering to popular browser viewpoints. It’s about designing for the unpredictable. Responsive design should be device and browser agnostic. It’s true potential is making content fit any range of viewpoints, not just what’s popular that week.

josh

Responsive sites are cool, however I find they are relegated to small scale sites and designers sites.

Does anyone have examples of large scale ecommerce sites that run a responsive layout? Something like newegg, amazon, etc.

Smashing is probably the “largest” site I have found that runs a responsive layout but is not really in the right area.

I ask because I have an upcoming redesign for an ecommerce site with 30,000+ active products, more than 500 categories/children categories and I am a little stumped at how to achieve anything that would be classified “responsive”. To add to the problem the page layouts/order cannot really be changed since it is all organised for google. This is another worry – how do bots crawl a responsive site, particularly one that makes items vanish on smaller devices.

I know display:none is bad but the pages will end up being extremely long on a phone.

Yorik

Now i can’t begin new website without Responsive Grid, it’s the best way to dislay content with all device. I have test some different framework like Fondation, or new wordpress template with Génésis framework from Studiopress and i love it !

It’s very cool to watch what we create on smartphone, ipad, computer or tv !

Thinking web design with Responsive is one new challenge every day, because now we can decide how we want to display some content for little screen and big screen. And the differents it’s very enormous, and demand a lot of thinking before start new project. We have to thinking about the importance of different content on a website, and it’s a good training to organize and found what’s the hot content, what we don’t realy need and put that on the bottom etc …

If someone want to test them, i realy recommand to begin with Fondation, it’s a perfect way for rapid responsive prototype, and a good start for learning and test different way before to start a new projetc.

(sorry my bad english, is not my first language :p )

@josh One ecommerce i don’t know, but the best exemple i know is the Boston Globe, designed by Ethan Marcotte !
And you can found a lot of exemple.

Angela White

Christopher

Responsive Designs are def. a hot topic right now that you can’t avoid. While I love the flexibility of it and love the forward thinking of it, one question that I don’t know if anyone has addressed, is how do you deal with the load time and assets of some Responsive site? If a site using Media Queries is hiding certain assets on the page like imagery, doesn’t that slow down the UX for a mobile browser because it is loading assets that they will never see? I think sites like Smashing, and BostonGlobe do a really good job of keeping assets and have a simplistic enough designs where a user would never know the difference, but I see sites out there that are forcing Responsive Design into the mix, and it doesn’t seem like a good fit. I just think there is a time and place for Responsive Design, though most of the time I think it’s a good fit. Thoughts?

0

30

David

One of the schools of thought to ease the load on mobile browsing is to design mobile first. This means that, given everything breaks (js, CSS Media Queries) you get a mobile view regardless of viewing device. I set the max width the something like 540 px and it makes the site readable and functional.

Everything else is added via js conditional to the window width. This works fine for expanding on the complexity of navigation or making a few areas available that weren’t offered on mobile.

The big issue rearing its ugly head is images. You can either load huge images into the mobile default and scale accordingly, often at a waste, or try to swap them as you size up the window.

Wisam Mways

Andri Sigurðsson

If anyone is interested, I just release a simple fluid grid system with a built-in mobile layout. Its constructed using LESS and it very lightweight. It does not try to make any predefined notions on how you are going to build your site. Its just a standalone grid system that hope is a good foundations for a responsive site. Please let me know what you think, I would love some feedback.

Rui

Hello.
This is a great tool, but a bit messy on the html. Before I found this I was using the Semantic Grid System, a cleaner tool but with only one grid. Then I thought: why don’t I combine the best of both worlds? My workflow now goes like this: I create the necessary grids on gridpak, then I copy all the dimension definition and media queries to the .less file I use with the grid.less(from the semantic grid system), abstracting the grid definitions. This way I don’t have to add classes to the html, just to prevent problems when the number of columns change. Now I can use a cleaner html and less files and still take advantage of the .js and .png files created on gridpak. I don’t know if this makes any sense(I can show and example if you want), I’m still testing it out, but maybe you can work together to create a better tool.

Larry Botha

Rather than adding class specific styles to the generated styles, a better solution may be to add an identifier onto the end of each column class, depending on which media query the column is found in.
e.g.

can easily override styles declared for wider viewports, since it is already in a mobile first format. This will keep the classes in a pleasant OOCSS manner, while saving the developer from having to keep track of where all the specific styles have been appended to the column declarations. The behaviour of a div can be easily controlled by adding and removing classes directly to the div, instead of having to move classes around in the css.

0

41

Denis Leblanc

I’ve created a free downloadable grid system based on the gridpak generator that includes media queries and reset for anybody looking to get started quickly. It’s available in 12, 16 and 24 columns and can be downloaded at http://responsive.gs

0

42

TheRogueSkolar

Ben

I enjoyed reading this, and just realized it came out around two years ago – as of now the promised updates such as baseline information, popular breakpoints, etc. have not been added to the tool. Are these features still coming, or has the project been deprecated? It’s a great tool.

Subscribe to our email newsletter for useful tips and valuable resources, sent out every second Tuesday.

Meet Smashing Book #5, our new book on real-life responsive design. With front-end techniques and patterns from actual projects, it's a playbook to master all the tricky facets and hurdles of responsive design. Save 25% today.

Fixing RWD issues can be quite easy — once you understand exactly why they come up. The Mobile Web Handbook will help you understand technical issues on mobile and how to deal with them effectively.

Hungry for more content? Over 60 eBooks are waiting to be discovered in our lovely Smashing Library. And guess what? You can watch Smashing Conference talks there, too.

SmashingConf isn't the eighth wonder of the world, but we are pretty close. Join us at at the shores of Santa Monica for SmashingConf LA on April 27–30 or at SmashingConf NYC on June 15–18. You won't be disappointed.