Home > All, Web > CSS Frameworks, 960 Grid System vs Blueprint CSS

CSS Frameworks, 960 Grid System vs Blueprint CSS

I’m relatively new to CSS frameworks and my experience with them is limited. In my opinion all CSS frameworks should be easy to learn and ultimately make your life easier, right? Wrong!

Don’t ask me why, but my first chosen CSS framework to play with was Blueprint CSS. So I print out a friendly cheatsheet and go over a few examples and everything seems to work fine and I think that’s great, that will come in handy one day. That day was Thursday, when at the office, I was asked to slice up a JPG and make it look like a real website. I said I’d have it done by the end of Friday. Little did I know that Blueprint CSS was going to let me down, which it did. I got stuck on the very first block and via this post, maybe somebody can spot where I might have gone wrong.

Note that for the following test, I have removed all other javascript and css files from my page and the only thing loaded is the Blueprint CSS framework, nothing else. Let’s take a look at the code:

<div class="container">
    <div class="span-24 last">
        <div class="span-4 first">4</div>
        <div class="span-10">10</div>
        <div class="span-10 last">10</div>
    </div>
</div>

Based on samples and support threads that I have read, the first “last” on the span-24 should not be required as it is “special cased” apparently and nor should the “first” in span-4 be needed but I have tried everything with and without these to no effect. Note also that NONE of these div have any borders, padding or margins applied to them whatsoever (If you need borders/padding/margins, you apply it to elements inside the span-x divs because Blueprint CSS is a “pixel perfect” framework). I also tried removing the span-24 div altogether, leaving just the 3 inner divs.

So, what do you expect to see? I expect this:

4 10 10

Instead I get this:

4
10
10

I tried different doctypes, disabled all of my Firefox extensions, tried in Chrome, Opera etc… without any difference. By now I’m very frustrated that I can’t do the most simple thing that I could do manually in CSS, but that’s besides the point. Blueprint CSS should work as advertised or at the very least provide better documentation to deal with the demonstrated problem.

Having passed my Friday deadline for the mockup, I’ve had to find an alternative and fast and work through my weekend to have it done for Monday morning. And that’s where 960 Grid System comes in to the picture. I’d seen this framework before, never used it but liked the look of it, and quite like the idea that it is ~6KB to load up instead of ~15KB that’s needed with Blueprint CSS.

Now, although I still haven’t been able to find a cheatsheet for the 960 Grid System, I found a basic tutorial over at DivitoDesign which is nice and easy to follow. Notably, in that tutorial, there’s a section which clearly explains Margins and how to use the framework to accommodate for these.

As a result, this is the code which I came up with in order to achieve my goal:

<div class="container_24">
    <div class="grid_24">
        <div class="grid_4 alpha">4</div>
        <div class="grid_10">10</div>
        <div class="grid_10 omega">10</div>
    </div>
</div>

And yes! it did work out of the box, which is exactly what I expected Blueprint CSS to do. As a result, at the end of the day, I’ll be using 960 Grid System. As stated above, I have absolutely nothing against Blueprint CSS, and if anything I’m hoping that somebody can point out where I might have gone wrong with it.

2011-11-18 UPDATE: If you are researching CSS frameworks, you might want to check out my CSS Frameworks: In with the New, Out with the Old thread too.

Categories: All, Web
  1. Gerry King
    November 16th, 2010 at 06:26 | #1

    I tried this blueprint.css code:

    4
    10
    10

    and it works as expected. It only wraps if the browser window is not wide enough to display 960 pixels. As you mention ‘last’ is not necessary (total of spans = 24) – just makes it clear where the ‘row’ ends

  2. Gerry King
    November 16th, 2010 at 06:36 | #2

    Argh! I even put pre tags around that! It was 3 divs in a ‘container’ div. Your original code (3 divs in a span-24 div) displayed as expected but did not wrap the right-most div when window width was reduced. Tested in FF 3.6.

  1. March 21st, 2010 at 12:49 | #1