This is a draft cheat sheet. It is a work in progress and is not finished yet.
Instructions
Find the element you want to style and add class="[class-name]" to the HTML tag. |
Examples
<h3 class="space-bot-0">Header with no bottom spacing</h3>
<p class=“rteindent1”> Paragraph text here will be indented. </p>
<table class="table">
<tr>
<td>your table</td>
</tr>
</table>
|
NOTE
You CAN use more than one class on a single element, and in the case of buttons, you need to use both the "btn" and then the preferred style (btn-primary or btn-gold, etc.). |
Example
<a class="btn btn-primary btn-block">CTA link</a>
|
Paragraph styles
TEXT INDENTION |
TEXT ALIGN |
rteindent1 |
rteleft |
rteindent2 |
rteright |
rteindent3 |
rtecenter |
rteindent4 |
rtejustify |
|
|
Spacing
space-top-0 |
space-bot-0 |
space-top-sm |
space-bot-sm |
space-top-md |
space-bot-md |
space-top-lg |
space-bot-lg |
space-top-xl |
space-bot-xl |
Table
table |
default style |
table-condensed |
same as default |
table-bordered |
adds full borders to default style |
table-striped |
adds alternating row striping |
table-hover |
adds a row highlight effect on hover |
table-responsive |
makes table responsive on smaller devices |
no-border-top |
removes gray border at the top |
Buttons & Call to Actions
btn |
default (always use) |
btn-primary |
maroon |
btn-secondary |
gray |
btn-gold |
gold |
btn-blue |
blue (only use with degrees) |
btn-lg |
makes btn size and text bigger |
btn-block |
makes btn span the width of the parent element |
btn-group |
btn-default |
|
