Styleguide

Based on: Github repository

Buttons
Colors
Forms
Links
Logos
Tables
Toggles
Headings
Text

Buttons

Sass file: /_scss/components/buttons.scss

Primary
Button text
Reverse
Button text
Cancel/Warning
Button text
Large Buttons
Button text
No Border Buttons
Button text 
<div class="sg-header">
  Primary
</div>
<div class="sg-buttons">
  <a href="/" class="button">Button text</a>
  <button class="button">Button text</button>
  <input type="button" class="button" value="Button text">
</div>

<div class="sg-header">
  Reverse
</div>
<div class="sg-buttons sg-buttons--button-reverse">
  <a href="/" class="button-reverse">Button text</a>
  <button class="button-reverse">Button text</button>
  <input type="button" class="button-reverse" value="Button text">
</div>

<div class="sg-header">
  Cancel/Warning
</div>
<div class="sg-buttons">
  <a href="/" class="button-disable">Button text</a>
  <button class="button-disable">Button text</button>
  <input type="button" class="button-disable" value="Button text">
</div>
<div class="sg-header">

<div class="sg-header">
  Large Buttons
</div>
<div class="sg-buttons">
  <a href="/" class="button-large">Button text</a>
  <button class="button-large">Button text</button>
  <input type="button" class="button-large" value="Button text">
</div>

<div class="sg-header">
  No Border Buttons
</div>
<div class="sg-buttons">
  <a href="/" class="button-no-border">Button text</a>
  <button class="button-no-border">Button text</button>
  <input type="button" class="button-no-border" value="Button text">
</div>
</article>

Colors

Sass file: /_scss/components/variables.scss

<ul class="sg-colors">
  <li class="sg-color color--blue"></li>
  <li class="sg-color color--green-pastel"></li>
  <li class="sg-color color--light-blue"></li>
  <li class="sg-color color--dark-blue"></li>
  <li class="sg-color color--orange"></li>
  <li class="sg-color color--burnt-orange"></li>
  <li class="sg-color color--tan"></li>
  <li class="sg-color color--lighter-gray"></li>
</ul>

Forms

Sass file: /_scss/components/forms.scss

<form action="submit" class="form">
  <fieldset class="form__group">
    <fieldset class="form__fieldset">
      <label class="form__label" for="name">Name</label>
      <input type="text" class="form__input" name="name" value="" placeholder="*Required" required="">
    </fieldset>
    <fieldset class="form__fieldset">
      <label class="form__label" for="email">Email</label>
      <input type="email" class="form__input" name="email" value="" placeholder="*Required" required="">
    </fieldset>
  </fieldset>
  <fieldset class="form__group">
    <fieldset class="form__fieldset">
      <label class="form__label" for="address">Address</label>
      <input type="text" class="form__input" name="address" value="" placeholder="*Required" required="">
    </fieldset>
  </fieldset>
  <fieldset class="form__group">
    <fieldset class="form__fieldset">
      <label class="form__label" for="">Contact</label>
      <div class="form__radio">
        <input type="radio" class="form__radio" id="yes" name="contact">
        <label class="form__label" for="yes">Yes</label>
        <div class="check"></div>
      </div>
      <div class="form__radio">
        <input type="radio" id="off" name="contact">
        <label class="form__label" for="off">Off</label>
        <div class="check"></div>
      </div>
    </fieldset>
  </fieldset>
  <fieldset class="form__group">
    <fieldset class="form__fieldset">
      <label class="form__label" for="">Best time to contact you?</label>
      <div class="form__dropdown">
        <select class="form__select">
          <option class="form__option" value="morning">Morning</option>
          <option class="form__option" value="afternoon">Afternoon</option>
          <option class="form__option" value="evening">Evening</option>
        </select>
      </div>
    </fieldset>
  </fieldset>
</form>

Links

Sass file: /_scss/base/typography.scss

Clink on the link! 
<div class="sg-links">
  Clink on the <a href="/">link</a>!
</div>

Logos

Sass file: /_scss/base/base.scss

<div class="sg-logos">
  <span class="sg-logo">
    <div class="sg-header">Black</div>
    <img src="https://s3.amazonaws.com/versaralending/logo-black.png">
  </span>
  <span class="sg-logo">
    <div class="sg-header">White</div>
    <img src="https://s3.amazonaws.com/versaralending/versara-white-logo.svg">
  </span>
  <span class="sg-logo">
    <div class="sg-header">Color</div>
    <img src="https://s3.amazonaws.com/versaralending/logo-color.png">
  </span>
</div>

Tables

Sass file: /_scss/components/tables.scss

Table header 1 Table header 2 Table header 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. YES NO
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. YES NO
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. YES NO 
<table class="table">
  <thead>
    <tr>
      <th>Table header 1</th>
      <th>Table header 2</th>
      <th>Table header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
      <td><span>YES</span></td>
      <td><span>NO</span></td>
    </tr>
    <tr>
      <td>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td>
      <td><span>YES</span></td>
      <td><span>NO</span></td>
    </tr>
    <tr>
      <td>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</td>
      <td><span>YES</span></td>
      <td><span>NO</span></td>
    </tr>
  </tbody>
</table>

Toggles

Sass file: /_scss/components/toggles.scss

Inactive Active 
<div class="sg-buttons">
  <span class="toggle-off">
    <a href="/" class="toggle-off__link">Inactive</a>
  </span>
  <span class="toggle-on">
    <a href="/" class="toggle-on__link">Active</a>
  </span>
</div>

Headings

Sass file: /_scss/base/typography.scss

This is a level one heading

This is a level two heading

This is a level three heading

This is a level four heading

This is a level five heading
This is a level six heading
<h1>This is a level one heading</h1>
<h2>This is a level two heading</h2>
<h3>This is a level three heading</h3>
<h4>This is a level four heading</h4>
<h5>This is a level five heading</h5>
<h6>This is a level six heading</h6>

Text

Sass file: /_scss/base/typography.scss

Large Text, also default

Large text (20px) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt veritatis sequi nobis earum dicta vero impedit esse at, debitis doloremque eius inventore qui, et dolores eaque eos iste repellendus non.

Small Text

Default text (16px) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

UL w/ circle
  • list item
  • list item
  • list item
OL w/ numbers
  1. list item
  2. list item
  3. list item

Otherwise, OL and UL are reset without list-type for use with floats

<h6>Large Text, also default</h6>
<p class="text--large">Large text (20px) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt veritatis sequi nobis earum dicta vero impedit esse at, debitis doloremque eius inventore qui, et dolores eaque eos iste repellendus non.
</p>
<h6>Small Text</h6>
<p class="text--small">Default text (16px) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h6>UL w/ circle</h6>
<ul class="circle">
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>
<h6>OL w/ numbers</h6>
<ol class="disc">
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ol>
<p>Otherwise, OL and UL are reset without list-type for use with floats</p>