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.
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:
[vimeo]http://vimeo.com/7530607[/vimeo]
[…] This post was mentioned on Twitter by kovshenin, Maria Amor. Maria Amor said: Driving the 960 Grid System http://bit.ly/aSZ4Pj – via @kovshenin […]
I'm not a fan of grids but after using the Blueprint CSS framework, I got addicted to it. Now I use it in most of my projects.
I use it because of its typography and CSS reset. Its way easier now. :P
Oh, I heard about Blueprint and I wanted to take a look at that too, some time ago.. Now that you've mentioned it, I certainly will, as I did change my mind about CSS frameworks ;) Cheers!
Great post. There is also good presentation about CSS frameworks http://vimeo.com/7530607
Mamaduka, wow, I heard there's some cool video about CSS frameworks on Vimeo, but couldn't find it ;) Thanks for pointing it out, perhaps I should add it to the post ;)
Cheers!