55 Minutes

Welcome to the 55 Minutes blog.
55 Minutes is a web development consultancy in San Francisco building apps for design-led businesses and startups. On this blog we discuss the technology tools of our trade: Ruby on Rails, Django, Sass, OS X, and more.

Fluid CSS Grid Systems for Rapid Prototyping

In which we investigate three fluid grid systems – ZURB foundation, Golden Grid System, and 1140 CSS Grid – and choose the one that works best for our rapid prototyping in Compass/Sass.

As you may know already, we use our CSS3 foundation project to bootstrap all of our web development, and recently we got to talking about adding in a fluid CSS grid system to help with rapid prototyping during the design phase.

Rather than build one from scratch, we decided to choose one from the many CSS grids that are available and actively maintained, in the hopes of finding in a drop-in module we could begin using with a minimum of fuss. We evaluated three different fluid grid systems by trying to create an HTML mockup from a sketch with each one:

It didn’t take long for us to figure out whether we could work with each of them, and much like Goldilocks, we had to go from one extreme to the other before finding the grid that felt just right. Here are our findings:

So that’s what we ended up going with. After a few minor modifications, we’ve baked the 1140 CSS grid right into the latest version of our CSS3 foundation, to get the rapid prototyping functionality we need without sacrificing the benefits of the best practices and conveniences we’d spent so much time putting together. You can see an example of it in action in our fiftyfive-wicket Maven archetype, available in version 3.1 and newer.

comments powered by Disqus