Braddah Greg | 
06 4th, 2009| 
I’m beginning to steer away from the days of old when designing websites with photoshop, then converting it to html, mostly with tables within tables, within tables, within tables and so on for clients websites. I heard about this new system called the grid system. Its’ basically a streamlined way to designing sites but let me mention how it came to be a part of my life. So I’m doing the usual rituals with a few of my boyz once a month, we meet up somewhere and have a few beers, this and that and maybe go to a movie or something. Since we used to work together we’re pretty much in the same profession…web development. One of my friends mentions that they’re starting to design websites with basically css style sheets and maybe a few images and bam!, a full blown website just like that!
The 960 Grid System
He tells me about this new way of designing sites called the “grid system”, where it teaches you to design “in the box” I should say and I must admit that this way rocks! It’s such a streamlined and cool way to developing sites and thus the whole night all we talked about was this grid system. He emails me this website the very next day, http://960.gs and I was just blown away by how this works. I being a designer of sites felt a little intimidated by this whole thing, so I felt that I had to shield myself from the world, lock the door and totally immerse myself in learning this new system.
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem. The 12 column grid is divided into portions that are 60 pixels wide. The 16 column grid consists of 40 pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns. The premise of the system is ideally suited to rapid prototyping, but it would work equally well when integrated into a production environment. There are printable sketch sheets, design layouts, and a CSS file that have identical measurements.
The 960 Grid System was created by Nathan Smith with alot of inspiration from several individuals beginning with Khoi Vinh, Cameron Moll, Olav Bjørkøy, Brandon Schauer, Jeff Croft and Mark Boulton. Their work inspired nathan to create his own, and also thanks goes out to Eric Meyer for his comprehensive reset CSS.
All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with. The 960 Grid System is free to use, and may be repurposed to meet your specific needs. Several projects have already spun off, including versions that were built to be fluid and elastic.
I cant express enough about this awesome way to design sites. Much kudos goes out to Nathan Smith and all the others who contributed to this system of designing, but I must admit that my skills arent quite there yet with using this grid system. As with everything in life you have to keep doing it and doing it, and eventually you’ll master it.
