Blueprint CSS

I recently found a nice little CSS framework called blueprintcss. It features a customizable gird, nice typography (with baselines), a full CSS reset (to help avoid browser bugs), and a pretty solid print stylesheet.

Their idea is to create a grid that you can put all of your elements into simply by giving each a certain set of classes. The gird is made up of 30 pixel wide columns spaced 10 pixels apart, with rows 18 pixels tall.

For example, the general layout of this page looks like this:

<div class="container">
    <div id="head" class="column span-24 first last">
        <div id="page-title" class="column span-18 last"></div>
        <div id="nav" class="column span-6 last"></div>
    </div>
    <div id="main" class="column span-18 first">
    </div>
    <div id="sidebar" class="column span-6 last">
    </div>
    <div id="foot" class="column span-24 first last">
    </div>
</div>

For those who are in strict adherence to the separation of content and style, this is a bit of blasphemy. I've included the layout in my HTML, which means that if I want to change it from a right-column layout to a left-column layout, I'm going to have to change my content. But this is a small price to pay, especially considering it would only require me changing two Django templates, compared to the huge time savings I get.

Changing the HTML alone gets me 90% of the way there. All the layout is taken care of: the header is at the top, spanning the whole page, the navigation links are grouped on the right, the content takes up the bulk of the body with the sidebar on the right, and the footer is at the bottom. All without touching any CSS. Add 100 lines of CSS to customize colors, fonts, and forms, and I'm done.

There are a few quirks and annoyances, but the project is still fairly new. One is the fixed-width layout. The width of the page is always 960 pixels and it is centered. But they've said that a liquid layout is on its way. You also have to make sure that any other elements you put in, like pictures, have a height that is a multiple of 18, if you want them to fit in with the rest of the baselining. And for some reason, Ben and I both ran into the problem of the debugging styles, which display the grid in the background, didn't seem to work.

But overall, I'm very happy with how it turned out. The CSS that I wrote myself is much cleaner, changes are much easier to make, and if (when) I feel like overhauling it, I'll be spending my time on making a nice style instead of dealing with stupid IE bugs.

Posted September 6, 2007