Driving the 960 Grid System

Hey there! I'm currently working on a CLI tool to deploy WordPress apps to DigitalOcean. Check it out! It's free and open source.

CSS frameworks are unflexible, overbloated and confusing. Whoever said that, never used a CSS framework, or at least the 960 Grid System. I used to think that too, some time ago, but I did use the 960 Grid System to draw my templates. I didn’t care about the CSS, the columns, etc. All I used were the Photoshop templates with a preset grid of 960 pixels, which was pretty convenient for designing purposes. I had no idea that layouts performed in such a grid could be sliced that easily.

Driving the 960 Grid System

Maybe I didn’t take enough time to read all the info about the 960 Grid System, maybe I was just afraid of CSS frameworks, or maybe I thought that CSS is so simple that there’s no need for any pre-written code except for the Reset CSS. A few days ago I decided to take one more look at what the 960 grid really is, how it works, and why people like it. I found a couple of tutorials which explained the system, mostly in text and images, but I was too lazy to read, so I searched for some videos.

I instantly came across an awesome post by Jeffrey Way on NetTuts, written back in January 2009, called A Detailed Look at the 960 CSS Framework. It’s a short and informative screen cast, where Jeffrey explains what CSS frameworks are, why we should use them and shows an example layout done with the 960 CSS.

After viewing the video, I decided to try it out, of course on my own blog. I took the old layout and redone it using the grid system. Not sure about all the regions on the website, but everything now seems to work as expected. The layout didn’t change much, maybe a few pixels in the width and the sitemap, which I’m quite comfortable with. Tested in IE, Firefox, Chrome and Safari, seems okay.

One thing I didn’t expect is that the grid system breaks whenever you add a 1 pixel border around a grid block, or maybe it’s just me who’s unlucky, and their Reset CSS is quite awkward, or maybe I’m just used to others. Anyways, for simple 960 pixels layouts, the 960 Grid Systems is perfect, for easier, faster and browser-friendly development, which is why I recommend it. Feel free to share your thoughts on CSS frameworks in the comments.

Update: Here’s an awesome video by SitePoint called CSS Frameworks: Make the Right Choice:


About the author

Konstantin Kovshenin

WordPress Core Contributor, ex-Automattician, public speaker and consultant, enjoying life in Moscow. I blog about tech, WordPress and DevOps.