Using Blueprint CSS for easier CSS layouts in WordPress

Blueprint CSS may just be the answer to all our CSS layout woes. Most, if not all, WordPress blog themes use CSS for laying out the design. But as any website or blog developer knows, using CSS for layouts can be one of the causes of early aging, high blood pressure, and sleeplessness.

Blueprint CSS is a CSS framework that you can use to cut down and ease your CSS development time. Here’s what the Google Code page says about Blueprint CSS:

[Blueprint CSS] gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing…

Features:

An easily customizable grid

Sensible typography

Relative font-sizes everywhere

A typographic baseline

An extendable plugin system

Perfected CSS reset

A stylesheet for printing

Compressed version

No bloat of any kind

Here are some more features of Blueprint CSS as listed on the blue flavor site:

It performs a mass reset of browser default styles.
It sets up sensible defaults for typography, including font families, header sizes, paragraph styles, list styles, a baseline grid, and more. It does all of this with relative sizes, so that it scales well in any browser.
It gives you a methodology to use for customizable layout grids. Any number of columns and widths you can dream up is easily achievable.
It provides a sensible default print stylesheet.
It does all of these things in ways that work elegantly in most browsers your visitors are likely to be using, including Internet Explorer 6 and 7.

See these links to get an idea of what Blueprint can do:

Sample page built with Blueprint CSS

Demonstration of the Blueprint CSS grid

Demonstration of the typography

Blueprint CSS tutorials and tools:

Blueprint CSS wiki tutorial – a quick tutorial that introduces the files and capabilities of Blueprint CSS.

Blueprint CSS 101 – a great introductory tutorial that explains the benefits and methodology behind Blueprint CSS.

Blueprint Grid CSS Generator – This tool will help you generate more flexible versions of Blueprint’s grid.css and compressed.css and grid.png files. Whether you prefer 8, 10,16 or 24 columns in your design, this generator now enables you that flexibility.

Ryan

The average blogger is working on too small a scale to have any use for this type of solution IMO. You don’t want to be resetting everything under the sun for a basic blog, otherwise you are just adding redundant code to your site.
Miriam Schwab

Ryan – maybe, but for people who want to do a complete custom design from the bottom up, this could be really helpful. Anything that makes CSS layout less of a nightmare is helpful IMO.
MyDeskBlog.com

I am currently rebuilding my blog with Blueprint CSS. In fact, I started to overhaul it 2 weeks ago using 0.6 and for the past few days, making the necessary changes to bring it up to BluePrint 0.7. These are a few things I have to say about BluePrint. Bear in mind that so far, I’ve only used Blueprint’s grid layout CSS extensively.

First off, Blueprint can’t do liquid CSS at the moment. Period.

No bloat of any kind, well, is not true I’m afraid. You do have to include Blueprint’s screen.css at the very least. And that file is not considered small even in compressed format.

My blog theme’s CSS layout were done using 0.6. Every divs in my html pages are littered with codes like these:

Having to put in CSS layout codes in HTML files is not a good practise. But things have changed with 0.7. I’m most excited to know that the above div can easily be declared like this:

That’s all!

Blueprint 0.7 comes with a compressor.rb script that easily declare a div’s width, margin, float and such into an ID or Class. Where previously, in 0.6, you have to manually edit the CSS to do this.

In essense, I find that Blueprint is something like a construction site scaffold. Where it can be completely removed once your site’s layout is finalised.

In my case, I would most likely copy and paste the necessary layout IDs and Classes from screen.css to my main stylesheet. And drop the screen.css file. No bloat to my stylesheet then I suppose.
Steve Bruner

We just released a WordPress theme based on BluePrint CSS. Makes it real easy to implement.

You can see it here:http://www.slipfire.com/sf-blueprint-wp-theme-52.htm
Carlos A. Cabrera

Absolutely, we designed and built http://www.discoveryacademyinc.com using BlueprintCSS and WordPress… these tools are flexible enough to do anything.
Paul Smith

Absolutly, we also integrated it in our solutions at http://www.bug-hotel.org/, and working great
lizzie

hi im using scrapbook theme and they used blueprintcss to program it. i just want the posts and pages to be in a bigger container. how to do? im not a programmer just need help.

Using Blueprint CSS for easier CSS layouts in WordPress

Blueprint CSS tutorials and tools:

Author:

Read previous post:

Publish RSS feeds on your WordPress site without plugins