Style Guide

Home/Style GuideQuick Links

Buttons

You can easily create buttons of a variety of shapes, styles, and sizes. All buttons must include the "btn" class, but then these modifiers may be added in combination.  There will automatically be a margin around the button added.  Some examples below, although there are many more combinations available.
Class Appearance Notes
btn btn-primary
Primary
 
btn btn-danger
Danger
 
btn btn-lg btn-primary
Large Primary
More padding, slightly larger font
btn btn-sm btn-primary
Small Primary
Less padding, slightly smaller font
btn btn-danger btn-block
Block Danger
Fills width of space
btn btn-danger btn-rounded
Rounded Danger
Rounded Corners
btn btn-info btn-rounded
Primary Drop Shadow
Drop shadow, only in teal

Style Blocks

There are many ways to call out certain content including code blocks and colored indents for different functions.

Callouts

These are code snippets to wrap certain content to call different amounts of attention to them
<div class="notice notice-info">
<strong>Info Message Example</strong>
Here is an example of a regular callout
</div>
Info Message Example Here is an example of a regular callout.  
 
<div class="notice notice-danger notice-lg">
<strong>Important Message Example</strong> 
Here is an example of an important callout that also has the class notice-lg modifier, 
giving it more padding, and also adding a block element to the bolded text. 
</div>
Important Message Example Here is an example of an important callout that also has the class notice-lg modifier, giving it more padding, and also adding a block element to the bolded text.  
 
<div class="notice notice-danger ">
<strong>Warning Message Example</strong> 
Here is an example of a warning callout.
</div>
Warning Message Example Here is an example of a warning callout.
 
<div class="notice notice-success ">
<strong>Success Message Example</strong> 
Here is an example of a success callout.
</div>
Success Message Example Here is an example of a success callout.

Background Modifications

Class Name Appearance Notes
bg-danger    
bg-info    
bg-success    
bg-active    
bg-red    
bg-lightred    
bg-darkRed    
bg-gray    
bg-darkGray    
bg-lightGray    
bg-teal    
bg-lightTeal    
bg-xlightTeal    
bg-darkTeal    
bg-largeCubes   Can be used in conjunction with a color
bg-medCubes    

Tables

Our default table style is striped, responsive, with some padding and bolded headers.  For a template you can use the snippet below.  
<table class="table table-responsive table-striped">
    <tr>
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
    </tr>
    <tr>
         <td>Cell 1</td>
         <td>Cell 2</td>
         <td>Cell 3</td>
    </tr> 
    <tr>
         <td>Cell 4</td>
         <td>Cell 5</td>
         <td>Cell 6</td>
    </tr>
</table>
Which produces this:
Header 1 Header 2 Header 3
Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6
You can also modify rows and cells to display in different colors
Class Name Header 2
warning Cell 2
info Cell 4
success Cell 6
danger Cell 8
active Cell 10

Text Modifications

There are a bunch of classes you can easily use to modify text including color, case, style, and size.  The default heading tags (h1, h2, etc) can also be modified to create subheadlines.
Class Appearance Notes
txt-red Red text  
txt-teal Teal text  
txt-lightTeal Light Teal text  
txt-white White text  
txt-black Black text  
txt-gray Gray text