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
Grid Classes
- 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
Fixed-Width Cells
- 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>
Elastic Cells
- 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
Visibility Classes
- hide - Display none;
- transparent - Opacity 0.4
- disabled
Image Classes
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
Color Classes
Use to set the background color of an element
- white
- silver
- lightgray
- pastelgreen
- softblue
- softred
- softgreen
- softyellow
Border Classes
- tpb, rtb, bmb, ltb - Used to add a 1px top, right, bottom or left border to an element
- colborder - Add right border to a column
- border, border1 - Creates a 1px border around an element
- border2 - Creates a 2px border around an element
- border3 - Creates a 3px border around an element
- border4 - Creates a 4px border around an element
- border5 - Creates a 5px border around an element
- round - Used to create 4px border-radius.
- round-tl - Top-left border-radius
- round-tr - Top-right border-radius
- round-bl - Bottom-left border-radius
- round-br - Bottom-right border-radius
- round-top - Top border-radius
- round-bottom - Bottom border-radius
- round-right - Right border-radius
- round-left - Left border-radius
Form Classes
- textbox - Used to style a textboxes and textareas.
- required - Used to highlight a required form element
Button Classes
- button - Used to style a button or a hyperlink
- ok, cancel, process, continue, disabled - Used to set button color and state.
Surface Classes
- rax-glossy
- rax-metalic
- rax-glass
Palette Classes
- rax-background-pal
- rax-header-pal
- rax-toolbar-pal
- rax-footer-pal
- rax-content-pal
- rax-active-pal
- rax-inactive-pal
- rax-hover-pal
- rax-selected-pal
- rax-itm-pal
- rax-alt-pal
- rax-error-pal
- rax-alert-pal
- rax-success-pal
- rax-info-pal
Back Drop
Box Classes
- rax-box - Raxan box class
- alert, info, notice, error, success - used to modify box state
- box-title - box title
Table Classes
- rax-table - Main table class
- tbl-header - table header class
- 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.
TabStrip Classes
- rax-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 Clases
- busy_cursor - This class is used to define the busy cursor icon for the Cursor plugin
UI Resizable (jQuery)
- ui-resizable - Resizeable class
- ui-resizable-handle
- ui-resizable-n
- ui-resizable-s
- ui-resizable-e
- ui-resizable-w
- ui-resizable-se
- ui-resizable-sw
- ui-resizable-nw
- ui-resizable-ne
UI Icons (jQuery)
- ui-cons - Main icon class
- ui-icon-carat-1-n
- ui-icon-carat-1-ne
- ui-icon-carat-1-e
- ui-icon-carat-1-se
- ui-icon-carat-1-s
- ui-icon-carat-1-sw
- ui-icon-carat-1-w
- ui-icon-carat-1-nw
- ui-icon-carat-2-n-s
- ui-icon-carat-2-e-w
- ui-icon-triangle-1-n
- ui-icon-triangle-1-ne
- ui-icon-triangle-1-e
- ui-icon-triangle-1-se
- ui-icon-triangle-1-s
- ui-icon-triangle-1-sw
- ui-icon-triangle-1-w
- ui-icon-triangle-1-nw
- ui-icon-triangle-2-n-s
- ui-icon-triangle-2-e-w
- ui-icon-arrow-1-n
- ui-icon-arrow-1-ne
- ui-icon-arrow-1-e
- ui-icon-arrow-1-se
- ui-icon-arrow-1-s
- ui-icon-arrow-1-sw
- ui-icon-arrow-1-w
- ui-icon-arrow-1-nw
- ui-icon-arrow-2-n-s
- ui-icon-arrow-2-ne-sw
- ui-icon-arrow-2-e-w
- ui-icon-arrow-2-se-nw
- ui-icon-arrowstop-1-n
- ui-icon-arrowstop-1-e
- ui-icon-arrowstop-1-s
- ui-icon-arrowstop-1-w
- ui-icon-arrowthick-1-n
- ui-icon-arrowthick-1-ne
- ui-icon-arrowthick-1-e
- ui-icon-arrowthick-1-se
- ui-icon-arrowthick-1-s
- ui-icon-arrowthick-1-sw
- ui-icon-arrowthick-1-w
- ui-icon-arrowthick-1-nw
- ui-icon-arrowthick-2-n-s
- ui-icon-arrowthick-2-ne-sw
- ui-icon-arrowthick-2-e-w
- ui-icon-arrowthick-2-se-nw
- ui-icon-arrowthickstop-1-n
- ui-icon-arrowthickstop-1-e
- ui-icon-arrowthickstop-1-s
- ui-icon-arrowthickstop-1-w
- ui-icon-arrowreturnthick-1-w
- ui-icon-arrowreturnthick-1-n
- ui-icon-arrowreturnthick-1-e
- ui-icon-arrowreturnthick-1-s
- ui-icon-arrowreturn-1-w
- ui-icon-arrowreturn-1-n
- ui-icon-arrowreturn-1-e
- ui-icon-arrowreturn-1-s
- ui-icon-arrowrefresh-1-w
- ui-icon-arrowrefresh-1-n
- ui-icon-arrowrefresh-1-e
- ui-icon-arrowrefresh-1-s
- ui-icon-arrow-4
- ui-icon-arrow-4-diag
- ui-icon-extlink
- ui-icon-newwin
- ui-icon-refresh
- ui-icon-shuffle
- ui-icon-transfer-e-w
- ui-icon-transferthick-e-w
- ui-icon-folder-collapsed
- ui-icon-folder-open
- ui-icon-document
- ui-icon-document-b
- ui-icon-note
- ui-icon-mail-closed
- ui-icon-mail-open
- ui-icon-suitcase
- ui-icon-comment
- ui-icon-person
- ui-icon-print
- ui-icon-trash
- ui-icon-locked
- ui-icon-unlocked
- ui-icon-bookmark
- ui-icon-tag
- ui-icon-home
- ui-icon-flag
- ui-icon-calendar
- ui-icon-cart
- ui-icon-pencil
- ui-icon-clock
- ui-icon-disk
- ui-icon-calculator
- ui-icon-zoomin
- ui-icon-zoomout
- ui-icon-search
- ui-icon-wrench
- ui-icon-gear
- ui-icon-heart
- ui-icon-star
- ui-icon-link
- ui-icon-cancel
- ui-icon-plus
- ui-icon-plusthick
- ui-icon-minus
- ui-icon-minusthick
- ui-icon-close
- ui-icon-closethick
- ui-icon-key
- ui-icon-lightbulb
- ui-icon-scissors
- ui-icon-clipboard
- ui-icon-copy
- ui-icon-contact
- ui-icon-image
- ui-icon-video
- ui-icon-script
- ui-icon-alert
- ui-icon-info
- ui-icon-notice
- ui-icon-help
- ui-icon-check
- ui-icon-bullet
- ui-icon-radio-off
- ui-icon-radio-on
- ui-icon-pin-w
- ui-icon-pin-s
- ui-icon-play
- ui-icon-pause
- ui-icon-seek-next
- ui-icon-seek-prev
- ui-icon-seek-end
- ui-icon-seek-start
- ui-icon-seek-first
- ui-icon-stop
- ui-icon-eject
- ui-icon-volume-off
- ui-icon-volume-on
- ui-icon-power
- ui-icon-signal-diag
- ui-icon-signal
- ui-icon-battery-0
- ui-icon-battery-1
- ui-icon-battery-2
- ui-icon-battery-3
- ui-icon-circle-plus
- ui-icon-circle-minus
- ui-icon-circle-close
- ui-icon-circle-triangle-e
- ui-icon-circle-triangle-s
- ui-icon-circle-triangle-w
- ui-icon-circle-triangle-n
- ui-icon-circle-arrow-e
- ui-icon-circle-arrow-s
- ui-icon-circle-arrow-w
- ui-icon-circle-arrow-n
- ui-icon-circle-zoomin
- ui-icon-circle-zoomout
- ui-icon-circle-check
- ui-icon-circlesmall-plus
- ui-icon-circlesmall-minus
- ui-icon-circlesmall-close
- ui-icon-squaresmall-plus
- ui-icon-squaresmall-minus
- ui-icon-squaresmall-close
- ui-icon-grip-dotted-vertical
- ui-icon-grip-dotted-horizontal
- ui-icon-grip-solid-vertical
- ui-icon-grip-solid-horizontal
- ui-icon-gripsmall-diagonal-se
- ui-icon-grip-diagonal-se