A handy collection of all the colors, typography, UI patterns, and components used on Made Mistakes.

Where applicable links to a component’s Sass partial1 and/or Jekyll include are provided, along with short descriptions of typical usage.

Colors

Secondary Colors

Usage: Additional colors commonly used for buttons and notices.

SCSS partial: src/assets/stylesheets/_variables.scss

$primary-color
$success-color
$warning-color
$danger-color
$info-color

UI Colors

Usage: Colors used to give the site its base flavor.

SCSS partial: src/assets/stylesheets/_variables.scss

$background-color
$body-color
$text-color
$headline-color
$border-color
$highlighter-color

Buttons

Block Level Buttons

Usage: Buttons that span the width of their parent container.

SCSS partial: src/assets/stylesheets/_buttons.scss

Block Level Button
<a href="#" class="btn btn--block">Block Level Button</a>
<button class="btn btn--block"><svg class="icon"><use xlink:href="#icon-comments"></use></svg> View Comments</button>

Social Media Buttons

Usage: Social sharing links in a post's footer.

SCSS partial: src/assets/stylesheets/_buttons.scss

<a href="#" class="btn btn--twitter"><svg class="icon"><use xlink:href="#icon-twitter"></use></svg> Twitter</a>
<a href="#" class="btn btn--facebook"><svg class="icon"><use xlink:href="#icon-facebook"></use></svg> Facebook</a>

Forms

PayPal Form

Usage: Order form using PayPal's API.

SCSS partial: src/assets/stylesheets/_forms.scss

<fieldset>
  <form action="#" method="post" target="_top">
    <input type="hidden" name="cmd" value="_s-xclick">
    <input type="hidden" name="hosted_button_id" value="#">
    <input type="hidden" name="on0" value="Type of Drawing">
    <label style="margin:10px 0;">Type of Drawing</label>
    <select name="os0" style="width: 100%;">
      <option value="One face - black and white">One face - black and white</option>
      <option value="One face - color">One face - color</option>
      <option value="Multiple faces - black and white">Multiple faces - black and white</option>
      <option value="Multiple faces - color">Multiple faces - color</option>
    </select>
    <input type="hidden" name="on1" value="Portrait Reference URL">
    <label style="margin:10px 0;">Portrait Reference URL</label>
    <input type="text" name="os1" maxlength="200">
    <input type="hidden" name="currency_code" value="USD">
    <input type="submit" value="Order Now" class="btn" name="submit" style="margin:10px 0;">
  </form>
</fieldset>

Wufoo Contact Form

Usage: Contact form using Wufoo's API.

SCSS partial: src/assets/stylesheets/_forms.scss

<form id="form1" name="form1" class="page__form" accept-charset="UTF-8" autocomplete="off" enctype="multipart/form-data" method="post" novalidate action="https://mademistakes.wufoo.com/forms/zr2w1zk1hbcjv0/#public">
  <ul>
    <li id="foli7">
      <label id="title7" for="Field7">Name</label>
      <input id="Field7" name="Field7" type="text" maxlength="255" />
    </li>
    <li id="foli2">
      <label id="title2" for="Field2">Email address<span id="req_2" class="req">*</span> <small>(will remain private)</small></label>
      <input id="Field2" name="Field2" type="email" spellcheck="false" maxlength="255" required />
    </li>
    <li id="foli1">
      <label id="title1" for="Field1">Message<span id="req_1" class="req">*</span></label>
      <textarea id="Field1" name="Field1" spellcheck="true" rows="10" cols="50" required></textarea>
    </li>
    <li id="foli10">
      <label id="title10" for="Field10">How'd you hear about my website?</label>
      <input id="Field10" name="Field10" type="text" maxlength="255" />
    </li>
    <li>
      <button id="saveForm" name="saveForm" class="btn btn--large" type="submit">Send Message</button>
    </li>
    <li class="hidden">
      <label for="comment">Do Not Fill This Out</label>
      <textarea name="comment" id="comment" rows="1" cols="1"></textarea>
      <input type="hidden" id="idstamp" name="idstamp" value="DXSyHZyBYpNZI+88LvVOKO8dSfd/5lyIeCQAXFVxeJY=" />
    </li>
  </ul>
</form>

Media

Main Content Figures (half)

Usage: For displaying two related images side by side.

SCSS partial: src/assets/stylesheets/_base.scss

Images in two columns.
<figure class="half">
  <img src="https://mademistakes.com/assets/images/paperfaces-remi-l-process-1-600.jpg" alt="">
  <img src="https://mademistakes.com/assets/images/paperfaces-remi-l-process-2-600.jpg" alt="">
  <figcaption>Images in two columns.</figcaption>
</figure>

Main Content Figures (Paper color swatches)

Usage: Display 7 color swatches in a post that mimics Paper by FiftyThree's color palettes.

SCSS partial: src/assets/stylesheets/_paper-color-swatches.scss

Color palette caption.
<figure>
  <div class="palette">
    <div class="palette__row">
      <a href="https://mademistakes.com/assets/images/paper-53-skin-color-1.jpg"><img class="palette__swatch" src="https://mademistakes.com/assets/images/paper-53-skin-swatch-1.png" alt=""></a>
      <a href="https://mademistakes.com/assets/images/paper-53-skin-color-2.jpg"><img class="palette__swatch" src="https://mademistakes.com/assets/images/paper-53-skin-swatch-2.png" alt=""></a>
      <a href="https://mademistakes.com/assets/images/paper-53-skin-color-3.jpg"><img class="palette__swatch" src="https://mademistakes.com/assets/images/paper-53-skin-swatch-3.png" alt=""></a>
    </div>

    <div class="palette__row">
      <a href="https://mademistakes.com/assets/images/paper-53-skin-color-4.jpg"><img class="palette__swatch" src="https://mademistakes.com/assets/images/paper-53-skin-swatch-4.png" alt=""></a>
      <a href="https://mademistakes.com/assets/images/paper-53-skin-color-5.jpg"><img class="palette__swatch" src="https://mademistakes.com/assets/images/paper-53-skin-swatch-5.png" alt=""></a>
      <a href="https://mademistakes.com/assets/images/paper-53-skin-color-6.jpg"><img class="palette__swatch" src="https://mademistakes.com/assets/images/paper-53-skin-swatch-6.png" alt=""></a>
      <a href="https://mademistakes.com/assets/images/paper-53-skin-color-7.jpg"><img class="palette__swatch" src="https://mademistakes.com/assets/images/paper-53-skin-swatch-7.png" alt=""></a>
    </div>
  </div>
  <figcaption>Color palette caption.</figcaption>
</figure>

Main Content Figures (third)

Usage: Display three related images in a row.

SCSS partial: src/assets/stylesheets/_base.scss

Images in three columns.
<figure class="third">
  <img src="https://mademistakes.com/assets/images/paperfaces-rosebuds-2-process-1-600.jpg" alt="">
  <img src="https://mademistakes.com/assets/images/paperfaces-rosebuds-2-process-2-600.jpg" alt="">
  <img src="https://mademistakes.com/assets/images/paperfaces-rosebuds-2-process-3-600.jpg" alt="">
  <figcaption>Images in three columns.</figcaption>
</figure>

Main Content Figures

Usage: Default figure display for images or videos.

SCSS partial: src/assets/stylesheets/_base.scss

One image.
<figure>
  <img src="https://mademistakes.com/assets/images/paper-53-journals.jpg" alt="">
  <figcaption>One image.</figcaption>
</figure>

Thumbnail Image Grid (main content)

Usage: Default thumbnail grid.

SCSS partial: src/assets/stylesheets/_thumbnail-grids.scss

<ul class="th-grid">
  <li>
    <a href="#">
      <img class="load" src="https://mademistakes.com/assets/images/paperfaces-eliza-t-150.jpg" data-original="https://mademistakes.com/assets/images/paperfaces-eliza-t-150.jpg" alt="">
      <noscript><img src="https://mademistakes.com/assets/images/paperfaces-eliza-t-150.jpg" alt="" /></noscript>
    </a>
  </li>
  <li>
    <a href="#">
      <img class="load" src="https://mademistakes.com/assets/images/paperfaces-rachel-b-150.jpg" data-original="https://mademistakes.com/assets/images/paperfaces-rachel-b-150.jpg" alt="">
      <noscript><img src="https://mademistakes.com/assets/images/paperfaces-rachel-b-150.jpg" alt="" /></noscript>
    </a>
  </li>
  <li>
    <a href="#">
      <img class="load" src="https://mademistakes.com/assets/images/paperfaces-lindsey-m-150.jpg" data-original="https://mademistakes.com/assets/images/paperfaces-lindsey-m-150.jpg" alt="">
      <noscript><img src="https://mademistakes.com/assets/images/paperfaces-lindsey-m-150.jpg" alt="" /></noscript>
    </a>
  </li>
  <li>
    <a href="#">
      <img class="load" src="https://mademistakes.com/assets/images/paperfaces-mi-mo-150.jpg" data-original="https://mademistakes.com/assets/images/paperfaces-mi-mo-150.jpg" alt="">
      <noscript><img src="https://mademistakes.com/assets/images/paperfaces-mi-mo-150.jpg" alt="" /></noscript>
    </a>
  </li>
</ul>

Notices

Browser Upgrade Notice

Usage: For older browsers, display a notice that encourages updating to a more modern one.

Include partial: _includes/browser-upgrade.html

SCSS partial: src/assets/stylesheets/_notices.scss

Your browser is quite old!

Why not upgrade to a more modern one to better enjoy this site?

<div class="notice--danger center">
  <h4>Your browser is quite old!</h4>
  <p>Why not <a href="http://whatbrowser.org/">upgrade to a more modern one</a> to better enjoy this site?</p>
</div>

Main Content Danger Notice

Usage: Emphasize post text.

SCSS partial: src/assets/stylesheets/_notices.scss

Danger Notice Headline

Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at.

<div class="notice--danger">
  <h4>Danger Notice Headline</h4>
  <p>Donec sed tellus eget <a href="#">sapien fringilla nonummy</a>. Mauris a ante. Suspendisse quam sem, consequat at.</p>
</div>

Main Content Default Notice

Usage: Emphasize post text.

SCSS partial: src/assets/stylesheets/_notices.scss

Default Notice Headline

Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at.

<div class="notice">
  <h4>Default Notice Headline</h4>
  <p>Donec sed tellus eget <a href="#">sapien fringilla nonummy</a>. Mauris a ante. Suspendisse quam sem, consequat at.</p>
</div>

Main Content Info Notice

Usage: Emphasize post text. Used predominately for ProTips.

SCSS partial: src/assets/stylesheets/_notices.scss

Info Notice Headline

Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at.

<div class="notice--info">
  <h4>Info Notice Headline</h4>
  <p>Donec sed tellus eget <a href="#">sapien fringilla nonummy</a>. Mauris a ante. Suspendisse quam sem, consequat at.</p>
</div>

Main Content Success Notice

Usage: Emphasize post text.

SCSS partial: src/assets/stylesheets/_notices.scss

Success Notice Headline

Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at.

<div class="notice--success">
  <h4>Success Notice Headline</h4>
  <p>Donec sed tellus eget <a href="#">sapien fringilla nonummy</a>. Mauris a ante. Suspendisse quam sem, consequat at.</p>
</div>

Main Content Warning Notice

Usage: Emphasize post text. Used predominately for amendments or updates to a post.

SCSS partial: src/assets/stylesheets/_notices.scss

Warning Notice Headline

Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at.

<div class="notice--warning">
  <h4>Warning Notice Headline</h4>
  <p>Donec sed tellus eget <a href="#">sapien fringilla nonummy</a>. Mauris a ante. Suspendisse quam sem, consequat at.</p>
</div>

Navigation

Table of Contents

Usage: Waypoints for long form posts that have many sections.

Include partial: _includes/toc.html

SCSS partial: src/assets/stylesheets/_toc.scss

<nav class="toc">
  <input id="ac-toc" name="accordion-toc" type="checkbox">
  <label for="ac-toc">Table of Contents</label>
<div class="toc__menu">
  <ul id="markdown-toc">
    <li><a href="#why-go-static">Why Go Static</a>
      <ul>
        <li><a href="#designers-are-control-freaks">Designers Are Control Freaks</a></li>
      </ul>
    </li>
    <li><a href="#the-journey-to-a-static-website">The Journey to a Static Website</a>
      <ul>
        <li><a href="#generating-the-site-with-jekyll">Generating the Site with Jekyll</a></li>
      </ul>
    </li>
    <li><a href="#inspirational-frameworks">Inspirational Frameworks</a>
      <ul>
        <li><a href="#html5-boilerplate">HTML5 Boilerplate</a></li>
        <li><a href="#art-directed-blog-posts-are-so-pass">Art Directed Blog Posts are So Passé</a></li>
        <li><a href="#less-is-more">Less is More</a></li>
        <li><a href="#but-what-about-the-grid-system">But What About the Grid System?</a></li>
      </ul>
    </li>
    <li><a href="#whats-left-to-do">What’s Left to Do?</a>
      <ul>
        <li><a href="#portfolio-layout">Portfolio Layout</a></li>
        <li><a href="#responsive-images">Responsive Images</a></li>
        <li><a href="#version-control">Version Control</a></li>
      </ul>
    </li>
    <li><a href="#jekyll-themes">Jekyll Themes</a></li>
  </ul>
  </div>
</nav>

Tag Box

Usage: Listing of tags assigned to a post or posts.

SCSS partial: src/assets/stylesheets/_page.scss

<ul class="tag__list">
  <li><a href="#" class="tag__item"><span class="tag__name">365 project</span></a> <span class="tag__count">(3)</span></li>
  <li><a href="#" class="tag__item"><span class="tag__name">8-bit</span></a> <span class="tag__count">(4)</span></li>
  <li><a href="#" class="tag__item"><span class="tag__name">Apple</span></a> <span class="tag__count">(6)</span></li>
</ul>

Typography

Blockquotes

Usage: Quoted text.

SCSS partial: src/assets/stylesheets/_base.scss

Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam.

First Lastname, The Greatest Article

<blockquote>
  <p>Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam.</p>
  <p><cite>First Lastname, <em>The Greatest Article</em></cite></p>
</blockquote>

Main Content Headlines

Usage: Headline hierarchy found in post content

SCSS partial: src/assets/stylesheets/_page.scss

H1 Headline

H2 Headline

H2 Headline with an anchor link

H3 Headline

H4 Headline

H5 Headline
H6 Headline
<h1>H1 Headline</h1>
<h2>H2 Headline</h2>
<h2><a href="#">H2 Headline with an anchor link</a></h2>
<h3>H3 Headline</h3>
<h4>H4 Headline</h4>
<h5>H5 Headline</h5>
<h6>H6 Headline</h6>

Main Content Ordered Lists

Usage: Ordered lists found in post content

SCSS partial: src/assets/stylesheets/_page.scss

  1. List item one
    1. Sub list item one
    2. Sub list item two
    3. Sub list item three
  2. List item two
<ol>
  <li>List item one</li>
    <ol>
      <li>Sub list item one</li>
      <li>Sub list item two</li>
      <li>Sub list item three</li>
    </ol>
  <li>List item two</li>
</ol>

Main Content Unordered Lists

Usage: Unordered lists found in post content

SCSS partial: src/assets/stylesheets/_page.scss

  • List item one
    • Sub list item one
    • Sub list item two
    • Sub list item three
  • List item two
<ul>
  <li>List item one</li>
    <ul>
      <li>Sub list item one</li>
      <li>Sub list item two</li>
      <li>Sub list item three</li>
    </ul>
  <li>List item two</li>
</ul>

Main Content Paragraph Text

Usage: Paragraph text found in post content. First paragraph is emphasized with larger font-size.

SCSS partial: src/assets/stylesheets/_page.scss

First paragraph is styled differently from the rest. This is emphasized text. Donec faucibus. Nunc iaculis suscipit dui. 53 = 125. Water is H2O. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. The New York Times (That’s a citation). Underline. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy69. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

HTML and CSS are our tools. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.

<p>First paragraph is styled differently from the rest. <em>This is emphasized text</em>. Donec faucibus. Nunc iaculis suscipit dui. 53 = 125. Water is H<sub>2</sub>O. Nam sit amet sem. Aliquam <a href="#">libero nisi</a>, imperdiet at, tincidunt nec, gravida vehicula, nisl. The New York Times <cite>(That’s a citation)</cite>. <u>Underline</u>. Maecenas ornare tortor. Donec sed <strong>tellus eget sapien</strong> fringilla nonummy<sup>69</sup>. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</p>

<p>HTML and <abbr title="cascading stylesheets">CSS</abbr> are our tools. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. <a href="#">Praesent mattis</a>, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>

Main Content Tables

Usage: Basic table found in post content

SCSS partial: src/assets/stylesheets/_base.scss

#First NameLast NameUsername
1MichaelRose@mmistakes
2WilliamRick@thewhip
3Larrythe Scary@twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Michael</td>
      <td>Rose</td>
      <td>@mmistakes</td>
    </tr>
    <tr>
      <td>2</td>
      <td>William</td>
      <td>Rick</td>
      <td>@thewhip</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Scary</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
  1. Sass partials are written using the Sassy SCSS syntax (or SCSS) and can be found in src/assets/stylesheets/.