Style Guide

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

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

Social Brand Colors

Usage: Social media brand colors.

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

$flickr-color
$github-color
$google-plus-color
$instagram-color
$rss-color
$youtube-color

Buttons

Block Level Buttons

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

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>

Danger Button

<a href="#" class="btn btn--danger">Danger</a>

Default Button

<a href="#" class="btn">Default</a>

Disabled Button

<a href="#" class="btn btn--disabled">Disabled</a>

Information Button

<a href="#" class="btn btn--info">Information</a>

Inverse Button

Usage: On dark backgrounds.

<a href="#" class="btn btn--inverse">Inverse</a>

Success Button

<a href="#" class="btn btn--success">Success</a>

Warning Button

<a href="#" class="btn btn--warning">Warning</a>

Forms

PayPal Form

Usage: Order form using PayPal's API.

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

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

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.

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.

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.

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.

<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

Main Content Danger Notice

Usage: Emphasize post text.

Include partial: src/_includes/notice

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.

Include partial: src/_includes/notice

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.

Include partial: src/_includes/notice

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.

Include partial: src/_includes/notice

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.

Include partial: src/_includes/notice

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: src/_includes/toc.html

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

Typography

Blockquotes

Usage: Quoted text.

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

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

  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

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

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

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