Style Guide

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

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

  • Your email address will remain private and won't be shared with anyone.

<form id="form1" name="form1" class="wufoo  page" accept-charset="UTF-8" autocomplete="off" enctype="multipart/form-data" method="post" novalidate action="#">
  <ul>
    <li id="foli7" class="notranslate">
      <label class="desc" id="title7" for="Field7"> Name </label>
      <div>
        <input id="Field7" name="Field7" type="text" class="field text large" value="" maxlength="255" tabindex="1" onKeyUp="" />
      </div>
    </li>
    <li id="foli2" class="notranslate">
      <label class="desc" id="title2" for="Field2"> Email address <span id="req_2" class="req">*</span> </label>
      <div>
        <input id="Field2" name="Field2" type="email" spellcheck="false" class="field text large" value="" maxlength="255" tabindex="2" required />
      </div>
      <p class="instruct" id="instruct2"><small>Your email address will remain private and won't be shared with anyone.</small></p>
    </li>
    <li id="foli1" class="notranslate">
      <label class="desc" id="title1" for="Field1"> Message <span id="req_1" class="req">*</span> </label>
      <div>
        <textarea id="Field1" name="Field1" class="field textarea medium" spellcheck="true" rows="10" cols="50" tabindex="3" onkeyup="" required></textarea>
      </div>
    </li>
    <li id="foli10" class="notranslate">
      <label class="desc" id="title10" for="Field10"> How'd you hear about my website? </label>
      <div>
        <input id="Field10" name="Field10" type="text" class="field text large" value="" maxlength="255" tabindex="4" onKeyUp="" />
      </div>
    </li>
    <li class="buttons">
      <div>
        <input id="saveForm" name="saveForm" class="btn" type="submit" value="Send Message" />
      </div>
    </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="/assets/images/paperfaces-remi-l-process-1-600.jpg" alt="">
  <img src="/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://vacsf.org/assets/images/paper-53-skin-color-1.jpg"><img class="palette__swatch" src="https://vacsf.org/assets/images/paper-53-skin-swatch-1.png" alt=""></a>
      <a href="https://vacsf.org/assets/images/paper-53-skin-color-2.jpg"><img class="palette__swatch" src="https://vacsf.org/assets/images/paper-53-skin-swatch-2.png" alt=""></a>
      <a href="https://vacsf.org/assets/images/paper-53-skin-color-3.jpg"><img class="palette__swatch" src="https://vacsf.org/assets/images/paper-53-skin-swatch-3.png" alt=""></a>
    </div>

    <div class="palette__row">
      <a href="https://vacsf.org/assets/images/paper-53-skin-color-4.jpg"><img class="palette__swatch" src="https://vacsf.org/assets/images/paper-53-skin-swatch-4.png" alt=""></a>
      <a href="https://vacsf.org/assets/images/paper-53-skin-color-5.jpg"><img class="palette__swatch" src="https://vacsf.org/assets/images/paper-53-skin-swatch-5.png" alt=""></a>
      <a href="https://vacsf.org/assets/images/paper-53-skin-color-6.jpg"><img class="palette__swatch" src="https://vacsf.org/assets/images/paper-53-skin-swatch-6.png" alt=""></a>
      <a href="https://vacsf.org/assets/images/paper-53-skin-color-7.jpg"><img class="palette__swatch" src="https://vacsf.org/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="/assets/images/paperfaces-rosebuds-2-process-1-600.jpg" alt="">
  <img src="/assets/images/paperfaces-rosebuds-2-process-2-600.jpg" alt="">
  <img src="/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="/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="/assets/images/paperfaces-eliza-t-150.jpg" data-original="/images/paperfaces-eliza-t-150.jpg" alt="">
      <noscript><img src="/assets/images/paperfaces-eliza-t-150.jpg" alt="" /></noscript>
    </a>
  </li>
  <li>
    <a href="#">
      <img class="load" src="/assets/images/paperfaces-rachel-b-150.jpg" data-original="/images/paperfaces-rachel-b-150.jpg" alt="">
      <noscript><img src="/assets/images/paperfaces-rachel-b-150.jpg" alt="" /></noscript>
    </a>
  </li>
  <li>
    <a href="#">
      <img class="load" src="/assets/images/paperfaces-lindsey-m-150.jpg" data-original="/images/paperfaces-lindsey-m-150.jpg" alt="">
      <noscript><img src="/assets/images/paperfaces-lindsey-m-150.jpg" alt="" /></noscript>
    </a>
  </li>
  <li>
    <a href="#">
      <img class="load" src="/assets/images/paperfaces-mi-mo-150.jpg" data-original="/images/paperfaces-mi-mo-150.jpg" alt="">
      <noscript><img src="/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

<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: src/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: 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 _assets/stylesheets/