Build Your Grid, ZURB Style

wrote this on in , . Share this Post

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.

Screen shot 2016 08 15 at 4.40.25 pm
Transforming the Lives of Adults With Disabilities Through 24 Hours of Design
Zurbwired2016 zurbwired
#ZURBWired 2016: We Are Live!
Graphic 01
Design Just Ate My Software: How Designers Are Leading the Product Revolution

It has 7 comments.

Gabriel Silva (ZURB) says

Agreed. Sometimes you should break the grid. But i love them too.

Here's the Variable Grid System based on Kind of the same thing you guys use.

Jonathan (ZURB) says

We noticed that 960 had a similar system in place, though we're of course biased toward our CSS implementation :) Hope you get some great use out of it!

Harro (ZURB) says

I put the css on my website but nothing happened I still don't have a website

Maybe add some html to go with the css?

Martin (ZURB) says

It's not that it would be terribly difficult for an intelligent person to come up with some matching HTML but I agree with Harro, a HTML template should be generated as well. comes with an example template that fits all of its grid sizes, this would be even better if it generated HTML that matched the user grid options passed in.

PS. I like the one-third / two-thirds options it generates, I use those a lot.

Bobby (ZURB) says

A background image would be nice, as well.

BTW: you can view the code on Zurb to see how it's implemented.

hedge fund (ZURB) says

Great site post. Cu Soon

bottleneck effect (ZURB) says

Im just getting started with my new blog. Would you want to exchange links on our blog-rolls? If you want to exchange links let me know. Cu Later