CSS Layouts
Two Column
Two column, small left column larger right.
<div class="twocol">
<div class="column first">
</div>
<div class="column last">
</div>
</div>
Two Column
Two column layout, small left column larger right column.
<div class="twocollefta">
<div class="column first">
</div>
<div class="column last">
</div>
</div>
Two Column
Two column, small left column larger right.
<div class="twocolleftb">
<div class="column first">
</div>
<div class="column last">
</div>
</div>
twocol
Two column, small left column larger right.
<div class="twocolrighta">
<div class="column first">
</div>
<div class="column last">
</div>
</div>
twocol
Two column, small left column larger right.
<div class="twocolrightb">
<div class="column first">
</div>
<div class="column last">
</div>
</div>
Three Column Even
Two column, small left column larger right.
<div class="threecol">
<div class="column first">
</div>
<div class="column last">
</div>
</div>
Three Column - Small Sidebars
Two column, small left column larger right.
<div class="threecol">
<div class="column first">
</div>
<div class="column last">
</div>
</div>
Three Column Even
Two column, small left column larger right.
<div class="fourcol">
<div class="column first">
</div>
<div class="column">
</div>
<div class="column">
</div>
<div class="column last">
</div>
</div>
Five Column
Two column, small left column larger right.
<div class="fivecol">
<div class="column first">
</div>
<div class="column">
</div>
<div class="column">
</div>
<div class="column">
</div>
<div class="column last">
</div>
</div>
Typography
Default fonts are sans-serif, add the class "serif" to any element to change to serif fonts.
Serif Header
Serif Header
Serif paragraph.
<h2 class="serif"></h2>
<h3 class="serif"></h3>
<p class="serif"></p>
Form Styles
<form>
<fieldset><legend>Legend</legend>
<input type="text" name="textfield" id="textfield" />
</form>
Form Styles
<form>
<fieldset><legend>Legend</legend>
<input type="text" name="textfield" id="textfield" />
</form>
Table Styles
| Data | Data | Data | Data | Data | Data |
|---|---|---|---|---|---|
| Data | Data | Data | Data | Data | Data |
| Data | Data | Data | Data | Data | Data |
| Data | Data | Data | Data | Data | Data |
| Data | Data | Data | Data | Data | Data |
| Data | Data | Data | Data | Data | Data |
| Data | Data | Data | Data | Data | Data |
| Data | Data | Data | Data | Data | Data |
| Data | Data | Data | Data | Data | Data |
| Data | Data | Data | Data | Data | Data |
<table>
<tr>
<th>Data</th>
<th>Data</th>
</tr>
<tr class="zebra">
<th>Data</th>
<td>Data</td>
</tr>
<tr>
<th>Data</th>
<td>Data</td>
</tr>
</table>