Theme Development With Blueprint

01.12.2009

During the drupal.org redesign process, I noticed that Mark Boulton was using blueprint. I decided to give it a spin, and used it on a drupal site for a surgeon who specializes in sports medicine. (heavy use of imagecache, nodequeue, views, books, and nicemenus). Since that project, my stance on blueprint is this:you'll take my CSS framework from cold dead hands.

Is there a drupal theme?

Yes, and its very well made. Offers nothing except a basic grid layout that supports1,2,3 columns, a strong typographical foundation, and the conversions of various drupal elements to the blueprint styles. My "starter theme" of choice. In my humble opinion, the revolutionary advances in drupal 6 make big, bulky starter themes unnecessary.

Blueprint crash course

You don't need to know a whole lot to use blueprint. Everything you absolutely need to know is in the below code example. (with notes below)

<div class="container clearfix">
  <div class="span-6 append-2">

  </div>
  <div class="span-8">

  </div>
  <div class="span-6 prepend-2 last">

  </div>
  <br id="you-dont-need-a-br-since-clearfix-does-the-same-thing" />
</div>

  • 1. .container sets width to 950px, and centers the content with auto margins on the side. All grid elements must be within ".container".
  • 2. .clearfix - this does the same thing as having br class="clear" below the floating elements. See the oddly named br element that doesn't need to be there.
  • 2. .span-[x] The width of the column in the grid. Numbers range from 1 to 24. A full row must add up to 24, and can also include prepend-[x], or .append-[x], which share the exact same widths, only add margins, either before or after the column. The final column always needs the class "last" so that it doesn't add its 10px right margin.

And that's really all there is too it. Of course, there are many more features, that let you get perfectly centered borders that don't cause the elements to overflow, some nice typography classes, and other useful stuff that nearly any website needs. I found the best way to learn the framework was to just look at what's going on on the example pages, with firebug. Its all quite self-explanatory.

Comments

nice article

That was really a nice article about theming with blueprint in drupal. I think I am going to try that out soon for one of my projects.

How is 960.gs ?

I agree with your nick blueprint is an amazing grid css. There is another css 960.gs
I am basically torn between picking one for my development. Both has their advantages and disadvantages.
Whats your take

We are using blueprint

We are using blueprint too.
Always looking forward to your unique and helpful posts.

kimberly ventura

Nobody *needs* a liquid

Nobody *needs* a liquid layout.

... as long as you don't need

... as long as you don't need liquid layout (liquid blueprint doesn't count, since it doesn't work for 50+% visitors with IE6). Unfortunately :(.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.