CSS Framework Class Reference

A list of classes that are currently available with the framework.

Typography Classes

Use these classes to modify the look and feel of text within the page.

• small
• large
• quiet
• loud
• highlight
• added
• removed
• caps
• fancy

Grid Classes

• c1, c2, ..., c50, c60, c70, c80, c90, c100 - Use these classes to set the column width of an element (1 cell width = 20px). For Example: <div class="c10"></div>
• r1, r2, ..., r50 - Use these classes to set the row height of an element (1 cell height = 20px ). For Example: <div class="c10 r10"></div>
• container - Defines a container for columns and other html elements. A container must be used to define the outer limits of the page. For example: <div class="container c40">Page Content goes here...</div>
• column - Converts an element into a column with a 10px right margin. Used with grid cell classes such as c1, ... and r1,... For Example: <div class="column c5"></div>
• last - Used by the last column in the row to remove the column margin.
• clear - Clear floats
• elastic - Allows the browser to automatically calculate the width of a div element to fit the available space
• e10,e20,...,e100 - Use these elastic classes to set the percentage (%) width of an element in increments of 10. For Example: <div class="e10"></div>. This will stretch the width of the div element to occupy 10% of it's parent element.
• h10,h20,...,h100 - Use these elastic classes to set the percentage (%) height of an element in increments of 10. For Example: <div class="e10 h10"></div>. This will stretch the width and height of the div element to occupy 10% of it's parent element.

Margins & Padding Classes

• pad - Sets padding to 10px
• hlf-pad - Sets padding to 5px
• dbl-pad - Sets padding to 20px
• margin - Sets margin to 10px
• tpm, rtm, bmm, ltm - Sets top, right, bottom or left margins

Position Classes

• above - Absolution position
• left - float elemnt left
• center - center element
• top - Sets top margin-top to 0px
• bottom - Sets bottom margin to 0px
• front - Set z-index to 1000
• back - Set z-index to -1000
• fixed - Fixed Position

Prepend & Append Classes

Used these classes to append or prepend empty cells to an element

• append1, append2, ..., append10
• prepend1, prepend2, ..., prepend10
• prepend-top, append-bottom

Push / Pull & Up / Down Classes

Use these classes to push or pull an element into a previous cell.

• push1, push2, push3, push4, push5
• pull1, pull2, pull3, pull4, pull5
• up1, up2, up3, up4, up5
• dn1, dn2, dn3, dn4, dn5

Button Classes

• button - Used to style an input button or a hyperlink
• ok, cancel, process, continue, disabled - Used to set button color and state.

Border Classes

• border - Creates a 1px border around an element
• tpb, rtb, bmb, ltb - Used to add a top, right, bottom or left border to an element
• colborder - Add right border to a column
• round - Used to create 5px round courners. Requires FF or Safari.

Box Classes

• box, alert, info, notice, error, success
• box-title - Outlines a box title
• shadow - Used with shadow box markup. See templates/shadowbox.html
• toolbar - Used with toolbar markup. See templates/toolbar.html

Color Classes

Use to set the background color of an element

• white
• silver
• lightgray
• pastelgreen
• softblue
• softred
• softgreen
• softyellow

Form Classes

• textbox- Used to style a textboxes and textareas.

Image Classes

• hvspace - Margin 1.5em;

Misc Classes

• space - Creates white horizontal ruler
• clip - Overflow hidden
• clip-x - Overflow-x hidden
• clip-y - Overflow-y hidden
• scrollable - Overflow auto
• mouse-cursor - Displays the default mouse pointer
• click-cursor - Displays the hand or click pointer
• grid-mask - Show grid lines (for development only)

Panel Classes

• panel - Used with panel markup to create a basic panel with round courners. See templates/panel.html
• pnl-header - Outlines the panel header
• pnl-footer - Outlines the panel footer

Table Classes

• header (deprecated) - Use tbl-header
• tbl-header - Use on tr element to style table header
• even - Use on tr element to style alternate table rows
• sort - Use on td and the elements to style sorted column
• select - Use on tr element to style selected row
• hover - Use on tr element to style row when mouse over.

Visibility Classes

• hide - Display none;
• transparent - Opacity 0.4

TabStrip Plugin Classes

• tabstrip - Converts an unordered list into a horizontal TabStrip
• selected - Highlights the selected list item (or tab). For example: <li class="selected"><a href="#">Tab1</a></li>

Cursor Plugin Clases

• busy_cursor - This class is used to define the busy cursor icon for the Cursor plugin