Hey, I'm J.R.

There’s been a lot of talk in the intarwebnets recently about the benefits of CSS frameworks. I insist on hand-coding, but I really don’t like working with CSS (particularly haggling with a certain 6th edition browser that starts with Internet and ends with Explorer) so I’ve always like the idea of a structure to make it easy for me, like a GUI framework for desktop apps. I’ve looked into some of the more popular, like Blueprint and YUI, but haven’t liked/used either for whatever reason, though I’ve always liked the concept.

Then, I decided to make this site, and I didn’t use any framework. I started with a pre-made theme and smashed, manhandled, sliced, and diced it until it was something kind of like what I wanted. I had floated div’s, crazy margins, and all manner of other hacks for whipping the stylesheet into submission. I got it working and I wasn’t really with how messy it was, but I didn’t have time to do anything about it with final projects and final exams taking up all of my time. Now that the semester is over, I decided to re-do it.

I decided on 960.gs after reading a blog post about it (wish I could remember where, so I could send some link love). I looked into it and found a professional, well-developed framework that had some good ideas that I was interested in, so I decided to give it a try. Boy am I glad I did. It took only a little more than 2 hours, and it looks better than it did before. Here’s a quick overview of how to use it:

Downloading and Installing

There really is no “installation”. You just download the ZIP file, and extract it into your CSS directory (or your theme’s CSS directory if you’re using Wordpress). Presto! Working framework. I changed the folder paths around a little bit, but you can really use it without changing anything.

The ZIP file comes with a lot of stuff to help you design with the 960 system, including “PDF grid paper, templates for Fireworks, OmniGraffle, Photoshop & Visio, and CSS framework with demo HTML”. I only used the CSS files, which is all you need for coding your site. The system comes with 3 CSS files.

1. 960.css – Sets up the grid system, the 12-, and 16-column containers, alpha, omega, and prefix. This file is necessary to the grid system.
2. reset.css - “Initializes” the system so that all margins and paddings are 0, outline is 0, etc… This file is necessary to the grid system.
3. text.css - Sets the font sizes including headers, adds margins to lists, etc… This file is not technically needed for the system, as far as I can tell.

Also, the CSS files are very lightweight, and won’t add any significant loading time to the page, which is something that other frameworks struggle with.

Using it

The system is based around a 960 pixel-wide grid (hence the name). The grid system is a great way to produce good designs without a lot of overhead (Smashing Magazine’s got a great article about grids). You have the option of dividing the 960 pixels into 12 or 16 columns. 960.gs uses the following classes to structure the page:

• container_XX is used in the outermost box to determine how many columns. You can use container_12 or container_16.
• grid_XX is the bread and butter of the system. XX is for how many columns you want the block to be. For example, grid_10 will be 10 columns wide. The exact pixel width is determined by how many columns you’ve divided the grid into.
• prefix_XX allows you to add in blank columns before a block. XX specifies how many blank columns you want.
• alpha is for if you have children blocks. If you do this, you’ll want the first child to have no margin on the left side. alpha makes that happen.
• omega is similar to alpha, except that it gives no margin on the right side. Use it for the last child.

That’s it. All you have to do is apply classes to boxes. It’s that simple to use. In the outermost container, decide how many columns to use. Then, all you have to do is add classes to your elements to lay them out on the page. It couldn’t be any easier.

Some gotchas

The padding problem: This isn’t really a problem with the framework. It’s just standard CSS, but it’s good to know. If you want one of your grid_XX cells to have padding, you can’t apply the padding directly to the cell, since that padding will add to the width of the cell, throwing off the grid. The way to pad the grid cells is to add another, non-grid_XX cell inside it and pad that one. The sample code uses <p> for that purpose, but I’ve used <div>. It doesn’t really matter.

The width problem: What if you want your grid to be more or less than 960 pixels wide, or you want it to be fluid? You choose another framework. The framework is named 960 for a reason. It’s 960 pixels wide, and short of hacking the CSS, there’s nothing you can do to change that. However, as detailed on their site, 960 pixels is a great width. From the site:

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.

Summary

I’m very impressed by how easy the system is to use, even for a CSS-klutz like me. The class-based layout design makes it extremely easy for me to translate the ideas in my head into CSS code without having to fiddle around with fragile floating and margin-ing.

I haven’t used the system in the most ideal or pure way (see the sidebar in particular), but the overall layout of the site is done totally with 960.gs. It worked perfectly. I didn’t have to hack their files to get it working like I wanted it to. It just worked as advertised, and made me happy.

I didn’t use the other files that came with the package, like the Photoshop template or the PDF paper since I already had the site designed, but I’ve looked at them, and they allow you to design exactly how the page will look, and when you code the site, I’m sure you’ll see it stays true to the design.

Thanks, Nathan Smith, for the great CSS system. You’ve made my life easier, and I appreciate it!