I’ll admit: it took me some time to really begin using CSS Grid frameworks. As an “old-school” web designer who started with tables and img spacers (the horror!), then fell completely in love with pure CSS layouts, I was so accustomed to writing every line of my stylesheet myself, the idea of using a premade “framework” was simply out of the question.
Then, a year or so ago, all these “grid-based” layouts started appearing everywhere, and they weren’t just clean and streamlined, they were beautiful. The first Grid framework I tried out was Yahoo!’s YUI– I figured, hey, it’s from Yahoo!, that fun place that serves purple cupcakes at their company functions – it must be easy to understand. But I took one look at all the .yui-t1s, .yui-t5s, and yui-gcs in and I thought my head would explode. Where were the nice, semantic terms I had grown so accustomed to? Content? Sidebar? Navigation-Menu?
It wasn’t until very recently that I decided to take another look at Grid frameworks- this time with an open mind. By now I had realized that the value of these frameworks was that as layout tools, they make life easier for many designers. And as tools, they can be as useful to you as you want them to be. That realization convinced me to jump right in and learn how to use the Grid. If you’re looking to get started, here are some of my recommendations:
Look at several different frameworks first.
The most popular Grid frameworks are 960.gs, Blueprint, and of course the aforementioned YUI (which is actually a great framework, despite my initial head-explosion!). I’ve tried them all out, and they all have their pros and cons, but the fact is that if you choose any one of these three, you just can’t go wrong.
Get inspired by grid-based designs.
So many beautiful websites are built with a Grid- and they don’t look “grid-like” at all. For example, look through this list of Grid designs on Web Designer Wall.
If math is not your strong suit, get out your calculator.
No, not really- it’s not like you have to actually compute stuff when using the Grid- these frameworks have been set up so that it’s easy to figure out what classes to use (for example, in Blueprint, if I want two equal columns on a 24-column grid, I use the class span-12 twice- because 12+12=24!) However, you should know that there are numbers involved here, and sometimes the fastest way to use the Grid is to make quick calculations.
You don’t have to give up good semantics.
As a strong believer in well-defined, semantically correct HTML and CSS, I usually rename my classes before going live. Remember that nothing’s stopping you from changing “span-11” to “main-content”, or “span-8” to “navigation-bar”.
I’m currently using the Bluetrip framework on several projects- it’s sort of a combination of Blueprint and 960, with some other goodies thrown in. Do you use CSS Grid frameworks?
