A few days ago, I noticed a bit of buzz about a new CSS framework called Blueprint. The main idea behind the framework is to make it easy to construct purely CSS grid layouts, and also to set up good-looking typography, and to make the whole thing as similar as possible in all browsers. Even Internet Explorer. That's no small task.

I'm certainly not a CSS expert, but while I'm not too shabby at making things with pretty colours and attractive padding, I usually seem to come unstuck when it comes to positioning blocks of text on the page. Getting neat columns of text has always seemed a bit of a trial by ordeal to me, and line spacing has always been a matter of complete guesswork.

I've been putting off producing a few pages for a web site for work^1^ for ages, so I decided that this would be a good opportunity to try Blueprint out. The site is very simple (just a few pages, mainly text with a few images), but I wanted it to look professional, clean, minimalist, but also attractive.

The Blueprint package contains a number of separate CSS files, each imported by one master file, which you link to in the head of your HTML file, along with a print stylesheet. The core of the idea is that it divides your page into 14 columns, each 50 pixels wide with a 20 pixel gutter between them. If you want a narrower page, a formula is provided to calculate a new width with fewer columns. Of course, you almost certainly don't want your text in 14 50 pixel wide columns, but the idea is that you use them rather like cells in a table, merging them when required to make wider columns or sub-columns. So, for each block of text, you just need to specify how many columns you want it to span, and whether you want it to be the first or last column (or span the page completely). So for example, this is a simple structure for a narrower, 13-column page:

<div class="container">
  <div class="column span-13 first last">
    This is the header
  </div>

  <div class="column span-3 first">
    This is the left-most column
  </div>

  <div class="column span-7">
    This is the main content
  </div>

  <div class="column span-3 last">
    This is the sidebar on the right
  </div>

  <div class="column span-13 first last">
    This is the footer
  </div>
</div>

Specifying both the classes first and last means that headers and footers properly span the page. Easy, no? The built-in typography is very clean and attractive, and there are nice classes built-in for simple horizontal rules, small text (for footers, for example) and 'quiet' text to blend into the background a bit more. I found that without any extra styling the default was already very pleasing, if a little plain. All I needed to do was add a few more classes to change a some colours for links and headings.

I really like the flexibility of Blueprint, and the way that it does all the donkey work of positioning things on the page for you, so that you can concentrate on the pretty colours, which is -- after all -- the fun part.

^1^ Yes, I am on holiday, and yes, I was doing something that looked incredibly like work. Mr. Bsag spotted that and told me off, and wasn't placated by my explanation that it was just so that I could try out a cool new stylesheet framework. ↑