skill-assessment-app/app/views/styleguide.html.erb

<%
  content_for :title, "Perficient Digital - Skills Assessment Styleguide"
  content_for :category, 'Design'
  content_for :footer_title, "Styleguide"
  content_for :progress, '88'
%>


<main class="styleguide_tpl">
<h1>Perficient Digital Base Styles</h1>
 <p>The purpose of this HTML is to help determine what default settings are with Bitters and to make sure that all possible HTML Elements are included in this HTML so as to not miss any possible Elements when designing a site.</p>

  <hr>

  <h1>Headings</h1>

  <h1>h1. Heading</h1>
  <h2>h2. Heading</h2>
  <h3>h3. Heading</h3>
  <h4>h4. Heading</h4>
  <h5>h5. Heading</h5>
  <h6>h6. Heading</h6>

  <hr>

  <h1>Font Families</h1>

  <h2>HalisR</h2>
  <div id="halisr">
    <p id="primary-100">HalisR-100</p>
    <p id="primary-200">HalisR-200</p>
    <p id="primary-300">HalisR-300</p>
    <p id="primary-400">HalisR-400</p>
    <p id="primary-500">HalisR-500</p>
    <p id="primary-600">HalisR-600</p>
    <p id="primary-700">HalisR-700</p>
    <p id="primary-800">HalisR-800</p>
    <p id="primary-900">HalisR-900</p>
  </div>

  <h2>Lato</h2>
  <div id="lato">
    <p id="secondary-100">Lato-100</p>
    <p id="secondary-300">Lato-300</p>
    <p id="secondary-500">Lato-500</p>
    <p id="secondary-700">Lato-700</p>
    <p id="secondary-900">Lato-900</p>
    <p id="secondary-100-i">Lato-Italic-100</p>
    <p id="secondary-300-i">Lato-Italic-300</p>
    <p id="secondary-500-i">Lato-Italic-500</p>
    <p id="secondary-700-i">Lato-Italic-700</p>
    <p id="secondary-900-i">Lato-Italic-900</p>
  </div>

  <hr>

  <h1>Paragraph</h1>

  <p>Lorem ipsum dolor sit amet, <a href="#" title="test link">test link</a> adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</p>

  <p>Lorem ipsum dolor sit amet, <em>emphasis</em> consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</p>

  <hr>

  <h1>List Types</h1>

  <h2>Definition List</h2>
  <dl>
    <dt>Definition List Title</dt>
    <dd>This is a definition list division.</dd>
  </dl>

  <h2>Ordered List</h2>
  <ol>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
  </ol>

  <h2>Unordered List</h2>
  <ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
  </ul>

  <hr>

  <h1>Fieldsets and Form Elements</h1>

  <fieldset>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>

    <form>
      <h2>Form Element</h2>

      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.</p>

      <div class="form-group">
        <label for="text_field">Text Field</label>
        <input type="text" id="text_field" />
      </div>

      <div class="form-group">
        <label for="text_area">Textarea</label>
        <textarea id="text_area"></textarea>
      </div>
      <div class="form-group">
        <label for="text_area">Disabled Textarea</label>
        <textarea id="text_area" disabled="disabled">Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</textarea>
      </div>
      <p><label for="select_element">Select Element:</label>
        <select name="select_element">
          <optgroup label="Option Group 1">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
          </optgroup>
          <optgroup label="Option Group 2">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
          </optgroup>
      </select></p>
      <p><label for="select_element_mult">Select Element:</label>
        <select name="select_element_mult" multiple>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="1">Option 4</option>
            <option value="2">Option 5</option>
            <option value="3">Option 6</option>
      </select></p>

      <p><label for="radio_buttons">Radio Buttons:</label>
        <input type="radio" class="radio" name="radio_button" value="radio_1" id="radio_1" /><label for="radio_1">Radio 1</label>
        <input type="radio" class="radio" name="radio_button" value="radio_2" id="radio_2" /><label for="radio_2">Radio 2</label>
        <input type="radio" class="radio" name="radio_button" value="radio_3" id="radio_3" /><label for="radio_3">Radio 3</label>
      </p>

      <p><label for="checkboxes">Checkboxes:</label>
        <input type="checkbox" class="checkbox" name="checkboxes" value="check_1" id="check_1" /><label for="check_1">Checkbox 1</label>
        <input type="checkbox" class="checkbox" name="checkboxes" value="check_2" id="check_2" /><label for="check_2">Checkbox 2</label>
        <input type="checkbox" class="checkbox" name="checkboxes" value="check_3" id="check_3" /><label for="check_3">Checkbox 3</label>
      </p>

      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" class="password" name="password" id="password" />
      </div>

      <div class="error">This is a sample error message.</div>
      <div class="success">This is a sample success message.</div>
      <div class="warning">This is a sample warning message.</div>
      <div class="notice">This is a sample notice message.</div>

  <hr>

  <h1>Buttons</h1>
      <p><input type="submit" value="Primary" /></p>
      <p><button class="secondary-btn">Secondary</button></p>
      <p><button class="tertiary-btn">Tertiary</button></p>
      <p><input type="submit" value="Primary Disabled" disabled /></p>
      <p><button class="secondary-btn" disabled>Secondary Disabled</button></p>
      <p><button class="tertiary-btn" disabled>Tertiary Disabled</button></p>
    </form>
  </fieldset>

  <hr>

  <h1>Tables</h1>

  <table cellspacing="0" cellpadding="0">
    <tr>
      <th>Table Header 1</th><th>Table Header 2</th><th>Table Header 3</th>
    </tr>
    <tr>
      <td>Division 1</td><td>Division 2</td><td>Division 3</td>
    </tr>
    <tr>
      <td>Division 1</td><td>Division 2</td><td>Division 3</td>
    </tr>
    <tr>
      <td>Division 1</td><td>Division 2</td><td>Division 3</td>
    </tr>
  </table>

  <hr>
  <h1>Button Group</h1>
  <div class="btn-group">
    <button type="button">Left</button>
    <button type="button" class="selected">Middle</button>
    <button type="button">Right</button>
  </div>

</main>