Styleguide

Colors

#333
primary
#333
body
#333
heading
#fff
heading-light
#666
secondary
#fff
white
orange
accent
#fff
background-default
rgb(95, 95, 95)
background-alt
#333
link
#666
link-hover
#fff
input-background
#333
input-border
blue
input-border-focus
gray
input-label
red
input-error
gray
input-disabled
rgba(75, 157, 249, 1)
button-primary-bg
#fff
button-primary-color
rgba(17,17,17,.9)
tooltip-bg
#333
icons
#f0f0f0
message-info
#dff0d8
message-success
#f2dede
message-error

Variables

color-primary: #333
color-body: #333
color-heading: #333
color-heading-light: #fff
color-secondary: #666
color-white: #fff
color-accent: orange
color-background-default: #fff
color-background-alt: rgb(95, 95, 95)
color-link: #333
color-link-hover: #666
color-input-background: #fff
color-input-border: #333
color-input-border-focus: blue
color-input-label: gray
color-input-error: red
color-input-disabled: gray
color-button-primary-bg: rgba(75, 157, 249, 1)
color-button-primary-color: #fff
color-tooltip-bg: rgba(17,17,17,.9)
color-icons: #333
color-message-info: #f0f0f0
color-message-success: #dff0d8
color-message-error: #f2dede
spacing-none: 0
spacing-xl: 80px
spacing-lg: 50px
spacing-md: 30px
spacing-sm: 20px
spacing-xs: 10px
grid-columns: 12
grid-gutters: 15px
font-primary: sans-serif
font-secondary: serif
font-heading: serif
font-size-body: 14px
font-size-large: 16px
font-size-small: 12px
line-height: 1.1
line-height-large: 1.5
font-light: 300
font-regular: 400
font-semibold: 600
font-bold: 700
font-xbold: 800
heading-line-height: 1.2
heading-font-weight: bold
heading-1-size: 45px
heading-1-mobile-size: 30px
heading-2-size: 30px
heading-2-mobile-size: 25px
heading-3-size: 25px
heading-3-mobile-size: 20px
heading-4-size: 16px
heading-4-mobile-size: 14px
heading-5-size: 14px
heading-5-mobile-size: 14px
stretch-spacing: 2px
table-cell-padding: 10px
table-sm-cell-padding: 5px
table-bg: transparent
table-bg-accent: #f9f9f9
table-bg-hover: #f5f5f5
table-bg-active: #f5f5f5
table-border-width: 1px
table-border-color: #eceeef
message-border-radius: 2px
breakpoint-desktop-wide: 100vw
breakpoint-desktop: 1439px
breakpoint-tablet: 1023px
breakpoint-mobile: 767px

Mixins

Clearfix

@mixin clearfix;

Outputs

&::after {
  content: '';
  display: table;
  clear: both;
}

Buttons

@mixin button backgroundColor, fontColor, borderColor, hoverBackground, hoverColor;

Outputs

```css
.button {
  display: inline-block;
  background-color: rgba(75, 157, 249, 1);
  line-height: 1;
  text-align: center;
  font-size: 14px;
  padding: 12px 14px;
  border-radius: 3px;
  border: 2px solid transparent;
  vertical-align: middle;
  cursor: pointer;
  -webkit-transition: color 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: color 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  color: #fff;
}
.button:hover,
  .button:active,
  .button.active,
  .button:focus {
  background-color: rgb(74, 135, 204);
  color: #fff;
}

Primary Button

<button class="button">Primary Button</button>
<a class="button">Primary Link Button</a>

Outline Button

<button class="button-outline">Primary Button</button>
<a class="button-outline">Primary Link Button</a>

Headings

@mixin heading $size, $mobileSize;
@mixin heading var(--heading-1-size), var(--heading-1-mobile-size);

Outputs

.heading-1 {
  font-family: serif;
  color: #333;
  line-height: 120%;
  font-size: 45px;
}
@media (--mobile) {
  .heading-1 {
    font-size: 30px;
  }
}

Message

@mixin message red;

Input

@mixin input $background, $color, $colorDisabled, $border, $borderFocus, $borderDisabled;

Typography

Headings

<div class="heading-1">Heading 1</div>
<div class="heading-2">Heading 2</div>
<div class="heading-3">Heading 3</div>
<div class="heading-4">Heading 4</div>
<div class="heading-5">Heading 5</div>
<div class="heading-6">Heading 5</div>

Fonts

<p>Body Style</p>
<p class="font-primary">Primary Style</p>
<p class="font-secondary">Secondary Font Style</p>

Alignment

<p class="text-left">Some Text</p>
<p class="text-center">Some Text</p>
<p class="text-right">Some Text</p>
<p class="text-justify">Curabitur a fusce hendrerit potenti mi vestibulum volutpat ullamcorper ac mollis ad nunc condimentum dolor a a suscipit ad vestibulum erat netus est id a condimentum vestibulum phasellus. Vestibulum litora lacus ante vitae non scelerisque vivamus facilisi curabitur in feugiat volutpat mus ut suspendisse nostra commodo elementum a fames augue libero mi bibendum. Mattis auctor a facilisi tristique dui class parturient faucibus sagittis consequat volutpat condimentum elit enim at primis condimentum torquent a in. A imperdiet vestibulum condimentum a quis nam mi vel hendrerit sem cubilia justo condimentum consectetur adipiscing. Facilisis lacinia ultrices etiam sociosqu ad a parturient ac leo class et potenti volutpat nostra pharetra semper parturient sociosqu suspendisse felis ac adipiscing. Sed commodo venenatis scelerisque a vehicula risus nullam dictumst et cras a suspendisse fusce adipiscing quisque dignissim quis lacinia suspendisse condimentum est mi augue a.</p>

Transform

<p class="text-lowercase">Some Text</p>
<p class="text-uppercase">Some Text</p>
<p class="text-capitalize">some text</p>

Weight

<p class="font-light">Some Text</p>
<strong class="font-regular">Some Text</strong>
<p class="font-semibold">Some Text</p>
<strong>Some Text</strong>
<p class="font-bold">Some Text</p>
<p class="font-xbold">Some Text</p>

Size

<p class="font-large">Some Text</p>
<p class="font-small">Some Text</p>
<p class="font-body">Some Text</p>

Colors

<div style="background: #000" class="heading--light">Light Text</div>

Stretch

<div class="text-stretch">Text Stretch</div>

UGC

<div class="ugc">
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <p>Default body font</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <ol>
    <li>Ordered Item 1</li>
    <li>Ordered Item 2</li>
    <li>Ordered Item 3</li>
  </ol>
  <table>
    <thead>
      <tr>
        <th>Table Header 1</th>
        <th>Table Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Table Header 1</td>
        <td>Table Header 2</td>
      </tr>
    </tbody>
  </table>
</div>

Lists

Unstyled

<ul class="list-unstyled">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Inline

<ul class="list-inline">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Forms

Form

<form class="form">
</form>

Labels

  <form class="form">
    <label class="spacing-xs">Example Input</label>
    <input id="exampleInput" type="text" placeholder="Example">
  </form>

Inputs

  <form class="form">
    <label class="spacing-xs">Text</label>
    <input class="spacing-sm" type="text" placeholder="Text">
    <label class="spacing-xs">Email</label>
    <input class="spacing-sm" type="email" placeholder="Email">
    <label class="spacing-xs">Password</label>
    <input class="spacing-sm" type="password" placeholder="Password">
    <label class="spacing-xs">Url</label>
    <input class="spacing-sm" type="url" placeholder="Url">
    <label class="spacing-xs">Telephone</label>
    <input class="spacing-sm" type="tel" placeholder="Telephone">
    <label class="spacing-xs">Search</label>
    <input class="spacing-sm" type="search" placeholder="Search">
    <label class="spacing-xs">Number</label>
    <input class="spacing-sm" type="number" placeholder="Number">
    <label class="spacing-xs">Date</label>
    <input class="spacing-sm" type="date" placeholder="Date">
    <label class="spacing-xs">Date Time</label>
    <input class="spacing-sm" type="datetime" placeholder="Date Time">
    <label class="spacing-xs">Date Time Local</label>
    <input class="spacing-sm" type="datetime-local" placeholder="Date Time Local">
    <label class="spacing-xs">Month</label>
    <input class="spacing-sm" type="month" placeholder="Month">
    <label class="spacing-xs">Week</label>
    <input class="spacing-sm" type="week" placeholder="Week">
    <label class="spacing-xs">Time</label>
    <input class="spacing-sm" type="time" placeholder="Time">
    <label class="spacing-xs">Textarea</label>
    <textarea class="spacing-sm" placeholder="Textarea"></textarea>
    <label class="spacing-xs">Select</label>
    <select>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>
  </form>

Error Text

  <form class="form">
    <div class="error">
      <label class="spacing-xs">Some input</label>
      <input class="spacing-xs" type="text" placeholder="Error">
      <small>This field is required</small>
    </div>
  </form>

Tables

Basic

<table class="table">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Item 1</td>
      <td>Item 2</td>
      <td>Item 3</td>
    </tr>
  </tbody>
</table>

Condensed with half padding

<table class="table table-sm">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Item 1</td>
      <td>Item 2</td>
      <td>Item 3</td>
    </tr>
  </tbody>
</table>

Bordered version

Add borders all around the table and between all the columns.

<table class="table table-bordered">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Item 1</td>
      <td>Item 2</td>
      <td>Item 3</td>
    </tr>
  </tbody>
</table>

Zebra-striping

Default zebra-stripe styles (alternating gray and transparent backgrounds)

<table class="table table-striped">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Item 1</td>
      <td>Item 2</td>
      <td>Item 3</td>
    </tr>
  </tbody>
</table>

Hover effect

Placed here since it has to come after the potential zebra striping

<table class="table table-hover">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Item 1</td>
      <td>Item 2</td>
      <td>Item 3</td>
    </tr>
  </tbody>
</table>

Responsive tables

Wrap your tables in .table-responsive and we'll make them mobile friendly by enabling horizontal scrolling. Only applies <768px. Everything above that will display normally.

min-height: 0.01% is a workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)

<div class-"table-responsive">
<table class="table">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Item 1</td>
      <td>Item 2</td>
      <td>Item 3</td>
    </tr>
  </tbody>
</table>
</div>

Components

Tabs


<div class="tabs">

  <!-- active tab on page load gets checked attribute -->
  <input type="radio" id="tab1" name="tabGroup1" class="tab" checked>
  <label for="tab1">Short</label>

  <input type="radio" id="tab2" name="tabGroup1" class="tab">
  <label for="tab2">Medium</label>

  <input type="radio" id="tab3" name="tabGroup1" class="tab">
  <label for="tab3">Long</label>

  <div class="tab-content">
    <h3>Short Section</h3>
    <p>Praesent nonummy mi in odio. Nullam accumsan lorem in dui. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Nullam accumsan lorem in dui. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
  </div>

  <div class="tab-content">
    <h3>Medium Section</h3>
    <p>Praesent nonummy mi in odio. Nullam accumsan lorem in dui. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Nullam accumsan lorem in dui. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>

    <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Morbi mattis ullamcorper velit. Pellentesque posuere. Etiam ut purus mattis mauris sodales aliquam. Praesent nec nisl a purus blandit viverra.</p>
  </div>

  <div class="tab-content">
    <h3>Long Section</h3>
    <p>Praesent nonummy mi in odio. Nullam accumsan lorem in dui. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Nullam accumsan lorem in dui. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>

    <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Morbi mattis ullamcorper velit. Pellentesque posuere. Etiam ut purus mattis mauris sodales aliquam. Praesent nec nisl a purus blandit viverra.</p>

    <p>Praesent nonummy mi in odio. Nullam accumsan lorem in dui. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Nullam accumsan lorem in dui. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>

    <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Morbi mattis ullamcorper velit. Pellentesque posuere. Etiam ut purus mattis mauris sodales aliquam. Praesent nec nisl a purus blandit viverra.</p>
  </div>

</div>

Tooltip

<button class="btn tooltip tooltip-up" data-tooltip-title="Whats up!">Tooltip Up</button>
<button class="btn tooltip tooltip-right" data-tooltip-title="Whats up!">Tooltip Right</button>
<button class="btn tooltip tooltip-down" data-tooltip-title="Whats up!">Tooltip Down</button>
<button class="btn tooltip tooltip-left" data-tooltip-title="Whats up!">Tooltip Left</button>

Utils

Clearfix

<div class="clearfix">
  <div class="pull-left">...</div>
  <div class="pull-left">...</div>
</div>
<p>Some text below</p>

Styles

Messages

<div class="message-info margin-bottom-sm">This is an info message</div>
<div class="message-success margin-bottom-sm">This is an success message</div>
<div class="message-error margin-bottom-sm">This is an error message</div>
<div class="message-error">
  This is multiple error messages
  <ul>
    <li>Error message 1</li>
    <li>Error message 2</li>
  </ul>
</div>