Egyptian blogger from Cairo.
Revolutionary Socialist.
Partner & Creative Director at ThePlanet.

Blueprint: A CSS Framework

There has been a massive movement towards “frameworks” through the Web 2.0 territory.¬† It only seems logical as it facilitates the work of designers and developers, saving them a lot of time and effort. I had talked about the 960 Grid System in a previous post, and now I wanted to discuss a more comprehensive solution.

The Blueprint CSS framework

The Blueprint CSS framework

While PHP has produced numerous open-source frameworks to build your website on, few people (myself included) would’ve imagined that the a similar strategy would be adopted for CSS. For that reason, when I first heard about Blueprint, I was skeptical, but after looking into it, I would actually recommend it as a tool to be regularly used.

The website has very good documentation (it seems very uncommon nowadays, but for the first time in a while, I found a document that was straight, to-the-point, and informative). But basically, it reset the CSS, allows for a grid layout, sets standards for fonts and forms appearance. This means that it is an ideal starting point. All you have to do is go to the website, download the .zip file, call on the CSS files in your XHTML document, and start building.

<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]-->

The package comes with the following:

  1. CSS reset: which resets all of the defaults, avoiding a lot of the browser compatibility issues you always come across
  2. Grid: a default of 24 columns with 10px gutters to set up the division of the entire website
  3. Typography: a set of attributes to set the standard for all types of texts, appearing properly across all browsers
  4. Forms: saving you loads of time by creating the appropriate classes so that all of the forms appear properly

In all cases, the classes are over-ridden by your own. That’s why it’s ideal: is sets new defaults that look great and identical on browsers, but still allows you to shape everything as you normally would.

As for the grid layout, it works similarly to the 960 Grid System:

<div class="container">
    <div class="span-24">
        Header
    </div>
    <div class="span-4">
        Left sidebar
    </div>
    <div class="span-16">
        Main content
    </div>
    <div class="span-4 last">
        Right sidebar
    </div>    
</div>

Blueprint also ships with a validator and compressor to make sure your CSS code is clean and light-weight (but you’ll need to have Ruby installed on your local machine for the tests to run, otherwise, you can use the Web Developer add-on for Firefox, or the W3C validtor when the site is on the Internet).

If you are developing a complex website with numerous diverse pages, Blueprint is a solution you should seriously consider: it takes everything into consideration, and saves you a lot of time and effort.

However, the downside of it is that it is bit complex. If you’re not going to take advantage of at least half¬† of its features, it might not be worth it. If you’re building a CMS-driven micro-site for example, than the 960 Grid System seems like the logical choice as it specializes in resetting, and laying out the grid.

Blueprint themselves put it very nicely when they said that it is not really a framework, it is more like a CSS tool box. Yet another beautiful product from the open-source community.

Related posts

Leave a reply