Gridpak: The Responsive Grid Generator

Advertisement

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:

  1. 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.
    Create multiple grids, for desktop, tablet and phone.

  2. 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.
    Recreating the same grids in the browser.

  3. 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.
    Calculating percentage widths and writing CSS in order to make our website and grid responsive.

There were 2 crucial drawbacks to this approach:

  1. It took a long time to measure up grids, create them in static graphic format, then produce long lines of LESS.
  2. 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:

  1. 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.
  2. 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.
  3. 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.
    • A HTML demo file.
    • A CSS file complete with appropriate media queries and predefined presentational classes.
    • LESS, SCSS8 and SASS9 files for the same purpose, but with the added power of variables and mixins.
    • A JavaScript snippet that allows the user to overlay their responsive grid in any browser using the “G” key.
    • A readme.txt file with some more in-depth documentation.

The simple interface makes is easy to visualize, create and edit your responsive grid system.
The simple interface makes is easy to visualize, create and edit your responsive grid system.

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:

.span_1, .span_2, .span_3,
.news_item {
    margin-left:2%;
    padding:0 1.5%;
    ...
}

.span_6,
.news_item {
    ...
}

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

Baseline functionality and an ability to edit the position of the breakpoints after you have created them.
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.

Written by Sam Quayle18.

(jvb) (il)

↑ Back to topShare on Twitter

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.

  1. 1

    It would be useful if it had some predefined breaking points, such as for iPhone, iPad (portrait and landscape) etc.

    Otherwise, a very nicely designed tool. Thanks so much for the detailed write-up!

    0
    • 2

      Couldn’t agree with you more, add predefined breaking points!

      0
    • 3

      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.

      0
  2. 4

    Very nice… Responsive Web Design is the hot topic now ;)
    CSS for network, CSS for mobile, ok. Complex sites, it is difficult.

    0
  3. 5

    Great work, thank you

    0
  4. 6

    Great series. (fyi the twitter link to @gridpak is missing a .com/ )

    0
  5. 9

    Awesome. I will certainly try this grid generator for one of my future projects.
    (FYI there is also a small typo in the link to the Erskine Design website.

    0
  6. 11

    Is there a demo site for this?

    0
    • 12

      We’ve actually just released an update that includes a demo with your download, so you can hopefully see how it all slots together (or how we imagine it could.)

      Let us know how you get on!

      0
  7. 13

    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.

    I am not a fan of m.amazon solution.

    0
  8. 17

    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.

    0
  9. 18

    You’ve got two minor(ish) typos in your article:

    1. The @gridpak link leads to http://twitter/gridpak (no .com in the URL).
    2. The Erskine Design link leads to http://erskinedeisgn.com/ (“design” is spelled wrong).

    In any case, this seems very cool! Thanks.

    0
  10. 22

    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
    go to

    0
  11. 23

    I already using gridpak for my projects. One word: timesaver!

    0
    • 24

      I read that you already use gridpak in your projects. Can you help me with it. I stack with the HTML CSS.. And I can’t find somebody who can help. Hope you can help me!

      0
  12. 25

    Nice works.Its really nice.Thank you for sharing.

    0
  13. 26

    Ha ha, had the same problem! It completely got lost in all this gobbledygook but you helped me, bro!

    0
  14. 27

    These guys have come up with a great tool! I first found out about GridPak when Erskine were presenting at standards>next in Manchester.

    0
  15. 28

    Awesome. I will certainly try this grid generator for one of my future projects.

    0
  16. 29

    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

      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.

      0
  17. 31

    Thank you for the useful article :)

    0
  18. 32

    Well will try this tool. An interesting css grid that I already used is this http://978.gs/
    I was able to fast prototype grids for all devices.

    0
  19. 33

    Awesome, will definitely use it. Will let you how it went soon.

    0
  20. 34

    Great read. Still code to client spec’s until we live in a world of SCB then this can be a overall ideal that will become the industry standard.

    0
  21. 35

    Amazing work. I’ll use this grids whenever I want to build a website..
    thanks

    0
  22. 36

    Andri Sigurðsson

    March 23, 2012 2:25 am

    Gridpak looks very nice. The GUI is very clean.

    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.

    http://fluidable.com

    1
  23. 37

    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.

    0
    • 38

      hey @rui, I’m also using the Semantic Grid system since it doesn’t make decisions about your classes or id names. It makes sense to combine Gridpak and the SG. I’ll try your workflow.Thanks man.

      0
    • 39

      Hey,
      I was wondering if you would expand on how you are combining the semantic.gs and gridpak. I’m very interested in the concept so any insights would be extremely helpful!

      0
  24. 40

    Excellent tool, I’m excited to use it!

    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.


    @media screen and (min-width: 0px) and (max-width: 479px) {
    .span_1_alpha { width:100%;}
    }

    @media screen and (min-width: 480px) {
    .span_1_beta { width:6.5%;}
    }

    This way a div written so:


    <div class="span_1_alpha span_1_beta">
    my content
    </div>

    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
  25. 41

    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
  26. 42

    An old post but this generator has saved me a lot of time. When combined with sass—blaow! this is some powerful stuff.

    Big ups!

    0
  27. 43

    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.

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top