Style Reference Guide

Grid

The template is based on a 16 column grid. The left nav is 4 columns, leaving 12 columns for the main content.

<div class="span-1">1</div>
<div class="span-1">2</div>
<div class="span-1">3</div>
<div class="span-1">4</div>
<div class="span-1">5</div>
<div class="span-1">6</div>
<div class="span-1">7</div>
<div class="span-1">8</div>
<div class="span-1">9</div>
<div class="span-1">10</div>
<div class="span-1">11</div>
<div class="span-1 last">12</div>

Variations:

To split the page in half:

Left

Right

<div class="span-6">Left</div>
<div class="span-6 last">Right</div>

To add empty columns after your filled column(s):

habitant fames netus tristique senectus malesuada Pellentesque ac et egestas. morbi et turpis

<div class="span-3 append-9 last">
habitant fames netus tristique senectus malesuada Pellentesque ac et egestas. morbi et turpis 
</div>

To add empty columns before your filled column(s):

habitant fames netus tristique senectus malesuada Pellentesque ac et egestas. morbi et turpis

<div class="span-3 prepend-9 last">
habitant fames netus tristique senectus malesuada Pellentesque ac et egestas. morbi et turpis
</div>

Notes:

The last column will need the "last" class - this includes if your column has enough empty columns appended or prepended to it to make it span the full 12.
Add the class "showgrid" to see the grid as done in the above examples.

Images

To have an image aligned left with text wrapped around it:

Littlejohn Tiger thumb eros rutrum volutpat. fermentum, sit fames vitae, facilisis. accumsan vulputate enim commodo Donec facilisis pharetra. tempus et Nam egestas elit vitae Praesent tincidunt eu eget, netus sapien erat Donec wisi, dui augue, amet, lacus tempor tristique ullamcorper eleifend turpis quam senectus wisi. felis. erat porttitor, erat. ornare turpis cursus semper. placerat tortor leo. Quisque condimentum dui. amet ultricies pulvinar non Vestibulum feugiat eros et et quam, Mauris id metus Pellentesque quis, Vestibulum orci, tortor magna ipsum sit neque in vitae, Aenean egestas eu faucibus, sit est luctus, ac tincidunt mi ante. amet sed, condimentum, mi, amet, eget habitant Ut sagittis Aenean Aliquam ultricies ac dapibus, malesuada sit egestas. est. morbi eu libero neque enim

<img src="thumbnail.jpg" alt="thumbnail" class="left" />

To have an image aligned right with text wrapped around it:

thumbnail eros rutrum volutpat. fermentum, sit fames vitae, facilisis. accumsan vulputate enim commodo Donec facilisis pharetra. tempus et Nam egestas elit vitae Praesent tincidunt eu eget, netus sapien erat Donec wisi, dui augue, amet, lacus tempor tristique ullamcorper eleifend turpis quam senectus wisi. felis. erat porttitor, erat. ornare turpis cursus semper. placerat tortor leo. Quisque condimentum dui. amet ultricies pulvinar non Vestibulum feugiat eros et et quam, Mauris id metus Pellentesque quis, Vestibulum orci, tortor magna ipsum sit neque in vitae, Aenean egestas eu faucibus, sit est luctus, ac tincidunt mi ante. amet sed, condimentum, mi, amet, eget habitant Ut sagittis Aenean Aliquam ultricies ac dapibus, malesuada sit egestas. est. morbi eu libero neque enim

<img src="thumbnail.jpg" alt="thumbnail" class="right" />

Maximum Image Size Widths

1 column = 50 pixels
2 column = 108 pixels
3 column = 166 pixels
4 column = 224 pixels
5 column = 282 pixels
6 column = 340 pixels
7 column = 398 pixels
8 column = 456 pixels

9 column = 514 pixels
10 column = 572 pixels
11 column = 630 pixels
12 column = 688 pixels
13 column = 746 pixels
14 column = 804 pixels
15 column = 862 pixels
16 column = 920 pixels

Headers

"Heading" class adds an underline

<h4 class="heading">Heading</h4>

"Title" class removes the bottom margin

<h4 class="title">Heading</h4>

Example:

With the "title" class

Aenean ultricies Donec fames turpis eu tortor mi egestas. Mauris eleifend tristique et netus eget, Pellentesque senectus quam, tempor amet malesuada amet, leo. ante. quam Vestibulum habitant et morbi feugiat sit semper. ac sit est. vitae, ultricies placerat egestas vitae libero

Without the "title" class

"Color" class makes your text purple

<h4 class="color">Heading</h4>

Typography

To "highlight" your text

<p class="highlight">To "highlight" your text</p>

You can make your text "loud"

<p class="loud">You can make your text "loud"</p>

Or you can make your text "quiet"

<p class="quiet">Or you can make your text "quiet"</p>

You can have "large" text

<p class="large">You can have "large" text</p>

Or you can have "small" text

<p class="small">Or you can have "small" text</p>

Or you can have a combination of the above

<p class="small quiet">Or you can have a combination of the above</p>

Tables

To have a table with a border:

TD	TD
TD	TD

<table class="border" summary="layout">
<tbody>
	<tr>
		<td>TD</td>
		<td>TD</td>
	</tr>

	<tr>
		<td>TD</td>
		<td>TD</td>
	</tr>
</tbody>
</table>

To have a table with cells that have borders:

TD	TD
TD	TD

<table class="cellborder" summary="layout">
<tbody>
	<tr>
		<td>TD</td>
		<td>TD</td>
	</tr>

	<tr>
		<td>TD</td>
		<td>TD</td>
	</tr>
</tbody>
</table>

For a "striped" look to make a lot of content easier to read, add the "even" class to every other table row.

TD	TD
TD	TD
TD	TD
TD	TD
TD	TD

<table summary="layout">
<tbody>
	<tr>
		<td>TD</td>
		<td>TD</td>
	</tr>
	<tr class="even">
		<td>TD</td>
		<td>TD</td>
	</tr>
	<tr>
		<td>TD</td>
		<td>TD</td>
	</tr>
	<tr class="even">
		<td>TD</td>
		<td>TD</td>
	</tr>
	<tr>
		<td>TD</td>
		<td>TD</td>
	</tr>
</tbody>
</table>

Lists

By default, unordered and ordered lists indent. If you want them flush with the the rest of the content, use the "flush" class.

By Default:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.

With the "flush" class:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.

<ul class="flush">
	<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	<li>Aliquam tincidunt mauris eu risus.</li>
	<li>Vestibulum auctor dapibus neque.</li>
</ul>

Miscellaneous

To add a black border, use the "border-black" class. You can do this to any element - including images.

<p class="border-black">To add a black border, use the "border-black" class.
You can do this to any element - including images.</p>

There is also a gray border available - just use the "border-gray" class.

<p class="border-gray">There is also a gray border available - just use the "border-gray" class.</p>