Buttons

Button Sizes

mini button

medium button

large button

block button

Button Colors

green button

light green button

pink button

brown button

purple button


Columns

See the Break Points

Resize screen to see where the different break points are then look at code to see what class goes with that size from below:

NOTES: Each set of columns must the wraped in the row div

Shown on x-small Shown on small Shown on medium Shown on large Shown on x-large

Shown on x-small Shown on small Shown on medium Shown on large Shown on x-large

Shown on x-small Shown on small Shown on medium Shown on large Shown on x-large


<div class="row">
    <!-- green -->
    <div class="column whole medium-two-thirds large-one-fourths" style="background-color: #cfd866">         <p>
            <span class="show small-hide">Shown on <b>x-small</b></span>
            <span class="hide small-show medium-hide">Shown on <b>small</b></span>
            <span class="hide medium-show large-hide">Shown on <b>medium</b></span>
            <span class="hide large-show x-large-hide">Shown on <b>large</b></span>
            <span class="hide x-large-show">Shown on <b>x-large</b></span>
        </p>
    </div>
    <!-- purple -->
    <div class="column whole medium-one-third large-two-forths" style="background-color: #a29ad0">         <p>
            <span class="show small-hide">Shown on <b>x-small</b></span>
            <span class="hide small-show medium-hide">Shown on <b>small</b></span>
            <span class="hide medium-show large-hide">Shown on <b>medium</b></span>
            <span class="hide large-show x-large-hide">Shown on <b>large</b></span>
            <span class="hide x-large-show">Shown on <b>x-large</b></span>
        </p>
    </div>
    <!-- brown -->
    <div class="column whole" style="background-color: #9c9485">
        <p>
            <span class="show small-hide">Shown on <b>x-small</b></span>
            <span class="hide small-show medium-hide">Shown on <b>small</b></span>
            <span class="hide medium-show large-hide">Shown on <b>medium</b></span>
            <span class="hide large-show x-large-hide">Shown on <b>large</b></span>
            <span class="hide x-large-show">Shown on <b>x-large</b></span>
        </p>
    </div>
</div>


Examples

1/4 on large screens | 1/3 on small & medium screens | 1/2 on phones


1/2 on phones | 1/1 on medium | 1/4 on large
1/2 on phones | 1/1 on medium | 1/2 on large
1/1 x-small & small & medium | 1/4 on large