Faster CSS development with the blueprint 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 ;-)
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 :-).
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.
Why nobody seems to complain abut the heavy use of presentational code in blueprint framework? Is the web standards movement already dead?
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
@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.
@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?*
@Brandon: Dreamweaver or FrontPage? ;-) Or you may have a look at Haml, it is still ugly, but no HTML ;-)
@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.
@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.