Buttons

By default, buttons are uppercase.

Button Markup
                  <button class="btn-main">Primary button</button>
                
                  <button class="btn-main btn-green">Green button</button>
                
                  <button class="btn-main btn-grey">Grey button</button>
                
                  <button class="btn-main"><i class="fa fa-plus" aria-hidden="true">Primary button</button>
                
                  <button class="btn-main btn-sm">Primary button</button>
                
                  <button class="btn-main btn-green">Green button</button>
                
                  <button class="btn-main btn-yellow">Yellow button</button>
                
                  <button class="btn-main btn-red">Red button</button>
                
                  <button class="btn-main btn-main btn-full">Full width</button>
                

Colors

The following colors are used on all the elements listed in this style guide. They were hand select from the amazon rainforest, and mixed with water from an antient well

Color Name HEX Code SASS Usage
Dark purple #927FA9 $dark-purple Purple hover in Buttons
Purple (primary) #AD96C7 $primary Buttons, links
Light purple #E5E0F0 $light-purple Accent purple color
Dark green #69B281 $dark-green Green button hover
Green (secondary) #75C58E $secondary buttons
Light green #E1F1E5 $light-green Accent green color, bad notifications
Dark yellow #E5BF5F $dark-yellow Yellow hover
Yellow #FDD268 $yellow Maybe button
Light yellow #fdedbc $light-yellow Medium notifications
Dark red #DC7E82 $dark-red Red hover
Red #F58B90 $red button
Light red #FCDFDF $light-red Bad notifications
Dark blue #3863a7 $dark-blue Blue link hover
Blue #4D98D2 $blue links
Light blue #E6EAF6 $light-blue Blue accent
Dark grey #939598 $dark-grey Grey Button hover
Grey #A7A9AC $grey Grey Button, inactive button
Light grey #BCBEC0 $light-grey Stuff
Border grey #E6E7E8 $border-grey Border for stuff
Background grey #F3F3F3 $background-grey background of all the stuff
White #FFFFFF $white Backgrounds
Black #000000 $black Text
Navigtion background #2D3039 $nav-background More stuff
Secondary navigation background #474C58 $nav-secondary-navigation More stuff

Checkbox

Not much you can do here, but worth adding

                            
                              <div class="checkbox">
                                <label><input type="checkbox" value="">Option 1</label>
                              </div>
                              <div class="checkbox">
                                <label><input type="checkbox" value="">Option 2</label>
                              </div>
                              <div class="checkbox disabled">
                                <label><input type="checkbox" value="" disabled>Unable to select</label>
                              </div>

                            
                          

Dropdowns

Dropdowns are a cool way to hide things behind a button, you'll love it.

                  
                    <div class="btn-group btn-group-sm" role="group">
                    <button type="button" class="btn btn-default-inverse">Toggle Button 1</button>
                    <button type="button" class="btn btn-default-inverse">Toggle Button 2</button>
                    <button type="button" class="btn btn-default-inverse btn-action">Active Toggle Button</button>
                    </div>
                  
                

Iconography

We use font awesome, it's pretty awesome. Can't wait for font-awesome five

Icon Usage Markup
Accordions, collapsible, down arrow
<span class="icon-arrow-down"></span>
Search button, search box
<span class="icon-search"></span>

Inputs

Rule is, first letter in first word is capitalized. Then, all other words are lower case.

                <label for="email" class="main-label">Basic input</label>
                <input type="text" class="form-control" id="usr" placeholder="Enter your basic input">
              

                <label for="email" class="main-label">Basic input</label>
                <input type="text" class="form-control" id="usr" placeholder="Enter your basic input">
              

                <label for="email" class="main-label">Basic input</label>
                <input type="text" class="form-control" id="usr" placeholder="Enter your basic input">
              

Modals

Cool little sexy thangs that pop up and give you cool instructions

                      
                        
                        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                        <div class="modal-dialog" role="document">
                        <div class="modal-content">
                        <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">× </span> </button>
                        <h2 class="modal-title" id="myModalLabel">Text only modal </h2>
                        </div>
                        <div class="modal-body">
                        <p>Here is an example modal with text only. </p>
                        </div>
                        <div class="modal-footer">
                        <button type="button" class="btn-cancel" data-dismiss="modal">Close </button>
                        <button type="button" class="btn-default">Save changes </button>
                        </div>
                        </div>
                        </div>
                        </div>
                      
                    

Notifications

People need to know what happens, for the toast

                <span class="icon-arrow-down"></span>
              

                <span class="icon-arrow-down"></span>
              

                <span class="icon-arrow-down"></span>
              

                <span class="icon-arrow-down"></span>
              

Pagination

You have to find your pages, right?

                  
                    <nav aria-label="page navigation">
                      <ul class="pagination">
                        <li>
                          <a href="#" aria-label="Previous">
                            <span aria-hidden="true"><i class="fa fa-chevron-left" aria-hidden="true"></i></span>
                          </a>
                        </li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li>
                          <a href="#" aria-label="Next">
                            <span aria-hidden="true"><i class="fa fa-chevron-right" aria-hidden="true"></i></span>
                          </a>
                        </li>
                      </ul>
                    </nav>

                  
              

Spacing

We try to give things a bit of white space to help the user identify sections without being too obnoxious. Here are some short-cut HTML classes

Class Name Usage
.margin-bottom-0 Sets margin bottom to 0px
.margin-top-0 Sets margin top to 0px
.margin-bottom-10 Sets margin bottom to 10px
.margin-top-10 Sets margin top to 10px
.margin-bottom-20 Sets margin bottom to 20px
.margin-top-20 Sets margin top to 20px
.margin-bottom-30 Sets margin bottom to 30px
.margin-top-30 Sets margin top to 30px

Tables

The main table style we use, is striped. It's pretty cool.

Column 1 header Column 2 header Column 3 header
Row 1 column 1 Row 1 column 2 Row 1 column 3
Row 2 column 1 Row 2 column 2 Row 2 column 3
Row 3 column 1 Row 3 column 2 Row 3 column 3
                       
                        <table class="table table-striped">
                          <thead>
                            <tr>
                              <th>Column 1 header</th>
                              <th>Column 2 header</th>
                              <th>Column 3 header</th>
                            </tr>
                          </thead>
                          <tr>
                            <td>Row 1 column 1</td>
                            <td>Row 1 column 2</td>
                            <td>Row 1 column 3</td>
                          </tr>
                          <tr>
                            <td>Row 2 column 1</td>
                            <td>Row 2 column 2</td>
                            <td>Row 2 column 3</td>
                          </tr>
                          <tr>
                            <td>Row 3 column 1</td>
                            <td>Row 3 column 2</td>
                            <td>Row 3 column 3</td>
                          </tr>
                        </table>

                        
                      

Tabs

I made the background dark, because we usually only use tabs on a dark background

                         
                            <ul class="nav nav-pills dark-tabs">
                              <li role="presentation" class="active dark-tabs-li">lt;a href="#" class="dark-tabs-a">Create</a><</li>
                              <li role="presentation" class="dark-tabs-li"><a href="#" class="dark-tabs-a">Design</a>></li>
                              <li role="presentation" class="dark-tabs-li"><a href="#" class="dark-tabs-a">settings</a></li>
                              <li role="presentation" class="dark-tabs-li"><a href="#" class="dark-tabs-a">share</a></li>
                              <li role="presentation" class="dark-tabs-li"><a href="#" class="dark-tabs-a">results</a></li>
                            </ul>
                          
                        

Toggle

This way or that way, which way should we go.

                         
                            <div class="btn-group" data-toggle="buttons">
                              <label class="btn btn-primary active">
                                <input type="radio" name="options" id="option1" autocomplete="off" checked> thing 1
                              </label>
                              <label class="btn btn-primary">
                                <input type="radio" name="options" id="option2" autocomplete="off"> thing 2
                              </label>
                            </div>
                          
                        

Typography

We are using a lovely font called Lato with various weights (100, 300, 400, 700, 900)

By default, all headers have no margin-top or margin-bottom. All padding and margin will be added at the row level or in some cases at the (.col-md-*) level where nesting more rows becomes unworkable.


Example Size

This is an h1

30px

This is an h2

24px

This is an h3

20px

This is an h4

14px
This is an h5
12px

By default, body text is 16px with font-weight: 400. To emphasize a word, wrap it in a <span> and add one of the classes below.

Class Name Attribute Example
.bold font-weight: 900 Example Text
.medium font-weight: 700 Example Text
.normal font-weight: 400 Example Text
.light font-weight: 300 Example Text
.italics font-weight: 100 Example Text