Blueprint: Beautiful CSS Grid Layouts Made Easy
Web designers, it’s the moment you’ve been waiting for — a CSS grid framework. If you’ve been wanting to use grids with your CSS-based designs, but don’t want to spend the time (and do all the math) that well-done grids require, you need to checkout Blueprint CSS.
Blueprint is a CSS “framework,” which features an easy-to-use grid, sensible typography, and even a stylesheet for printing.
There may well be other things out there advertising themselves as CSS frameworks, but I haven’t seen any that amounted to much more than a template system. Blueprint is not a template system, it’s a class structure you can apply to nearly any design — think of it as the skeleton around which you can arrange your own design elements.
For more on the background of Blueprint, check out this interview with creator Olav Frihagen Bjørkøy.
There’s a few limitations you should be aware of, the first being that your overall container element needs to be 960px wide — in other words, liquid layouts are not possible, though that is a planned enhancement.
The other drawback is that at the moment Blueprint is bit under-tested (some elements didn’t seem to render right in IE6 when I played around with it) and probably not suited for production site without some tweaking. But the code is freely available and if nothing else it jump starts your projects considerably.
In addition to the grid helpers, Blueprint features a typographic baseline and some very nice font choices — though of course you can always customize everything to your liking.
[via Daring Fireball]
