Blueprint.css: You’re Just Fooling Yourself.
Blueprint.css is a “css framework” which makes it easy for you to lay out your page with however many columns you like, without even looking at the css. It works by instituting a 950px wide container around your page, and then dividing this into 24 columns. You can add a ’span-x’ class to any div to make it span x columns.
The Good
Blueprint makes it really, really easy to add columns to your page. You just decide how many columns you want the area to span, and add that class (keeping in mind to add the ‘last’ class to the last element in a row).
Blueprint also sets many sensible options for line spacing, fonts (arial), lists, and other things, making the defaults a bit prettier. It also includes an ie.css file of its own, to include in your page to correct some IE bugs, which is convenient.
The Bad
Blueprint marries you to a 950px fixed-width layout, which may or may not be ok with you.
I did notice one IE bug where list elements in an <ol> had the numbers cut off, which a client complained about. It just needed a bit of extra left margin is all.
The Ugly
The real evil of blueprint.css is that it tricks you into thinking you’re being a good designer, seperating content and behavior and layout in html, js and css like a good designer should. However, all the column-defining classes live in the HTML, and have names with no semantic meaning; just, ’span-24.’ In reality, blueprint.css is table-based design with a different syntax.
If you were to do the right thing, and call the left sidebar ‘left-sidebar,’ the content ‘content,’ the header ‘header,’ and the menu ‘menu,’ you could reorganize everything without having to change any HTML, which is doubleplusgood if you have a lot of pages to change.
Instead, in a few years, when you want to redesign your site, you’re going to have to change each of the elements you told to span-x to either span something different, or remove it.
I know it seems easy now, but so do tables. Do the right thing, and you’ll be happier later.
I’ll keep using blueprint though, I do my separation using PHP. Thanks, blueprint guys!