Grid columns

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

Nested 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

Content containers

no top padding

no bottom padding

top padding only

bottom padding

side padding

vertical padding

right padding

left padding

no padding

Styleguide notes


Fluid grid system


Usage

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.


Interaction

N/a


CSS and media queries

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.


Use of Javascript

N/a


Component variants

N/a