Using the 960 grid system
Back to Blog
One of the most annoying parts of designing for the web has, speaking for myself of course, always been building grid systems. Sure, the idea of floating elements is not really that hard to grasp, but laying out complex web pages can still offer quite a challenge. It’s not that the work is hard; it’s just hard work.
Despite that, it took me a while to understand the power of grid systems, such as 960.gs. Or rather, it took some time before I decided to try it out – after that I was sold pretty much on the get go. The concept is quite simple: you import a style sheet containing predefined classes, which allows you to deal with a simple 12 column grid instead of single pixels. Creating a simple two column layout is as simple as designating 4 columns for the sidebar and 8 columns for the content; widths, margins and floats are all taken care of by the system.
Also, as a special perk, templates are provided for most large design applications, which makes creating professional looking mockups a cakewalk. If you have yet to try 960gs – please do. I bet you won’t regret it!
It took forever for me to start using 960gs. I finally started using it like 6 months ago, and now I use it on every website that I work on. I might not follow the rules that well. But still, I use them in my own way.
Tho I haven’t tried the ready css files, just the photoshop guides and rulers.
Well, I really think you should try out the css-files too. Sure, the same effect is not that hard to achieve on your own, but it’s a really neat way of creating complex layouts, just by adding classes to the html. Especially if you already use the templates for Photoshop.
I love your new web design :*
Thank you Lola, appreciate that!
your post has me ready to finally try it out!