mq

Max Quattromani

Pattern Library.

Follow Me

Menu

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

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

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

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

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

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.

Modal #1

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.

Modal #2

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

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

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


<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

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

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

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:

FIN.