960 Grid Tutorial – Understanding Prefix and Suffix classes

The first in a mini-series of posts explaining a bit about the 960 Grid system that is now used in osCommerce.

The first step for me, to enable you guys to easily see what I am doing is to install the 960 Gridder extension from Andrée Hansson – this useful gadget shows the gridded overlay on top of a website that uses 960! Here’s a couple of examples;

A lingerie template I made;

And the standard osCommerce layout;

You can see that the “green” lines show the padding, and the white in-between “blocks” show the available grids for template positioning. Hopefully this makes sense to you…

Prefix and Suffix

So, as you will already know if you have started playing, the 960 Grid System is a series of “arcane” css tags to control the layout of your page.

Imagine that you want to have a 10 block grid placed in the header, you might do something like this;

That’s pretty straightforward and produces this;

But what if you wanted that block aligned exactly in the center of the page? You could do this;

Where we are adding two extra divs, each of 7 blocks width to align the original div between them. It outputs this, which works fine;

Instead of that, revert the code back to original, and simply add a prefix and suffix class of 7 each!

and what we end up with is exactly the same effect as before, but with a lot less code;

Summary

The prefix and suffix classes are used to horizontally position your block of content. If you think of a “sliding” effect, you’d be pretty close. The suffix class is used to stop any content overflowing into the “tail end” of the area you are working in.

Another quick example;

Say I wanted that pink block to be positioned 3 blocks in from the left, I’d change my code like this;

which produces this;

So, what happens if you wanted the pink area to start 3 blocks in, then a yellow area next door to it, aligned horizontally. Well, it’s easy! Simply don’t use the suffix class, and make a new omega div to fill out to 24 blocks. Did that make sense;

So, the parent is grid_24, and the children add up to 24; grid_11, grid_10, prefix_3 and it looks like this;

I hope that this first tutorial has helped you understand a bit more about osCommerce and the Grid System. Please note that I am not an expert, so if anything looks wrong, tell me!

4 Replies to “960 Grid Tutorial – Understanding Prefix and Suffix classes”

  1. After completely wrecking the 960 grid on my first attempt and looking at this and other tutorials on the subject I can honestly say I’m glad I got in early and got it out the way.

    Divs and css are suppose to simplify the design of websites, the grid systems have taken that simplicity and made it complicated by adding rules that aren’t necessary – I can see the advantage of it for coders that haven’t a clue about artistic design and want to churn out thousands of ‘different’ website to sell but people that want to have something different will be the first to get rid of it – or use the base file without the 960css as a starting point to a great design

    I can’t tell you how chuffed I was when I put the 960 Gridder Extension over my site and nothing line up 😀

    BTW – good tutorial Gary 😀

  2. Julian – “Divs and css are suppose to simplify the design of websites, the grid systems have taken that simplicity and made it complicated by adding rules that aren’t necessary” – agreed.

    I said before somewhere that 960 can only limit those people who can get to grips with css. As you rightly say, those people who can’t/won’t do that, or those who need to make loads of similar sites will love it.

Leave a Reply

Your email address will not be published. Required fields are marked *