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;
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!