The 960 Grid System

I started using the 960 Grid System a few months back and it really is a fun framework. There are only a couple of tricks to learning the format.

  • Be sure you keep a link handy to the 960 grid demo (and using firebug to check out the classes of each of the entries isn’t a bad idea either when learning it).
  • Understand that if you have a row of grids within a grid you need to specify the first and last of each row with classes of “alpha” and “omega”.  I had to generate some rows from a database and forgot this small piece of information.  The results weren’t pretty.  Neither was trying to add a border.
  • Make sure you never specify a border for any of these grids – unless trying to stack free-standing basketballs sounds like a something you might enjoy.  Adding borders breaks the design.  I’m trying to be clever here if you didn’t notice.

Yahoo UI 2: Grid CSS

What an amazing piece of work. If you want to get a real feel for the power you have over the user interface with this framework check out the video located on the YUI2 grid css home page.

The video alone was enough to convince me that I will probably be using this grid framework for themes that I create for wordpress in the coming months.  A friend of mine also uses this framework as often as he can and swears by it.

I can’t wait to apply it to a project.

Which one is better?

If you’re planning on using open source blogs and CMSs, both are probably good to learn.

There are many themes for open source platforms available that already use the 960 grid system. Both drupal and wordpress have themes based off of 960 and the Yahoo UI seems like the best option for granular control when building themes from the ground up.

Of course, if you haven’t got a solid feel for CSS yet and your goal is to be a web expert it would benefit you greatly to check out the CSS basics first and mess about in firebug with other people’s CSS files to your heart’s delight.