Celtic Sea 960 Grid System Contao Theme
The Celtic Sea Contao theme uses the 960 grid system of web design. The Contao page templates and articles in the Celtic Sea theme have twelve 60 pixel columns separated by 20 pixel "gutters" in between each column. See the content examples below for examples on how the 960 Grid System can enhance your website.
How the 960 Grid System Works in Contao
Using the 960 Grid System makes it easy to create custom web pages using common measurements and dimensions. The template's 12 column grid consists of a series of columns with a "gutter" or padding on each side. You can find more information about the 960 grid system at 960.gs
In this Contao Article "element", the class "grid_12" has been applied to allow the content to stretch across the entire width of the page.
A Two Column Example
To create two equal columns the full width of the page, the HTML code is:
<div class="grid_6 grid"> left column content </div> (NOTE: in the Contao Content Management System, "nested" grid elements like this one require the class "grid" to be added to the Article to apply 20 pixels right margin.
<div class="grid_6"> right column content </div>
The above code with some additional content text will display as:
This is an H3 heading
This element has the class "grid_6 grid" applied to it to a provide 20 pixels right margin.
This is an H3 heading
This element does not require the 20 pixels right margin and just has the class "grid_6" applied to it.
A Left Sidebar Example
To use a left sidebar and the majority of the right side of the page for content, use grids 3 and 9 or 4 and 8. See how the two content classes add up to 12? That's how the 960 Grid System works!
Class="grid_3 grid"
This nested element has the class "grid_3 grid" applied to it to a provide 20 pixels right margin.
Cras et dapibus magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Class="grid_9"
This element does not require the 20 pixels right margin and just has the class "grid_9" applied to it.
Cras et dapibus magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent dolor neque, gravida sed tempus a, vehicula nec metus. Cras accumsan ultricies sapien id tincidunt. Etiam vitae ante quis lectus pulvinar
A Right Sidebar Example
If you want your page to use a right sidebar instead, reverse the order of the grid classes. In this example, use grids 9 and 3 or 8 and 4. Here again, the values of the grids add up to 12.
Cras et dapibus magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent dolor neque, gravida sed tempus a, vehicula nec metus. Cras accumsan ultricies sapien id tincidunt. Etiam vitae ante quis lectus pulvinar
Class="grid_9 grid"
This nested element has the class "grid_9 grid" applied to it to a provide 20 pixels right margin.
Cras et dapibus magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent dolor neque, gravida sed tempus a, vehicula nec metus. Cras accumsan ultricies sapien id tincidunt. Etiam vitae ante quis lectus pulvinar
Class="grid_3"
This element has the class "grid_3" applied to it to create a right sidebar.
This is not a nested element in Contao, and it does not require the additional 20 pixels right marging to display properly. In this case the "grid" class is not needed.
A Three Column Example
You can use as many divs as you want, as long as you don't exceed 12 columns across your page.
Cras et dapibus magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent dolor neque, gravida sed tempus a, vehicula nec metus. Cras accumsan ultricies sapien id tincidunt. Etiam vitae ante quis lectus pulvinar
Class="grid_3 grid"
This nested element has the class "grid_3 grid" applied to it.
Cras et dapibus magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Class="grid_6 grid"
This nested element has the class "grid_6 grid" applied to it to a provide 20 pixels right margin.
Cras et dapibus magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent dolor neque, gravida sed tempus a, vehicula nec metus. Cras accumsan ultricies sapien id tincidunt. Etiam vitae ante quis lectus pulvinar
Class="grid_3"
This element has the class "grid_3" applied to it.
Cras et dapibus magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
A Four Column Example
You can use as many divs as you want, as long as you don't exceed 12 columns across your page.
Class="grid_3 grid"
As shown previously, nested elements in the Contao CMS require that you apply 20 pixels right margin to the element. In this case the class "grid_3 grid" has been applied in the Contao Article element.
Class="grid_3 grid"
This nested element has the class "grid_3 grid" applied to it.
Class="grid_3 grid"
This nested element has the class "grid_3 grid" applied to it.
Class="grid_3"
This is not a nested element in Contao, and it does not require the additional 20 pixels right marging to display properly. In this case the "grid" class is not needed.
A Six Column Example
You can use as many divs as you want, as long as you don't exceed 12 columns across your page.
Class="grid_2 grid"
As shown previously, nested elements in the Contao CMS require that you apply 20 pixels right margin to the element. In this case the class "grid_2 grid" has been applied in the Contao Article element.
Class="grid_2 grid"
This nested element has the class "grid_2 grid" applied to it.
Class="grid_2 grid"
This nested element has the class "grid_2 grid" applied to it.
Class="grid_2 grid"
This nested element has the class "grid_2 grid" applied to it.
Class="grid_2 grid"
This nested element has the class "grid_2 grid" applied to it.
Class="grid_2"
This element has the class "grid_2" applied to it.
This is not a nested element in Contao, and it does not require the additional 20 pixels right marging to display properly. In this case the "grid" class is not needed.