Pattern Library

Follow Me

Menu

Style Guide

About the Pattern Library

A byproduct of the Style Guide; a Pattern Library is a collection of the combined atomic elements that make up a site and become modules and components. Ensuring consistency across a website can be extremely difficult. Pattern Libraries aim to quell that arduous effort. By providing pre-compiled elements, components, and modules - displaying how they are formed and used provides a benefit to developers who are coming into the project after it has started, or possibly taking over a project as a whole.

Box
Isolate

The box is the simplest of components, it is more for illustrative purposes than anything. The classname is .box and any other element of component can go inside of it. This is styled with a border mostly so it can be seen.

The is a sub-header box

<div class="box">
  <h3>The is a sub-header box</h3>
</div>
Breadcrumbs
Isolate

Breadcrumbs are a graphical element used as a navigational aid for users. It serves the purpose of marking the path a user took to get wheere they are. These are largely unstyled but follow the typical convention of a horizontal list of links. Any of the links can be clicked to jump back to a specific spot.

<ul class="horizontal slashes">
  <li>
    <a href=''>Home</a>
  </li>
  <li>
    <a href=''>Secondary</a>
  </li>
  <li>
    <a href=''>Tertiary</a>
  </li>
</ul>
Forms
Isolate

A pretty standard form to allow users to enter requested data. Most every form element is covered in this sample. Input fields, checkboxes, radio buttons, select dropdowns, etc. alos included is a submit button and a reset, or clear, button that wipes any filled-in information to be wiped.

* Indicates a required field

Contact Information

Checkbox & Radio Inputs

<input type="checkbox" class="switch" id="switch-this" name="switch-this" checked>
<label for="switch-this">I choose this</label>

<input type="checkbox" class="switch" id="switch-that" name="switch-that">
<label for="switch-that">I choose that</label>

<input type="radio" class="radio" id="radio-this" name="sex" value="male">
<label for="radio-this">Male</label>

<input type="radio" class="radio" id="radio-that" name="sex" value="female">
<label for="radio-that">Female</label>

Datalist Field

Search Field

If you see this, leave this form field blank. 
<fieldset>
  <div class="formitem">
    <label for="generic" class="visually-hidden">Generic</label>
    <input type="text" id="" class="" name="" value="" placeholder="Generic" tabindex="21" required>
  </div>
</fieldset>

Select with a Link

Select elements are native parts of web forms; however, they will not naturally take links as values. Having the ability to create a dropdown that contains a series of links can be an effective method to minimize the real estate impact on the UI.

<div class="select">
  <select name="" class="selectLink">
    <option value="null">Select a link</option>
    <option value="http://google.com">Go</option>
    <option value="http://google.com">Goo</option>
    <option value="http://google.com">Goog</option>
    <option value="http://google.com">Googl</option>
    <option value="http://google.com">Google</option>
  </select>
</div>
Lists
Isolate

Unordered and ordered lists are composed virtually the same. The <ul> is used for non-sequential orderingm while the <ol> is for specific ordering and are preceeded by numbers by default. I start out by stripping all styling from any lists, including padding and margin. Bulleted lists are then classed as <ul class="bulleted>, etc. Lists also get classes added to the first and last item in each (.js-first / .js-last), this gets used for removing any border that we don't want to appear at the top or bottom in particular. Examples below.

A Basic Unordered List

  • This is a list item in an unordered list
  • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
  • Lists can be nested inside of each other
    • This is a nested list item
    • This is another nested list item in an unordered list
  • This is the last list item
<ul>
    <li>This is a list item in an unordered list</li>
    <li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line. </li>
    <li>
        Lists can be nested inside of each other
        <ul>
            <li>This is a nested list item</li>
            <li>This is another nested list item in an unordered list</li>
        </ul>
    </li>
    <li>This is the last list item</li>
</ul>

A Vertical Bulleted Unordered List

  • This is a list item in an unordered list
  • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
  • Lists can be nested inside of each other
    • This is a nested list item
    • This is another nested list item in an unordered list
  • This is the last list item
<ul class="vertical bulleted">
    <li>This is a list item in an unordered list</li>
    <li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line. </li>
    <li>
        Lists can be nested inside of each other
        <ul>
            <li>This is a nested list item</li>
            <li>This is another nested list item in an unordered list</li>
        </ul>
    </li>
    <li>This is the last list item</li>
</ul>

Ordered List

  1. This is a list item in an ordered list
  2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
  3. Lists can be nested inside of each other
    1. This is a nested list item
    2. This is another nested list item in an ordered list
  4. This is the last list item
<ol>
    <li>This is a list item in an ordered list</li>
    <li>An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.</li>
    <li>
        Lists can be nested inside of each other
        <ol>
            <li>This is a nested list item</li>
            <li>This is another nested list item in an ordered list</li>
        </ol>
    </li>
    <li>This is the last list item</li>
</ol>

Definition List

Definition List
A number of connected items or names written or printed consecutively, typically one below the other.
This is a term.
This is the definition of that term, which both live in a dl.
Here is another term.
And it gets a definition too, which is this line.
Here is term that shares a definition with the term below.
And it gets a definition too, which is this line.
<dl>
    <dt>Definition List</dt>
    <dd>A number of connected items or names written or printed consecutively, typically one below the other.</dd>
    <dt>This is a term.</dt>
    <dd>This is the definition of that term, which both live in a dl.</dd>
    <dt>Here is another term.</dt>
    <dd>And it gets a definition too, which is this line.</dd>
    <dt>Here is term that shares a definition with the term below.</dt>
    <dd>And it gets a definition too, which is this line.</dd>
</dl>

Style those lists!

Vertical - adds some breathing room

  • Lorem
  • Ipsum
  • Dolor

Vertical Lined - adds some visuals breaks between li's

  • Lorem
  • Ipsum
  • Dolor

Vertical Lined - adds some visuals breaks between li's

  • Lorem
  • Ipsum
  • Dolor

Vertical Lined & Striped - well, you get it!

  • Lorem
  • Ipsum
  • Dolor

Horizontal Slashes - add dividers to your list

  • Lorem
  • Ipsum
  • Dolor

Horizontal Pipes - add dividers to your list

  • Lorem
  • Ipsum
  • Dolor
Summary
Isolate

Super Cool; the Summary element is a reveal box that can be clicked to show additional information to the user. For browsers that don't support the element, it jsut defaults open - which is not a bad fallback.

Summary

Summary

If your browser supports the details element, it should allow you to expand and collapse this text by clicking the triangle.

<details closed>
  <summary>Summary</summary>
  <p>If your browser supports the details element, it should allow
you to expand and collapse this text by clicking the triangle.</p>
</details>
Modals
Isolate

A modal is a graphical element used to subordinate a pages main content. The modal node is a child of the parent page and contains tangential information relevant to that parent. Using modals to "takeover" a page is evil. Don't do it!

Modals can closed by clicking the "X" provided or anywhere else on the page.

<button id="1" class="btn btn-primary modal-button" type="button">Modal 1</button>

<div class="modal">

  <div id="modal1" class="modal-container">
    <div class="modal-close">&times;</div>
    <div id="modal-content">

      <div class="modal-header">
        <h3>Modal #1</h3>
      </div>

      <div class="modal-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, officia, quaerat, incidunt, ratione minus blanditiis ipsum ducimus eum commodi reiciendis atque dolores cumque eaque? Qui, voluptate, quis nisi accusamus voluptatem distinctio nemo facere labore error tenetur veniam id rerum quisquam recusandae aspernatur quam in. Eligendi, sit, sunt provident atque dicta illo dolorem adipisci voluptatum quis velit ratione nam libero necessitatibus nisi optio officia debitis voluptatem dolorum fugit voluptas. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </p>
      </div>

      <div class="modal-footer">

      </div>

    </div>
  </div>
  <div class="modal-overlay"></div>
</div>
Pagination
Isolate

Pagination, similar to Breadcrumbs, are a user-interfacer method of providing contextual pathing to a user. Pagination can be numbered as a method of breaking up articles or content into discrete sections, or it can be "Previous" or "Next" for a single continuous article broken into multiple pages. Using the wrong signals in pagination can lead to confusion for the user.

<div class="pagination">
  <ol>
    <li>
        <a class="muted" href=""><i class="fa fa-chevron-left"></i> <span class="pag_text">Prev</span></a>
    </li>
    <li>
        <a class="js-active muted" href="">1</a>
    </li>
    <li>
      <a href="">2</a>
    </li>
    <li>
      <a href="">3</a>
    </li>
    <li>
      <a href="">4</a>
    </li>
    <li>
        <a href=""><span class="pag_text">Next</span> <i class="fa fa-chevron-right"></i></a>
    </li>
  </ol>
</div>
Pills
Isolate

Pills, or Notifications, help keep a user informed of something that has occured. By design, these pills are only static elements that would require a logic or scripting language to hook them up on another element.

  • 5
  • 17
  • 23
  • 7
  • 5
  • 17
  • 23
  • 7 
<label for="">Number of members</label>
<span class="pill">5</span>

<label for="">Fave Drake songs</label>
<span class="pill-white">17</span>

<label for="">Number of times my daughter has watched Frozen</label>
<span class="pill-error">23</span>

<label for="">Number of times I have watched Frozen</label>
<span class="pill-success">7</span>

<hr>

<span class="pill">5</span>
<label for="">Number of members</label>

<span class="pill-white">17</span>
<label for="">Fave Drake songs</label>

<span class="pill-error">23</span>
<label for="">Number of times my daughter has watched Frozen</label>

<label for="">Number of times I have watched Frozen</label>
<span class="pill-success">7</span>

<label for="">You purchased this item <span class="pill-success">23</span> times</label>
Accordion
Isolate 

<div class="accordion">
  <ul>
    <li><h6>Lorem ipsum dolor</h6></li>
    <li><h6>Lorem ipsum dolor</h6>
      <ul>
        <li><a href="">Lorem</a></li>
        <li><a href="">Ipsum</a></li>
        <li><a href="">Dolor</a></li>
        <li><a href="">Amet</a></li>
        <li><a href="">Flipsum</a></li>
      </ul>
    </li>
    <li><h6>Lorem ipsum dolor</h6></li>
    <li><h6>Lorem ipsum dolor</h6></li>
    <li><h6>Lorem ipsum dolor</h6>
      <ul>
        <li><a href="">Lorem</a></li>
        <li><a href="">Ipsum</a></li>
        <li><a href="">Dolor</a></li>
        <li><a href="">Amet</a></li>
        <li><a href="">Flipsum</a></li>
      </ul>
    </li>
  </ul>
</div>
Dynamic Message Boxes
Isolate

The message, or alert, box is a method of alerting a user to a success, a failure, or otherwise importantant contextual information that shlud stand-out due to it's importance. These would be event-propogated as part of a usage flow.

loading test message
valid test message
warning test message 
<div class="message-loading">
  <span class="message">test message</span>
</div>

<div class="message-valid">
  <span class="message">test message</span>
</div>

<div class="message-warning">
  <span class="message">test message</span>
</div>
Static Information Boxes
Isolate

Just like the Message Box, the Static Information Boxes contain information useful or need to the user. The are intended to be written in the markup and not injected as an event.

There aren't any pertinents here for you
There aren't any pertinents here for you
There aren't any pertinents here for you 
<span class="message"><i class="glg-download"></i> There aren't any pertinents here for you</span>
Table
Isolate

One of the most semantic elements in the framework; the table is here mostly so we don't have to look up the best practices for marking them up when needed. We have a few different methods for making tables responsive, but had no intention of commiting to one in the Pattern Library.

Items Qty Price
Envisioning Information By Edward R. Tufte – Hardcover In Stock 1 $33.32
Outliers By Malcolm Gladwell – Hardcover In Stock 2 $33.58 ($16.79 × 2)
Don’t Make Me Think By Steve Krug – Paperback Out of Stock 1 $22.80
Steve Jobs By Walter Isaacson – Hardcover In Stock 1 $17.49
Subtotal $107.19
Tax $10.71
Total $117.90 
<table>
  <thead>
    <tr>
      <th colspan="2">Items</th>
      <th class="qty">Qty</th>
      <th class="price">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="item">Envisioning Information <span>By Edward R. Tufte – Hardcover</span></td>
      <td class="stock in">In Stock</td>
      <td class="qty">1</td>
      <td class="price">$33.32</td>
    </tr>
    <tr>
      <td class="item">Outliers <span>By Malcolm Gladwell – Hardcover</span></td>
      <td class="stock in">In Stock</td>
      <td class="qty">2</td>
      <td class="price">$33.58 <span>($16.79 × 2)</span></td>
    </tr>
    <tr>
      <td class="item">Don’t Make Me Think <span>By Steve Krug – Paperback</span></td>
      <td class="stock out">Out of Stock</td>
      <td class="qty">1</td>
      <td class="price">$22.80</td>
    </tr>
    <tr>
      <td class="item">Steve Jobs <span>By Walter Isaacson – Hardcover</span></td>
      <td class="stock in">In Stock</td>
      <td class="qty">1</td>
      <td class="price">$17.49</td>
    </tr>
  </tbody>
  <tfoot>
    <tr class="sub">
      <td colspan="3">Subtotal</td>
      <td>$107.19</td>
    </tr>
    <tr class="tax">
      <td colspan="3">Tax</td>
      <td>$10.71</td>
    </tr>
    <tr class="total">
      <td colspan="3">Total</td>
      <td>$117.90</td>
    </tr>
  </tfoot>
</table>

Version: 0.2.1 -- Updated: 2022-06-20 17:52:46 +0000

FIN.