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.
Category: Tips
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.
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.
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.
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
Absolutely, we designed and built http://www.discoveryacademyinc.com using BlueprintCSS and WordPress… these tools are flexible enough to do anything.
Absolutly, we also integrated it in our solutions at http://www.bug-hotel.org/, and working great
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.