A review of the 960 Grid System
Thank god for a good tutorial!
NOTE: I am going to review it, not go into detail into how things work – there are plenty of tutorials on that (one of which is listed below.
If not for this tutorial by Joshua Johnson, I will have to admit that the 960gs is terribly confusing. He explains how the grid works in plain english, and what the push/pull classes do. I started my redesign build last night, and as previously stated before, I was going to try my hand at this whole grid thing. Follow along, and you will see what I think.
Either I’m an idiot, or the 960gs is way harder than I thought it was going to be. How could I not understand what is going on under the hood from the get go? First, it didn’t help that I started with the 16 column while designing in Photoshop, only to realize that I wanted the 24 when I started building it. I am already down for the count, because the grids do not line up the same way, due to there being more margin in the 16 column version.
One thing that bugs the hell out of me is that the PSD files are at 1020px wide. Why is there nowhere that says why this is. Do I crop it exactly to 960? If so, why not just make the damn thing AT 960px? So what are you supposed to do? I designed it at the 1020px size and lined everything up at the column lines. I had stuff going beyond, but that was pure graphics stuff – nothing that needed to be lined up. This is the kind of thing that drives me nuts though…the site itself.
Here is the basic low down on learning how to use the 960 Grid System. The first time you use it, you will say to yourself “What the #@%#?” The second time you use it, it will be easier and things will start making a lot more sense. A few times in, and you will be pro. The problem though is that the tutorial I linked to above, was the first one that I actually understood on using some of the classes within the system. The actual site for it is not a great place for documentation.
Let’s start with the pros
I’ll start with the good stuff first, so you don’t feel I am trashing the system.
- CSS – once you understand what each class does, it becomes a breeze to make a layout. Full width column for header, grid 10 there, grid 5 there, push this one, and pull that one. The 960gs can really speed up development.
- Measurements are done for you – No thinking about widths, margins, positions…everything is calculated for you.
- Pre-made templates are great – other than the size issues I had in the PS files, they are easy, well done, and very modifiable.
- Insane amount of templates – Sounds the same but not…the 960gs not only comes in 12, 16 or 24 column templates, it has all the css, sample code, and there is a template for pretty much every piece of software you could possible use (Photoshop, Illustrator, Indesign, Flash, Fireworks…and crap I haven’t heard of).
- Templates/Prototypes – If you are making template based sites or just making a quick prototype, this is where the 960gs shines because of the speed factor.
The stuff I don’t like
Please read this knowing that it is my opinion. I am not bashing the 960gs, I am just telling you what I think the pros and cons are.
- Flexibility – If I want to shift things left, I have to modify the CSS. So what? Well, the damn thing is set at very particular sizes, and really, if I am going to have to adjust a bunch of the styles, I might as well have done it myself. A push or pull shoves the container a specified amount. I felt like if I changed the CSS, I was already ditching the grid.
- Semantics – while this doesn’t bother me much, if you had to hand this off to someone who didn’t know the system, they would look at the class names and scratch their head in confusion. I’m not pro at the semantic thing, but I do try.
- Classes – you can really start adding a ton of classes to the element you are styling. like “grid_5 push_1 prefix_2″…I am making that up, but you get the picture. I’ve read “Ya, but you put an id on it then”…so now I’m just cluttering crap up to make sense out of it?
- Extra containers – maybe this is just my not having enough experience, but if I put padding on say “grid_5″, I have to change the width of grid_5, but that hits all of them, so now I have to add a special class? Or add a container just to do the padding. I feel there is too much potential for divititis using the 960gs.
- Unused classes – there is going to be a bunch of classes that you will not use during a build, which then means you will most likely go through and weed them out.
I’m glad I tried it out, as it gave me something new to learn. Once you have learned how everything works, the 960gs can really speed up development time. Will I use it for my redesign now that I have worked through it? Not on this redesign. Will I use it for a different project? Yes! I liked it enough to have a full go at it. The photoshop templates alone are good just for design purposes. I feel I have less control over the CSS using the 960gs, but if you use it from the start, and have a clear idea of where you are going, then this is a good tool.