RSS Feed

What’s new in Blueprint 0.7

by admin, February 21, 2008

Blueprint is the CSS framework of which the layout of my new Wordpress theme, Summilux is built on. It uses the excellent grid CSS framework provided in Blueprint. IMHO, my favourite and one of the best features of Blueprint CSS.

I just found out Blueprint released a new version, 0.7, two days ago. If only I had started to work on my new Wordpress theme, Summilux, a week later. Bummer!

Right, shall I just stick to the older Blueprint 0.6 and not bother about upgrading it? I could. But what is immediately tempting about Blueprint 0.7 is:

  • I can skip using ‘column’ on every <div> element. For instance,
    <div class="column span-8">

    can be replaced with a shorter

    <div class="span-8">
  • And see if you can spot the significance of this piece of code:
    semantic_classes:
    "#foot, #head": ".span-24, div.span-24""
    #content": ".span-17, div.span-17, div.colborder"
    "#extra-content": ".span-6, div.span-6"
    "div#navigation": "div.span_24, .span-24"
    "div.section, div.entry, .feeds": ".span-6 div.span-6"

    Previously, a lot has been said (more like criticisms really) about separating CSS layout and semantics. One could have easily do this:

    <div id="head" class="column span-24 first last">

    … where ‘id’ element gives it a bit of semantic goodness.

    But that will soon be a thing of the past. With Blueprint 0.7, you get to define grid layout CSS code and associate it with semantic CSS IDs and classes. Hence, with the semantic classes defined in the above example, I could do this instead:

    <div id="head">

    How about that!

I’ve only found out about Blueprint 0.7 a few hours ago and it certainly looks very good on the surface. But I’m sure there a lot more attractive new features which I’ve yet discover.

Other exciting features of Blueprint 0.7 include the new compressor. Not just any CSS compressor though. According to Joshua Clayton, one of the developers of Blueprint, a lot of work seems to have been put in to make Blueprint much more extensible, more customisable and easier to maintain deploying Blueprint on multiple websites. Features that will come in useful if I decide to use Blueprint on newer themes and websites in the future.

Comment