Tags: blue

There’s been a lot of buzz lately around a new CSS framework called Blueprint. It’s basically a collection of resources pulled together from other sources: Khoi’s grids, Richard’s vertical rhythm, Eric’s reset and more.

Some people—including contributors to the CSS—have expressed their reservations about the non-semantic class names used in the framework. That’s a valid concern but, as Simon pointed out in the comments to Mark’s post, you don’t have to restrict yourself to those class names: you can always add your own semantics to the markup.

I don’t see myself using Blueprint. It just seems too restrictive for use in a real-world project. Maybe if I’m building a grid-based layout that’s precisely 960 pixels wide it could save me some time, but I’m mostly reminded of the quote apocryphally attributed to Henry Ford about the Model T:

The customer can have any color he wants so long as it’s black.

Unless I’m creating cookie-cutter sites, I don’t think a CSS framework can help me. That said, I think a framework like Blueprint has its place.

At Clearleft, a lot of our work involves wireframing. Every Information Architect has their own preference for tools and formats for creating wireframes and prototypes: some use Visio, others Omnigraffle. James and Richard usually start with paper and then move on to HTML, CSS and even a dab of JavaScript.

This results in quick wireframes that illustrate hierarchy, are addressable and allow for a good level of interaction. Creating HTML wireframes requires a different mindset to creating documents intended for the Web. You don’t have to worry about cross-browser CSS, bulletproof markup or unobtrusive JavaScript. With those concerns out of the equation, the benefits of using cookie-cutter code really come to the fore.

So while I might have reservations about using a JavaScript library on a production site, I’d have no such qualms when it comes to generating a quick prototype. The same goes for Blueprint. I think it could be ideally suited to HTML wireframes.

I may be a bit of a control freak, but I’d no sooner use a CSS framework for a live site than I’d use clip art for images. I firmly believe that creating good markup is a craft that, like good design, takes time. It may seem unrealistic to some, but I don’t want to compromise that quality without a very good reason.

That’s my hard-nosed attitude when it comes to creating documents for the World Wide Web. If the documents are intended purely as wireframes for internal use, then my attitude softens considerably. Then I think a framework like Blueprint could really shine.

On the last day of XTech 2007 I abducted Ian and forced him to shoot a quick video of a microformats demo that I didn’t have a chance to include in my presentation.

The video is one minute and one second long. It’s a quick demo of John McKerrell’s bluetooth version of the Tails plugin.

• Watch the video on YouTube.
• Watch it on Viddler.
• Here it is on Vimeo.
• Blip.tv
• Download the video from the Internet Archive.

Here’s a transcript of the 1:01 minutes of video:

This is my website. This is my mobile phone. My website has microformats. This is a version of the Tails plugin for Firefox. It exposes all the microformats I have on my website. I can convert and export those microformats as vcard, iCal, whatever I want. With this version of the plugin I can also export to bluetooth. So let’s take an event for example. I click on bluetooth. My computer asks me which device to export to. I have previously paired up my phone. So now I’m going to send the event to that device. And there we go. I have now exported from the World Wide Web onto my mobile phone. Easy!

The video is released under a Creative Commons attribution license. You are free to share, remix, caption and translate this video (as long as you provide attribution).