Blueprint CSS template

Posted by: Bob Ngu on: July 2, 2008

In: General
Comment!

Admittedly, this post is slightly off-topic since it doesn’t have anything to do with Ruby or Rails but this is a common task that a do-it-all web developer (like me) has to do while building an app / site. For my current site, JiggyMe (video aggregation site), I stumbled my way through CSS hacking together with what I needed at different times and it left a less than satisfying feeling with me.

And then I came across Blueprint framework, an excerpt from the site

Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.

After spending a day looking through the samples, I decided that it is a good template for my site. Blueprint CSS 101 is a good introduction post on it although it is a bit abstract especially if you aren’t a CSS expert or web designer. These are key features of Blueprint

It performs a mass reset of browser default styles.
It sets up sensible defaults for typography, including font families, header sizes, paragraph styles, list styles, a baseline grid, and more. It does all of this with relative sizes, so that it scales well in any browser.
It gives you a methodology to use for customizable layout grids. Any number of columns and widths you can dream up is easily achievable.
It provides a sensible default print stylesheet.
It does all of these things in ways that work elegantly in most browsers your visitors are likely to be using, including Internet Explorer 6 and 7.

The Grid
Blueprint’s crown jewel is its grid-building tools. By default, Blueprint’s grids.css file sets up a 950px wide grid of 24 columns, each 30 pixels wide with 10 pixel gutters. This grid is likely to be flexible enough for most of your needs.

However, the grid is fully customizable. If you need more or less columns or a wider or narrower total width, you’ll want to use the Blueprint Grid CSS Generator tool. It not only provides a replacement grids.css file, but it also creates a grid.png image file for use as a background image during development—very handy for making sure everything lines up properly. The grid generator is a key piece to the framework, even if it’s technically a third-party tool. Without it, Blueprint is limiting and controlling, forcing designers to use a single layout grid. With it, designers have endless freedom.

Let’s take an example that should clarify how you can use it.

In the above code, the CSS classes from Blueprint are container, span-4, span-24, last, span-8, span-16 and it looks like this in the browser (click on the image to see the full layout).