Much to my surprise, one of my most popular blog posts has been First Impressions of the Blueprint CSS Framework. People continue to read it, cite it, and comment on it, even though it is horribly out of date.

The post was written a year ago using the 0.40 version of Blueprint, which is currently at 0.7.1 as this is being written. And I wrote this post as sort of a test, and didn’t intend it to be a Blueprint tutorial in anyway. I am not a CSS guru, which I thought might make my experiences with Blueprint more interesting, as someone who might particularly benefit from this framework.

Given that this post continues to be cited, however, I feel that I’m doing a disservice to the Blueprint project. So, I want to try to set the record straight in this post.

To start, the display errors I showed in my original post were the result of my mistakes, and not because of shortcomings in Blueprint–which didn’t come as a surprise to me. I re-downloaded version 0.40 of Blueprint, and revisited my earlier attempt, this time incorporating the feedback from “Francesco,” who pointed out an important typo, and Tom Davis, who pointed out that I should add a doctype declaration to the page. I then tested the page with those changes (minus the original placeholder images) in FireFox 3.0.1 and Internet Exploder 6.0.28…:

Blueprint 0.40, Firefox 3.0.1

Blueprint 0.40, Iternet Exploder 6.0.28…

As you can see, these two changes made all the difference. The vertical strip doesn’t show up in IE, but I specified those styles outside the Blueprint framework, so I’m calling this a success. Its not an exact match, but I think this is as close as one can expect, especially considering this was my first, quick and dirty attempt to use Blueprint.

For the sake of completeness, I also tested this in the 0.7.1 version of Blueprint, the current version at the time this is being written. I had to make a few changes, because after 0.40, some fundamental changes were made to Blueprint, the most obvious being that the grid changed substantially and font sizes are now measured in ems instead of pixels:

Blueprint 0.7.1, Firefox 3.0.1

Blueprint 0.7.1, Internet Exploder 6.0.28…

Again, I am going to call this a success.

Final Thoughts

For me, the best part about using a CSS framework like Blueprint is that browser incompatibilities are abstracted away, just as they are in a mature AJAX library like jQuery. Trying to work around all of IE’s bugs is my least favorite part of working with CSS.

Even in cases where I haven’t used Blueprint’s positioning styles, such as when I’ve built Web applications that had more specialized interface requirements, I’ve used Blueprint’s resets and typographical styling to automatically give my applications a more polished appearance from the start. And in general, Blueprint provides a quicker way to mock-up sites working directly in HTML/CSS instead of starting with some other tool, such as Photoshop or Illustrator.

And finally, as has often been observed in discussions of other frameworks, frameworks don’t exist to make it so we don’t have to learn a particular technology. As these posts illustrate, my lack of CSS expertise meant that I still had a difficult time debugging the code, and I had a difficult time when I wanted to do something outside the framework in the same page. We still need to know the underlying technologies to work effectively, even when we use a framework. The advantage of frameworks like Blueprint is that they make it easier for us to do the things we already know how to do.