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
#333
icons

Typography

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>

Helpers

<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>

Colors

<div style="background: #000" class="heading--light">Light Text</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>

Buttons

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>

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>