A quick glimpse at haml and blueprint

04:09 , , 2 Comments

I always tend to think it's stupid to write posts about things that are available widely on the web. Why would I bother writing about haml and blueprint when their webpages write about them just perfectly?

Well, I'm not sure. Maybe you, dear reader, are too lazy to look for yourself (I usually am). Or maybe I'm lucky enough to write in a way that you can get the spirit of the thing quickly. Or maybe I'm just writing cause I like the subject :P

Enough babbling, here it goes:

Let's start with haml. It's a language for writing html. You write it in something like a yaml like structure, and then use the haml tool to convert it to html.


     %h1 Test

I guess I need not to mention what html it generates. It's quite straightforward.

Now, another example:

    %h1#title Test
       %p some text here

Straight to the part that matters: %h1#title converts to
<h1 id="title">. The # mark indicates a tag ID. A dot, on the other hand, indicates a tag class. The line .content will be translated to <div class="content">. Notice that I didn't use %div.content. That's  because %div is the default tag so you can omit it.

Now, for blueprint.

What blueprint does is provide you a css file with some very handful class definitions.
Basically blueprint provides a "container" class, which would be the content of the page itself. This container is organized into a grid of 24 columns by default.
With this information in hand you can define divs which span through these columns using the span-N classes.

For example, suppose you have a page like this:
- a top banner, which fills to whole top of the page, horizontally.
- a menu bar, on the left, which would fill 25% of the page. (24 * 25% = 6 columns of the grid)
- the content of the page itself, filling the left 75% of the page. (24 * 75% = 18 columns of the grid).

Now, to express that using blueprint you would do:

   <div class="container showgrid">
     <div class="span-24 last">
        Your banner here.
     <div class="span-6">
        Your menu goes here.
     <div class="span-18 last">
        Content goes here.

First we create a div with the container class. This will be the page itself.
The we create a div with the "span-24" class, which means "span this div through 24 columns of the grid". The "last" class means "this is the last div in this row" (think of it as a line break after the div, so the next div will be below it and not beside it).

We go on creating a div with "span-6" class, meaning "span through 6 columns".
Lastly, we create a "span-18" div which will fill the rest of the page.

The special "showgrid" class, together with the container, is a debug class. It only shows the grid in the background so you can have a visual reference.

Now, putting everything together. We're were talking about haml, right? We don't wanna write html anymore. So here is the above example, rewritten to haml:

        Your banner here.
        Your menu goes here.
        Content here.

Cool, isn`t it?
Haml even has the advantage that I don't need to use &lt; and &gt; to write it to the blog :P

Enjoy it ;-)


  1. Your code snippets are very hard to read in Google Reader with default theme. Since the Reader "inverts" the text color, your code examples appear with black text in the grey box. I think making the grey boxes less dark should make it easier.

  2. hmm, I'll find a solution, tks xD