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!


1 thought on “CSS Grid Frameworks – The What/When/Why/How”

David Marcus · June 16, 2009 at 11:32 am

Thanks for the tip, Jake. Cross-browser issues with layout have been driving me crazy.

Leave a Reply

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

Related Posts

Web

Angular JS Magazine on Flipboard

I have been working with AngularJS for about a year now, trying to learn as much as I can about this growing framework. It’s been a wild ride and I’m going to post a summary Read more…

Top 5

Top 5 Articles : Week of November 25

During the the week of November 25th, I really started to dive into Angular JS. My top 5 articles of the week are mainly about AngularJS, an MVC framework by Google. #1 : AngularJS WebInspector Read more…

eCommerce

How to implement Bronto Email JavaScript Conversion tracking in Google Tag Manager

This tutorial will show you how to setup Bronto Advanced JavaScript Conversion tracking using Google Tag Manager. Bronto Advanced JavaScript tracking gives you more visibility to all of the products that customers are purchasing, then Read more…