Bearfruit

I’ve done a couple little projects using the fabulous Blueprint CSS Framework lately. Let me just say, this rocks for getting your stuff done quickly. It allows you to create fixed-width layouts much faster than if you do your layout by hand. If you’ve already created your own CSS framework then it may not be a huge benefit, but you may still want to give it a try.

It works on the premise that you create a container that is a grid made of columns (by default, 24 columns 30px wide) and each column has a 10px gutter. Then, you assign styles to your elements that packs them into the grid. You can use an online application to generate a custom grid for you so that the result will be a layout that matches the widths you’ve specified for your site.

Even better, the css framework does a full reset of styles and fonts and then sets sane and useful defaults. There has been extreme attention to detail regarding the reset and it produces truly beautiful typography. If you’re a programmer like me and you wonder why some sites look clean and elegant but yours looks messy and jumbled you may find that blueprint’s typography and reset code will be a big help even if you leave out the grid.

I’m absolutely stunned at how much this is boosting my productivity. Layouts that used to take hours to tweak and adjust take 30min now. And because of the reset and typography they look better than before.

I’ll give full disclosure here, I think a big reason for this productivity is because by thinking inside the grid it’s caused me to design my layouts (before the html and css begins) with the grid in mind. I think to myself, ok, I need this images that is 260px wide, and I want a fixed-width page of 850px. So that means my grid must be X columns each Y px wide with a gutter of Z px. Then I bring it into inkscape and design my layout to fit. The only way I’ve gone faster from concept to working HTML is when I used Photoshop to generate it for me. And if you’ve ever tried doing that you’ll immediately recognize that statement as tongue in cheek.

My previous layout framework wasn’t really a framework but served the purpose for me, however all of my sites tended to look the same (think the old Ubuntu website/wiki, bazaar-vcs.org, fosscamp.org). I also experimented with a sliding doors layout as my foundation for non-fixed width themes but wow did that html/css look messy! (see the 2007 layout for ubuntu.com and canonical.com)

The new Ubuntu layout will have much less HTML and there will be no JS hacks needed to get things in the right places. The total CSS will be a little larger I think but since the browser caches that it’s not going to be a problem.