I recently started using a new CSS framework called Blueprint. I’ve been excited about the results and wanted to share some of them here.
The cool thing about Blueprint is that it truly saves time in development. It cuts the time needed to take a design from sketch to a skinned website. And because it works so well across browsers, it cuts down the time needed for testing and debugging.
It’s also flexible. It makes flowing a design into a site simple, and it cuts the labor needed to change that design once you’ve started. If you decide to add an image to the right side of the screen, for example, Blueprint allows you to just drop it in, rather than having to rework your layout from scratch.
Here are some of my favorite Blueprint features:
- It has a CSS reset feature that eliminates differences across browsers. Those minor differences — like setting a margin at 12 pixels rather than 15 — can turn a website from beautiful to bogus real quick. Blueprint standardizes these values across browsers, creating a uniform appearance for your site and reducing the time needed to cross-check it in Firefox, Explorer, Chrome, Safari … you name it.
- It has an easy-to-use grid that can accommodate simple and complex layouts. Most designers work in a grid, whether it’s 960 or 1020. With Blueprint, you can “snap” your design into CSS almost as easily as putting together Legos. You can also write custom CSS on top of Blueprint to accommodate out-of-the-box designs.
- Functional form styles. It’s easy to spot a form that hasn’t been styled — it just looks ugly. With this framework, you can write the HTML for your form, and Blueprint will autostyle it. You can customize the styles as needed, but Blueprint it provides a good base to start from.
- Ready-to-go print styles. Blueprint also includes separate stylesheets just for printing. They’re set up to hide unnecessary content like banner ads and to print web content in a one-column, easy-to-read format.
The best thing about Blueprint might be the fact that it’s an open-source, supported framework. That means there’s a community of worldwide developers constantly working on making it semantic-valid and browser-tested. As new standards emerge and bugs are discovered, Blueprint’s network of users updates the software accordingly.
So the next time I’m working on a new website, don’t be surprised if I tell you that I’m “working from a blueprint.” That’s what all great architects do, right?