A Quick Tip for Using Grid Frameworks

Some background

If you haven’t used one before, a grid framework is a great way to speed up your site development. They offer you CSS rules and templates to add to your site in order to line everything up properly without much effort. The two most popular (and the ones I personally use) are the 960 Grid System and Blueprint CSS Framework.

To use a grid framework, you import the included CSS file to your site. The CSS will have various grids with widths and margins all assigned. I’m not going to go into much detail here because both of them have great instruction already available.

The problem

In order to be as useful as possible they offer every grid combination imaginable, so the css files are huge. This is great because you don’t need to set anything up, but can become very bloated and unnecessary for final rendering of your site. The use of another stylesheet is frowned upon as well due to the extra HTTP request.

The solution

Copy only the needed rules to your own css file. Yes it’s that simple, and this isn’t meant to be groundbreaking, but most of the websites I see built on a grid framework leave these heavy css files in there when they don’t need to. So make sure you remember to do this before your site’s live, and enjoy your efficient website.