Blueprint CSS Framework

October 30th, 2007

A couple of CSS frameworks have been on my to-do list for a few months and I finally got the right project to test one out on. A quick 3 page site (which has already grown to 5 pages) that had no pixel perfect requirements gave me the motivation to explore Blueprint CSS.

Overall I enjoyed the experience and I like where they are going with this open source project. First off you do not have to use every aspect of the framework. If you would like to just zero out all the elements you can do that, but the real selling point is their customizable grid that you lay everything out with.

The default size is something like 950px, however an active community has provided a third-party (also open source) solution for making a quick custom grid.

I settled on 750 pixels and began exploring. Going through the tutorial took about 10 minutes and allowed me to grasp most of the functionality. A few more minutes reading the well commented files filled in the gaps.

One problem that I did run into was some browser rendering issues. While my layout looked great in Firefox and Safari, IE refused to render the main column’s background color all the way down the page. It took about 30 minutes to get things working correctly, mostly finding the correct places to put height=100% (on the html, body and center column). I have been using my own framework built over the years which has the correct code already built-in so this was a bit frustrating.

There are a few default settings that I do not agree with as well:

1. The body has a top margin by default. and while this might be nice for a text only page, almost every site I design (and have seen) has its content at the very top.

2. Images have a default margin of 1.5em. Once again this works well for a plain vanilla layout, but once you have some design elements worked in this becomes a pain. I would prefer image margins of zero since that is what I use mostly, and I will adjust them as needed.

Overall it was a fun project and I enjoyed learning a new tool. I will certainly continue to use the feature that zeros out all the elements, mixed with my own style sheets. I am not sold on the grid yet. There seem to be a few oddities still in the code, but hey, it is only version .6 and they seem to have a lot of positive momentum. I will certainly be keeping an eye on their progress.