xWisdomHTML.com

CSS Quick 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

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
column - Converts an element into a column. 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

Button Classes

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

Form Classes

textbox- Used to style a textboxes and textareas.

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

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

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

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

Table Classes

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

Misc Classes

space - Creates white horizontal ruler
clip - Overflow 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)