960 Grid System

June 22, 2009

When designing a new website, it is always important to be extremely organized and plan everything out from step one. That will avoid complications, and more importantly, help produce professional, sleek results.

The 960 Grid System is free CSS template that creates a 12-column style sheet. This allows you to organize the placements of the divs throughout your web page. The reason why it’s called 960, is because the majority of the websites created now are optimized for users on a 1024 x 768 screen resolution. Therefore, the maximum width would be 960 pixels.You can find examples of websites that are built on the 960 GS on the homepage.

If you are not going to stick to the standard 12-column template, you can always use the Custom CSS Generator available that will produce the file for you. Or you can just use the alternative 16-column style sheet, also freely available on the website.

One of the aspects I like most about the free service/tool, is the ability to download templates to incorporate while you’re in the design phase. Therefore, when you’re starting a new project, if you’re working with Photoshop, for example, you can download the .psd file that shows the columns, and base your design on that infrastructure. That way, when you get to the development phase, everything is a lot easier, and you’re website will be compatible with all modern browsers.

Along with the CSS file carrying the different-sized divs that you’re going to be working with, the 960 GS also includes a reset CSS file. If you haven’t been resetting your CSS when developing websites, that you should read this article to know why you should. But basically, resetting avoids a lot of browser incompatibility issues.

The downfall is that the CSS file holds a lot more classes than you’re going to be needing. But the easy way out is to erase all of the classes that you haven’t used after the initial code has been laid out. Realistically, however, you probably have more important things to worry about, than the few extra bytes produced by the style sheet.

After you’ve called on the CSS files, your markup will look something like this: