Style Guide v14
Grid System (5% - 10px)
| Prefix | Media Query | Applied Classes |
| mobile-{n} | Window < 768px | fl m |
| tablet-{n} | Window < 980px | fl m |
| grid-{n} | Default | fl m |
| large-{n} | Window > 1200px | fl m |
| flush-{n} | Default | fl |
| Alias & Helper Classes | |
| {prefix}-full | {prefix}-20 |
| {prefix}-half | {prefix}-10 |
| {prefix}-third | 33% |
| {prefix}-fourth | {prefix}-5 |
| {prefix}-fifth | {prefix}-4 |
| {prefix}-2col | 100% - 235px |
| {prefix}-3col | 100% - 470px |
Helper Classes
Print Classes
| Class | Description |
| printOnly | Element remains hidden unless user prints the page |
| hideOnPrint | Element is hidden when a user prints the page |
Image Classes
| Class | Description |
| Image | Not quite sure... Most commonly found with Ignore. |
| lazyIgnore | This will keep the Javascript from trying to resize the image |
Bar Classes
| Class | Description |
| fullBar | Padding to keep content reasonably away from edges |
| fauxBar | adds a :before and an :after to make the background full width but keeps the content |
Float
| Class | Description |
| fl | float: left |
| fr | float: right |
| no-f | float: none |
| cl | clear: left |
| cr | clear: right |
| c, clear | clear: both |
| no-c | clear: none |
| clearfix | Makes a container stretch to fit floating contents |
Rounded Corners
| Class | Description |
| r | border-radius: 5px |
| rt | border-radius: 5px 5px 0 0 |
| rr | border-radius: 0 5px 5px 0 |
| rb | border-radius: 0 0 5px 5px |
| rl | border-radius: 5px 0 0 5px |
| rtl | border-radius: 5px 0 0 0 |
| rtr | border-radius: 0 5px 0 0 |
| rbl | border-radius: 0 0 0 5px |
| rbr | border-radius: 0 0 5px 0 |
| no-r | border-radius: 0 |
Text Classes
| Class | Description |
| tl | text-align: left |
| tr | text-align: right |
| tc | text-align: center |
| tj | text-align: justify |
| ttu | text-transform: uppercase |
| ttl | text-transform: lowercase |
| ttc | text-transform: capitalize |
| bold | font-weight: bold |
| strike | Line through text |
| ellipsis | Truncates a text block with "...". Width must be specified |
| underline | Add an underline to any text. Used mostly for headers |
| fontSm | font-size: 0.75em |
| fontRg | font-size: 1em |
| fontMed | font-size: 1.2em |
| fontLg | font-size: 1.4em |
| moreText | Hide and shows text that is larger then 200 characters. |
| seeMoreText | Hide and shows text that is beyond 2 lines |
Positioning
| Class | Description |
| affix | Fixed to window |
| affix-top | Fixed relative to flow |
| affix-bottom | Fixed relative to non-static parent |
Margin and Padding
| Class | Description |
| m | margin: 5px |
| mt | margin-top: 5px |
| mr | margin-right: 5px |
| mb | margin-bottom: 5px |
| ml | margin-left: 5px |
| m2x | margin: 10px |
| mt2x | margin-top: 10px |
| mr2x | margin-right: 10px |
| mb2x | margin-bottom: 10px |
| ml2x | margin-left: 10px |
| ma | margin: 5px auto |
| no-m | margin: 0 |
| no-mr | margin-right: 0 |
| no-ml | margin-left: 0 |
| no-mt | margin-top: 0 |
| no-mb | margin-bottom: 0 |
| no-mi | margin: 0 (:before && :after) |
| p | padding: 5px |
| pt | padding-top: 5px |
| pr | padding-right: 5px |
| pb | padding-bottom: 5px |
| pl | padding-left: 5px |
| p2x | padding: 10px |
| pt2x | padding-top: 10px |
| pr2x | padding-right: 10px |
| pb2x | padding-bottom: 10px |
| pl2x | padding-left: 10px |
| no-p | padding: 0 |
| no-pr | padding-right: 0 |
| no-pl | padding-left: 0 |
| no-pt | padding-top: 0 |
| no-pb | padding-bottom: 0 |
| no-b | border: 0 |
Other
| Class | Description |
| noDrag | Prevents users from selecting text or dragging element |
| h:hover | Adds style on hover to lighten opacity |
| loading | Adds the loading gif behind |
| hide | Removes element from the flow |
| show | Reverts to default element display |
| visible | 100% Opacity |
| invisible | 0% Opacity |
| disabled | Adds disabled styling to any element |
| scroll | Makes element vertically scrollable |
| no-scroll | Overflow Hidden, removes scrolling |
| bs | Adds default drop shadow to any element |
| no-bs | Removes drop shadows from any element |
| hidden | Hides an element. See also .hide |
Animation
| Class | Description |
| a | Animate all properties over 500ms |
| a250 | Animate all properties over 250ms |
| a100 | Animate all properties over 100ms |
| zoom | Scales up element on hover |
Color
| Main | |||
|---|---|---|---|
| Secondary | |||
| Error | |||
| Success | |||
| Warning | |||
| Grayscale | |||
Boxes
Box Links
Default This is a default box. Classes .box Text This is a text box. Classes .text.box Info This is a info box. Classes .info.box Warning This is a warn box. Classes .warn.box Error This is a error box. Classes .error.box Success This is a success box. Classes .success.boxEvents
Make Credit Card Payment
Please check it out now!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut magna congue, consectetur....
Tortor phasellus at augue neque. Mauris sodales, eros et mollis hendrerit, est metus accumsan est...
Make Credit Card Payment
Please check it out now!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut magna congue, consectetur....
Tortor phasellus at augue neque. Mauris sodales, eros et mollis hendrerit, est metus accumsan est...
Make Credit Card Payment
Please check it out now!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut magna congue, consectetur....
Tortor phasellus at augue neque. Mauris sodales, eros et mollis hendrerit, est metus accumsan est...
Make Credit Card Payment
Please check it out now!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut magna congue, consectetur....
Tortor phasellus at augue neque. Mauris sodales, eros et mollis hendrerit, est metus accumsan est...
Make Credit Card Payment
Please check it out now!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut magna congue, consectetur....
Tortor phasellus at augue neque. Mauris sodales, eros et mollis hendrerit, est metus accumsan est...
Make Credit Card Payment
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut magna congue, consectetur....
Tortor phasellus at augue neque. Mauris sodales, eros et mollis hendrerit, est metus accumsan est...
Forms
Tabs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut magna congue, consectetur tortor quis, lacinia mauris. Phasellus at augue neque. Mauris sodales, eros et mollis hendrerit, est metus accumsan est, id consequat mauris odio nec nibh. Proin porta at magna eu aliquet. Ut mollis velit eu pellentesque mollis. Fusce placerat vestibulum erat vitae molestie. Quisque porttitor iaculis quam vel facilisis. Integer ultricies arcu quis metus consequat rutrum. Pellentesque pulvinar a arcu a imperdiet.
Tabs with links
Tab 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut magna congue, consectetur tortor quis, lacinia mauris. Phasellus at augue neque. Mauris sodales, eros et mollis hendrerit, est metus accumsan est, id consequat mauris odio nec nibh. Proin porta at magna eu aliquet. Ut mollis velit eu pellentesque mollis. Fusce placerat vestibulum erat vitae molestie. Quisque porttitor iaculis quam vel facilisis. Integer ultricies arcu quis metus consequat rutrum. Pellentesque pulvinar a arcu a imperdiet.
Tab 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut magna congue, consectetur tortor quis, lacinia mauris. Phasellus at augue neque. Mauris sodales, eros et mollis hendrerit, est metus accumsan est, id consequat mauris odio nec nibh. Proin porta at magna eu aliquet. Ut mollis velit eu pellentesque mollis. Fusce placerat vestibulum erat vitae molestie. Quisque porttitor iaculis quam vel facilisis. Integer ultricies arcu quis metus consequat rutrum. Pellentesque pulvinar a arcu a imperdiet.
Tab 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut magna congue, consectetur tortor quis, lacinia mauris. Phasellus at augue neque. Mauris sodales, eros et mollis hendrerit, est metus accumsan est, id consequat mauris odio nec nibh. Proin porta at magna eu aliquet. Ut mollis velit eu pellentesque mollis. Fusce placerat vestibulum erat vitae molestie. Quisque porttitor iaculis quam vel facilisis. Integer ultricies arcu quis metus consequat rutrum. Pellentesque pulvinar a arcu a imperdiet.
Tab 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut magna congue, consectetur tortor quis, lacinia mauris. Phasellus at augue neque. Mauris sodales, eros et mollis hendrerit, est metus accumsan est, id consequat mauris odio nec nibh. Proin porta at magna eu aliquet. Ut mollis velit eu pellentesque mollis. Fusce placerat vestibulum erat vitae molestie. Quisque porttitor iaculis quam vel facilisis. Integer ultricies arcu quis metus consequat rutrum. Pellentesque pulvinar a arcu a imperdiet.
Tab 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut magna congue, consectetur tortor quis, lacinia mauris. Phasellus at augue neque. Mauris sodales, eros et mollis hendrerit, est metus accumsan est, id consequat mauris odio nec nibh. Proin porta at magna eu aliquet. Ut mollis velit eu pellentesque mollis. Fusce placerat vestibulum erat vitae molestie. Quisque porttitor iaculis quam vel facilisis. Integer ultricies arcu quis metus consequat rutrum. Pellentesque pulvinar a arcu a imperdiet.
Tab 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut magna congue, consectetur tortor quis, lacinia mauris. Phasellus at augue neque. Mauris sodales, eros et mollis hendrerit, est metus accumsan est, id consequat mauris odio nec nibh. Proin porta at magna eu aliquet. Ut mollis velit eu pellentesque mollis. Fusce placerat vestibulum erat vitae molestie. Quisque porttitor iaculis quam vel facilisis. Integer ultricies arcu quis metus consequat rutrum. Pellentesque pulvinar a arcu a imperdiet.
Table
| Head 1 | Head 2 | Head 3 | Head 4 |
| Cell 1 | Cell 2 | Cell 3 | Cell 4 |
| Cell 1 | Cell 2 | Cell 3 | Cell 4 |
| Cell 1 | Cell 2 | Cell 3 | Cell 4 |
| Cell 1 | Cell 2 | Cell 3 | Cell 4 |
Tabs as Accordion
Tab 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut magna congue, consectetur tortor quis, lacinia mauris. Phasellus at augue neque. Mauris sodales, eros et mollis hendrerit, est metus accumsan est, id consequat mauris odio nec nibh. Proin porta at magna eu aliquet. Ut mollis velit eu pellentesque mollis. Fusce placerat vestibulum erat vitae molestie. Quisque porttitor iaculis quam vel facilisis. Integer ultricies arcu quis metus consequat rutrum. Pellentesque pulvinar a arcu a imperdiet.
Tab 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut magna congue, consectetur tortor quis, lacinia mauris. Phasellus at augue neque. Mauris sodales, eros et mollis hendrerit, est metus accumsan est, id consequat mauris odio nec nibh. Proin porta at magna eu aliquet. Ut mollis velit eu pellentesque mollis. Fusce placerat vestibulum erat vitae molestie. Quisque porttitor iaculis quam vel facilisis. Integer ultricies arcu quis metus consequat rutrum. Pellentesque pulvinar a arcu a imperdiet.
Tab 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut magna congue, consectetur tortor quis, lacinia mauris. Phasellus at augue neque. Mauris sodales, eros et mollis hendrerit, est metus accumsan est, id consequat mauris odio nec nibh. Proin porta at magna eu aliquet. Ut mollis velit eu pellentesque mollis. Fusce placerat vestibulum erat vitae molestie. Quisque porttitor iaculis quam vel facilisis. Integer ultricies arcu quis metus consequat rutrum. Pellentesque pulvinar a arcu a imperdiet.
Icons
arrow-up arrow-down arrow-left arrow-right triangle-up triangle-down triangle-left triangle-right wedge-up wedge-down wedge-left (prev) wedge-right (next) arrow-up-circle arrow-down-circle arrow-left-circle arrow-right-circle triangle-up-circle triangle-down-circle triangle-left-circle triangle-right-circle wedge-up-circle wedge-down-circle wedge-left-circle wedge-right-circle arrow-up-outline arrow-down-outline arrow-left-outline arrow-right-outline triangle-up-outline triangle-down-outline triangle-left-outline triangle-right-outline wedge-up-outline wedge-down-outline wedge-left-outline wedge-right-outline alert question info warning question-triangle info-triangle warning-outline question-tri-outline info-tri-outline error question-circle info-circle error-outline question-ring info-ring plus minus close plus-circle minus-circle close-circle plus-ring minus-ring close-ring search check back forward search-circle check-circle back-circle forward-circle search-ring check-ring back-ring forward-ring user user-add user-check locator cart cart-open card rcw-credit dollar menu contact blog tags truck lock loading refresh dealzone email sofa bedroom table desk rug patio lamp tv movies laptop refrigerator laundry cooking dishwasher microwave vacuum blender trash twin twin-xl full queen king cal-king wood tile eight-ball runner flower grill shipping box gaming last first heart print settings list grid history home popout pdf facebook twitter pinterest pinterest-circle-line google google-plus youtube instagram mail bolt phone tablet air-conditioner water audio camera camcorder snowflake logo adjustable-bed commercial warranty laminate carpet vinyl edit compass2 key telegram eye-blocked appleinc android windows windows8 garage safe upload1-star 2-star 3-star 4-star 5-star 0-5-star 1-5-star 2-5-star 3-5-star 4-5-star