Template

Templates are used to solve common design patterns for page layout. Using these templates you can build pages which have a header, footer, left and right columns, and a main content area. Any of the sections can be broken up via grids. You can also use grids instead of columns. The main column is fully liquid, taking up all the rest of the space when the left column and right column have been rendered.

Please help me test the grids and template objects. Put them through their paces and let me know if you manage to break them!

Base Classes

Property	Description
page	Main wraps site content. It can be extended via the classes oldSchool and liquid to provide 750px and full width layouts respectively.
head	Site header, generally contains custom code. (e.g. horizontal navigation, logo, search box)
body	Main content area, body of the page.
foot	Site footer, generally contains custom code.
main	Creates a main content area, often the center column. Fully liquid, it takes all remaining space when left and right columns have been rendered. You may have 1 main columns.
leftCol	Creates a left column, default width is 250px. Extended by gMail, gCal, yahoo, and myYahoo to create widths of 160px, 180px, 240px, and 300px respectively. You may have 0-n left columns.
rightCol	Creates a right column, default width is 250px. Extended by gMail, gCal, yahoo, and myYahoo to create widths of 160px, 180px, 240px, and 300px respectively. You may have 0-n right columns.
gMail	Extends leftCol and rightCol to create a 160px column width.
gCal	Extends leftCol and rightCol to create a 180px column width.
yahoo	Extends leftCol and rightCol to create a 240px column width.
myYahoo	Extends leftCol and rightCol to create a 300px column width.
oldSchool	Extends page to create a 750px layout.
liquid	Extends page to create a full-width liquid layout.

Basic template

<div class="page">
	<div class="head"><!-- Head --></div>
	<div class="body"><!-- Body -->
		<div class="leftCol"><!-- Left Column (optional region) --></div>
		<div class="rightCol"><!-- Right Column (optional region) --></div>
		<div class="main"><!-- Main Content --></div>
	</div>
	<div class="foot"><!-- Foot --></div>	
</div>

Full width template, 2 columns, gmail style (160px left column width)

<div class="page liquid">
	<div class="head"><!-- Head --></div>
	<div class="body"><!-- Body -->
		<div class="leftCol gMail"><!-- Left Column (optional region) --></div>
		<div class="main"><!-- Main Content --></div>
		<!-- note: right column has been removed -->
	</div>
	<div class="foot"><!-- Foot --></div>	
</div>

Goals

In object oriented CSS the most important goal is to have a single template from which all pages are built. This eases CMS development because by having a single starting point all pages can be made into any other page. Users of the CMS do not have traps in which a page they have built cannot be morphed into a different page type. Another goal of an OO template is to have each section (column, header, etc) control its own destiny. Practically, that means that if you want to add a left column to the template, the only required action should be actually adding the column to the HTML. You never want to write CSS in such a way that changes are required higher in the DOM tree in order to make child elements behave properly. Looping through the DOM is costly for CMS development. Similarly, if you want to have a different left column width, it should be accomplished by extending the left column object by adding an additional class.

Extending an object

<div class="leftCol gMail"> ... </div>

Customizing the template

You may not find the default and extended widths of columns or pages match your site. In this case you can extend the column or main objects to allow custom widths. For performance reasons, you should avoid customizing templates whenever possible.

Columns

myColumn extends column objects to allow for custom column widths.

.myColumn{width:400px;}

Main page

myPage extends main.

.myPage{width:1050px !important;}

Known Issues

• Source order – the right column is before the main content in the source order. This choice was made in order to allow the columns to be completely independent objects and to have one unique template rather than multiple starting points for a site. This speeds and simplifies CMS development and enhances usability for those creating pages within the CMS. Skip to content links and navigational items marked up as lists are strongly encouraged.
• Overflow – the containing blocks are made to wrap floats using the contexte de formattage; overflow:hidden; _overflow:visible; zoom:1;. This is known to cause printing bugs in older versions of Firefox and can cause absolutely positioned blocks originating in that container to be cropped. Removing floats and overflow via the print stylesheet is a corrective option.