Faster CSS development with the blueprint framework

Published on and tagged with cakephp  css  framework

If I have to work with CSS, it is often a struggle for me and takes a lot of time. And so I always wondered if there is not a better way to work with CSS…

Fortunately, some days ago a CSS framework called blueprint has been released. It defines sensible default values and provides a grid to make layouting a breeze.

I don’t have used it for a complex layout yet, but creating a simple two-column layout with a header and a footer was pretty simple:

<div class="container">
    <div class="column span-14">
        <h1>Title</h1>
    </div>
    <div class="column span-4 first">
        sidebar
    </div>
    <div class="column span-10 last">
        content
    </div>
    <div class="column span-14">
        footer
    </div>
</div>

I didn’t had to write any CSS myself for this example. The only thing I had to do was to include the blueprint CSS file with:

// screen.css is located in app/webroot/css
echo $html->css('screen');

I think with having such a framework, the days of writing all CSS myself are gone ;-)

9 comments baked

  • blablu

    I personally use the YUI Grid “framework”. I don’t know exactly the functions of the blueprint framework, so I can’t really compare them, but YUI has also methods for complex multi column layouts and a nice “wysiwyg” editor :-).

  • Grant Cox

    Wow, that blueprint site looks quite impressive. I don’t work much with CSS, and still usually fall back to a table for the basic column / row layout (with CSS for all other styles, of course).

    Hopefully this will change – I’ll certainly play around with blueprint on a personal project I’m working on.

  • sosa

    Why nobody seems to complain abut the heavy use of presentational code in blueprint framework? Is the web standards movement already dead?

  • nachtkrab

    Hi, I’m playing around with another css framework. It’s different to blueprint but check it out: http://www.yaml.de/en/home.html

  • cakebaker

    @all: Thanks for your comments.

    @blablu: I looked at the YUI grid framework some time ago, it is probably more powerful than blueprint but with a steeper learning curve.

    @sosa: I think that’s a compromise you have to make when using such a framework. And if it saves me hours of fiddling with CSS then it is worth to make such a compromise ;-)

    @nachtkrab: Thanks for the link, I didn’t knew this framework yet.

  • Brandon Parise

    @sosa: IMO, web standards are too idealistic and simply become impractical to a large degree. Of course, I speak this largely based on my experience (and those around me). People get too caught up in this “CSS B.S. and XHTML frenzy” (Copyright 2007 bparise ;)) and waste vast amounts of time in doing so.

    @cakebaker: Thanks, again, for opening my eyes to things I never knew existed :) A few of our current projects leave me in dire straits trying to maintain presentation logic and this is an excellent tool!

    Now, if I could just find a wrapper so I didn’t have to look at all this bloody (and ugly) html code every day!! *suggestions?*

  • cakebaker

    @Brandon: Dreamweaver or FrontPage? ;-) Or you may have a look at Haml, it is still ugly, but no HTML ;-)

  • Brandon Parise

    @cakebaker: eeeek! I am an old-school notepad.exe user (since converted to ZDE) and still use text-based editors to handle HTML. I once lived the nightmare of dreamweaver and frontpage in years back and I guess it has tainted my view on them both!

    I am sure they are much better now but it’s hard to shake those past experiences :) I wish there was some WYSIWYG editor that can actually execute the PHP in the preview pane instead of placing [!PHP] markers everywhere.

  • cakebaker

    @Brandon: I don’t use such WYSIWYG editors, so I cannot say how good they are. I use, like you, a text-based editor to handle HTML.

Bake a comment




(for code please use <code>...</code> [no escaping necessary])

© daniel hofstetter. Licensed under a Creative Commons License