Style Guide

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

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

Colors

Secondary Colors

Usage: Additional colors commonly used for buttons and notices.

SCSS partial: _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: _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: _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: _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>

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: _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: _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: _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: _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: _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: _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: _assets/stylesheets/_toc.scss

<div class="toc--sidebar">
  <nav class="toc">
    <h4 class="toc__title">Table of Contents</h4>
    <ul class="toc__menu" id="markdown-toc">
      <li><a href="#why-go-static" id="markdown-toc-why-go-static">Why Go Static</a></li>
      <li><a href="#the-journey-to-a-static-website" id="markdown-toc-the-journey-to-a-static-website">The Journey to a Static Website</a></li>
      <li><a href="#inspirational-frameworks" id="markdown-toc-inspirational-frameworks">Inspirational Frameworks</a></li>
      <li><a href="#whats-left-to-do" id="markdown-toc-whats-left-to-do">What’s Left to Do?</a></li>
      <li><a href="#jekyll-themes" id="markdown-toc-jekyll-themes">Jekyll Themes</a></li>
    </ul>
  </nav>
</div>

Tag Box

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

SCSS partial: _assets/stylesheets/_page.scss

<ul class="tag__list">
  <li><a href="#" class="tag__item">illustration <span>23</span></a></li>
  <li><a href="#" class="tag__item">drawing <span>4</span></a></li>
  <li><a href="#" class="tag__item">painting <span>17</span></a></li>
</ul>

Typography

Blockquotes

Usage: Quoted text.

SCSS partial: _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: _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: _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: _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: _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: _assets/stylesheets/_base.scss

# First Name Last Name Username
1 Michael Rose @mmistakes
2 William Rick @thewhip
3 Larry the 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 _assets/stylesheets/