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…


  • 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:

  1. It performs a mass reset of browser default styles.
  2. 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.
  3. It gives you a methodology to use for customizable layout grids. Any number of columns and widths you can dream up is easily achievable.
  4. It provides a sensible default print stylesheet.
  5. 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.

Blueprint CSS Sample Page

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.