On using a CSS Framework – BlueprintCSS

A quick background check on BlueprintCSS:

• A CSS reset that eliminates the discrepancies across browsers.
• A solid grid that can support the most complex of layouts.
• Typography based on expert principles that predate the web.
• Form styles for great looking user interfaces.
• Print styles for making any webpage ready for paper.
• Plugins for buttons, tabs and sprites.
• Tools, editors, and templates for every step in your workflow.

I have heard of Blueprint CSS a couple of months ago. But I have never used it until a few weeks ago because I kept thinking:

“Who needs a CSS Framework? We already have frameworks for Javascript and PHP. And now we have one for CSS? Oh nos.”

The only thing I regret is not using it using it earlier. Read that line again: The only thing I regret is not using it earlier. I cannot stress enough how much time and effort I have saved when I used BlueprintCSS. It just works and it is so damn easy to understand. BlueprintCSS uses a grid-style layout, just like old HTML tables do.

A Quick Overview After a Small Project Using Blueprint

With BlueprintCSS, everything started with a div that is 950px wide. The 950px div can be made up of up to 24 columns. I forgot the width of each column and you can probably find that here but the logic is that you can specify up to 24 columns in your layout. For example:

<div class="container">
    <div class="span-24">
        Header - 24 columns and the width is 950px
    </div>
    <div class="span-4">
        Left sidebar - 4 columns
    </div>
    <div class="span-20">
        Content pane - 20 columns
    </div>
</div>

Note that the Left Sidebar (span-4) and the Content Pane (span-20) adds up to 24? That is the basic concept of Blueprint. You can have as many columns as you want as long as it totals to 24. You can also do other useful stuff:

Grid.css can do a lot more than this, however. You can prepend and append empty columns, pull or push images across columns, add borders between columns, and use multiple containers to create almost any layout.

Using this simple concept, you can basically get any design/layout you have made in Photoshop and quickly make a cross-browser compatible CSS in less than 30 minutes.

All that by simply including a bunch of CSS files.

<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">    
<!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->

A quick and comprehensive tutorial on BlueprintCSS can be found here.