Faster Theme Creation with Grids in BluePrint CSS

The Theory.

Wouldn’t it be wonderful if your site coding went completely smoothly? You didn’t have any weird quirks that took hours to make work in IE, it just simply worked.

Impossible?

No, not really. What I usually do to solve a lot of these problems on more basic sites (where I may not have time to spend hours coding the site or fixing browser bugs) is turn to the handy BluePrint CSS framework.

It is a simple framework that handles a lot of things for you including a reset.css, typography.css, and most importantly for this article grid.css. The grid.css file is the one that saves the most time in writing your HTML. For more information on why you should use grids in your design consult Koi Vinh’s Grid’s Are Good presentation. Using grids will result in stronger, more consistent site designs as well as proper use will result in faster coding.

A Key Piece.

Now that we have established why we are using grids I need to introduce you to one more element for desgn purposes. If you are like me you design mock-ups (often pixel-perfect) in Photoshop before coding. So how do you prevent your pixel-perfect design not lining up with your also pixel-perfect CSS framework? Well, design with our wonderful starter-file.psd. Seriously, it has a grid built in, as well as some handy features to save you some time.

Download the STARTER-FILE.PSD

If you design within this grid, the coding will take place very, very quickly because all your elements will already line up. Sites will just work (Warning: still requires HTML/CSS skill and an intelligent web designer).

Now the Coding.

Coding with BluePrint takes a little time to get used to, but the payoff is definitely worth it. To start make sure you read through the included CSS files in detail. Knowing the classes available to you will save a lot of time and effort. Next read the documentation found here:

http://github.com/joshuaclayton/blueprint-css/wikis/tutorials

That should give you a great introduction. Just give it a little practice and it will save you dozens of hours down the road.

Then you can use those hours we just saved you to suggest some article ideas! Post them in the comments, and we will try to get them written!

2 thoughts on “Faster Theme Creation with Grids in BluePrint CSS”

  1. I created a mix between the great Carrington Theme Framework for WordPress and Blueprint CSS.

    So you basically got the best of both worlds. Carrington for developing your theme, and Grids for easily manipulating your HTML templates.

    In case you wanna check it out it’s here:

    http://gastongarcia.com/carringtonbp/

    I’ve left it unstyled. It’s just the core files waiting to be worked on.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>