Testing

Sample Layouts

Here’s how you can use the Responsive Grid System to suit your content:

The ‘Intro Page’

Has a header row with a logo and some nav, some featured content (maybe a carousel or some headline text), a row for the smaller features and a footer.

The logo, spanning 1 of 3
The navigation, spanning 2 of 3

The carousel, spanning 3 of 3

Feature, spanning 1 of 3
Feature, spanning 1 of 3
Feature, spanning 1 of 3

The footer, spanning 3 of 3

The ‘Blog’

Has a header row, a row with the content and the sidebar and a footer.

The header, spanning 3 of 3

The content, spanning 2 of 3
The sidebar, spanning 1 of 3

The footer, spanning 3 of 3

The ‘Portfolio’

Has a header row with a logo and some nav, a couple of rows of portfolio items and a footer.

The logo, spanning 1 of 3
The navigation, spanning 2 of 3

Portfolio item, spanning 1 of 4
Portfolio item, spanning 1 of 4
Portfolio item, spanning 1 of 4
Portfolio item, spanning 1 of 4

Portfolio item, spanning 1 of 4
Portfolio item, spanning 1 of 4
Portfolio item, spanning 1 of 4
Portfolio item, spanning 1 of 4

Portfolio item, spanning 1 of 4
Portfolio item, spanning 1 of 4
Portfolio item, spanning 1 of 4
Portfolio item, spanning 1 of 4

The footer, spanning 3 of 3

The ‘Golden Ratio’

According to wikipedia, two quantities are in the golden ratio if the ratio of the sum of the quantities to the larger quantity is equal to the ratio of the larger quantity to the smaller one. It has a value of 1.618. If you use a grid of eight, and split into five columns and three columns the ratio is 1.66, which is pretty close.

This column spans 5 of 8
This column spans 3 of 8