Egyptian blogger from Cairo.
Revolutionary Socialist.
Partner & Creative Director at ThePlanet.

960 Grid System

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:
[sourcecode language=”XML”]
<div class="container_12">
<div class="grid_7 prefix_1">
<div class="grid_2 alpha">

</div>
<div class="grid_3">

</div>
<div class="grid_2 omega">

</div>
</div>
<div class="grid_3 suffix_1">

</div>
</div>
[/sourcecode]
Overall, a great base for your websites, and a tool that we should all be using.

Related posts

4 comments

Blueprint: A CSS Framework | Tarek Shalaby

July 10, 2009

[…] the work of designers and developers, saving them a lot of time and effort. I had talked about the 960 Grid System in a previous post, and now I wanted to discuss a more comprehensive solution. The Blueprint CSS […]

1KB CSS Grid: Your Basic Framework | Tarek Shalaby

September 15, 2009

[…] of having to worry about whether or not your layout is developed properly. I have previously discussed the 960 Grid System as an ideal CSS framework to build your website on, and while I still hold my stance towards it, I […]

HotGloo: Online Wireframe Application | Tarek Shalaby

September 24, 2009

[…] web design project, it is vital that you are organized and efficient from day one. I had previously spoken about the 960 GS which is an ideal solution for building your website on a reliable framework, particularly because […]

El Koshary Today: Satirical News Website Built with Drupal | Tarek Shalaby

October 27, 2009

[…] is built on the 960 Grid System framework that significantly facilitates the creation of a base/skeleton for your website. Using […]

Leave a reply