CSS Grid Frameworks – The What/When/Why/How

CSS Grid Frameworks such as Blueprint and 960 Grid System have been getting more popular. I recently download a wordpress theme that was built with 960gs and I was delighted with how easy it was to use. I’ve always been a huge fan of building my own css, but being organized and separating the stylesheets by text, layout, forms, etc. I have looked at some other frameworks, but these two seem like the only ones I would use because of their simplicity and the community around them.

Why should I use a framework?
Do you feel like you spend a good amount of time designing, then an equal amount of time coding those designs? With frameworks, you can cut your coding time down by half. Why half? With a framework, you can knock out the basic layout using a grid system which is cross-browser compatible (ie6, ie7, FF, Safari, Chrome) and then focus on your custom style sheet.

How to use a framework?
The first time I used Blueprint, I started using it after I had designed my page – I was essentially retro-fitting Blueprint to my design. I would not recommend using Blueprint in this way, I felt restricted and was annoyed with Blueprint. I ended up making it work, but wasn’t ultimately happy. The best way to use a framework is from the beginning, before you start designing setup your grid – it makes a world of difference! Blueprint has some great resources for setting up grids for use in Photoshop and Illustrator.

When to use a framework?
Anytime! I have been using the 960gs framework for landing pages because of its small footprint (3.6kb) and quick ability to get up and running. I love the confidence of knowing the layout will work cross-browser, so it allows me to get my designs up and running fast (very important! in web).

Stay tuned for a more in-depth look at both of these frameworks and a redesign of this blog using Blueprint!