12 columns
11 columns
1 column
10 columns
2 columns
9 columns
3 columns
8 columns
4 columns
7 columns
5 columns
6 columns
6 columns
5 columns
7 columns
4 columns
8 columns
3 columns
9 columns
10 columns
2 columns
1 column
11 columns
1 column
1 column
1 column
1 column
1 column
1 column
1 column
1 column
1 column
1 column
1 column
1 column
6 columns
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
1 col
no top padding
no bottom padding
top padding only
bottom padding
side padding
vertical padding
right padding
left padding
no padding
The site works on a 12 column fluid grid system illustrated above. Column widths are derived as a percentage of the containing div.
When nesting columns you will need to ensure the container is always divided into a further 12 columns.
N/a
Separate desktop and mobile views are created by using a 767px max-width media query to present a different structure.
Grid columns will be collapsed from a floating horizontal structure to a vertical stacked structure.
Different widths are set for users with IE7 to prevent problems with pixel rounding on percentage widths causing the nested columns to break their parent container.
Padding for content areas is controlled by a content container inside each grid column. This is to separate width styles from border and padding styles and to prevent issues with the box model. Decorative styles are also set on internal structural containers to create a re-usable component based CSS structure.
N/a
N/a