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:
ZURB Foundation is a complete framework that’s not unlike our own CSS3 foundation, in that it provides default styles for headings, buttons, tables and other common page elements, but it also includes a CSS grid you can get rolling with right away.
However, we ultimately decided against using it, for several reasons:
- The biggest issue for us is that the framework is written in pure CSS. We’ve been using Compass for a few years now, and lack of Compass/Sass support is a deal-breaker. If it were just a grid, this wouldn’t matter as much, but since this is a complete foundation, intended to be used as a basis for production code, we would need it to be Sass/Compass ready. Imagine just changing the color scheme in an extensive foundation like this one, when the code is in pure CSS.
- Differing coding conventions. Like most organizations, we have a set of coding conventions we follow when writing CSS. Foundation has very different ones. Again, if we were using this only as an aid in rapid prototyping, for code that would get thrown away, it wouldn’t be as big a deal. However, because the foundation is intended to eventually become the basis of production code, it’s important to us that the code be in the format that we’ve decided is most readable and maintainable in the long run. Getting it to that stage would require forking the project, making significant changes, and maintaining that fork, which runs counter to our original goal of getting going quickly.
- Differing UI conventions. In addition to the code itself, we’ve settled on some UI conventions that we like to use in every project, which we would also have to fold into a fork if we were to use it as a framework to base our production code from.
Since ZURB foundation is a complete framework with its own set of conventions, it would necessitate a sea change in how we bootstrap projects. Since we’ve already invested significant time building a framework that makes use of the tools and conventions we require, what we really need is more like a collection of mixins that give us the grid we need for rapid prototyping.
Almost the polar opposite of ZURB foundation (in terms of complexity) is the Golden Grid System, which is simply a fluid, responsive grid. In its favor is that it includes both Less and Sass incarnations of its core stylesheet. However, by the author’s own admission:
GGS actually does very little.
It’s definitely not a framework. It’s more just a starting point and a couple of guidelines.
In other words, you have to build your own grid according to the guidelines provided in the documentation. This is, again, counter to our original goal of a drop-in module we could get rolling with quickly. Back to the drawing board.
The 1140 CSS grid, on the other hand, seems to be everything we’re looking for. It’s just a fluid grid, with CSS classes you assign to your markup to get a grid-based layout quickly. And it doesn’t do much more than that, which makes it a good fit with an established framework. It should be said that this grid system is only available in pure CSS form, but since it’s just a single stylesheet, it’s a simple matter of a file rename to get it to work with Compass/Sass.
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