Template

Templates are used to solve common design patterns for page templates. 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 colum have been rendered.

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>
		<!-- note: right column has been removed -->
		<div class="main"><!-- Main Content --></div>
	</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 and OO template is to have each section (column, header, etc) control it's 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 page 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 page.

.myPage{width:1050px;}

Known Issues