Recently I’ve been developing websites using the Bluprint CSS framework. Blueprint itself is not new (it’s a little over a year old), but I hadn’t really committed to using it as a standard for my business until about a month ago.

So What’s the Advantage?

The main advantage to using a css framework is speed. Once you figure out what the framework can do, it speeds up development quite a bit by helping to standardize the web development workflow. Blueprint can be the bridge between design and code.

So often it’s the designer that creates the problems in web development…I know because I am one. A simple stroke of design genius can snowball into a usability nightmare or make HTML/CSS markup a living hell. A grid system like Blueprint gives a designer definite bounds to work within, and puts them on the same page with the CSS developer and information architect.

Now if your designer doesn’t totally screw things up with a stroke of genius, then the guy or gal that marks up the HTML and CSS probably will. They’ll think of ultra clever semantic names that later end up being not so semantic. They’ll invent a new layout system because the last ones they did just weren’t good enough. They’ll probably take whatever whimsical approach seems appropriate for the design that was presented to them.

With Blueprint, the approach is different. A web developer can now layout the basic structure of the page (ie header, columns, footer,etc) using CSS that’s provided by the framework. The best part about this is that it takes thinking out of structural layout. You’ll be surprised at how much time you wasted thinking about what to name things like columns let alone the time it actually took to write the CSS for it. After using Blueprint for layout I wondered why I tortured myself by starting with a blank slate each time I started marking up a site.

If you’re lucky enough to have an information architect in your workflow, then Blueprint is going to be a dream come true. Instead of using an image editor like PhotoShop to make wireframes, the information architect can just use Blueprint to make them. In fact, if your designer is also the IA, then why not have them start there. If you can establish your grid and layout with CSS before design then you will be twice as prepared when you actually get to designing. Plus, there’s the added benefit of being able to reuse the code that the IA started at the CSS phase.

Hopefully, by now, the advantage of using a css framework is obvious. The IA starts the design process with Blueprint, hands the grid system and wireframes to the designer who now has a real template to work from, and then the design and basic grid system gets handed to the CSS developer to put it all together. Blueprint helps to standardize your workflow, and standards speed things up by automating simple tasks.

Jef Croft, one of the guys that helped write Blueprint, wrote:

They’re especially great for those working on tight deadlines and those working in teams (teams wherein multiple people work on the same CSS — they benefit from having a consistent set of coding patterns), and also for those working on several sites of a similar nature (for example, a team working at a news company which runs 20+ newspaper sites).

In my experience Blueprint is the best grid system out there right now. It has the cleanest, most flexible, and most supported code to allow your team to work together. However, any grid system can speed up development and there are a few to choose from: 960, YAML, Grid Designer, YUI Grids CSS. The main point is that if you can standardize on a common way to layout pages then all of your developers will work better together.

You Want More?

Here are some more in depth articles…

• Which CSS Grid Framework Should You Use for Web Design? – A pretty in depth look at CSS Grids and Blueprint
• What’s not to love about CSS frameworks? – A casual and humorous overview.
• Five Simple Steps to designing grid systems – A very in depth look at Grid Systems

…and here are some great tools for Blueprint CSS…

• Blueprint Grid CSS Generator – This tool will help you generate more flexible versions of Blueprint’s grid.css and compressed.css and grid.png files.
• Grid – Grid is a highly configurable JavaScript bookmarklet which overlays a layout grid on any web-site you wish
• Photoshop GridMaker Script – Creates guides in Photoshop for css grids.