osCommerce v2.3.3 Tutorials | osCommerce eBook Store | osCommerce Tutorials | osCommerce Home

osCommerce v2.3.3 960 Grid 24-Column Web Layout System

The web layout of osCommerce v2.3.3 is using the 960 Grid System with 24-column variant. Let's get a brief introduction of the 960 Grid System before customizing the osCommerce template with v2.3.3 version.

The 960 Grid System is simply a tool that provide an easier and faster way to create layout with commonly used dimensions, based on a width of 960 pixels. You should be heard or already familiar with the two old or primary variants of 960 Grid System - 12-column and 16-column. Actually the 24-column variant is quite commonly used recently.

12-column Grid

The 12-column variant simply divide the 960 pixels grid into 12 columns that are each 60 pixels wide. Each column has 5 pixels of margin on the left and right, and 20 pixel wide gutters between the columns.

16-column Grid

The 16-column varianr divide the 960 pixels grid into 16 columns that are each 40 pixels wide. Each column has 5 pixels of margin on the left and right, and 20 pixel wide gutters between the columns.

24-column Grid

The 24-column varianr divide the 960 pixels grid into 24 columns that are each 30 pixels wide. Each column has 5 pixels of margin on the left and right, and 20 pixel wide gutters between the columns.

osCommerce v2.3.3 960 Grid with 24-column Variant

Since we are focus on the osCommerce shop, we are going to discuss the 960 Grid System with 24-column variant that osCommerce v2.3.3 is using for web layout.

As we mentioned above that the 24-column varianr divide the 960 pixels grid into columns that are each 30 pixels wide. Each column has 5 pixels of margin on the left and right, and 10 pixel wide gutters between the columns. Based on this information, we can easily draw out the 960 pixels grid, as shown in the diagram below:

oscommerce 960 Grid layout

Total width of the layout:

= (24 columns x 30 pixels) + (23 gutters x 10 pixels) + (left side 5 pixels) + (right side 5 pixels)

= 720 pixels + 230 pixels + 5 pixels + 5 pixels

= 960 pixels

How the web layouts draw on the 960 pixels grids?

The web layouts (for example, left column, main content, etc...) must occupy the whole column(s), thus providing a "standard" dimensions. Here's are some possible dimensions of the web layouts:

oscommerce 960 Grid layout

Therefore the 960 Grid System is simply a tool that provide an easier and faster way to create web layouts with commonly used dimensions, based on a width of 960 pixels.

Let's take the default layout of osCommerce v2.3.3 shop as an example, and everything should be clear:

oscommerce 960 Grid layout

Iif you wish to modify the width of the left column and right column, you also need to modify the width of the main content too, with all dimensions based on the 24 column grid, making a total of 960 pixels.

For example:

The default width of left column and right column are 150 pixels. They can only be modified according to the dimension of 24 column grid, i.e. 30 pixels, 70 pixels, 110 pixels, 190 pixels, 230 pixels, etc...

The rule is very simple: total width of all web layouts is equal to 960 pixels.

oscommerce 960 Grid layout

Now we have some basic idea about the layout of osCommerce v2.3.3 shop, we can start customizing the default template.