| Name | Element Assignment | Description |
|---|---|---|
| .cap | * | Uppercase |
| .italic | * | Adds Italics |
| .spread | * | Adds 10px of letter-spacing |
| .strike | * | Adds Strike Through |
| .f1 | * | font-weight 100 |
| .f2 | * | font-weight 200 |
| .f3 | * | font-weight 300 |
| .f4 | * | font-weight 400 |
| .f5 | * | font-weight 500 |
| .f6 | * | font-weight 600 |
| .f7 | * | font-weight 700 |
| .f8 | * | font-weight 800 |
| .f9 | * | font-weight 900 |
| .center | * | text align center |
| .right | * | text align right |
| .left | * | text align left |
| .sm | p, ul, ol, blockquote, button, footer, table, pre | Formats Text Font-Size to 13px |
| .lg | p, ul, ol, blockquote, button, footer, table, pre, h1, h2, h3, h4, h5 | Enlargen Text |
| .border | * | Adds Border to element |
<h2 class='f2 center'>Formatting <span class='f8'>Header</span> Example</h2>
<h5 class='f3 spread cap'>Sub Header</h5>
| Name | Element Assignment | Description |
|---|---|---|
| .absolute | * | position absolute |
| .relative | * | position relative |
| .fixed | * | position fixed |
| .left0, .left10, .left20 | .absolute, .fixed, .relative | left 0px, left 10px, left 20px |
| .right0, .right10, .right20 | .absolute, .fixed, .relative | right 0px, right 10px, right 20px |
| .top0, .top10, .top20 | .absolute, .fixed, .relative | top 0px, top 10px, top 20px |
| .bottom0, .bottom10, .bottom20 | .absolute, .fixed, .relative | bottom 0px, bottom 10px, bottom 20px |
| .float | * | float left |
| .float-right | * | float right |
| .hide | * | display none |
| .mhide | * | mobile display none |
| .pad, .pad5, .pad10 | * | Adds 20px,5px,10px of Padding to all sides |
| .marg, .marg5, .marg10 | * | Adds 20px,5px,10px of Margin to all sides |
| .tight, .tight-left, .tight-right, .tight-top, .tight-bottom | * | Removes Padding and Margin for all sides, left, right, top and bottom |
| .block | * | Sets element to full screen horizontally |
| .full | * | Sets element to full screen horizontally and vertically |
| .overflow | * | Sets Overflow Auto (fixes floats) |
x
Morbi quis ligula molestie, maximus ante sit amet. Vivamus sit amet diam imperdiet, consectetur sapien non, porttitor sapien.
<div class='shadow pad relative'>
<p class='top10 right10 absolute f8'>x</p>
<p>Morbi quis ligula molestie,
maximus ante sit amet. Vivamus sit amet diam imperdiet,
consectetur sapien non, porttitor sapien.</p>
</div>
| Name | Element Assignment | Description |
|---|---|---|
| .round | * | Adds 5px of rounded corners |
| .round2 | * | Adds 2px of rounded corners |
| .round10 | * | Adds 10px of rounded corners |
| .round20 | .* | Adds 20px of rounded corners |
| .round30 | * | Adds 30px of rounded corners |
| .round40 | * | Adds 40px of rounded corners |
| .round50 | * | Adds 50px of rounded corners |
| .round75 | * | Adds 75px of rounded corners |
| .round100 | * | Adds 100px of rounded corners |
| .circle | * | Adds 50% of rounded corners |
| .rect-left-bottom | .round | Removes Left Bottom Rounded Corner |
| .rect-right-bottom | .round | Removes Right Bottom Rounded Corner |
| .rect-left-top | .round | Removes Left Top Rounded Corner |
| .rect-right-top | .round | Removes Right Top Rounded Corner |
| .shadow, .shadow-sm, .shadow-lg, .shadow-bottom, .shadow-bottom-lg | * | Adds Shadow |
Morbi quis ligula molestie, maximus ante sit amet. Vivamus sit amet diam imperdiet, consectetur sapien non, porttitor sapien.
<p class='round50 border rect-left-top rect-right-bottom pad center'>
Morbi quis ligula molestie,maximus ante sit amet. Vivamus sit
amet diam imperdiet,consectetur sapien non, porttitor sapien.</p>