At ZURB we're fans of what we call the ZURB framework — really just a lightweight global CSS file containing a global reset, some basic typography styles, structural elements like a body container, and the grid. The way we say the grid is no accident — it's an evolving entity that we use frequently and that generally makes prototype and site construction quite a bit faster and easier on us. However: there's a catch.
The grid is a 940/960 grid; 940 pixels of usable space with 10px padding on both sides, broken up into 16 columns. Each columns is 40px wide with 20px of gutter space, and we can break the content up into any subset of those columns. What we've found, however, is that our designs don't always map to the grid. Sometimes we need less space, sometimes we need an alternate column count. Modifying the grid isn't rocket science but it's time consuming, so we often work around it — which of course is almost the exact opposite of why we have a grid! I know. Fail.
Meet the ZURB CSS Grid Builder
To help ourselves out (and by association, help you out) we've created another addition to the ZURB playground: the ZURB CSS Grid Builder. This playground page lets you enter in the number of columns, column size, and gutter spacing to generate the CSS you need to quickly implement our grid system. You can even check the grid you've created against common screen sizes to make sure you're designing for likely use cases.
Well, go build something!
The grid isn't everything — it's nothing as robust (or heavy handed) as YUI and it won't solve all your problems, but it can be a big help when it comes to rapid prototyping and implementing on a grid based layout. Feel free to grab the grid you need, use it where you want, modify it as you need to. And hey if you want to tell everyone how great the grid is and how awesome ZURB is well, we won't stop you or anything.
Check out the ZURB CSS Grid Builder »
P.S. While you're out there gridding up a storm, don't forget that there's great value in breaking the grid. Compelling designs, moments of interest, sweet interactions and psychological motivators can all rely on breaking the grid and doing what you need to with your design. Here's a great article on techniques to break the grid, and why you should use them.
