Bearfruit

Designers have been using grids for a long time in the world of print and advanced layout. Websites have kind of used grids in the form of tables but this become unpopular with the rise of the semantic web and css based layouts (for good reason). Modern CSS frameworks give you a powerful grid for laying out your web pages and often bundle in a multitude of extra features. I’ve now reviewed four grid systems and thought I’d quickly summarize them.

YUI grids

Unlike the other grids this one is just a grid. To get the full benefit you need to use it in combination with the other css components of the YUI toolkit, fonts, base, and reset. It has great documentation, easily and sensibly ties into the YUI js library and has three features that do stand out: nesting grids which is not as simple as it sounds, a fluid, 100% width page layout and it was built to accommodate IAB ad unit guidelines.

The typography is poor in comparison to other kits but if you like YUI’s other features you can easily snag the typography from another framework and plug it in (after the reset!). All said, I feel like it’s a pretty mediocre css framework. It doesn’t come off looking sexy and does not feel designer friendly. Better typography built in and prominently linking to photoshop or other graphic format files (like SVG) would help.

Blueprint CSS

Not just a grid, it’s a complete framework which incorporates a reset, which sets all the browsers built in styles to a plain default, and then reconstructs the styles in a way that will be consistent across platforms. It then adds a beautiful typography layer which optimizes layout to maintain a nice vertical rhythm. What this does is helps your lines of text to match up and feel balanced even in adjacent columns. It gives the page a subtly more harmonic feel that you’d have a hard time describing when you see it.

You’ll also find styles for forms and a beautiful print style sheet. Blueprint is a fixed-width only layout system. This makes it very designer friendly. Uncompressed, the primary css file (not including IE special rules or print.css) is 11k. There is an included script that will help you to customize the grid for your needs including minimizing the styles for production. This allows you to have a grid with any number of columns you like. It is a very easy grid to love.

960gs

In many ways an evolution of blueprint, it’s fundamental concept is that the right page width is 960px. Recently a grid generator has been produced that lets you create a grid that meets your needs. A sister project has also risen that creates a fluid width version of the grid for sites that don’t want a fixed width.

The css file for this project weighs in at under 6k, which is nice, however it lacks the forms and typography support that blueprint has. In both cases default styles are very good but doesn’t have the same out of box elegance. In its favour there are readily available templates for numerous graphics packages. I strongly recommend you evaluate this one if you’re considering blueprint and likewise, if you’re considering using 960gs that you also consider blueprint. They have a lot in common with each other and also have some very distinguishing differences.

Baseline

The newbie on this list, it is the motivator for this list. I’ve not used it but it brings some very interesting ideas to the table. It has support for HTML 5 first of all. Secondly, it deprecates IE6 and focuses on the latest browsers. Like blueprint, it has a strong emphasis on typography and includes some great form styles. There is a PSD in the zip file for designers to use.

Summary

If you’ve never used a grid you should definitely give it a try. 960gs may be the best compromise for beginners because it is far more attractive out of the box than YUI yet has documentation that is almost as good. If you want no compromise typography, form and print styles out of the box you should start with blueprint. If you are developing with HTML 5 you may want to consider baseline. If you like tutorial videos from engineers then you should try YUI.

I’d love to hear your ideas and suggestions, please leave a comment.