Jeff Minard

BluePrint, A CSS "Framework" a.k.a. Tables 2.0


Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.

On the surface, this could save you some time and work -- that is, until you realize what a bad idea it is.

After you get past the basic "oh, neato" link hovering effects of CSS, you learn that its true power (and purpose) lies in its ability to separate the content and design layer. This "framework" undoes all of that careful crafting and smashes them right back together. Let me illustrate:

You have a 300 page website. Each page is a two column layout. You set it up with blueprint, span-4's, rights, and all those layout classes and get it worked out just right. Cool. 3 months later, you need to switch the column positions and change the sizes. Uh oh! Better get your find-n-replace skills out of the cupboard because it's now time to get find all those classes that define the width and floats and change them around. You end up editing 300 files and hating life. Nice.

How about, instead, you do what CSS is SUPPOSED to do and title those two columns for their CONTENT and not their PRESENTATION. Then you can edit a single CSS file, target the content layer, and change presentation quickly. Entire site change: 5 minutes. Hair saved: Entire scalp.

I will commend the Blueprint author for putting so much work into it -- this tool will certainly allow you to quickly setup a site, but it comes at the price of completely obliterating the entire point of CSS for which I could never recommend this tool.

2013 Update
A lot has happened in the last 6 years of web design, but this kind of CSS framework is still an awful idea. Unfortuneately, the concept has gained extremely wide spread popularity thanks to Bootstrap, another front-end framework pretty much just like Blueprint. There is some glimers of hope out there, and so I suggest you checkout, instead, a semantic grid system. Combine the framework goodness, but keep the proper separation!

2007-08-05 Edit this page