I recently built a new site using the Blueprint CSS framework and was once again astounded by how little time I spent on fussing with the design of the site and how much I actually enjoyed the process–something that just didn’t happen before I started using Blueprint.

My Hate-Hate Relationship with CSS

Although CSS has been a positive step forward in general, it has always suffered from browser compatability issues (just like Javascript and even HTML itself before it) and has developed more slowly than I would like. Much of the blame for this situation can probably be attributed to the position of Internet Exploder 6 in the browser market for nearly a decade.

Basically, CSS works quite well ‘in the small’ for controlling font sizes, font effects, colors, etc. It fails quite miserably ‘in the large’ for overall site layout. In my opinion, ‘pure CSS’ layout–while a noble goal–is out of reach for most people and can only be accomplished at the great expense of time spent learning myriad ‘hacks’ to make it work.

I used to laugh at CSS purists who looked at those still using table based layouts with disdain. Forget for a moment that even if CSS layout worked as advertised, the standard itself is thoroughly arcane and unintuitive. I simply can’t justify charging clients (or eating the cost) of the hours spent learning, implementing and testing fragile ‘hacks’ when a quicker, simpler and more robust alternative exists in tables.

For me, pure CSS layout ‘in the large’ is a cure far worse that the disease. Although I am rarely one to turn my back on best practices in an area, I am also strongly opposed to trying to fix a fundamentally broken technology or implementation, in project after project, when a comparable or even better alternative exists.

Fortunately, with the advent of frameworks like Blueprint, there are more alternatives.

Blueprint to the Rescue

Given my hate-hate relationship with CSS, I quickly took to Blueprint, which seemed designed specifically for someone with the sensibilities I described above. The obvious benefits of Blueprint are that it gives you a ‘leg up’ or head start on design by resetting browser defaults and implementing design best practices for you. It also greatly simplifies CSS layout ‘in the large’ so it is both understandable and actually works. So, pure CSS layout is now possible, even easy, for large numbers of Web professionals in a way that it never was before.

Although the hacks exist in Blueprint, you don’t have to implement them and support them, and the problem doesn’t mulitply the more sites you design. Someone else has done the research, and implemented them, and done so in a re-usable way.

So, Blueprint’s layout ‘in the large’ is automatically cross-browser compliant. Also, the custom CSS you write on top of Blueprint to implement your design is CSS ‘in the small’ the aspects of CSS that tend to work as expected across browsers. So, possibly the biggest time sink and biggest source of frustration in Web-based graphic design–cross browser compatibility fixing, particularly with Internet Exploder 6–is almost completely eliminated.

By virtually elminating cross browser issues, making CSS ‘in the large’ workable, and allowing you to focus more on CSS ‘in the small’, funny things start to happen. Basically, your perspective and attitudes about Web based graphic design change dramatically in ways you may not anticipate. You focus much less on the technical aspects of CSS and more on the creative aspects of your design. The result is a fun and deeply satisfying experience, the complete opposite of your past relationship with CSS.

And you can feel good about being ‘pure’ because your design is based on both CSS and design best practices. In terms of dollars and cents, the amount of CSS code you create for your design is much smaller, meaning you have much less custom CSS to maintain.

Using Blueprint in Web Applications

In my day job, I don’t build ‘Web sites’ nearly as often as I build ‘Web applications’. In terms of screen layout, a key difference is that ‘Web sites’ tend to be fixed width and have more tightly controlled positioned elements, whereas ‘Web applications’ tend to be much more fluid, trying to make the best use of varied window sizes.

While it might seem that a CSS framework based on a grid would not be helpful when creating Web applications, I have found that Blueprint can be quite an aid in these situations also. For a few seconds spent downloading and including Blueprint in my view code, I automagically get professional looking typography and ‘layout in the small’ that gives my application a clean look from the outset and gives me a foundation to work from. So, it does end up being a signficant time saver and increases the application’s ‘Emotional Design‘.

Just Do It!

If you haven’t tried Blueprint CSS framework yet, what you are you waiting for? Its quick and easy to add to any project, fun to use, and will make you much more productive. It soothes the most painful point of implementing a Web site–making your CSS layout work across browsers and allows you to focus on being creative.

If you want to play around with Blueprint in a non-trivial way, I would suggest starting out by creating a basic blog layout. By their nature, blogs tend to have simple layouts, so you can begin to experiment with Blueprint’s grid layout pretty easily. At the same time, you can get quite creative with blog layouts, so you can start to get a better feel for Blueprint’s flexibility.

Don’t have your own blog to play with? WordPress is free and straightforward to install quickly. As I say, its easy to add Blueprint to any project, but if you get serious about using Blueprint with WordPress, you may want to look at the BluePrint theme for WordPress which better integrates the two.