Pattern Library -

Version: 0.2.6 -- Updated: 2015-12-19 05:26:55 +0000

Box

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

First Name:

Last Name:

Service Address:

Apt., Suite, or Floor:

City:

State:

ZIP Code:

Phone Number

Alternate Phone Number

Email Address:

Website:

Pick a Start Date

Pick an End Date

Leave a really complimentary comment about us here:

Choose a file:

Checkbox & Radio Inputs

I choose this

I choose that
Male

Female

<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

Internet Browsers

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

This is a list item in an ordered list
An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
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
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

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.

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 repudiandae eum eius quaerat error consectetur omnis labore fuga quo molestias non quas officiis nesciunt delectus. Totam, at, aperiam, fugiat, quam cumque quasi veritatis vel dolorum rerum odio perferendis facere obcaecati facilis officiis id vitae necessitatibus suscipit sit error odit iure tempore optio velit eos dolores doloremque aspernatur accusantium excepturi sint esse explicabo a ad eaque natus non quia praesentium. Libero, ab, iusto placeat maiores unde atque beatae sunt hic quibusdam repudiandae voluptates facere maxime laudantium illo rerum suscipit facilis quidem laborum odio consequuntur repellendus numquam in! Veniam, quasi dolor enim expedita unde. Eligendi, nesciunt voluptas eos temporibus doloribus atque sint. Quae, magni, eveniet, perferendis, voluptatum animi ullam ratione reprehenderit autem enim quidem corporis deleniti iste praesentium molestiae consequuntur pariatur esse id ipsam tenetur quaerat accusantium deserunt sed rerum corrupti unde ipsa aspernatur nulla ex ab nisi incidunt doloremque numquam est nostrum ad cum suscipit. Ut, nobis, similique, sunt commodi harum totam quibusdam alias illo cumque repellendus sequi assumenda deleniti quo saepe iste laborum modi voluptatum quam nostrum placeat dolorum ipsa dolores esse. Alias, nam, minus obcaecati in odit doloremque nobis dignissimos beatae blanditiis veniam ipsum nesciunt cumque architecto praesentium ea repellat perspiciatis qui debitis neque ut odio eaque laudantium reiciendis dolor similique hic provident quod nostrum autem tenetur pariatur aut repellendus dicta! Rem, atque, dolorem alias odit id dicta unde accusamus delectus minus ratione quis ipsa possimus iusto. Repudiandae, vel, nemo, saepe, reprehenderit ipsa provident alias aspernatur ducimus id blanditiis illum dicta optio asperiores unde quia rem earum a recusandae odit dolores! Beatae, nam, autem expedita a sapiente doloremque delectus officia eligendi. Magnam, fugiat, velit facilis cumque ab nostrum cupiditate voluptatum dolorem provident porro reiciendis doloremque accusantium harum aliquam quo. Maiores, magni, odit rem sed possimus neque sapiente dolorum unde nam expedita voluptas facere assumenda inventore sit eaque itaque nulla numquam! Obcaecati, alias, odio, numquam molestiae consequuntur totam minus ipsam autem nisi repellendus nostrum fugiat consequatur ratione velit eum temporibus praesentium?

<button id="1" class="btn btn-primary modal-button mobile-full" 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">
        <a href="" class="btn btn-primary right mobile-full">Continue</a>
      </div>

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

Tooltips

Isolate

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum tempore, labore dignissimos cupiditate? Earum asperiores. tooltip top Check me out I'm a link.. molestiae ad praesentium qui beatae nam, velit non, aliquid, fugiat impedit vitae distinctio consequatur. Neque nobis nulla vitae dolores eius!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum tempore, labore dignissimos cupiditate? Earum asperiores. tooltip bottomCheck me out I'm a link.. molestiae ad praesentium qui beatae nam, velit non, aliquid, fugiat impedit vitae distinctio consequatur. Neque nobis nulla vitae dolores eius!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum tempore, labore dignissimos cupiditate? Earum asperiores. Definition Curmudgeon
/kərˈməjən/
noun
a bad-tempered or surly person.Dictionary.com. molestiae ad praesentium qui beatae nam, velit non, aliquid, fugiat impedit vitae distinctio consequatur. Neque nobis nulla vitae dolores eius!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum tempore, labore dignissimos cupiditate? Earum asperiores. tooltip rightI'm a CTA . molestiae ad praesentium qui beatae nam, velit non, aliquid, fugiat impedit vitae distinctio consequatur. Neque nobis nulla vitae dolores eius!

With an Image

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum tempore, labore dignissimos cupiditate? Earum asperiores. tooltip with an image headshot Check me out. molestiae ad praesentium qui beatae nam, velit non, aliquid, fugiat impedit vitae distinctio consequatur. Neque nobis nulla vitae dolores eius!

<span class="has-tooltip" aria-describedby="tip1">I have a tooltip
  <span id="tip1" class="tip tip-top">Check me out <a href="http://google.com">I'm a link</a>.</span>
</span>

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.

Number of members 5
Fave Drake songs 17
Number of times my daughter has watched Frozen 23
Number of times I have watched Frozen 7

5 Number of members
17 Fave Drake songs
23 Number of times my daughter has watched Frozen
Number of times I have watched Frozen 7

You purchased this item 23 times

<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

Lorem ipsum dolor
Lorem ipsum dolor
- Lorem
- Ipsum
- Dolor
- Amet
- Flipsum
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor
- Lorem
- Ipsum
- Dolor
- Amet
- Flipsum

<div class="accordion">
  <div class="expandable">
    <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>
</div>

Tabs

Isolate

Tab 1 Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint sapiente odio hic expedita inventore nesciunt numquam placeat minus. Asperiores, repellendus ipsa magni sequi cum reprehenderit dignissimos aliquid ratione. Voluptatum, fugiat.

Tab 2 Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, enim, dolor! Reiciendis, corporis, laudantium, odio illo dolores numquam eligendi expedita assumenda eaque doloremque quidem quam nam qui ducimus delectus nemo?

Tab 3 Content

Tab 4 Content

Tab 5 Content

Tab 6 Content

<div class="tab-component">

  <div class="tabs">
    <ul>
      <li class="js-active"><a class="h5" href="#" data-ref="#tab1"><span>Tab 1</span></a></li>
      <li><a class="h5" href="#" data-ref="#tab2">Tab 2</a></li>
      <li><a class="h5" href="#" data-ref="#tab3">Tab 3</a></li>
      <li><a class="h5" href="#" data-ref="#tab4">Tab 4</a></li>
      <li><a class="h5" href="#" data-ref="#tab5">Tab 5</a></li>
      <li><a class="h5" href="#" data-ref="#tab6">Tab 6</a></li>
    </ul>
  </div>

  <div class="tab-content-container">

    <div id="tab1" class="tab-content js-active">
      <h3>Tab 1 Content</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint sapiente odio hic expedita inventore nesciunt numquam placeat minus. Asperiores, repellendus ipsa magni sequi cum reprehenderit dignissimos aliquid ratione. Voluptatum, fugiat.</p>
    </div>

    <div id="tab2" class="tab-content">
      <h3>Tab 2 Content</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, enim, dolor! Reiciendis, corporis, laudantium, odio illo dolores numquam eligendi expedita assumenda eaque doloremque quidem quam nam qui ducimus delectus nemo?</p>
    </div>

    <div id="tab3" class="tab-content">
      <h3>Tab 3 Content</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint sapiente odio hic expedita inventore nesciunt numquam placeat minus. Asperiores, repellendus ipsa magni sequi cum reprehenderit dignissimos aliquid ratione. Voluptatum, fugiat.</p>
    </div>

    <div id="tab4" class="tab-content">
      <h3>Tab 4 Content</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint sapiente odio hic expedita inventore nesciunt numquam placeat minus. Asperiores, repellendus ipsa magni sequi cum reprehenderit dignissimos aliquid ratione. Voluptatum, fugiat.</p>
    </div>

    <div id="tab5" class="tab-content">
      <h3>Tab 5 Content</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint sapiente odio hic expedita inventore nesciunt numquam placeat minus. Asperiores, repellendus ipsa magni sequi cum reprehenderit dignissimos aliquid ratione. Voluptatum, fugiat.</p>
    </div>

    <div id="tab6" class="tab-content">
      <h3>Tab 6 Content</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint sapiente odio hic expedita inventore nesciunt numquam placeat minus. Asperiores, repellendus ipsa magni sequi cum reprehenderit dignissimos aliquid ratione. Voluptatum, fugiat.</p>
    </div>

  </div>

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

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

The is a sub-header box

Contact Information

Checkbox & Radio Inputs

Datalist Field

Search Field

A Basic Unordered List

A Vertical Bulleted Unordered List

Ordered List

Definition List

Style those lists!

Vertical - adds some breathing room

Vertical Lined - adds some visuals breaks between li's

Vertical Lined - adds some visuals breaks between li's

Vertical Lined & Striped - well, you get it!

Horizontal Slashes - add dividers to your list

Horizontal Pipes - add dividers to your list

Summary

Modal #1

Modal #2

With an Image

Lorem ipsum dolor

Lorem ipsum dolor

Lorem ipsum dolor

Lorem ipsum dolor

Lorem ipsum dolor

Tab 1 Content

Tab 2 Content

Tab 3 Content

Tab 4 Content

Tab 5 Content

Tab 6 Content

FIN.