Blueprint – a CSS framework

Frameworks.

That singular word alone can stir up heated, pseudo-religious debates in web dev circles, some finding coding frameworks a boon for rapid development, others decrying them far too bulky and overengineered in relation to hand-coded, specific solutions. I’m somewhat neutral- most of my exposure to frameworks has been straight-up coding frameworks like CakePHP, Fusebox, Spry, Prototype among others, and although I love a good hand-coded solution, when time’s short a good framework like Spry or Cake can really save time. Howver, I was really intrigued to see that some enterprising design types have pulled together a framework for CSS – “Blueprint” – to better enable grid-based layouts in standards-compliant markup. Lead developer Olav Bjorkoy cites inspiration from many leading CSS and design gurus- Eric Meyer, Jeff Croft and Khoi Vinh amongst them (although they are not ‘officially’ part of the project).

Interesting. Although some ‘designers’ condemn Dreamweaver for it’s visual design surface masking the code beneath and allowing less technical users to create flexible designs at the expense of optimized code, it’s validating to see more design-centric coders acknowledge that standards-compliant designs could benefit from framework code. As the entire Blueprint framework – options and all – weighs in at ~40kb, it’s not too draining on bandwidth as it could be, which is nice. Let’s take a look at what Blueprint provides.

At the code level, Blueprint provides a screen stylesheet with three included files – reset.css (for ‘resetting’ browser defaults to provide a consistent starting point), typography.css (for type styles and effects), and the main brains behind the framework- grid.css (containing the rules and selectors for specifying grid-based layouts in CSS). There’s also a print.css file to override certain styles for better print output, which is a nice touch.

Implementing Blueprint grid designs is reasonably simple, and should be very familiar to table-based webmonkeys who’ve been leaning on the old colspan/rowspan crutch for grid-based designs since Netscape 1.2 introduced ‘em (you know who you are!). Just wrap your page in a container div, and then mark up the divs within to specify rows and columns appropriately. By default, the Blueprint grid is 960px wide (suitable for 1024×768 monitors, a good baseline), containing 14 columns of 50px apiece, with 20px margins between.

The ‘first’ and ‘last’ classes appear to control row content, marking the first and last columns in a given row. For example, this is a basic 3-column with header layout plucked from the Blueprint tutorial:

<div class=”container”>
  <div class=”column span-14″>
    Header
  </div>
  <div class=”column span-3 first”>
    Left sidebar
  </div>
  <div class=”column span-8″>
    Main content
  </div>
  <div class=”column span-3 last”>
    Right sidebar
  </div>
</div>

In the example above (see here for the original), the header DIV stretches the entire 14 columns, and the ‘main content’ row (containing three columns) uses span-X classes to define the widths of each column in the row (with the ‘first’ and ‘last’ classes determining the actual beginning and ending of the row).

Pretty simple- and the framework renders as you’d expect in Dreamweaver CS3 so you can get the best of both worlds- quick markup in code with nice integrity in design view should you want to work that way. On the best practices side of things, less technical designers looking to really deconstruct CSS to learn from it may have some problems wading through the framework’s abstractions to get to the core techniques, but as the layouts I’ve tried so far validate well as XHTML/Transitional (my doctype of choice for most things) that’s more a minor – and obvious – gripe than anything else.

All things told I’ll probably stick with hand-coding my CSS layouts in my preferred Dreamweaver/BBEdit editing combo, but can’t deny that for quick mockups and one-off projects Blueprint may be very handy for me indeed. Definitely worth checking out, regardless. Let me know what you think?