v7.0.1-1

v7.0.1-0
Don't reverse type scale
2026-02-06 16:31:49 +00:00 · 2018-07-13 12:31:52 -06:00 · 2018-07-13 12:14:39 -06:00 · 2018-07-13 12:04:58 -06:00 · 2018-07-13 10:02:12 -06:00 · 2018-07-13 09:49:14 -06:00
1050 changed files with 163397 additions and 4314 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,4 +1,4 @@
 node_modules
-npm-debug.log
 .DS_STORE
 *.swp
+.next
--- a/build/index.js
+++ b/build/index.js
@ -0,0 +1,35 @@
+const fs = require('fs')
+const globby = require('globby')
+const stripComments = require('strip-css-comments')
+
+const pattern = [
+  'src/**/*.css',
+  '!src/tachyons.css',
+  '!src/_debug-children.css',
+  '!src/_debug-grid.css',
+  '!src/_nested.css',
+  '!src/_normalize.css',
+  '!src/_media-queries.css',
+  '!src/_module-template.css',
+  '!src/_code.css' // TODO: make this a module
+]
+
+const mq = stripComments(
+  fs.readFileSync('src/_media-queries.css', 'utf8'),
+  { preserve: false }
+)
+
+globby(pattern)
+  .then(paths => paths.forEach(processPackage))
+  .catch(console.error)
+
+const processPackage = path => {
+  const name = path.replace('src/_', '').replace('.css', '')
+  let css = fs.readFileSync(path, 'utf8')
+
+  if (/@media/.test(css)) {
+    css = `${mq}${css}`
+  }
+
+  fs.writeFileSync(`packages/tachyons-${name}/src/tachyons-${name}.css`, css)
+}
--- a/build/tables.js
+++ b/build/tables.js
@ -0,0 +1,43 @@
+const fs = require('fs')
+const cssTable = require('css-table')
+
+const srcFile = 'src/tachyons.css'
+const css = fs.readFileSync(srcFile, 'utf8')
+const options = {
+  from: srcFile
+}
+
+const writeTable = async () => {
+  const data = await cssTable(css, options)
+
+  const selectors = data
+    .sort((a, b) => {
+      if (a.moduleName < b.moduleName) return -1;
+      if (a.moduleName > b.moduleName) return 1;
+      return 0;
+    })
+    .map(d => {
+    const moduleName = d.moduleName.split('/_')[1].replace('.css', '')
+
+    if (moduleName === 'normalize' || moduleName === 'debug-grid') {
+      return
+    }
+
+    return [
+      d.selector.replace(/\n/g, '<br />'),
+      d.declarations.join(';<br />').replace(/\n/g, '<br />') + ';',
+      `[${moduleName}](https://npmjs.com/packages/tachyons-${moduleName})`
+    ].join(' | ')
+  })
+
+  fs.writeFileSync('docs/table-of-styles.md',
+`# Table of Styles
+
+Here is a list of each class in Tachyons along with corresponding styles.
+
+Selectors | Declarations | Module
+--------- | ------------ | ------
+${selectors.filter(Boolean).join('\n')}`)
+}
+
+writeTable()
--- a/css/tachyons.css
+++ b/css/tachyons.css
--- a/css/tachyons.min.css
+++ b/css/tachyons.min.css
--- a/docs/.gitignore
+++ b/docs/.gitignore
@ -0,0 +1,2 @@
+node_modules
+.next
--- a/docs/addons/gradients.md
+++ b/docs/addons/gradients.md
@ -0,0 +1,61 @@
+export const meta = {
+  addons: ['tachyons-gradients'],
+  modules: ['tachyons-gradients'],
+  subNav: 'addons',
+  title: 'Gradients / Addons / Docs / TACHYONS',
+  editUrl: 'https://github.com/tachyons-css/tachyons/edit/master/docs/addons/gradients.md'
+}
+
+# Gradients
+
+![Addon](https://img.shields.io/badge/TACHYONS%20ADDON-✓-brightgreen.svg?longCache=true&style=for-the-badge)
+
+Tachyons includes a gradients addon.
+The gradients are intended to be sensible defaults for most projects.
+They've been created by the extremely talented folks at [cssgradient.io](https://cssgradient.io).
+
+These provided gradients are a starting point for projects, we expect most projects customize this addon for their own needs.
+
+## Examples
+
+### Charcoal
+
+```.html
+<div class="pa5 gradient-charcoal"></div>
+```
+
+### Dark blue
+
+```.html
+<div class="pa5 gradient-dark-blue"></div>
+```
+
+### Moon gray
+
+```.html
+<div class="pa5 gradient-moon-gray"></div>
+```
+
+### Lily
+
+```.html
+<div class="pa5 gradient-lily"></div>
+```
+
+### Aqua
+
+```.html
+<div class="pa5 gradient-aqua"></div>
+```
+
+### Purple
+
+```.html
+<div class="pa5 gradient-purple"></div>
+```
+
+### Green
+
+```.html
+<div class="pa5 gradient-green"></div>
+```
--- a/docs/addons/nudge.md
+++ b/docs/addons/nudge.md
@ -0,0 +1,24 @@
+export const meta = {
+  addons: ['tachyons-nudge'],
+  modules: ['tachyons-nudge'],
+  subNav: 'addons',
+  title: 'Nudge / Addons / Docs / TACHYONS',
+  editUrl: 'https://github.com/tachyons-css/tachyons/edit/master/docs/addons/gradients.md'
+}
+
+# Nudge
+
+![Addon](https://img.shields.io/badge/TACHYONS%20ADDON-✓-brightgreen.svg?longCache=true&style=for-the-badge)
+
+Tachyons includes a nudge addon.
+
+This addon is useful for perfecting the alignment of svg icons or giving an element a couple pixels of room for special occasions
+
+```.html
+<div class="pa4 f6 code">
+  <div class="ba b--black-10">
+    <div class="ba dib relative nudge-left-3 pa3 bg-black-30">left-3</div>
+    <div class="ba dib relative nudge-top-5 nudge-left-5 pa3 bg-black-10">left-5 top-5</div>
+  </div>
+</div>
+```
--- a/docs/addons/opacity-responsive.md
+++ b/docs/addons/opacity-responsive.md
@ -0,0 +1,20 @@
+export const meta = {
+  addons: ['tachyons-opacity-responsive'],
+  modules: ['tachyons-opacity-responsive'],
+  subNav: 'addons',
+  title: 'Opacity - Responsive / Addons / Docs / TACHYONS',
+  editUrl: 'https://github.com/tachyons-css/tachyons/edit/master/docs/addons/opacity-responsive.md'
+}
+
+# Opacity - Responsive
+
+![Addon](https://img.shields.io/badge/TACHYONS%20ADDON-✓-brightgreen.svg?longCache=true&style=for-the-badge)
+
+Tachyons includes an optional `tachyons-opacity-responsive` addon.
+
+It adds the ability to change the opacity of elements at different breakpoints
+
+## Related
+
+- [Tachyons - Opacity](http://localhost:3000/docs/themes/opacity)
+- [Tachyons - Responsive](http://localhost:3000/docs/grid/responsive)
--- a/docs/build/components.js
+++ b/docs/build/components.js
@ -0,0 +1,47 @@
+const fs = require('fs')
+const { promisify } = require('util')
+const mkdirp = require('mkdirp')
+const globby = require('globby')
+const titleize = require('titleize')
+
+const mkdir = promisify(mkdirp)
+
+const generateComponentsNav = async () => {
+  const components = await globby('./components/**/*.html', { nodir: true })
+    .then(files => files.map(c => {
+      const src = c.split('components/')[1]
+      const slug = c.replace('./', '/').replace('.html', '')
+      const [_1, _2, section, name] = slug.split('/')
+      const title = titleize(name).replace(/-/g, ' ')
+      const importPath = `../../..${slug}.html`
+
+      return { name, title, section, src, slug, importPath }
+    }))
+
+  const bySection = components.reduce((acc, component) => {
+    acc[component.section] = acc[component.section] || []
+    acc[component.section].push(component)
+
+    return acc
+  }, {})
+
+  components.forEach(async c => {
+    const dir = `pages/components/${c.section}`
+    const file = `${dir}/${c.name}.js`
+
+    await mkdir(dir)
+
+    fs.writeFileSync(file, `
+      /* GENERATED FILE: See docs/build/components.js */
+      import React from 'react'
+      import * as component from '${c.importPath}'
+      import withComponentLayout from '../../../ui/withComponentLayout'
+
+      export default withComponentLayout(component)
+    `)
+  })
+
+  fs.writeFileSync('data/components.json', JSON.stringify(bySection, null, 2))
+}
+
+generateComponentsNav()
--- a/docs/build/modules.js
+++ b/docs/build/modules.js
@ -0,0 +1,44 @@
+const path = require('path')
+const cssTable = require('css-table')
+const { readFileSync, writeFileSync } = require('fs')
+
+const { dependencies } = require('../package.json')
+
+const px = Object.keys(dependencies)
+  .filter(m => /^tachyons-/.test(m))
+  .filter(m => !/^tachyons-(colors|generator|styles|component-loader)/.test(m))
+  .map(async m => {
+    const pkg = require(`${m}/package.json`)
+    const src = readFileSync(
+      path.resolve('..', 'src', `_${m.replace(/^tachyons-/, '')}.css`),
+      'utf8'
+    )
+    const css = readFileSync(
+      path.resolve('node_modules', m, 'css', `${m}.css`),
+      'utf8'
+    )
+
+    const docsComment = src.match(/\/\*!!!([\S\s]*?)\*\//m)
+    const readme = docsComment && docsComment[0].replace(/^\/\*!!!/, '').replace(/\*\/$/, '')
+
+    const tableOfStyles = await cssTable(src, { from: m })
+
+    return {
+      name: m,
+      version: pkg.version,
+      metadata: pkg.tachyons || {},
+      tableOfStyles,
+      readme,
+      src,
+      css
+    }
+  })
+
+Promise.all(px).then(modules => {
+  const reduced = modules.reduce(
+    (acc, m) => Object.assign(acc, { [m.name]: m }),
+    {}
+  )
+
+  writeFileSync('data/modules.json', JSON.stringify({ modules: reduced }, null, 2))
+})
--- a/docs/class-naming.md
+++ b/docs/class-naming.md
@ -0,0 +1,153 @@
+export const meta = {
+  title: 'Class Naming / Overview / Docs / TACHYONS',
+  subNav: 'overview',
+  editUrl: 'https://github.com/tachyons-css/tachyons/edit/master/docs/class-naming.md'
+}
+
+# Class Naming
+
+A lot of inspiration for Tachyons classes comes from unix.
+They're also the result of a lot of user testing with people of different background and levels of experience.
+Tachyons classes attempt to be terse yet explicit.
+They follow a convention that users can also intuit once they learn the patterns.
+
+Tachyons classes never use any special characters that have to be escaped.
+This is by design, ensuring source code can be searched without escaping characters.
+
+For a list of all classes see the [Table of Styles](table-of-styles.md).
+
+## Classes with scales and modifiers
+
+Some modules, like `tachyons-widths` have scales and literal values.
+Accessing them is slightly different but always consistent for all modules.
+
+### Base
+
+The class base refers to the root that all other dependent classes are derived.
+It's often the property or an abbreviated version of the property.
+
+For widths, the base is `w`, and all width based classes (`w2`, `w-50-m`, etc.) are prefixed with `w`.
+
+### Positioning
+
+Particular classes can target a side or sides of an element.
+For example, the spacing module for margin and padding has the ability to target all sides, a side, and even horizontal or vertical sides.
+
+Position is declared with a/l/r/t/b/h/v which follows directly after the base name.
+
+#### Padding example
+
+Class | Position | Description
+----- | -------- | -----------
+`.pa1` | All (a) | Adds padding to all sides
+`.pl1` | Left (l) | Adds padding to the left side
+`.pr1` | Right (r) | Adds padding to the right side
+`.pt1` | Top (t) | Adds padding to the top
+`.pb1` | Bottom (b) | Adds padding to the bottom
+`.ph1` | Horizontal (h) | Adds padding to the left and right sides
+`.pv1` | Vertical (v) | Adds padding to the top and bottom
+
+#### Border example
+
+Class | Position | Description
+----- | -------- | -----------
+`.ba` | All (a) | Adds a border to all sides
+`.bl` | Left (l) | Adds a border to the left side
+`.br` | Right (r) | Adds a border to the right side
+`.bt` | Top (t) | Adds a border to the top
+`.bb` | Bottom (b) | Adds a border to the bottom
+
+Note: Not all modules with positioning support horizontal and vertical shorthands.
+
+### Modifiers
+
+Modifiers refer to the value that the class references.
+`w3` references the third step of the scale while `w-50` references the literal value `50%`
+
+#### Scale
+
+A scale is a collection of values that a property can be assigned.
+In Tachyons, the default scales are typically 5-10 steps and are based on powers of two.
+
+For widths, we have the following scale:
+
+Class | Step | Value
+----- | ---- | -----
+`.w1` | 1 | `1rem`
+`.w2` | 2 | `2rem`
+`.w3` | 3 | `4rem`
+`.w4` | 4 | `8rem`
+`.w5` | 5 | `16rem`
+
+For a more in depth description of why and how Tachyons uses scales can be found on the [scales page](scales.md).
+
+#### Literal value
+
+Literal values map to pixel, percentage or string values.
+They differ among modules, but they always have a `-` after the base.
+
+Class | Value | Full Declaration
+----- | ----- | ----------------
+`.w-auto` | `auto` | `width: auto;`
+`.w-10` | `10%` | `width: 10%;`
+`.w-third` | `calc(100% / 3)` | `width: calc(100% / 3);`
+
+#### Dependent modifiers
+
+There are some modifiers that are dependent on the existence of another class.
+One such dependent modifier is `.b--black-10`.
+The class would have no effect without a border (`.ba`, `.bl`, `.br`, `.bt`, `.bb`).
+
+This dependence is indicated with the `--` delimiter.
+
+## Responsive class naming
+
+By appending `-m` or `-l` to a class you can target specific viewport sizes.
+For a more in depth view of how media queries work in Tachyons, check out the [responsive page](responsive.md).
+
+## Base to property mapping
+
+Base | Property | Example class
+---- | -------- | -------------
+`bg` | `background-repeat` | `bg-center`
+`outline` | `outline` | `outline-0`
+`b` | `border` | `.ba`
+`b` | `border-color` | `b--black-10`
+`br` | `border-radius` | `br3`
+`b` | `border-style` | `b--dotted`
+`bw` | `border-width` | `bw2`
+`shadow` | `box-shadow` | `shadow-1`
+`top` | `top` | `top-0`
+`right` | `right` | `right-1`
+`left` | `left` | `left-2`
+`bottom` | `bottom` | `bottom-0`
+`c` | `clear` | `cl`
+`d` | `display` | `dn`
+`flex` | `flex` | `flex-1`
+`items` | `align-items` | `items-center`
+`self` | `align-self` | `self-stretch`
+`justify` | `justify-content` | `justify-between`
+`content` | `align-content` | `content-center`
+`order` | `order` | `order-3`
+`flex-grow` | `flex-grow` | `flex-grow-1`
+`flex-shrink` | `flex-shrink` | `flex-shrink-0`
+`f` | `float` | `fl`
+`fw` | `font-weight` | `fw2`
+`f` | `font-size` | `f3`
+`h` | `height` | `h-100`
+`lh` | `line-height` | `lh-solid`
+`mw` | `max-width` | `mw4`
+`w` | `width` | `w-25`
+`overflow` | `overflow` | `overflow-x-hidden`
+`o` | `opacity` | `o-20`
+`rotate` | `transform` | `rotate-90`
+`bg` | `background-color` | `bg-red`
+`hover` | `&:hover color` | `hover-mid-gray`
+`hover-bg` | `&:hover background-color` | `hover-bg-light-blue`
+`p` | `padding` | `ph5`
+`m` | `margin` | `ma2`
+`n` | `negative-margin` | `nt3`
+`t` | `text-align` | `tr`
+`tt` | `text-transform` | `ttu`
+`v` | `vertical-align` | `v-mid`
+`z` | `z-index` | `z-5`
--- a/docs/components/article-lists/title-preview-author-media-flipped.html
+++ b/docs/components/article-lists/title-preview-author-media-flipped.html
@ -0,0 +1,56 @@
+<section class="mw7 center">
+  <h2 class="athelas ph3 ph0-l">News</h2>
+  <article class="pv4 bt bb b--black-10 ph3 ph0-l">
+    <div class="flex flex-column flex-row-ns">
+      <div class="w-100 w-60-ns pr3-ns order-2 order-1-ns">
+        <h1 class="f3 athelas mt0 lh-title">Tech Giant Invests Huge Money to Build a Computer Out of Science Fiction</h1>
+        <p class="f5 f4-l lh-copy athelas">
+          The tech giant says it is ready to begin planning a quantum
+          computer, a powerful cpu machine that relies on subatomic particles instead
+          of transistors.
+        </p>
+      </div>
+      <div class="pl3-ns order-1 order-2-ns mb4 mb0-ns w-100 w-40-ns">
+        <img src="http://mrmrs.github.io/photos/cpu.jpg" class="db" alt="Photo of a dimly lit room with a computer interface terminal.">
+      </div>
+    </div>
+    <p class="f6 lh-copy gray mv0">By <span class="ttu">Robin Darnell</span></p>
+    <time class="f6 db gray">Nov. 21, 2016</time>
+  </article>
+  <article class="pv4 bb b--black-10 ph3 ph0-l">
+    <div class="flex flex-column flex-row-ns">
+      <div class="w-100 w-60-ns pr3-ns order-2 order-1-ns">
+        <h1 class="f3 athelas mt0 lh-title">A whale takes up residence in a large body of water</h1>
+        <p class="f5 f4-l lh-copy athelas">
+          This giant of a whale says it is ready to begin planning a new
+          swim later this afternoon. A powerful mammal that relies on fish and plankton instead
+          of hamburgers.
+        </p>
+      </div>
+      <div class="pl3-ns order-1 order-2-ns mb4 mb0-ns w-100 w-40-ns">
+        <img src="http://mrmrs.github.io/photos/whale.jpg" class="db" alt="Photo of a whale's tale coming crashing out of the water.">
+      </div>
+    </div>
+    <p class="f6 lh-copy gray mv0">By <span class="ttu">Katherine Grant</span></p>
+    <time class="f6 db gray">Nov. 19, 2016</time>
+  </article>
+  <article class="pv4 bb b--black-10 ph3 ph0-l">
+    <div class="flex flex-column flex-row-ns">
+      <div class="w-100 w-60-ns pr3-ns order-2 order-1-ns">
+        <h1 class="f3 athelas mt0 lh-title">
+          ‘We Couldn’t Believe Our Eyes’: A Lost World of Vinyl Is Found
+        </h1>
+        <p class="f5 f4-l lh-copy athelas">
+          Archaeologists have found more than 40 tons of vinyl records,
+          some more than a five years old, shedding light on early hipster
+          trends.
+        </p>
+      </div>
+      <div class="pl3-ns order-1 order-2-ns mb4 mb0-ns w-100 w-40-ns">
+        <img src="http://mrmrs.github.io/photos/warehouse.jpg" class="db" alt="Photo of a warehouse with stacked shelves.">
+      </div>
+    </div>
+    <p class="f6 lh-copy gray mv0">By <span class="ttu">Imelda Clancy</span></p>
+    <time class="f6 db gray">Nov. 19, 2016</time>
+  </article>
+</section>
--- a/docs/components/article-lists/title-preview-author-media.html
+++ b/docs/components/article-lists/title-preview-author-media.html
@ -0,0 +1,60 @@
+<section class="mw7 center avenir">
+  <h2 class="baskerville fw1 ph3 ph0-l">News</h2>
+  <article class="bt bb b--black-10">
+    <a class="db pv4 ph3 ph0-l no-underline black dim" href="#0">
+      <div class="flex flex-column flex-row-ns">
+        <div class="pr3-ns mb4 mb0-ns w-100 w-40-ns">
+          <img src="http://mrmrs.github.io/photos/cpu.jpg" class="db" alt="Photo of a dimly lit room with a computer interface terminal.">
+        </div>
+        <div class="w-100 w-60-ns pl3-ns">
+          <h1 class="f3 fw1 baskerville mt0 lh-title">Tech Giant Invests Huge Money to Build a Computer Out of Science Fiction</h1>
+          <p class="f6 f5-l lh-copy">
+            The tech giant says it is ready to begin planning a quantum
+            computer, a powerful cpu machine that relies on subatomic particles instead
+            of transistors.
+          </p>
+          <p class="f6 lh-copy mv0">By Robin Darnell</p>
+        </div>
+      </div>
+    </a>
+  </article>
+  <article class="bb b--black-10">
+    <a class="db pv4 ph3 ph0-l no-underline black dim" href="#0">
+      <div class="flex flex-column flex-row-ns">
+        <div class="pr3-ns mb4 mb0-ns w-100 w-40-ns">
+          <img src="http://mrmrs.github.io/photos/warehouse.jpg" class="db" alt="Photo of a warehouse with stacked shelves.">
+        </div>
+        <div class="w-100 w-60-ns pl3-ns">
+          <h1 class="f3 fw1 baskerville mt0 lh-title">Warehouse Prices Are Fast on the Rise</h1>
+          <p class="f6 f5-l lh-copy">
+            A warehouse is a commercial building for storage of goods.
+            Warehouses are used by manufacturers, importers, exporters,
+            wholesalers, transport businesses, customs, etc. They are
+            usually large plain buildings in industrial areas of cities,
+            towns and villages.
+          </p>
+          <p class="f6 lh-copy mv0">By Robin Darnell</p>
+        </div>
+      </div>
+    </a>
+  </article>
+  <article class="bb b--black-10">
+    <a class="db pv4 ph3 ph0-l no-underline black dim" href="#0">
+      <div class="flex flex-column flex-row-ns">
+        <div class="pr3-ns mb4 mb0-ns w-100 w-40-ns">
+          <img src="http://mrmrs.github.io/photos/whale.jpg" class="db" alt="Photo of a whale's tale coming crashing out of the water.">
+        </div>
+        <div class="w-100 w-60-ns pl3-ns">
+          <h1 class="f3 fw1 baskerville mt0 lh-title">Giant Whale Invests Huge Money to Build a Computer Out of Plankton</h1>
+          <p class="f6 f5-l lh-copy">
+            Whale is the common name for a widely distributed and diverse
+            group of fully aquatic placental marine mammals. They are an
+            informal grouping within the infraorder Cetacea, usually
+            excluding dolphins and porpoises.
+          </p>
+          <p class="f6 lh-copy mv0">By Robin Darnell</p>
+        </div>
+      </div>
+    </a>
+  </article>
+</section>
--- a/docs/components/articles/feature.html
+++ b/docs/components/articles/feature.html
@ -0,0 +1,48 @@
+<article class="athelas">
+  <div class="vh-100 dt w-100 tc bg-dark-gray white cover" style="background:url(http://mrmrs.github.io/photos/u/009.jpg) no-repeat center;">
+    <div class="dtc v-mid">
+      <header class="white-70">
+        <h2 class="f6 fw1 ttu tracked mb2 lh-title">Issue Six</h2>
+        <h3 class="f6 fw1 lh-title">Summer MMXVI</h3>
+      </header>
+      <h1 class="f1 f-headline-l fw1 i white-60">The Chronicles</h1>
+      <blockquote class="ph0 mh0 measure f4 lh-copy center">
+        <p class="fw1 white-70">
+          It's the space you put between the notes that make the music.
+        </p>
+        <cite class="f6 ttu tracked fs-normal">Massimo Vignelli</cite>
+      </blockquote>
+    </div>
+  </div>
+  <div class="center measure-wide f5 pv5 lh-copy ph2">
+    <h1 class="f1 lh-title">The repercussion of ugliness is endless</h1>
+    <p>
+      The choice of paper size is one of the  first of any given work to be printed. There are two basic paper size systems in the world: the international A sizes, and the American sizes.
+    </p>
+    <p>
+      The international Standard paper sizes, called the A series, is based
+      on a golden rectangle, the divine proportion. It is extremely handsome
+      and practical as well. It is adopted by many countries around the world
+      and is based on the German DIN metric Standards. The United States uses
+      a basic letter size (8 1/2 x 11”) of ugly proportions, and results in
+      complete chaos with an endless amount of paper sizes. It is a
+      by-product of the culture of free enterprise, competition and waste.
+      Just another example of the misinterpretations of freedom.
+    </p>
+    <p>
+      These are the basic DIN sizes in mm. for : A0, 841x1189 - A1, 594x841 -
+      A2, 420x594 - A3, 297x420 - A4, 210x297 - A5, 148x210 - A6, 105 x148 -
+      A7, 74x 105 - A8, 52x74 - A9, 37x52 - A10, 26x37.
+    </p>
+    <p>
+      The A4 is the basic size for stationary. Two thirds of it is a square,
+      a nice economical happenstance resulting from the golden rectangle.
+      It is one of the reasons we tend to use as much
+      as possible the DIN sizes: proportions are always leading to other nice proportions.
+    </p>
+    <p>
+      This does not happen with the American basic size which leads to nothing. I counted 28 different standard sizes in USA!. The only reason we use it is because everybody in USA uses it, all stationary in USA is that size, so are manilla folders,  les and of ce equipment!
+      The repercussion of ugliness is endless.
+    </p>
+  </div>
+</article>
--- a/docs/components/articles/full-bleed-background.html
+++ b/docs/components/articles/full-bleed-background.html
@ -0,0 +1,21 @@
+<article data-name="article-full-bleed-background">
+  <div class="cf" style="background: url(http://mrmrs.github.io/photos/12.jpg) no-repeat center center fixed; background-size: cover;">
+    <div class="fl pa3 pa4-ns bg-white black-70 measure-narrow f3 times">
+      <header class="bb b--black-70 pv4">
+        <h3 class="f2 fw7 ttu tracked lh-title mt0 mb3 avenir">Prasat Suor Prat</h3>
+        <h4 class="f3 fw4 i lh-title mt0">Siem Reap, Cambodia</h4>
+      </header>
+      <section class="pt5 pb4">
+        <p class="times lh-copy measure f4 mt0">
+          Prasat Suor Prat (Khmer: ប្រាសាទសួព្រ័ត) is a series of twelve towers spanne
+          north to south lining the eastern side of royal square in Angkor Thom,
+          near the town of Siem Reap, Cambodia. The towers are made from rugged
+          laterite and sandstone. The towers are located right in front of
+          Terrace of the Elephants and Terrace of the Leper King, flanking the
+          start of the road leading east to the Victory Gate, on either side of
+          which they are symmetrically arranged. Their function remains unknown.
+        </p>
+      </section>
+    </div>
+  </div>
+</article>
--- a/docs/components/articles/headline-title-text.html
+++ b/docs/components/articles/headline-title-text.html
@ -0,0 +1,15 @@
+<article class="pa3 pa5-ns">
+  <h1 class="f3 f1-m f-headline-l">Title</h1>
+  <p class="measure lh-copy">
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
+    vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+    no sea takimata sanctus est Lorem ipsum dolor sit amet.
+  </p>
+  <p class="measure lh-copy">
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
+    vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+    no sea takimata sanctus est Lorem ipsum dolor sit amet.
+  </p>
+</article>
--- a/docs/components/articles/large-title-text.html
+++ b/docs/components/articles/large-title-text.html
@ -0,0 +1,15 @@
+<article class="pa3 pa5-ns">
+  <h1 class="f3 f2-m f1-l">Title</h1>
+  <p class="measure lh-copy">
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
+    vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+    no sea takimata sanctus est Lorem ipsum dolor sit amet.
+  </p>
+  <p class="measure lh-copy">
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
+    vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+    no sea takimata sanctus est Lorem ipsum dolor sit amet.
+  </p>
+</article>
--- a/docs/components/articles/left-title-top-border.html
+++ b/docs/components/articles/left-title-top-border.html
@ -0,0 +1,36 @@
+<article class="cf ph3 ph5-ns pv5">
+  <header class="fn fl-ns w-50-ns pr4-ns">
+    <h1 class="f2 lh-title fw9 mb3 mt0 pt3 bt bw2">
+      On Typography
+    </h1>
+    <h2 class="f3 mid-gray lh-title">
+      An excerpt from the Form of the Book by Jan Tschichold
+    </h2>
+    <time class="f6 ttu tracked gray">Sometime before 1967</time>
+  </header>
+  <div class="fn fl-ns w-50-ns">
+    <p class="f5 lh-copy measure mt0-ns">
+      TYPOGRAPHY, even when poorly executed, can never be taken for granted;
+      nor is it ever accidental. Indeed, beauti- fully typeset pages are always
+      the result of long experience. Now and then they even attain the rank of
+      great artistic achievement. But the art of typesetting stands apart from
+      ex- pressive artwork, because the appeal is not limited to a small
+      circle. It is open to everyone's critical judgment, and nowhere does this
+      judgment carry more weight. Typography that can- not be read by everybody
+      is useless. Even for someone who constantly ponders matters of
+      readability and legibility, it is difficult to determine whether
+      something can be read with ease, but the average reader will rebel at
+      once when the type is too small or otherwise irritates the eye; both are
+      signs of a certain illegibility already.
+    </p>
+    <p class="f5 lh-copy measure">
+      All typography consists of letters. These appear either in the form of a
+      smoothly running sentence or as an assembly of lines, which may even have
+      contrasting shapes. Good typog- raphy begins, and this is no minor
+      matter, with the typeset- ting of a single line of text in a book or a
+      newspaper. Using exactly the same typeface, it is possible to create either
+      a pleasant line, easily read, or an onerous one. Spacing, if it is too wide
+      or too compressed, will spoil almost any typeface.
+    </p>
+  </div>
+</article>
--- a/docs/components/articles/left-title.html
+++ b/docs/components/articles/left-title.html
@ -0,0 +1,27 @@
+<article class="cf ph3 ph5-ns pv5">
+  <header class="fn fl-ns w-50-ns pr4-ns">
+    <h1 class="mb3 mt0 lh-title">Clay in a Potter's Hand</h1>
+    <time class="f6 ttu tracked gray">Jan Tschichold</time>
+  </header>
+  <div class="fn fl-ns w-50-ns">
+    <p class="lh-copy measure mt4 mt0-ns">
+      PERFECT typography is more a science than an art. Mastery of the trade is
+      indispensable, but it isn't everything. Unerring taste, the hallmark of
+      perfection, rests also upon a clear understanding of the laws of harmonious
+      design. As a rule, impeccable taste springs partly from inborn sensitivity:
+      from feeling. But feelings remain rather unproductive unless they can inspire a
+      secure judgment. Feelings have to mature into knowledge about the consequences
+      of formal decisions. For this reason, there are no born masters of typography,
+      but self- education may lead in time to mastery.
+    </p>
+    <p class="lh-copy measure">
+      It is wrong to say that there is no arguing about taste when it is good taste
+      that is in question. We are not born with good taste, nor do we come into this
+      world equipped with a real understanding of art. Merely to recognize who or
+      what is represented in a picture has little to do with a real under- standing
+      of art. Neither has an uninformed opinion about the proportions of Roman
+      letters. In any case, arguing is senseless. He who wants to convince has to
+      do a better job than others.
+    </p>
+  </div>
+</article>
--- a/docs/components/articles/photo-essay.html
+++ b/docs/components/articles/photo-essay.html
@ -0,0 +1,64 @@
+<article class="helvetica pb5">
+  <header class="vh-100 bg-light-pink dt w-100">
+    <div
+      style="background:url(http://mrmrs.github.io/photos/display.jpg) no-repeat center right;background-size: cover;"
+      class="dtc v-mid cover ph3 ph4-m ph5-l">
+      <h1 class="f2 f-subheadline-l measure lh-title fw9">A Night Taking Photos at San Francisco’s Spooky Ruins of the Sutro Baths</h1>
+      <h2 class="f6 fw6 black">A story by Nancy Drew</h2>
+    </div>
+  </header>
+  <div class="serif ph3 ph4-m ph5-l">
+    <p class="lh-copy f5 f3-m f1-l measure center pv4">
+      On <time>March 14, 1896</time>, the Sutro Baths were opened to the public as the world's largest indoor swimming pool establishment. </p>
+    <div class="f5 f3-m lh-copy">
+      <div class="cf dt-l w-100 bt b--black-10 pv4">
+        <div class="dtc-l v-mid mw6 pr3-l">
+          <img class="w-100" src="http://mrmrs.github.io/photos/009.jpg" alt=""/>
+        </div>
+        <div class="dtc-l v-mid f6 f5-m f4-l measure-l">
+          <p class="measure pv4-l center">
+            <span class="fw9 fw4-ns">
+              Before it burned to the ground, the structure</span> filled a small beach
+            inlet below the Cliff House, also owned by Adolph Sutro at the time.
+            Shortly after closing, a fire in 1966 destroyed the building
+            while it was in the process of being demolished. All that remains
+            of the site are concrete walls, blocked off stairs and
+            passageways, and a tunnel with a deep crevice in the middle. The
+            cause of the fire was arson. Shortly afterwards, the developer
+            left San Francisco and claimed insurance money.
+          </p>
+        </div>
+      </div>
+      <div class="cf dn">
+        <div class="fl w-100 w-50-l">
+          <p class="f5 pv4">
+            During high tides, water would flow directly into the pools from the
+            nearby ocean, recycling the <span class="db f4 f3-m f1-l fw6 measure lh-title">two million US gallons of water in about an hour. </span>
+          </p>
+        </div>
+        <div class="fl w-100 w-50-l">
+          <p class="f5">
+            During low tides, a powerful turbine water pump,
+            built inside a cave at sea level, could be switched on from a control
+            room and could fill the tanks at a rate of 6,000 US gallons a minute,
+            recycling all the water in five hours.
+          </p>
+        </div>
+      </div>
+      <div class="cf">
+        <div class="fl w-100 w-50-l pr2-l pb3">
+          <img class="db w-100" src="http://mrmrs.github.io/photos/010.jpg" alt="Photo of a dusk skyline above a grassy rockface covered in trees.">
+        </div>
+        <div class="fl w-50 w-50-l pr1 pr0-l pl2-l pb3">
+          <img class="db w-100" src="http://mrmrs.github.io/photos/011.jpg" alt="Photo of the sea and sky on the horizon with the foundations of a demolished house.">
+        </div>
+        <div class="fl w-50 w-50-l pl2 pl0-l pr2-l pb3">
+          <img class="db w-100" src="http://mrmrs.github.io/photos/012.jpg" alt="Photo of the sea with mist covering the rocky formations near the shore.">
+        </div>
+        <div class="fl w-100 w-50-l pl2-l">
+          <img class="db w-100" src="http://mrmrs.github.io/photos/013.jpg" alt="Photo of the foundations of a building on a cliff overlooking a lighthouse.">
+        </div>
+      </div>
+    </div>
+  </div>
+</article>
--- a/docs/components/articles/single-column-large-title.html
+++ b/docs/components/articles/single-column-large-title.html
@ -0,0 +1,40 @@
+<article class="baskerville pb5">
+  <header class="avenir tc-l ph3 ph4-ns pt4 pt5-ns">
+    <h1 class="f3 f2-m f-subheadline-l measure lh-title fw1 mt0">A Night of Taking Photos at the Spooky Ruins of the Sutro Baths</h1>
+    <time class="f5 f4-l db fw1 baskerville mb4"> March 19th, 2015</time>
+    <img class="w-100 dib measure f3" src="http://mrmrs.github.io/photos/009.jpg" alt="A photo of sutro baths by Adam Morse"/>
+  </header>
+  <div class="ph3 ph4-m ph5-l">
+    <p class="f4 mb4 center measure lh-copy">
+      On <time>March 14, 1896</time>, the Sutro Baths were opened to the public as the world's largest indoor swimming pool establishment. </p>
+    <div class="measure db center f5 f4-ns lh-copy">
+      <img class="db w-100 mt4 mt5-ns" src="http://mrmrs.github.io/photos/013.jpg" alt="Photo of the foundations of a building on a cliff overlooking a lighthouse.">
+      <p>
+        Before it burned to the ground, the structure filled a small beach
+        inlet below the Cliff House, also owned by Adolph Sutro at the time.
+        Shortly after closing, a fire in 1966 destroyed the building
+        while it was in the process of being demolished.
+      </p>
+      <img class="db w-100 mt4 mt5-ns" src="http://mrmrs.github.io/photos/012.jpg" alt="Photo of the sea with mist covering the rocky formations near the shore.">
+      <p>
+        During high tides, water would flow directly into the pools from the
+        nearby ocean, recycling the two million US gallons of water in about an hour.
+      </p>
+      <img class="db w-100 mt4 mt5-ns" src="http://mrmrs.github.io/photos/010.jpg" alt="Photo of a dusk skyline above a grassy rockface covered in trees.">
+      <p>
+        All that remains
+        of the site are concrete walls, blocked off stairs and
+        passageways, and a tunnel with a deep crevice in the middle. The
+        cause of the fire was arson. Shortly afterwards, the developer
+        left San Francisco and claimed insurance money.
+      </p>
+      <img class="db w-100 mt4 mt5-ns" src="http://mrmrs.github.io/photos/011.jpg" alt="Photo of the sea and sky on the horizon with the foundations of a demolished house.">
+      <p>
+        During low tides, a powerful turbine water pump,
+        built inside a cave at sea level, could be switched on from a control
+        room and could fill the tanks at a rate of 6,000 US gallons a minute,
+        recycling all the water in five hours.
+      </p>
+    </div>
+  </div>
+</article>
--- a/docs/components/articles/title-highlight-header-cover.html
+++ b/docs/components/articles/title-highlight-header-cover.html
@ -0,0 +1,32 @@
+<article>
+  <header class="bg-gold sans-serif">
+    <div class="mw9 center pa4 pt5-ns ph7-l">
+      <time class="f6 mb2 dib ttu tracked"><small>27 July, 2015</small></time>
+      <h3 class="f2 f1-m f-headline-l measure-narrow lh-title mv0">
+        <span class="bg-black-90 lh-copy white pa1 tracked-tight">
+          Too many tools and frameworks
+        </span>
+      </h3>
+      <h4 class="f3 fw1 georgia i">The definitive guide to the javascript tooling landscape in 2015.</h4>
+      <h5 class="f6 ttu tracked black-80">By Adam Morse</h5>
+    </div>
+  </header>
+  <div class="pa4 ph7-l georgia mw9-l center">
+      <p class="f5 f3-ns lh-copy measure georgia">
+        Theodore Sturgeon was a science fiction author, critic, and the basis for Kurt Vonnegut's recurring character Kilgore Trout. He was prolific, authoring over 200 pieces himself and critiquing around 400 others.
+      </p>
+      <p class="f5 f3-ns lh-copy measure georgia">
+        In 1958 he published a piece in Venture proclaiming what he called "Sturgeon's Revelation"
+      </p>
+    <p class="f6 f5-ns lh-copy measure i pl4 bl bw1 b--gold mb4">
+      I repeat Sturgeon's Revelation, which was wrung out of me after twenty years of wearying defense of science fiction against attacks of people who used the worst examples of the field for ammunition, and whose conclusion was that ninety percent of SF is crud. Using the same standards that categorize 90% of science fiction as trash, crud, or crap, it can be argued that 90% of film, literature, consumer goods, etc. is crap. In other words, the claim (or fact) that 90% of science fiction is crap is ultimately uninformative, because science fiction conforms to the same trends of quality as all other artforms.
+    </p>
+    <p class="f5 f4-ns lh-copy measure mb4">
+    You don't have to bounce a tennis ball very far in San Francisco before it will hit two developers complaining about how many js tools/frameworks there are for development in 2015 and how much unneccessary complexity they add. Doing a search on twitter for 'too many js tools' or 'yet another js framework' returns... a lot of people lamenting the current state of affairs.
+  </p>
+
+    <p class="f5 f4-ns lh-copy measure">
+    This is most likely, the wrong conversation for us as a community, to be having. The presence of bad tools - shouldn't discourage us from wanting more tools or frameworks. There are more books published in a single day than I will ever be able to read in my lifetime. But this does not make me sad. Or overwhelm me. Mostly I think about how excited I am to read the best books that are being published. And this is where we should push the conversation. How do we build better tools? What does that look like?
+  </p>
+  </div>
+</article>
--- a/docs/components/articles/title-text-image.html
+++ b/docs/components/articles/title-text-image.html
@ -0,0 +1,16 @@
+<article class="pa3 pa5-ns">
+  <h1 class="f2">Title Text with Image</h1>
+  <img src="http://tachyons.io/img/space.jpg" class="w-100 f5 measure" alt="Photo of outer space">
+  <p class="measure lh-copy">
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
+    vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+    no sea takimata sanctus est Lorem ipsum dolor sit amet.
+  </p>
+  <p class="measure lh-copy">
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
+    vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+    no sea takimata sanctus est Lorem ipsum dolor sit amet.
+  </p>
+</article>
--- a/docs/components/articles/title-text.html
+++ b/docs/components/articles/title-text.html
@ -0,0 +1,15 @@
+<article class="pa3 pa5-ns">
+  <h1 class="">Title</h1>
+  <p class="measure lh-copy">
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
+    vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+    no sea takimata sanctus est Lorem ipsum dolor sit amet.
+  </p>
+  <p class="measure lh-copy">
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
+    vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+    no sea takimata sanctus est Lorem ipsum dolor sit amet.
+  </p>
+</article>
--- a/docs/components/avatars/circle-border.html
+++ b/docs/components/avatars/circle-border.html
@ -0,0 +1,5 @@
+<div class="pa4 tc">
+  <img
+      src="http://tachyons.io/img/logo.jpg"
+      class="br-100 ba h3 w3 dib" alt="avatar">
+</div>
--- a/docs/components/avatars/circle.html
+++ b/docs/components/avatars/circle.html
@ -0,0 +1,5 @@
+<div class="pa4 tc">
+  <img
+      src="http://tachyons.io/img/logo.jpg"
+      class="br-100 h3 w3 dib" alt="avatar">
+</div>
--- a/docs/components/avatars/double-ring.html
+++ b/docs/components/avatars/double-ring.html
@ -0,0 +1,3 @@
+<div class="tc pa4">
+  <img src="http://tachyons.io/img/logo.jpg" class="br-100 pa1 ba b--black-10 h3 w3" alt="avatar">
+</div>
--- a/docs/components/avatars/rounded-large.html
+++ b/docs/components/avatars/rounded-large.html
@ -0,0 +1,5 @@
+<div class="pa4 tc">
+  <img
+      src="http://tachyons.io/img/logo.jpg"
+      class="br4 h3 w3 dib" alt="avatar">
+</div>
--- a/docs/components/avatars/rounded-medium.html
+++ b/docs/components/avatars/rounded-medium.html
@ -0,0 +1,5 @@
+<div class="pa4 tc">
+  <img
+      src="http://tachyons.io/img/logo.jpg"
+      class="br2 h3 w3 dib" alt="avatar">
+</div>
--- a/docs/components/avatars/rounded-small.html
+++ b/docs/components/avatars/rounded-small.html
@ -0,0 +1,5 @@
+<div class="pa4 tc">
+  <img
+      src="http://tachyons.io/img/logo.jpg"
+      class="br1 h3 w3 dib" alt="avatar">
+</div>
--- a/docs/components/avatars/square.html
+++ b/docs/components/avatars/square.html
@ -0,0 +1,5 @@
+<div class="pa4 tc">
+  <img
+      src="http://tachyons.io/img/logo.jpg"
+      class="h3 w3 dib" alt="avatar">
+</div>
--- a/docs/components/banners/basic.html
+++ b/docs/components/banners/basic.html
@ -0,0 +1,22 @@
+<article class="mw7 center ph3 ph5-ns tc br2 pv5 bg-washed-green dark-green mb5">
+  <h1 class="fw6 f3 f2-ns lh-title mt0 mb3">
+    This is a tagline. For x.
+  </h1>
+  <h2 class="fw2 f4 lh-copy mt0 mb3">
+    This will change things. And we want you to be involved. This text needs to
+    be longer for testing sake.
+  </h2>
+  <p class="fw1 f5 mt0 mb3">
+    Sign up for beta access or learn more about x.
+  </p>
+  <div>
+    <a class="f6 br-pill bg-dark-green no-underline washed-green ba b--dark-green grow pv2 ph3 dib mr3"
+      href="#">
+      Sign Up
+    </a>
+    <a class="f6 br-pill dark-green no-underline ba grow pv2 ph3 dib"
+      href="#">
+      Learn More
+    </a>
+  </div>
+</article>
--- a/docs/components/banners/info.html
+++ b/docs/components/banners/info.html
@ -0,0 +1,7 @@
+<div class="flex items-center justify-center pa4 bg-lightest-blue navy">
+  <svg class="w1" data-icon="info" viewBox="0 0 32 32" style="fill:currentcolor">
+    <title>info icon</title>
+    <path d="M16 0 A16 16 0 0 1 16 32 A16 16 0 0 1 16 0 M19 15 L13 15 L13 26 L19 26 z M16 6 A3 3 0 0 0 16 12 A3 3 0 0 0 16 6"></path>
+  </svg>
+  <span class="lh-title ml3">Some info that you want to call attention to.</span>
+</div>
--- a/docs/components/banners/single-cta.html
+++ b/docs/components/banners/single-cta.html
@ -0,0 +1,17 @@
+<section class="ph3 ph5-ns pv5">
+  <article class="mw8 center br2 ba b--light-blue bg-lightest-blue">
+    <div class="dt-ns dt--fixed-ns w-100">
+      <div class="pa3 pa4-ns dtc-ns v-mid">
+        <div>
+          <h2 class="fw4 blue mt0 mb3">This is a promo title </h2>
+          <p class="black-70 measure lh-copy mv0">
+            This is suporting copy for the wonderful promo catchphrase that is going to be used.
+          </p>
+        </div>
+      </div>
+      <div class="pa3 pa4-ns dtc-ns v-mid">
+        <a href="#" class="no-underline f6 tc db w-100 pv3 bg-animate bg-blue hover-bg-dark-blue white br2">Sign up for free</a>
+      </div>
+    </div>
+  </article>
+</section>
--- a/docs/components/buttons/basic-previous-next.html
+++ b/docs/components/buttons/basic-previous-next.html
@ -0,0 +1,16 @@
+<div class="flex items-center justify-center pa4">
+  <a href="#0" class="f5 no-underline black bg-animate hover-bg-black hover-white inline-flex items-center pa3 ba border-box mr4">
+      <svg class="w1" data-icon="chevronLeft" viewBox="0 0 32 32" style="fill:currentcolor">
+        <title>chevronLeft icon</title>
+        <path d="M20 1 L24 5 L14 16 L24 27 L20 31 L6 16 z"></path>
+      </svg>
+    <span class="pl1">Previous</span>
+  </a>
+  <a href="#0" class="f5 no-underline black bg-animate hover-bg-black hover-white inline-flex items-center pa3 ba border-box">
+    <span class="pr1">Next</span>
+    <svg class="w1" data-icon="chevronRight" viewBox="0 0 32 32" style="fill:currentcolor">
+      <title>chevronRight icon</title>
+      <path d="M12 1 L26 16 L12 31 L8 27 L18 16 L8 5 z"></path>
+    </svg>
+  </a>
+</div>
--- a/docs/components/buttons/basic-rounded-extra-small.html
+++ b/docs/components/buttons/basic-rounded-extra-small.html
@ -0,0 +1,74 @@
+<div class="ph3">
+  <h1 class="f6 fw6 ttu tracked">Basic button</h1>
+  <a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-black" href="#0">Button Text</a>
+  <a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-near-black" href="#0">Button Text</a>
+  <a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-dark-gray" href="#0">Button Text</a>
+  <a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-mid-gray" href="#0">Button Text</a>
+</div>
+<div data-name="screenshot">
+<div class="ph3">
+  <a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-purple" href="#0">Button Text</a>
+  <a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-light-purple" href="#0">Button Text</a>
+  <a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-hot-pink" href="#0">Button Text</a>
+  <a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-dark-pink" href="#0">Button Text</a>
+</div>
+<div class="ph3">
+  <a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-navy" href="#0">Button Text</a>
+  <a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-dark-blue" href="#0">Button Text</a>
+  <a class="f6 link dim br1 ph3 pv2 mb2 dib white bg-dark-green" href="#0">Button Text</a>
+</div>
+</div> <!-- end screenshot -->
+<div class="ph3 mt4">
+  <h1 class="f6 fw6 ttu tracked">Basic Button with Thin Border</h1>
+  <a class="f6 link dim br1 ba ph3 pv2 mb2 dib black" href="#0">Button Text</a>
+  <a class="f6 link dim br1 ba ph3 pv2 mb2 dib near-black" href="#0">Button Text</a>
+  <a class="f6 link dim br1 ba ph3 pv2 mb2 dib dark-gray" href="#0">Button Text</a>
+  <a class="f6 link dim br1 ba ph3 pv2 mb2 dib mid-gray" href="#0">Button Text</a>
+</div>
+<div class="ph3">
+  <a class="f6 link dim br1 ba ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
+  <a class="f6 link dim br1 ba ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
+  <a class="f6 link dim br1 ba ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
+  <a class="f6 link dim br1 ba ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
+</div>
+<div class="ph3">
+  <a class="f6 link dim br1 ba ph3 pv2 mb2 dib navy" href="#0">Button Text</a>
+  <a class="f6 link dim br1 ba ph3 pv2 mb2 dib dark-blue" href="#0">Button Text</a>
+  <a class="f6 link dim br1 ba ph3 pv2 mb2 dib dark-green" href="#0">Button Text</a>
+</div>
+<div class="ph3 mt4">
+  <h1 class="f6 fw6 ttu tracked">Basic Button with Border</h1>
+  <a class="f6 link dim br1 ba bw1 ph3 pv2 mb2 dib black" href="#0">Button Text</a>
+  <a class="f6 link dim br1 ba bw1 ph3 pv2 mb2 dib near-black" href="#0">Button Text</a>
+  <a class="f6 link dim br1 ba bw1 ph3 pv2 mb2 dib dark-gray" href="#0">Button Text</a>
+  <a class="f6 link dim br1 ba bw1 ph3 pv2 mb2 dib mid-gray" href="#0">Button Text</a>
+</div>
+<div class="ph3">
+  <a class="f6 link dim br1 ba bw1 ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
+  <a class="f6 link dim br1 ba bw1 ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
+  <a class="f6 link dim br1 ba bw1 ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
+  <a class="f6 link dim br1 ba bw1 ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
+</div>
+<div class="ph3">
+  <a class="f6 link dim br1 ba bw1 ph3 pv2 mb2 dib navy" href="#0">Button Text</a>
+  <a class="f6 link dim br1 ba bw1 ph3 pv2 mb2 dib dark-blue" href="#0">Button Text</a>
+  <a class="f6 link dim br1 ba bw1 ph3 pv2 mb2 dib dark-green" href="#0">Button Text</a>
+</div>
+<div class="ph3 mt4">
+  <h1 class="f6 fw6 ttu tracked">Basic Button with Thick Border</h1>
+  <a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib black" href="#0">Button Text</a>
+  <a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib near-black" href="#0">Button Text</a>
+  <a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib dark-gray" href="#0">Button Text</a>
+  <a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib mid-gray" href="#0">Button Text</a>
+</div>
+<div class="ph3">
+  <a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
+  <a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
+  <a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
+  <a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
+</div>
+<div class="ph3 mb4">
+  <a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib navy" href="#0">Button Text</a>
+  <a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib dark-blue" href="#0">Button Text</a>
+  <a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib dark-green" href="#0">Button Text</a>
+</div>
--- a/docs/components/buttons/basic-rounded-small.html
+++ b/docs/components/buttons/basic-rounded-small.html
@ -0,0 +1,74 @@
+<div class="ph3">
+  <h1 class="f6 fw6 ttu tracked">Basic button</h1>
+  <a class="f6 link dim br2 ph3 pv2 mb2 dib white bg-black" href="#0">Button Text</a>
+  <a class="f6 link dim br2 ph3 pv2 mb2 dib white bg-near-black" href="#0">Button Text</a>
+  <a class="f6 link dim br2 ph3 pv2 mb2 dib white bg-dark-gray" href="#0">Button Text</a>
+  <a class="f6 link dim br2 ph3 pv2 mb2 dib white bg-mid-gray" href="#0">Button Text</a>
+</div>
+<div data-name="screenshot">
+<div class="ph3">
+  <a class="f6 link dim br2 ph3 pv2 mb2 dib white bg-purple" href="#0">Button Text</a>
+  <a class="f6 link dim br2 ph3 pv2 mb2 dib white bg-light-purple" href="#0">Button Text</a>
+  <a class="f6 link dim br2 ph3 pv2 mb2 dib white bg-hot-pink" href="#0">Button Text</a>
+  <a class="f6 link dim br2 ph3 pv2 mb2 dib white bg-dark-pink" href="#0">Button Text</a>
+</div>
+<div class="ph3">
+  <a class="f6 link dim br2 ph3 pv2 mb2 dib white bg-navy" href="#0">Button Text</a>
+  <a class="f6 link dim br2 ph3 pv2 mb2 dib white bg-dark-blue" href="#0">Button Text</a>
+  <a class="f6 link dim br2 ph3 pv2 mb2 dib white bg-dark-green" href="#0">Button Text</a>
+</div>
+</div> <!-- end screenshot -->
+<div class="ph3 mt4">
+  <h1 class="f6 fw6 ttu tracked">Basic Button with Thin Border</h1>
+  <a class="f6 link dim br2 ba ph3 pv2 mb2 dib black" href="#0">Button Text</a>
+  <a class="f6 link dim br2 ba ph3 pv2 mb2 dib near-black" href="#0">Button Text</a>
+  <a class="f6 link dim br2 ba ph3 pv2 mb2 dib dark-gray" href="#0">Button Text</a>
+  <a class="f6 link dim br2 ba ph3 pv2 mb2 dib mid-gray" href="#0">Button Text</a>
+</div>
+<div class="ph3">
+  <a class="f6 link dim br2 ba ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
+  <a class="f6 link dim br2 ba ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
+  <a class="f6 link dim br2 ba ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
+  <a class="f6 link dim br2 ba ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
+</div>
+<div class="ph3">
+  <a class="f6 link dim br2 ba ph3 pv2 mb2 dib navy" href="#0">Button Text</a>
+  <a class="f6 link dim br2 ba ph3 pv2 mb2 dib dark-blue" href="#0">Button Text</a>
+  <a class="f6 link dim br2 ba ph3 pv2 mb2 dib dark-green" href="#0">Button Text</a>
+</div>
+<div class="ph3 mt4">
+  <h1 class="f6 fw6 ttu tracked">Basic Button with Border</h1>
+  <a class="f6 link dim br2 ba bw1 ph3 pv2 mb2 dib black" href="#0">Button Text</a>
+  <a class="f6 link dim br2 ba bw1 ph3 pv2 mb2 dib near-black" href="#0">Button Text</a>
+  <a class="f6 link dim br2 ba bw1 ph3 pv2 mb2 dib dark-gray" href="#0">Button Text</a>
+  <a class="f6 link dim br2 ba bw1 ph3 pv2 mb2 dib mid-gray" href="#0">Button Text</a>
+</div>
+<div class="ph3">
+  <a class="f6 link dim br2 ba bw1 ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
+  <a class="f6 link dim br2 ba bw1 ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
+  <a class="f6 link dim br2 ba bw1 ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
+  <a class="f6 link dim br2 ba bw1 ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
+</div>
+<div class="ph3">
+  <a class="f6 link dim br2 ba bw1 ph3 pv2 mb2 dib navy" href="#0">Button Text</a>
+  <a class="f6 link dim br2 ba bw1 ph3 pv2 mb2 dib dark-blue" href="#0">Button Text</a>
+  <a class="f6 link dim br2 ba bw1 ph3 pv2 mb2 dib dark-green" href="#0">Button Text</a>
+</div>
+<div class="ph3 mt4">
+  <h1 class="f6 fw6 ttu tracked">Basic Button with Thick Border</h1>
+  <a class="f6 link dim br2 ba bw2 ph3 pv2 mb2 dib black" href="#0">Button Text</a>
+  <a class="f6 link dim br2 ba bw2 ph3 pv2 mb2 dib near-black" href="#0">Button Text</a>
+  <a class="f6 link dim br2 ba bw2 ph3 pv2 mb2 dib dark-gray" href="#0">Button Text</a>
+  <a class="f6 link dim br2 ba bw2 ph3 pv2 mb2 dib mid-gray" href="#0">Button Text</a>
+</div>
+<div class="ph3">
+  <a class="f6 link dim br2 ba bw2 ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
+  <a class="f6 link dim br2 ba bw2 ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
+  <a class="f6 link dim br2 ba bw2 ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
+  <a class="f6 link dim br2 ba bw2 ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
+</div>
+<div class="ph3 mb4">
+  <a class="f6 link dim br2 ba bw2 ph3 pv2 mb2 dib navy" href="#0">Button Text</a>
+  <a class="f6 link dim br2 ba bw2 ph3 pv2 mb2 dib dark-blue" href="#0">Button Text</a>
+  <a class="f6 link dim br2 ba bw2 ph3 pv2 mb2 dib dark-green" href="#0">Button Text</a>
+</div>
--- a/docs/components/buttons/basic-rounded.html
+++ b/docs/components/buttons/basic-rounded.html
@ -0,0 +1,74 @@
+<div class="ph3">
+  <h1 class="f6 fw6 ttu tracked">Basic button</h1>
+  <a class="f6 link dim br3 ph3 pv2 mb2 dib white bg-black" href="#0">Button Text</a>
+  <a class="f6 link dim br3 ph3 pv2 mb2 dib white bg-near-black" href="#0">Button Text</a>
+  <a class="f6 link dim br3 ph3 pv2 mb2 dib white bg-dark-gray" href="#0">Button Text</a>
+  <a class="f6 link dim br3 ph3 pv2 mb2 dib white bg-mid-gray" href="#0">Button Text</a>
+</div>
+<div data-name="screenshot">
+<div class="ph3">
+  <a class="f6 link dim br3 ph3 pv2 mb2 dib white bg-purple" href="#0">Button Text</a>
+  <a class="f6 link dim br3 ph3 pv2 mb2 dib white bg-light-purple" href="#0">Button Text</a>
+  <a class="f6 link dim br3 ph3 pv2 mb2 dib white bg-hot-pink" href="#0">Button Text</a>
+  <a class="f6 link dim br3 ph3 pv2 mb2 dib white bg-dark-pink" href="#0">Button Text</a>
+</div>
+<div class="ph3">
+  <a class="f6 link dim br3 ph3 pv2 mb2 dib white bg-navy" href="#0">Button Text</a>
+  <a class="f6 link dim br3 ph3 pv2 mb2 dib white bg-dark-blue" href="#0">Button Text</a>
+  <a class="f6 link dim br3 ph3 pv2 mb2 dib white bg-dark-green" href="#0">Button Text</a>
+</div>
+</div> <!-- end screenshot -->
+<div class="ph3 mt4">
+  <h1 class="f6 fw6 ttu tracked">Basic Button with Thin Border</h1>
+  <a class="f6 link dim br3 ba ph3 pv2 mb2 dib black" href="#0">Button Text</a>
+  <a class="f6 link dim br3 ba ph3 pv2 mb2 dib near-black" href="#0">Button Text</a>
+  <a class="f6 link dim br3 ba ph3 pv2 mb2 dib dark-gray" href="#0">Button Text</a>
+  <a class="f6 link dim br3 ba ph3 pv2 mb2 dib mid-gray" href="#0">Button Text</a>
+</div>
+<div class="ph3">
+  <a class="f6 link dim br3 ba ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
+  <a class="f6 link dim br3 ba ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
+  <a class="f6 link dim br3 ba ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
+  <a class="f6 link dim br3 ba ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
+</div>
+<div class="ph3">
+  <a class="f6 link dim br3 ba ph3 pv2 mb2 dib navy" href="#0">Button Text</a>
+  <a class="f6 link dim br3 ba ph3 pv2 mb2 dib dark-blue" href="#0">Button Text</a>
+  <a class="f6 link dim br3 ba ph3 pv2 mb2 dib dark-green" href="#0">Button Text</a>
+</div>
+<div class="ph3 mt4">
+  <h1 class="f6 fw6 ttu tracked">Basic Button with Border</h1>
+  <a class="f6 link dim br3 ba bw1 ph3 pv2 mb2 dib black" href="#0">Button Text</a>
+  <a class="f6 link dim br3 ba bw1 ph3 pv2 mb2 dib near-black" href="#0">Button Text</a>
+  <a class="f6 link dim br3 ba bw1 ph3 pv2 mb2 dib dark-gray" href="#0">Button Text</a>
+  <a class="f6 link dim br3 ba bw1 ph3 pv2 mb2 dib mid-gray" href="#0">Button Text</a>
+</div>
+<div class="ph3">
+  <a class="f6 link dim br3 ba bw1 ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
+  <a class="f6 link dim br3 ba bw1 ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
+  <a class="f6 link dim br3 ba bw1 ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
+  <a class="f6 link dim br3 ba bw1 ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
+</div>
+<div class="ph3">
+  <a class="f6 link dim br3 ba bw1 ph3 pv2 mb2 dib navy" href="#0">Button Text</a>
+  <a class="f6 link dim br3 ba bw1 ph3 pv2 mb2 dib dark-blue" href="#0">Button Text</a>
+  <a class="f6 link dim br3 ba bw1 ph3 pv2 mb2 dib dark-green" href="#0">Button Text</a>
+</div>
+<div class="ph3 mt4">
+  <h1 class="f6 fw6 ttu tracked">Basic Button with Thick Border</h1>
+  <a class="f6 link dim br3 ba bw2 ph3 pv2 mb2 dib black" href="#0">Button Text</a>
+  <a class="f6 link dim br3 ba bw2 ph3 pv2 mb2 dib near-black" href="#0">Button Text</a>
+  <a class="f6 link dim br3 ba bw2 ph3 pv2 mb2 dib dark-gray" href="#0">Button Text</a>
+  <a class="f6 link dim br3 ba bw2 ph3 pv2 mb2 dib mid-gray" href="#0">Button Text</a>
+</div>
+<div class="ph3">
+  <a class="f6 link dim br3 ba bw2 ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
+  <a class="f6 link dim br3 ba bw2 ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
+  <a class="f6 link dim br3 ba bw2 ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
+  <a class="f6 link dim br3 ba bw2 ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
+</div>
+<div class="ph3 mb4">
+  <a class="f6 link dim br3 ba bw2 ph3 pv2 mb2 dib navy" href="#0">Button Text</a>
+  <a class="f6 link dim br3 ba bw2 ph3 pv2 mb2 dib dark-blue" href="#0">Button Text</a>
+  <a class="f6 link dim br3 ba bw2 ph3 pv2 mb2 dib dark-green" href="#0">Button Text</a>
+</div>
--- a/docs/components/buttons/basic.html
+++ b/docs/components/buttons/basic.html
@ -0,0 +1,74 @@
+<div class="ph3">
+  <h1 class="f6 fw6 ttu tracked">Basic button</h1>
+  <a class="f6 link dim ph3 pv2 mb2 dib white bg-black" href="#0">Button Text</a>
+  <a class="f6 link dim ph3 pv2 mb2 dib white bg-near-black" href="#0">Button Text</a>
+  <a class="f6 link dim ph3 pv2 mb2 dib white bg-dark-gray" href="#0">Button Text</a>
+  <a class="f6 link dim ph3 pv2 mb2 dib white bg-mid-gray" href="#0">Button Text</a>
+</div>
+<div data-name="screenshot">
+<div class="ph3">
+  <a class="f6 link dim ph3 pv2 mb2 dib white bg-purple" href="#0">Button Text</a>
+  <a class="f6 link dim ph3 pv2 mb2 dib white bg-light-purple" href="#0">Button Text</a>
+  <a class="f6 link dim ph3 pv2 mb2 dib white bg-hot-pink" href="#0">Button Text</a>
+  <a class="f6 link dim ph3 pv2 mb2 dib white bg-dark-pink" href="#0">Button Text</a>
+</div>
+<div class="ph3">
+  <a class="f6 link dim ph3 pv2 mb2 dib white bg-navy" href="#0">Button Text</a>
+  <a class="f6 link dim ph3 pv2 mb2 dib white bg-dark-blue" href="#0">Button Text</a>
+  <a class="f6 link dim ph3 pv2 mb2 dib white bg-dark-green" href="#0">Button Text</a>
+</div>
+</div> <!-- end screenshot -->
+<div class="ph3 mt4">
+  <h1 class="f6 fw6 ttu tracked">Basic Button with Thin Border</h1>
+  <a class="f6 link dim ba ph3 pv2 mb2 dib black" href="#0">Button Text</a>
+  <a class="f6 link dim ba ph3 pv2 mb2 dib near-black" href="#0">Button Text</a>
+  <a class="f6 link dim ba ph3 pv2 mb2 dib dark-gray" href="#0">Button Text</a>
+  <a class="f6 link dim ba ph3 pv2 mb2 dib mid-gray" href="#0">Button Text</a>
+</div>
+<div class="ph3">
+  <a class="f6 link dim ba ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
+  <a class="f6 link dim ba ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
+  <a class="f6 link dim ba ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
+  <a class="f6 link dim ba ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
+</div>
+<div class="ph3">
+  <a class="f6 link dim ba ph3 pv2 mb2 dib navy" href="#0">Button Text</a>
+  <a class="f6 link dim ba ph3 pv2 mb2 dib dark-blue" href="#0">Button Text</a>
+  <a class="f6 link dim ba ph3 pv2 mb2 dib dark-green" href="#0">Button Text</a>
+</div>
+<div class="ph3 mt4">
+  <h1 class="f6 fw6 ttu tracked">Basic Button with Border</h1>
+  <a class="f6 link dim ba bw1 ph3 pv2 mb2 dib black" href="#0">Button Text</a>
+  <a class="f6 link dim ba bw1 ph3 pv2 mb2 dib near-black" href="#0">Button Text</a>
+  <a class="f6 link dim ba bw1 ph3 pv2 mb2 dib dark-gray" href="#0">Button Text</a>
+  <a class="f6 link dim ba bw1 ph3 pv2 mb2 dib mid-gray" href="#0">Button Text</a>
+</div>
+<div class="ph3">
+  <a class="f6 link dim ba bw1 ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
+  <a class="f6 link dim ba bw1 ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
+  <a class="f6 link dim ba bw1 ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
+  <a class="f6 link dim ba bw1 ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
+</div>
+<div class="ph3">
+  <a class="f6 link dim ba bw1 ph3 pv2 mb2 dib navy" href="#0">Button Text</a>
+  <a class="f6 link dim ba bw1 ph3 pv2 mb2 dib dark-blue" href="#0">Button Text</a>
+  <a class="f6 link dim ba bw1 ph3 pv2 mb2 dib dark-green" href="#0">Button Text</a>
+</div>
+<div class="ph3 mt4">
+  <h1 class="f6 fw6 ttu tracked">Basic Button with Thick Border</h1>
+  <a class="f6 link dim ba bw2 ph3 pv2 mb2 dib black" href="#0">Button Text</a>
+  <a class="f6 link dim ba bw2 ph3 pv2 mb2 dib near-black" href="#0">Button Text</a>
+  <a class="f6 link dim ba bw2 ph3 pv2 mb2 dib dark-gray" href="#0">Button Text</a>
+  <a class="f6 link dim ba bw2 ph3 pv2 mb2 dib mid-gray" href="#0">Button Text</a>
+</div>
+<div class="ph3">
+  <a class="f6 link dim ba bw2 ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
+  <a class="f6 link dim ba bw2 ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
+  <a class="f6 link dim ba bw2 ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
+  <a class="f6 link dim ba bw2 ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
+</div>
+<div class="ph3 mb4">
+  <a class="f6 link dim ba bw2 ph3 pv2 mb2 dib navy" href="#0">Button Text</a>
+  <a class="f6 link dim ba bw2 ph3 pv2 mb2 dib dark-blue" href="#0">Button Text</a>
+  <a class="f6 link dim ba bw2 ph3 pv2 mb2 dib dark-green" href="#0">Button Text</a>
+</div>
--- a/docs/components/buttons/centered-icons.html
+++ b/docs/components/buttons/centered-icons.html
@ -0,0 +1,39 @@
+<!-- SVG Icons are from https://simpleicons.org -->
+<footer class="pv4 ph2 tc-l">
+  <a class="no-underline near-white bg-animate bg-near-black hover-bg-gray inline-flex items-center ma2 tc br2 pa2" href="https://facebook.com" title="Facebook">
+    <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M15.117 0H.883C.395 0 0 .395 0 .883v14.234c0 .488.395.883.883.883h7.663V9.804H6.46V7.39h2.086V5.607c0-2.066 1.262-3.19 3.106-3.19.883 0 1.642.064 1.863.094v2.16h-1.28c-1 0-1.195.476-1.195 1.176v1.54h2.39l-.31 2.416h-2.08V16h4.077c.488 0 .883-.395.883-.883V.883C16 .395 15.605 0 15.117 0" fill-rule="nonzero"/></svg>
+    <span class="f6 ml3 pr2">Facebook</span>
+  </a>
+  <a class="no-underline near-white bg-animate bg-near-black hover-bg-gray inline-flex items-center ma2 tc br2 pa2" href="https://github.com/mrmrs" title="GitHub">
+    <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8 0C3.58 0 0 3.582 0 8c0 3.535 2.292 6.533 5.47 7.59.4.075.547-.172.547-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.223 1.873.87 2.33.665.072-.517.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.953 0-.873.31-1.587.823-2.147-.083-.202-.358-1.015.077-2.117 0 0 .672-.215 2.2.82.638-.178 1.323-.266 2.003-.27.68.004 1.364.092 2.003.27 1.527-1.035 2.198-.82 2.198-.82.437 1.102.163 1.915.08 2.117.513.56.823 1.274.823 2.147 0 3.073-1.87 3.75-3.653 3.947.287.246.543.735.543 1.48 0 1.07-.01 1.933-.01 2.195 0 .215.144.463.55.385C13.71 14.53 16 11.534 16 8c0-4.418-3.582-8-8-8"/></svg>
+    <span class="f6 ml3 pr2">GitHub</span>
+  </a>
+  <a class="no-underline near-white bg-animate bg-near-black hover-bg-gray inline-flex items-center ma2 tc br2 pa2" href="https://instagram.com/mrmrs_" title="Instagram">
+    <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8 0C5.827 0 5.555.01 4.702.048 3.85.088 3.27.222 2.76.42c-.526.204-.973.478-1.417.923-.445.444-.72.89-.923 1.417-.198.51-.333 1.09-.372 1.942C.008 5.555 0 5.827 0 8s.01 2.445.048 3.298c.04.852.174 1.433.372 1.942.204.526.478.973.923 1.417.444.445.89.72 1.417.923.51.198 1.09.333 1.942.372.853.04 1.125.048 3.298.048s2.445-.01 3.298-.048c.852-.04 1.433-.174 1.942-.372.526-.204.973-.478 1.417-.923.445-.444.72-.89.923-1.417.198-.51.333-1.09.372-1.942.04-.853.048-1.125.048-3.298s-.01-2.445-.048-3.298c-.04-.852-.174-1.433-.372-1.942-.204-.526-.478-.973-.923-1.417-.444-.445-.89-.72-1.417-.923-.51-.198-1.09-.333-1.942-.372C10.445.008 10.173 0 8 0zm0 1.44c2.136 0 2.39.01 3.233.048.78.036 1.203.166 1.485.276.374.145.64.318.92.598.28.28.453.546.598.92.11.282.24.705.276 1.485.038.844.047 1.097.047 3.233s-.01 2.39-.048 3.233c-.036.78-.166 1.203-.276 1.485-.145.374-.318.64-.598.92-.28.28-.546.453-.92.598-.282.11-.705.24-1.485.276-.844.038-1.097.047-3.233.047s-2.39-.01-3.233-.048c-.78-.036-1.203-.166-1.485-.276-.374-.145-.64-.318-.92-.598-.28-.28-.453-.546-.598-.92-.11-.282-.24-.705-.276-1.485C1.45 10.39 1.44 10.136 1.44 8s.01-2.39.048-3.233c.036-.78.166-1.203.276-1.485.145-.374.318-.64.598-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276C5.61 1.45 5.864 1.44 8 1.44zm0 2.452c-2.27 0-4.108 1.84-4.108 4.108 0 2.27 1.84 4.108 4.108 4.108 2.27 0 4.108-1.84 4.108-4.108 0-2.27-1.84-4.108-4.108-4.108zm0 6.775c-1.473 0-2.667-1.194-2.667-2.667 0-1.473 1.194-2.667 2.667-2.667 1.473 0 2.667 1.194 2.667 2.667 0 1.473-1.194 2.667-2.667 2.667zm5.23-6.937c0 .53-.43.96-.96.96s-.96-.43-.96-.96.43-.96.96-.96.96.43.96.96z"/></svg>
+    <span class="f6 ml3 pr2">Instagram</span>
+  </a>
+  <a class="no-underline near-white bg-animate bg-near-black hover-bg-gray inline-flex items-center ma2 tc br2 pa2" href="https://youtube.com" title="youtube">
+    <svg class="dib w2 h2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M0 7.345c0-1.294.16-2.59.16-2.59s.156-1.1.636-1.587c.608-.637 1.408-.617 1.764-.684C3.84 2.36 8 2.324 8 2.324s3.362.004 5.6.166c.314.038.996.04 1.604.678.48.486.636 1.588.636 1.588S16 6.05 16 7.346v1.258c0 1.296-.16 2.59-.16 2.59s-.156 1.102-.636 1.588c-.608.638-1.29.64-1.604.678-2.238.162-5.6.166-5.6.166s-4.16-.037-5.44-.16c-.356-.067-1.156-.047-1.764-.684-.48-.487-.636-1.587-.636-1.587S0 9.9 0 8.605v-1.26zm6.348 2.73V5.58l4.323 2.255-4.32 2.24h-.002z"/></svg>
+    <span class="f6 ml3 pr2">Youtube</span>
+  </a>
+  <a class="no-underline near-white bg-animate bg-near-black hover-bg-gray inline-flex items-center ma2 tc br2 pa2" href="https://soundcloud.com/mrsjxn" title="SoundCloud">
+    <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><g fill-rule="nonzero"><path d="M.773 8.13c-.034 0-.062.03-.067.066L.55 9.633l.156 1.405c.005.038.033.065.067.065.033 0 .06-.027.066-.065l.178-1.405-.18-1.437C.835 8.158.807 8.13.774 8.13M.18 8.682c-.032 0-.06.025-.063.062L0 9.634l.117.872c.004.037.03.063.064.063s.06-.027.065-.063l.14-.874-.14-.89c-.005-.036-.03-.06-.064-.06M1.4 7.85c-.04 0-.075.033-.08.078l-.148 1.705.15 1.643c.003.045.037.078.08.078.04 0 .074-.033.08-.078l.17-1.643-.17-1.705c-.006-.045-.04-.078-.08-.078M2.035 7.79c-.05 0-.09.04-.094.092l-.14 1.75.14 1.696c.005.052.045.092.095.092s.09-.04.094-.092l.16-1.695-.16-1.752c-.006-.05-.046-.09-.095-.09M2.78 11.342zM2.78 8.008c-.003-.06-.05-.106-.106-.106-.058 0-.104.046-.108.107l-.133 1.623.133 1.71c.004.06.05.105.108.105.057 0 .103-.046.107-.106l.152-1.71-.15-1.624zM3.318 6.87c-.065 0-.118.053-.12.12L3.07 9.634l.125 1.71c.003.065.056.118.12.118.065 0 .118-.053.122-.12l.14-1.708-.14-2.644c-.005-.067-.058-.12-.122-.12M3.957 6.262c-.072 0-.132.058-.135.133l-.117 3.248.117 1.698c.003.076.063.134.135.134.072 0 .13-.058.135-.133v.002l.132-1.7-.132-3.247c-.004-.075-.063-.133-.135-.133M4.62 5.968c-.08 0-.144.065-.147.148l-.11 3.52.11 1.68c.003.08.068.146.148.146.08 0 .146-.065.15-.147l.123-1.68-.123-3.52c-.004-.082-.07-.147-.15-.147M5.443 5.997c-.003-.09-.074-.16-.162-.16-.088 0-.16.07-.16.16l-.102 3.638.1 1.67c.003.09.074.16.163.16.09 0 .16-.07.163-.16l.113-1.67-.113-3.638zM5.443 11.304zM5.945 5.915c-.096 0-.173.077-.175.175l-.093 3.545.093 1.654c.002.096.08.173.175.173.096 0 .174-.077.176-.175v.002l.105-1.655L6.12 6.09c0-.098-.08-.175-.175-.175M6.615 6.03c-.104 0-.187.084-.19.19l-.084 3.416.086 1.643c.002.104.085.186.19.186.103 0 .186-.082.19-.188l.093-1.642-.095-3.416c-.003-.106-.086-.19-.19-.19M7.402 5.403c-.032-.02-.07-.034-.112-.034-.04 0-.078.01-.11.032-.054.036-.092.098-.093.17v.038L7.01 9.635l.077 1.634v.006c.003.045.02.087.048.12.037.045.093.074.155.074.055 0 .106-.023.142-.06.037-.036.06-.087.06-.142l.01-.162.077-1.47-.087-4.065c0-.07-.037-.13-.09-.167M7.493 11.27v-.002zM8.072 5.018c-.032-.02-.07-.03-.11-.03-.05 0-.1.017-.137.048-.048.04-.08.1-.08.167v.022l-.09 4.41.047.817.043.793c.002.118.1.215.217.215.118 0 .215-.097.217-.216v.002l.095-1.61-.096-4.433c-.002-.08-.045-.147-.108-.185M14.032 7.538c-.27 0-.527.055-.76.153-.158-1.773-1.645-3.164-3.46-3.164-.443 0-.876.087-1.258.235-.15.06-.188.117-.19.232v6.246c.002.12.095.215.213.226h5.455c1.087 0 1.968-.87 1.968-1.958 0-1.087-.88-1.968-1.968-1.968"/></g></svg>
+    <span class="f6 ml3 pr2">SoundCloud</span>
+  </a>
+  <a class="no-underline near-white bg-animate bg-near-black hover-bg-gray inline-flex items-center ma2 tc br2 pa2" href="https://medium.com/@mrmrs_/" title="Medium">
+    <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M11.824 12.628l-.276.45.798.398 2.744 1.372c.15.076.294.11.418.11.278 0 .467-.177.467-.492V5.883l-4.15 6.745zm4.096-8.67c-.004-.003 0-.01-.003-.012l-4.825-2.412c-.06-.03-.123-.038-.187-.044-.016 0-.03-.01-.047-.01-.184 0-.368.092-.467.254l-.24.39-.5.814-1.89 3.08 1.89 3.076.5.813.5.812.59.95 4.71-7.64c.02-.03.01-.06-.02-.08zm-6.27 7.045L7.17 6.97l-.295-.477-.294-.477-.25-.416v4.867l3.32 1.663.5.25.5.25-.5-.813-.5-.813zM.737 1.68L.59 1.608c-.085-.042-.166-.062-.24-.062-.206 0-.35.16-.35.427v10.162c0 .272.2.594.442.716l4.145 2.08c.107.06.208.08.3.08.257 0 .438-.2.438-.53V4.01c0-.02-.012-.04-.03-.047L.738 1.68z"/></svg>
+    <span class="f6 ml3 pr2">Medium</span>
+  </a>
+  <a class="no-underline near-white bg-animate bg-near-black hover-bg-gray inline-flex items-center ma2 tc br2 pa2" href="https://linkedin.com title="LinkedIn">
+    <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M13.632 13.635h-2.37V9.922c0-.886-.018-2.025-1.234-2.025-1.235 0-1.424.964-1.424 1.96v3.778h-2.37V6H8.51V7.04h.03c.318-.6 1.092-1.233 2.247-1.233 2.4 0 2.845 1.58 2.845 3.637v4.188zM3.558 4.955c-.762 0-1.376-.617-1.376-1.377 0-.758.614-1.375 1.376-1.375.76 0 1.376.617 1.376 1.375 0 .76-.617 1.377-1.376 1.377zm1.188 8.68H2.37V6h2.376v7.635zM14.816 0H1.18C.528 0 0 .516 0 1.153v13.694C0 15.484.528 16 1.18 16h13.635c.652 0 1.185-.516 1.185-1.153V1.153C16 .516 15.467 0 14.815 0z" fill-rule="nonzero"/></svg>
+    <span class="f6 ml3 pr2">LinkedIn</span>
+  </a>
+  <a class="no-underline near-white bg-animate bg-near-black hover-bg-gray inline-flex items-center ma2 tc br2 pa2" href="https://twitter.com/mrmrs_" title="Twitter">
+    <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.375-1.337.648-2.085.795-.598-.638-1.45-1.036-2.396-1.036-1.812 0-3.282 1.468-3.282 3.28 0 .258.03.51.085.75C5.152 5.39 2.733 4.084 1.114 2.1.83 2.583.67 3.147.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.416-.02-.617-.058.418 1.304 1.63 2.253 3.067 2.28-1.124.88-2.54 1.404-4.077 1.404-.265 0-.526-.015-.783-.045 1.453.93 3.178 1.474 5.032 1.474 6.038 0 9.34-5 9.34-9.338 0-.143-.004-.284-.01-.425.64-.463 1.198-1.04 1.638-1.7z" fill-rule="nonzero"/></svg>
+    <span class="f6 ml3 pr2">Twitter</span>
+  </a>
+  <a class="no-underline near-white bg-animate bg-near-black hover-bg-gray inline-flex items-center ma2 tc br2 pa2" href="http://codepen.io" title="CodePen">
+    <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M15.988 5.443c-.004-.02-.007-.04-.012-.058l-.01-.033c-.006-.017-.012-.034-.02-.05-.003-.012-.01-.023-.014-.034l-.023-.045-.02-.032-.03-.04-.024-.03c-.01-.013-.022-.026-.034-.038l-.027-.027-.04-.032-.03-.024-.012-.01L8.38.117c-.23-.155-.53-.155-.76 0L.305 4.99.296 5c-.012.007-.022.015-.032.023-.014.01-.027.02-.04.032l-.027.027-.034.037-.024.03-.03.04c-.006.012-.013.022-.02.033l-.023.045-.015.034c-.007.016-.012.033-.018.05l-.01.032c-.005.02-.01.038-.012.058l-.006.03C.002 5.5 0 5.53 0 5.56v4.875c0 .03.002.06.006.09l.007.03c.003.02.006.04.013.058l.01.033c.006.018.01.035.018.05l.015.033c.006.016.014.03.023.047l.02.03c.008.016.018.03.03.042.007.01.014.02.023.03.01.012.02.025.034.036.01.01.018.02.028.026l.04.033.03.023.01.01 7.31 4.876c.116.078.248.117.382.116.134 0 .266-.04.38-.116l7.314-4.875.01-.01c.012-.007.022-.015.032-.023.014-.01.027-.02.04-.032l.027-.027.034-.037.024-.03.03-.04.02-.032.023-.046.015-.033.018-.052.01-.033c.005-.02.01-.038.013-.058 0-.01.003-.02.004-.03.004-.03.006-.06.006-.09V5.564c0-.03-.002-.06-.006-.09l-.007-.03zM8 9.626L5.568 8 8 6.374 10.432 8 8 9.626zM7.312 5.18l-2.98 1.993-2.406-1.61 5.386-3.59v3.206zM3.095 8l-1.72 1.15v-2.3L3.095 8zm1.237.828l2.98 1.993v3.208l-5.386-3.59 2.406-1.61zm4.355 1.993l2.98-1.993 2.407 1.61-5.387 3.59v-3.206zM12.905 8l1.72-1.15v2.3L12.905 8zm-1.237-.827L8.688 5.18V1.97l5.386 3.59-2.406 1.61z" fill-rule="nonzero"/></svg>
+    <span class="f6 ml3 pr2">Code Pen</span>
+  </a>
+</footer>
--- a/docs/components/buttons/pill-grow.html
+++ b/docs/components/buttons/pill-grow.html
@ -0,0 +1,74 @@
+<div class="ph3">
+  <h1 class="f6 fw6 ttu tracked">Basic pill</h1>
+  <a class="f6 grow no-underline br-pill ph3 pv2 mb2 dib white bg-black" href="#0">Button Text</a>
+  <a class="f6 grow no-underline br-pill ph3 pv2 mb2 dib white bg-near-black" href="#0">Button Text</a>
+  <a class="f6 grow no-underline br-pill ph3 pv2 mb2 dib white bg-dark-gray" href="#0">Button Text</a>
+  <a class="f6 grow no-underline br-pill ph3 pv2 mb2 dib white bg-mid-gray" href="#0">Button Text</a>
+</div>
+<div data-name="screenshot">
+<div class="ph3">
+  <a class="f6 grow no-underline br-pill ph3 pv2 mb2 dib white bg-purple" href="#0">Button Text</a>
+  <a class="f6 grow no-underline br-pill ph3 pv2 mb2 dib white bg-light-purple" href="#0">Button Text</a>
+  <a class="f6 grow no-underline br-pill ph3 pv2 mb2 dib white bg-hot-pink" href="#0">Button Text</a>
+  <a class="f6 grow no-underline br-pill ph3 pv2 mb2 dib white bg-dark-pink" href="#0">Button Text</a>
+</div>
+<div class="ph3">
+  <a class="f6 grow no-underline br-pill ph3 pv2 mb2 dib white bg-navy" href="#0">Button Text</a>
+  <a class="f6 grow no-underline br-pill ph3 pv2 mb2 dib white bg-dark-blue" href="#0">Button Text</a>
+  <a class="f6 grow no-underline br-pill ph3 pv2 mb2 dib white bg-dark-green" href="#0">Button Text</a>
+</div>
+</div> <!-- end screenshot -->
+<div class="ph3 mt4">
+  <h1 class="f6 fw6 ttu tracked">Pill with Thin Border</h1>
+  <a class="f6 grow no-underline br-pill ba ph3 pv2 mb2 dib black" href="#0">Button Text</a>
+  <a class="f6 grow no-underline br-pill ba ph3 pv2 mb2 dib near-black" href="#0">Button Text</a>
+  <a class="f6 grow no-underline br-pill ba ph3 pv2 mb2 dib dark-gray" href="#0">Button Text</a>
+  <a class="f6 grow no-underline br-pill ba ph3 pv2 mb2 dib mid-gray" href="#0">Button Text</a>
+</div>
+<div class="ph3">
+  <a class="f6 grow no-underline br-pill ba ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
+  <a class="f6 grow no-underline br-pill ba ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
+  <a class="f6 grow no-underline br-pill ba ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
+  <a class="f6 grow no-underline br-pill ba ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
+</div>
+<div class="ph3">
+  <a class="f6 grow no-underline br-pill ba ph3 pv2 mb2 dib navy" href="#0">Button Text</a>
+  <a class="f6 grow no-underline br-pill ba ph3 pv2 mb2 dib dark-blue" href="#0">Button Text</a>
+  <a class="f6 grow no-underline br-pill ba ph3 pv2 mb2 dib dark-green" href="#0">Button Text</a>
+</div>
+<div class="ph3 mt4">
+  <h1 class="f6 fw6 ttu tracked">Pill with Border</h1>
+  <a class="f6 grow no-underline br-pill ba bw1 ph3 pv2 mb2 dib black" href="#0">Button Text</a>
+  <a class="f6 grow no-underline br-pill ba bw1 ph3 pv2 mb2 dib near-black" href="#0">Button Text</a>
+  <a class="f6 grow no-underline br-pill ba bw1 ph3 pv2 mb2 dib dark-gray" href="#0">Button Text</a>
+  <a class="f6 grow no-underline br-pill ba bw1 ph3 pv2 mb2 dib mid-gray" href="#0">Button Text</a>
+</div>
+<div class="ph3">
+  <a class="f6 grow no-underline br-pill ba bw1 ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
+  <a class="f6 grow no-underline br-pill ba bw1 ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
+  <a class="f6 grow no-underline br-pill ba bw1 ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
+  <a class="f6 grow no-underline br-pill ba bw1 ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
+</div>
+<div class="ph3">
+  <a class="f6 grow no-underline br-pill ba bw1 ph3 pv2 mb2 dib navy" href="#0">Button Text</a>
+  <a class="f6 grow no-underline br-pill ba bw1 ph3 pv2 mb2 dib dark-blue" href="#0">Button Text</a>
+  <a class="f6 grow no-underline br-pill ba bw1 ph3 pv2 mb2 dib dark-green" href="#0">Button Text</a>
+</div>
+<div class="ph3 mt4">
+  <h1 class="f6 fw6 ttu tracked">Pill with Thick Border</h1>
+  <a class="f6 grow no-underline br-pill ba bw2 ph3 pv2 mb2 dib black" href="#0">Button Text</a>
+  <a class="f6 grow no-underline br-pill ba bw2 ph3 pv2 mb2 dib near-black" href="#0">Button Text</a>
+  <a class="f6 grow no-underline br-pill ba bw2 ph3 pv2 mb2 dib dark-gray" href="#0">Button Text</a>
+  <a class="f6 grow no-underline br-pill ba bw2 ph3 pv2 mb2 dib mid-gray" href="#0">Button Text</a>
+</div>
+<div class="ph3">
+  <a class="f6 grow no-underline br-pill ba bw2 ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
+  <a class="f6 grow no-underline br-pill ba bw2 ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
+  <a class="f6 grow no-underline br-pill ba bw2 ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
+  <a class="f6 grow no-underline br-pill ba bw2 ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
+</div>
+<div class="ph3 mb4">
+  <a class="f6 grow no-underline br-pill ba bw2 ph3 pv2 mb2 dib navy" href="#0">Button Text</a>
+  <a class="f6 grow no-underline br-pill ba bw2 ph3 pv2 mb2 dib dark-blue" href="#0">Button Text</a>
+  <a class="f6 grow no-underline br-pill ba bw2 ph3 pv2 mb2 dib dark-green" href="#0">Button Text</a>
+</div>
--- a/docs/components/buttons/pill.html
+++ b/docs/components/buttons/pill.html
@ -0,0 +1,74 @@
+<div class="ph3">
+  <h1 class="f6 fw6 ttu tracked">Basic pill</h1>
+  <a class="f6 link dim br-pill ph3 pv2 mb2 dib white bg-black" href="#0">Button Text</a>
+  <a class="f6 link dim br-pill ph3 pv2 mb2 dib white bg-near-black" href="#0">Button Text</a>
+  <a class="f6 link dim br-pill ph3 pv2 mb2 dib white bg-dark-gray" href="#0">Button Text</a>
+  <a class="f6 link dim br-pill ph3 pv2 mb2 dib white bg-mid-gray" href="#0">Button Text</a>
+</div>
+<div data-name="screenshot">
+<div class="ph3">
+  <a class="f6 link dim br-pill ph3 pv2 mb2 dib white bg-purple" href="#0">Button Text</a>
+  <a class="f6 link dim br-pill ph3 pv2 mb2 dib white bg-light-purple" href="#0">Button Text</a>
+  <a class="f6 link dim br-pill ph3 pv2 mb2 dib white bg-hot-pink" href="#0">Button Text</a>
+  <a class="f6 link dim br-pill ph3 pv2 mb2 dib white bg-dark-pink" href="#0">Button Text</a>
+</div>
+<div class="ph3">
+  <a class="f6 link dim br-pill ph3 pv2 mb2 dib white bg-navy" href="#0">Button Text</a>
+  <a class="f6 link dim br-pill ph3 pv2 mb2 dib white bg-dark-blue" href="#0">Button Text</a>
+  <a class="f6 link dim br-pill ph3 pv2 mb2 dib white bg-dark-green" href="#0">Button Text</a>
+</div>
+</div> <!-- end screenshot -->
+<div class="ph3 mt4">
+  <h1 class="f6 fw6 ttu tracked">Pill with Thin Border</h1>
+  <a class="f6 link dim br-pill ba ph3 pv2 mb2 dib black" href="#0">Button Text</a>
+  <a class="f6 link dim br-pill ba ph3 pv2 mb2 dib near-black" href="#0">Button Text</a>
+  <a class="f6 link dim br-pill ba ph3 pv2 mb2 dib dark-gray" href="#0">Button Text</a>
+  <a class="f6 link dim br-pill ba ph3 pv2 mb2 dib mid-gray" href="#0">Button Text</a>
+</div>
+<div class="ph3">
+  <a class="f6 link dim br-pill ba ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
+  <a class="f6 link dim br-pill ba ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
+  <a class="f6 link dim br-pill ba ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
+  <a class="f6 link dim br-pill ba ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
+</div>
+<div class="ph3">
+  <a class="f6 link dim br-pill ba ph3 pv2 mb2 dib navy" href="#0">Button Text</a>
+  <a class="f6 link dim br-pill ba ph3 pv2 mb2 dib dark-blue" href="#0">Button Text</a>
+  <a class="f6 link dim br-pill ba ph3 pv2 mb2 dib dark-green" href="#0">Button Text</a>
+</div>
+<div class="ph3 mt4">
+  <h1 class="f6 fw6 ttu tracked">Pill with Border</h1>
+  <a class="f6 link dim br-pill ba bw1 ph3 pv2 mb2 dib black" href="#0">Button Text</a>
+  <a class="f6 link dim br-pill ba bw1 ph3 pv2 mb2 dib near-black" href="#0">Button Text</a>
+  <a class="f6 link dim br-pill ba bw1 ph3 pv2 mb2 dib dark-gray" href="#0">Button Text</a>
+  <a class="f6 link dim br-pill ba bw1 ph3 pv2 mb2 dib mid-gray" href="#0">Button Text</a>
+</div>
+<div class="ph3">
+  <a class="f6 link dim br-pill ba bw1 ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
+  <a class="f6 link dim br-pill ba bw1 ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
+  <a class="f6 link dim br-pill ba bw1 ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
+  <a class="f6 link dim br-pill ba bw1 ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
+</div>
+<div class="ph3">
+  <a class="f6 link dim br-pill ba bw1 ph3 pv2 mb2 dib navy" href="#0">Button Text</a>
+  <a class="f6 link dim br-pill ba bw1 ph3 pv2 mb2 dib dark-blue" href="#0">Button Text</a>
+  <a class="f6 link dim br-pill ba bw1 ph3 pv2 mb2 dib dark-green" href="#0">Button Text</a>
+</div>
+<div class="ph3 mt4">
+  <h1 class="f6 fw6 ttu tracked">Pill with Thick Border</h1>
+  <a class="f6 link dim br-pill ba bw2 ph3 pv2 mb2 dib black" href="#0">Button Text</a>
+  <a class="f6 link dim br-pill ba bw2 ph3 pv2 mb2 dib near-black" href="#0">Button Text</a>
+  <a class="f6 link dim br-pill ba bw2 ph3 pv2 mb2 dib dark-gray" href="#0">Button Text</a>
+  <a class="f6 link dim br-pill ba bw2 ph3 pv2 mb2 dib mid-gray" href="#0">Button Text</a>
+</div>
+<div class="ph3">
+  <a class="f6 link dim br-pill ba bw2 ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
+  <a class="f6 link dim br-pill ba bw2 ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
+  <a class="f6 link dim br-pill ba bw2 ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
+  <a class="f6 link dim br-pill ba bw2 ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
+</div>
+<div class="ph3 mb4">
+  <a class="f6 link dim br-pill ba bw2 ph3 pv2 mb2 dib navy" href="#0">Button Text</a>
+  <a class="f6 link dim br-pill ba bw2 ph3 pv2 mb2 dib dark-blue" href="#0">Button Text</a>
+  <a class="f6 link dim br-pill ba bw2 ph3 pv2 mb2 dib dark-green" href="#0">Button Text</a>
+</div>
--- a/docs/components/cards/album-centered.html
+++ b/docs/components/cards/album-centered.html
@ -0,0 +1,16 @@
+<a class="db center mw5 tc black link dim"
+   title="Frank Ocean's Blonde on Apple Music"
+   href="https://geo.itunes.apple.com/us/album/blonde/id1146195596?at=1l3vqFJ&mt=1&app=music">
+
+  <img class="db ba b--black-10"/
+       alt="Frank Ocean Blonde Album Cover"
+       src="https://s3-us-west-1.amazonaws.com/tachyonsio/img/Blonde-Frank_Ocean.jpeg"
+  >
+
+  <dl class="mt2 f6 lh-copy">
+    <dt class="clip">Title</dt>
+    <dd class="ml0">Blonde</dd>
+    <dt class="clip">Artist</dt>
+    <dd class="ml0 gray">Frank Ocean</dd>
+  </dl>
+</a>
--- a/docs/components/cards/album-left.html
+++ b/docs/components/cards/album-left.html
@ -0,0 +1,16 @@
+<a class="db center mw5 black link dim"
+   title="Frank Ocean's Blonde on Apple Music"
+   href="https://geo.itunes.apple.com/us/album/blonde/id1146195596?at=1l3vqFJ&mt=1&app=music">
+
+  <img class="db ba b--black-10"/
+       alt="Frank Ocean Blonde Album Cover"
+       src="https://s3-us-west-1.amazonaws.com/tachyonsio/img/Blonde-Frank_Ocean.jpeg"
+  >
+
+  <dl class="mt2 f6 lh-copy">
+    <dt class="clip">Title</dt>
+    <dd class="ml0 fw9">Blonde</dd>
+    <dt class="clip">Artist</dt>
+    <dd class="ml0 gray">Frank Ocean</dd>
+  </dl>
+</a>
--- a/docs/components/cards/basic-text-card.html
+++ b/docs/components/cards/basic-text-card.html
@ -0,0 +1,10 @@
+<article class="center mw5 mw6-ns hidden ba mv4">
+  <h1 class="f4 bg-near-black white mv0 pv2 ph3">Title of card</h1>
+  <div class="pa3 bt">
+    <p class="f6 f5-ns lh-copy measure mv0">
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+      tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
+      vero eos et accusam et justo duo dolores et ea rebum.
+    </p>
+  </div>
+</article>
--- a/docs/components/cards/news-card.html
+++ b/docs/components/cards/news-card.html
@ -0,0 +1,10 @@
+<article class="bg-white center mw5 ba b--black-10 mv4">
+  <div class="pv2 ph3">
+     <h1 class="f6 ttu tracked">Daily News Co.</h1>
+  </div>
+  <img src="http://tachyons.io/img/cat-720.jpg" class="w-100 db" alt="Closeup photo of a tabby cat yawning.">
+  <div class="pa3">
+    <a href="#" class="link dim lh-title">15 things every cat owner should know</a>
+    <small class="gray db pv2">AMP - <time>6 hours ago</time></small>
+  </div>
+</article>
--- a/docs/components/cards/product-card.html
+++ b/docs/components/cards/product-card.html
@ -0,0 +1,17 @@
+<article class="br2 ba dark-gray b--black-10 mv4 w-100 w-50-m w-25-l mw5 center">
+  <img src="http://placekitten.com/g/600/300" class="db w-100 br2 br--top" alt="Photo of a kitten looking menacing.">
+  <div class="pa2 ph3-ns pb3-ns">
+    <div class="dt w-100 mt1">
+      <div class="dtc">
+        <h1 class="f5 f4-ns mv0">Cat</h1>
+      </div>
+      <div class="dtc tr">
+        <h2 class="f5 mv0">$1,000</h2>
+      </div>
+    </div>
+    <p class="f6 lh-copy measure mt2 mid-gray">
+      If it fits, i sits burrow under covers. Destroy couch leave hair everywhere,
+      and touch water with paw then recoil in horror.
+    </p>
+  </div>
+</article>
--- a/docs/components/cards/profile-card-title-subtitle.html
+++ b/docs/components/cards/profile-card-title-subtitle.html
@ -0,0 +1,7 @@
+<article class="mw5 center bg-white br3 pa3 pa4-ns mv3 ba b--black-10">
+  <div class="tc">
+    <img src="http://tachyons.io/img/avatar_1.jpg" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Photo of a kitty staring at you">
+    <h1 class="f3 mb2">Mimi W.</h1>
+    <h2 class="f5 fw4 gray mt0">CCO (Chief Cat Officer)</h2>
+  </div>
+</article>
--- a/docs/components/cards/profile-card.html
+++ b/docs/components/cards/profile-card.html
@ -0,0 +1,12 @@
+<article class="mw5 center bg-white br3 pa3 pa4-ns mv3 ba b--black-10">
+  <div class="tc">
+    <img src="http://tachyons.io/img/avatar_1.jpg" class="br-100 h3 w3 dib" title="Photo of a kitty staring at you">
+    <h1 class="f4">Mimi Whitehouse</h1>
+    <hr class="mw3 bb bw1 b--black-10">
+  </div>
+  <p class="lh-copy measure center f6 black-70">
+    Quite affectionate and outgoing.
+    She loves to get chin scratches and will
+    roll around on the floor waiting for you give her more of them.
+  </p>
+</article>
--- a/docs/components/cards/suggested-profile.html
+++ b/docs/components/cards/suggested-profile.html
@ -0,0 +1,11 @@
+<section class="tc pa3 pa5-ns">
+  <article class="hide-child relative ba b--black-20 mw5 center">
+    <img src="https://scontent.flhr3-1.fna.fbcdn.net/v/t1.0-1/p320x320/10419949_10105372167674736_5929675618317299881_n.jpg?oh=fa3bbf4311e61e4637b67ef3be89479f&oe=58C28705" class="db" alt="Photo of Jesse Grant" />
+    <div class="pa2 bt b--black-20">
+      <a class="f6 db link dark-blue hover-blue" href="#">Jesse Grant</a>
+      <p class="f6 gray mv1">5 mutual friends</p>
+      <a class="link tc ph3 pv1 db bg-animate bg-dark-blue hover-bg-blue white f6 br1" href="#">Add Friend</a>
+    </div>
+    <a class="child absolute top-1 right-1 ba bw1 black-40 grow no-underline br-100 w1 h1 pa2 lh-solid b" href="#">×</a>
+  </article>
+</section>
--- a/docs/components/cards/text-card.html
+++ b/docs/components/cards/text-card.html
@ -0,0 +1,10 @@
+<article class="center mw5 mw6-ns br3 hidden ba b--black-10 mv4">
+  <h1 class="f4 bg-near-white br3 br--top black-60 mv0 pv2 ph3">Title of card</h1>
+  <div class="pa3 bt b--black-10">
+    <p class="f6 f5-ns lh-copy measure">
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+      tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
+      vero eos et accusam et justo duo dolores et ea rebum.
+    </p>
+  </div>
+</article>
--- a/docs/components/collections/albums.html
+++ b/docs/components/collections/albums.html
@ -0,0 +1,115 @@
+<article>
+  <h2 class="f3 fw4 pa3 mv0">Albums</h2>
+  <div class="cf pa2">
+    <div class="fl w-50 w-25-m w-20-l pa2">
+      <a href="https://geo.itunes.apple.com/us/album/blonde/id1146195596?at=1l3vqFJ&mt=1&app=music" class="db link dim tc">
+        <img src="http://is4.mzstatic.com/image/thumb/Music62/v4/93/8f/75/938f7536-0188-f9ba-4585-0a77ceaebf0a/source/400x40000bb.png" alt="Frank Ocean Blonde Album Cover" class="w-100 db outline black-10"/>
+        <dl class="mt2 f6 lh-copy">
+          <dt class="clip">Title</dt>
+          <dd class="ml0 black truncate w-100">Blonde</dd>
+          <dt class="clip">Artist</dt>
+          <dd class="ml0 gray truncate w-100">Frank Ocean</dd>
+        </dl>
+      </a>
+    </div>
+    <div class="fl w-50 w-25-m w-20-l pa2">
+      <a href="https://geo.itunes.apple.com/us/album/jeffery/id1146718343?at=1l3vqFJ&mt=1&app=music" class="db link dim tc">
+        <img src="http://is1.mzstatic.com/image/thumb/Music71/v4/c8/2d/b1/c82db1cd-9dc5-d7cb-2a34-735cf47bb809/source/400x40000bb.png" alt="Young Thug - Jeffery Album Cover" class="w-100 db outline black-10"/>
+        <dl class="mt2 f6 lh-copy">
+          <dt class="clip">Title</dt>
+          <dd class="ml0 black truncate w-100 ttu">Jeffery</dd>
+          <dt class="clip">Artist</dt>
+          <dd class="ml0 gray truncate w-100">Young Thug</dd>
+        </dl>
+      </a>
+    </div>
+    <div class="fl w-50 w-25-m w-20-l pa2">
+      <a href="https://geo.itunes.apple.com/us/album/untitled-unmastered./id1089846273?at=1l3vqFJ&mt=1&app=music" class="db link dim tc">
+        <img src="http://is5.mzstatic.com/image/thumb/Music49/v4/1b/36/43/1b3643c6-e6a3-41bc-7f6d-7c2b64b5d60b/source/400x40000bb.png" alt="Kendrick Lamar untitled unmastered. Album Cover" class="w-100 db outline black-10"/>
+        <dl class="mt2 f6 lh-copy">
+          <dt class="clip">Title</dt>
+          <dd class="ml0 black truncate w-100">untitled umastered.</dd>
+          <dt class="clip">Artist</dt>
+          <dd class="ml0 gray truncate w-100">Kendrick Lamar</dd>
+        </dl>
+      </a>
+    </div>
+    <div class="fl w-50 w-25-m w-20-l pa2">
+      <a href="https://geo.itunes.apple.com/us/album/99.9/id1092026376?at=1l3vqFJ&mt=1&app=music" class="db link dim tc">
+        <img src="http://is4.mzstatic.com/image/thumb/Music49/v4/e9/4c/2d/e94c2d5f-bdb0-c565-4cc2-f9dfcf7f0b87/source/400x40000bb.png" alt="Kaytranada 99%" class="w-100 db outline black-10"/>
+        <dl class="mt2 f6 lh-copy">
+          <dt class="clip">Title</dt>
+          <dd class="ml0 black truncate w-100">99%</dd>
+          <dt class="clip">Artist</dt>
+          <dd class="ml0 gray truncate w-100">Kaytranada</dd>
+        </dl>
+      </a>
+    </div>
+    <div class="fl w-50 w-25-m w-20-l pa2">
+      <a href="https://geo.itunes.apple.com/us/album/aa/id1067924003?at=1l3vqFJ&mt=1&app=music" class="db link dim tc">
+        <img src="http://is3.mzstatic.com/image/thumb/Music49/v4/b6/b0/a1/b6b0a1dd-998d-9786-ca2f-87470be15250/source/400x40000bb.png" alt="Baauer Aa - Album Cover" class="w-100 db outline black-10"/>
+        <dl class="mt2 f6 lh-copy">
+          <dt class="clip">Title</dt>
+          <dd class="ml0 black truncate w-100">Aa</dd>
+          <dt class="clip">Artist</dt>
+          <dd class="ml0 gray truncate w-100">Baauer</dd>
+        </dl>
+      </a>
+    </div>
+    <div class="fl w-50 w-25-m w-20-l pa2">
+      <a href="https://geo.itunes.apple.com/us/album/99-cents/id1054734475?at=1l3vqFJ&mt=1&app=music" class="db link dim tc">
+        <img src="http://is3.mzstatic.com/image/thumb/Music62/v4/fa/ae/a6/faaea65f-0819-bb5d-afaa-4f5e84015204/source/400x40000bb.png" alt="Santigold 99 cents - Album cover" class="w-100 db outline black-10"/>
+        <dl class="mt2 f6 lh-copy">
+          <dt class="clip">Title</dt>
+          <dd class="ml0 black truncate w-100">99 cents</dd>
+          <dt class="clip">Artist</dt>
+          <dd class="ml0 gray truncate w-100">Santigold</dd>
+        </dl>
+      </a>
+    </div>
+    <div class="fl w-50 w-25-m w-20-l pa2">
+      <a href="https://geo.itunes.apple.com/us/album/a-moon-shaped-pool/id1111577743?at=1l3vqFJ&mt=1&app=music" class="db link dim tc">
+        <img src="http://is2.mzstatic.com/image/thumb/Music18/v4/34/03/34/34033451-12e2-2d0b-c100-11a390922a01/source/400x40000bb.png" alt="A Moon Shaped Pool - Album cover" class="w-100 db outline black-10"/>
+        <dl class="mt2 f6 lh-copy">
+          <dt class="clip">Title</dt>
+          <dd class="ml0 black truncate w-100">A Moon Shaped Pool</dd>
+          <dt class="clip">Artist</dt>
+          <dd class="ml0 gray truncate w-100">Radiohead</dd>
+        </dl>
+      </a>
+    </div>
+    <div class="fl w-50 w-25-m w-20-l pa2">
+      <a href="https://geo.itunes.apple.com/us/album/the-life-of-pablo/id1123231885?at=1l3vqFJ&mt=1&app=music" class="db link dim tc">
+        <img src="http://is3.mzstatic.com/image/thumb/Music20/v4/c0/98/d0/c098d05b-7bcc-0ea3-0213-0f69992fda65/source/400x40000bb.png" alt="The Life of Pablo - Album Cover" class="w-100 db outline black-10"/>
+        <dl class="mt2 f6 lh-copy">
+          <dt class="clip">Title</dt>
+          <dd class="ml0 black truncate w-100">The Life of Pablo</dd>
+          <dt class="clip">Artist</dt>
+          <dd class="ml0 gray truncate w-100">Kanye West</dd>
+        </dl>
+      </a>
+    </div>
+    <div class="fl w-50 w-25-m w-20-l pa2">
+      <a href="https://geo.itunes.apple.com/us/album/coloring-book/id1113239004?at=1l3vqFJ&mt=1&app=music" class="db link dim tc">
+        <img src="http://is2.mzstatic.com/image/thumb/Music18/v4/5a/42/0f/5a420f73-6490-abc9-bdcc-3001d5c4e9fc/source/400x40000bb.png" alt="Coloring Book - Album cover" class="w-100 db outline black-10"/>
+        <dl class="mt2 f6 lh-copy">
+          <dt class="clip">Title</dt>
+          <dd class="ml0 black truncate w-100">Coloring Book</dd>
+          <dt class="clip">Artist</dt>
+          <dd class="ml0 gray truncate w-100">Chance the Rapper</dd>
+        </dl>
+      </a>
+    </div>
+    <div class="fl w-50 w-25-m w-20-l pa2">
+      <a href="https://geo.itunes.apple.com/us/album/everybody-looking/id1135576036?at=1l3vqFJ&mt=1&app=music" class="db link dim tc">
+        <img src="http://is4.mzstatic.com/image/thumb/Music30/v4/9b/2e/e1/9b2ee13e-35fd-0cc1-d203-e65b4beafc7f/source/400x40000bb.png" alt="Everybody Looking - Album Cover" class="w-100 db outline black-10"/>
+        <dl class="mt2 f6 lh-copy">
+          <dt class="clip">Title</dt>
+          <dd class="ml0 black truncate w-100">Everybody Looking</dd>
+          <dt class="clip">Artist</dt>
+          <dd class="ml0 gray truncate w-100">Gucci Mane</dd>
+        </dl>
+      </a>
+    </div>
+  </div>
+</article>
--- a/docs/components/collections/movies.html
+++ b/docs/components/collections/movies.html
@ -0,0 +1,75 @@
+<article>
+  <a href="https://geo.itunes.apple.com/us/movie/primer/id536457427?at=1l3vqFJ&ct=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
+    <div role="img" aria-label="Primer movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/primer.jpg) no-repeat center center; background-size: cover;"></div>
+  </a>
+  <a href="https://geo.itunes.apple.com/us/movie/the-big-short/id1061320456?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
+    <div role="img" aria-label="The Big Short movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/the-big-short.jpg) no-repeat center center; background-size: cover;"></div>
+  </a>
+  <a href="https://geo.itunes.apple.com/us/movie/bottle-rocket/id315360821?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
+    <div role="img" aria-label="Bottle Rocket movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/bottlerocket.jpg) no-repeat center center; background-size: cover;"></div>
+  </a>
+  <a href="https://geo.itunes.apple.com/us/movie/ex-machina/id983488795?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
+    <div role="img" aria-label="Ex Machina movie" class="grow aspect-ratio--4x6" style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/ex-machina.png) no-repeat center center; background-size: cover;"></div>
+  </a>
+  <a href="https://geo.itunes.apple.com/us/movie/district-9/id331251689?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
+    <div role="img" aria-label="District 9 movie" class="grow aspect-ratio--4x6 pv" style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/district9.jpg) no-repeat center center; background-size: cover;"></div>
+  </a>
+  <a href="https://geo.itunes.apple.com/us/movie/watchmen-directors-cut/id321123507?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
+    <div role="img" aria-label="Watchmen movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/watchmen.jpg) no-repeat center center; background-size: cover;"></div>
+  </a>
+  <a href="https://geo.itunes.apple.com/us/movie/sunshine/id272508664?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
+    <div role="img" aria-label="Sunshine movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/sunshine.jpg) no-repeat center center; background-size: cover;"></div>
+  </a>
+  <a href="https://geo.itunes.apple.com/us/movie/mad-max-fury-road/id990549112?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
+    <div role="img" aria-label="Mad Max: Fury Road movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/mad-max-2.png) no-repeat center center; background-size: cover;"></div>
+  </a>
+  <a href="https://geo.itunes.apple.com/us/movie/drive/id492170756?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
+    <div role="img" aria-label="Drive movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/neon-drive.jpg) no-repeat center center; background-size: cover;"></div>
+  </a>
+  <a href="https://geo.itunes.apple.com/us/movie/kill-bill-volume-1/id432516627?at=1l3vqFJ&mt=6
+    " class="fl w-50 w-25-l link overflow-hidden">
+    <div role="img" aria-label="Kill Bill: Volume 1 movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/kill-bill.jpg) no-repeat center center; background-size: cover;"></div>
+  </a>
+  <a href="https://geo.itunes.apple.com/us/movie/kill-bill-volume-2/id432516575?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
+    <div role="img" aria-label="Kill Bill: Volume 2 movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/kill-bill2.png) no-repeat center center; background-size: cover;"></div>
+  </a>
+  <a href="https://geo.itunes.apple.com/us/movie/from-dusk-till-dawn/id461537388?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
+    <div role="img" aria-label="From Dusk Till Dawn movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/dusktilldawn.jpg) no-repeat center center; background-size: cover;"></div>
+  </a>
+  <a href="https://geo.itunes.apple.com/us/movie/jurassic-park/id452283395?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
+    <div role="img" aria-label="Jurassic Park movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/jurassicpark.jpg) no-repeat center center; background-size: cover;"></div>
+  </a>
+  <a href="https://geo.itunes.apple.com/us/movie/the-place-beyond-the-pines/id641999831?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
+    <div role="img" aria-label="The Place Beyond The Pines movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/place-beyond-pines.jpg) no-repeat center center; background-size: cover;"></div>
+  </a>
+  <a href="https://geo.itunes.apple.com/us/movie/children-of-men/id299968409?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
+    <div role="img" aria-label="Children Of Men movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/children.jpg) no-repeat center center; background-size: cover;"></div>
+  </a>
+  <a href="https://geo.itunes.apple.com/us/movie/prometheus/id547496947?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
+    <div role="img" aria-label="Prometheus movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/prometheus.jpg) no-repeat center center; background-size: cover;"></div>
+  </a>
+  <a href="https://geo.itunes.apple.com/us/movie/inglourious-basterds/id333325378?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
+    <div role="img" aria-label="Inglourious Basterds movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/inglourious_basterds.jpg) no-repeat center center; background-size: cover;"></div>
+  </a>
+  <a href="https://geo.itunes.apple.com/us/movie/moon/id331842140?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
+    <div role="img" aria-label="Moon movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/moon.jpg) no-repeat center center; background-size: cover;"></div>
+  </a>
+  <a href="https://geo.itunes.apple.com/us/movie/lock-stock-two-smoking-barrels/id281827014?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
+    <div role="img" aria-label="Lock, Stock & Two Smoking Barrels movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/lockstock.jpg) no-repeat center center; background-size: cover;"></div>
+  </a>
+  <a href="https://geo.itunes.apple.com/us/movie/interstellar/id960891136?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
+    <div role="img" aria-label="Interstellar movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/interstellar.jpg) no-repeat center center; background-size: cover;"></div>
+  </a>
+  <a href="https://geo.itunes.apple.com/us/movie/12-monkeys/id280241027?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
+    <div role="img" aria-label="12 Monkeys movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/12monkeys.jpg) no-repeat center center; background-size: cover;"></div>
+  </a>
+  <a href="https://geo.itunes.apple.com/us/movie/the-professional/id270815716?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
+    <div role="img" aria-label="Léon: The Professional movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/leon.png) no-repeat center center; background-size: cover;"></div>
+  </a>
+  <a href="https://geo.itunes.apple.com/us/movie/the-departed/id284563157?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
+    <div role="img" aria-label="The Departed movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/departed.jpg) no-repeat center center; background-size: cover;"></div>
+  </a>
+  <a href="https://geo.itunes.apple.com/us/movie/batman-begins/id271469254?at=1l3vqFJ&mt=6" class="fl w-50 w-25-l link overflow-hidden">
+    <div role="img" aria-label="Batman Begins movie" class="grow aspect-ratio--4x6 " style="background: url(https://s3-us-west-1.amazonaws.com/tachyonsio/img/batman-begins.jpg) no-repeat center center; background-size: cover;"></div>
+  </a>
+</article>
--- a/docs/components/collections/posters-dim.html
+++ b/docs/components/collections/posters-dim.html
@ -0,0 +1,171 @@
+<main class="cf bg-black w-100 ph3 pt3 pb3">
+    <a class="link dim pa3 fl w-50 w-third-m w-25-l border-box" href="https://itunes.apple.com/us/movie/donnie-darko/id324481759?at=1l3vqFJ&mt=6" title="donnie-darko">
+        <div class="aspect-ratio aspect-ratio--5x8">
+            <div class="aspect-ratio--object cover bg-center" style="background-image:url(http://tachyons.io/img/donniedarko-alt.jpg);"></div>
+        </div>
+    </a>
+    <a class="link dim pa3 fl w-50 w-third-m w-25-l border-box" href="https://itunes.apple.com/us/movie/the-cabin-in-the-woods/id531670645?at=1l3vqFJ&mt=6" title="the-cabin-in-the-woods">
+        <div class="aspect-ratio aspect-ratio--5x8">
+            <div class="aspect-ratio--object cover bg-center" style="background-image:url(http://tachyons.io/img/cabininthewoods.jpg);"></div>
+        </div>
+    </a>
+    <a class="link dim pa3 fl w-50 w-third-m w-25-l border-box" href="https://itunes.apple.com/us/movie/john-carpenters-halloween/id1052963015?at=1l3vqFJ&mt=6" title="john-carpenters-halloween">
+        <div class="aspect-ratio aspect-ratio--5x8">
+            <div class="aspect-ratio--object cover bg-center" style="background-image:url(http://tachyons.io/img/halloween.jpg);"></div>
+        </div>
+    </a>
+    <a class="link dim pa3 fl w-50 w-third-m w-25-l border-box" href="https://itunes.apple.com/us/movie/the-monster-squad/id1033675059?at=1l3vqFJ&mt=6" title="the-monster-squad">
+        <div class="aspect-ratio aspect-ratio--5x8">
+            <div class="aspect-ratio--object cover bg-center" style="background-image:url(http://tachyons.io/img/monstersquad.jpg);"></div>
+        </div>
+    </a>
+    <a class="link dim pa3 fl w-50 w-third-m w-25-l border-box" href="https://itunes.apple.com/us/movie/the-addams-family/id267656434?at=1l3vqFJ&mt=6" title="the-addams-family">
+        <div class="aspect-ratio aspect-ratio--5x8">
+            <div class="aspect-ratio--object cover bg-center" style="background-image:url(http://tachyons.io/img/addamsfamily.jpg);"></div>
+        </div>
+    </a>
+    <a class="link dim pa3 fl w-50 w-third-m w-25-l border-box" href="https://itunes.apple.com/us/movie/addams-family-values/id329165439?at=1l3vqFJ&mt=6" title="addams-family-values">
+        <div class="aspect-ratio aspect-ratio--5x8">
+            <div class="aspect-ratio--object cover bg-center" style="background-image:url(http://tachyons.io/img/addamsfamilyvalues.jpg);"></div>
+        </div>
+    </a>
+    <a
+        class="link dim pa3 fl w-50 w-third-m w-25-l border-box"
+        href="https://itunes.apple.com/us/movie/hocus-pocus/id329144864?at=1l3vqFJ&mt=6"
+        title="hocus-pocus">
+        <div class="aspect-ratio aspect-ratio--5x8">
+            <div class="aspect-ratio--object cover bg-center" style="background-image:url(http://tachyons.io/img/hocuspocus.jpg);">
+            </div>
+        </div>
+    </a>
+    <a class="link dim pa3 fl w-50 w-third-m w-25-l border-box" href="https://itunes.apple.com/us/movie/edward-scissorhands/id359722070?at=1l3vqFJ&mt=6" title="edward-scissorhands">
+        <div class="aspect-ratio aspect-ratio--5x8">
+            <div class="aspect-ratio--object cover bg-center" style="background-image:url(http://tachyons.io/img/edwardscissorhands.jpg);"></div>
+        </div>
+    </a>
+    <a class="link dim pa3 fl w-50 w-third-m w-25-l border-box" href="https://itunes.apple.com/us/movie/drag-me-to-hell-unrated/id320467448?at=1l3vqFJ&mt=6" title="drag-me-to-hell-unrated">
+        <div class="aspect-ratio aspect-ratio--5x8">
+            <div class="aspect-ratio--object cover bg-center" style="background-image:url(http://tachyons.io/img/dragmetohell.jpg);"></div>
+        </div>
+    </a>
+    <a class="link dim pa3 fl w-50 w-third-m w-25-l border-box" href="https://itunes.apple.com/us/movie/the-ring/id295256274?at=1l3vqFJ&mt=6" title="the-ring">
+        <div class="aspect-ratio aspect-ratio--5x8">
+            <div class="aspect-ratio--object cover bg-center" style="background-image:url(http://tachyons.io/img/thering.jpg);"></div>
+        </div>
+    </a>
+    <a class="link dim pa3 fl w-50 w-third-m w-25-l border-box" href="https://itunes.apple.com/us/movie/poltergeist/id520869717?at=1l3vqFJ&mt=6" title="poltergeist">
+        <div class="aspect-ratio aspect-ratio--5x8">
+            <div class="aspect-ratio--object cover bg-center" style="background-image:url(http://tachyons.io/img/poltergeist.jpg);"></div>
+        </div>
+    </a>
+    <a class="link dim pa3 fl w-50 w-third-m w-25-l border-box" href="https://itunes.apple.com/us/movie/beetlejuice/id282447504?at=1l3vqFJ&mt=6" title="beetlejuice">
+        <div class="aspect-ratio aspect-ratio--5x8">
+            <div class="aspect-ratio--object cover bg-center" style="background-image:url(http://tachyons.io/img/beetlejuice.jpg);"></div>
+        </div>
+    </a>
+    <a class="link dim pa3 fl w-50 w-third-m w-25-l border-box" href="https://itunes.apple.com/us/movie/nightmare-before-christmas/id281660706?at=1l3vqFJ&mt=6" title="nightmare-before-christmas">
+        <div class="aspect-ratio aspect-ratio--5x8">
+            <div class="aspect-ratio--object cover bg-center" style="background-image:url(http://tachyons.io/img/nightmarebeforechristmas.jpg);"></div>
+        </div>
+    </a>
+    <a class="link dim pa3 fl w-50 w-third-m w-25-l border-box" href="https://itunes.apple.com/us/movie/ernest-scared-stupid/id353370710?at=1l3vqFJ&mt=6" title="ernest scared stupid">
+        <div class="aspect-ratio aspect-ratio--5x8">
+            <div class="aspect-ratio--object cover bg-center" style="background-image:url(http://tachyons.io/img/ernestscaredstupid.jpg);"></div>
+        </div>
+    </a>
+    <a class="link dim pa3 fl w-50 w-third-m w-25-l border-box" href="https://itunes.apple.com/us/movie/casper/id732046880?at=1l3vqFJ&mt=6" title="casper">
+        <div class="aspect-ratio aspect-ratio--5x8">
+            <div class="aspect-ratio--object cover bg-center" style="background-image:url(http://tachyons.io/img/casper.jpg);"></div>
+        </div>
+    </a>
+    <a class="link dim pa3 fl w-50 w-third-m w-25-l border-box" href="https://itunes.apple.com/us/movie/mean-girls/id208511170?at=1l3vqFJ&mt=6" title="mean-girls">
+        <div class="aspect-ratio aspect-ratio--5x8">
+            <div class="aspect-ratio--object cover bg-center" style="background-image:url(http://tachyons.io/img/meangirls.jpg);"></div>
+        </div>
+    </a>
+    <a class="link dim pa3 fl w-50 w-third-m w-25-l border-box" href="https://itunes.apple.com/us/movie/e.t.-the-extra-terrestrial/id544128124?at=1l3vqFJ&mt=6" title="e.t.-the-extra-terrestrial">
+        <div class="aspect-ratio aspect-ratio--5x8">
+            <div class="aspect-ratio--object cover bg-center" style="background-image:url(http://tachyons.io/img/et.jpg);"></div>
+        </div>
+    </a>
+    <a class="link dim pa3 fl w-50 w-third-m w-25-l border-box" href="https://itunes.apple.com/us/movie/stephen-kings-it/id658825811?at=1l3vqFJ&mt=6" title="stephen-kings-it">
+        <div class="aspect-ratio aspect-ratio--5x8">
+            <div class="aspect-ratio--object cover bg-center" style="background-image:url(http://tachyons.io/img/it.jpg);"></div>
+        </div>
+    </a>
+    <a class="link dim pa3 fl w-50 w-third-m w-25-l border-box" href="https://itunes.apple.com/us/movie/the-blair-witch-project/id216086639?at=1l3vqFJ&mt=6" title="the-blair-witch-project">
+        <div class="aspect-ratio aspect-ratio--5x8">
+            <div class="aspect-ratio--object cover bg-center" style="background-image:url(http://tachyons.io/img/blairwitchproject.jpg);"></div>
+        </div>
+    </a>
+    <a class="link dim pa3 fl w-50 w-third-m w-25-l border-box" href="https://itunes.apple.com/us/movie/scream/id425968586?at=1l3vqFJ&mt=6" title="scream">
+        <div class="aspect-ratio aspect-ratio--5x8">
+            <div class="aspect-ratio--object cover bg-center" style="background-image:url(http://tachyons.io/img/scream.jpg);"></div>
+        </div>
+    </a>
+    <a class="link dim pa3 fl w-50 w-third-m w-25-l border-box" href="https://geo.itunes.apple.com/us/movie/scream-2/id432478046?at=1l3vqFJ&mt=6" title="scream-2">
+        <div class="aspect-ratio aspect-ratio--5x8">
+            <div class="aspect-ratio--object cover bg-center" style="background-image:url(http://tachyons.io/img/scream-2.jpg);"></div>
+        </div>
+    </a>
+    <a class="link dim pa3 fl w-50 w-third-m w-25-l border-box" href="https://geo.itunes.apple.com/us/movie/scream-3/id432478189?at=1l3vqFJ&mt=6" title="scream-3">
+        <div class="aspect-ratio aspect-ratio--5x8">
+            <div class="aspect-ratio--object cover bg-center" style="background-image:url(http://tachyons.io/img/scream-3.jpg);"></div>
+        </div>
+    </a>
+    <a class="link dim pa3 fl w-50 w-third-m w-25-l border-box" href="https://itunes.apple.com/us/movie/scream-4/id446341181?at=1l3vqFJ&mt=6" title="scream-4">
+        <div class="aspect-ratio aspect-ratio--5x8">
+            <div class="aspect-ratio--object cover bg-center" style="background-image:url(http://tachyons.io/img/scream4.jpg);"></div>
+        </div>
+    </a>
+    <a class="link dim pa3 fl w-50 w-third-m w-25-l border-box" href="https://itunes.apple.com/us/movie/the-lost-boys/id536779483?at=1l3vqFJ&mt=6" title="the-lost-boys">
+        <div class="aspect-ratio aspect-ratio--5x8">
+            <div class="aspect-ratio--object cover bg-center" style="background-image:url(http://tachyons.io/img/lostboys.jpg);"></div>
+        </div>
+    </a>
+    <a class="link dim pa3 fl w-50 w-third-m w-25-l border-box" href="https://itunes.apple.com/us/movie/28-days-later/id569220589?at=1l3vqFJ&mt=6" title="28-days-later">
+        <div class="aspect-ratio aspect-ratio--5x8">
+            <div class="aspect-ratio--object cover bg-center" style="background-image:url(http://tachyons.io/img/28dayslater.jpg);"></div>
+        </div>
+    </a>
+    <a class="link dim pa3 fl w-50 w-third-m w-25-l border-box" href="https://itunes.apple.com/us/movie/a-nightmare-on-elm-street/id308625280?at=1l3vqFJ&mt=6" title="a-nightmare-on-elm-street">
+        <div class="aspect-ratio aspect-ratio--5x8">
+            <div class="aspect-ratio--object cover bg-center" style="background-image:url(http://tachyons.io/img/nightmareonelmstreet.jpg);"></div>
+        </div>
+    </a>
+    <a class="link dim pa3 fl w-50 w-third-m w-25-l border-box" href="https://itunes.apple.com/us/movie/friday-the-13th-1980/id305332580?at=1l3vqFJ&mt=6" title="f">
+        <div class="aspect-ratio aspect-ratio--5x8">
+            <div class="aspect-ratio--object cover bg-center" style="background-image:url(http://tachyons.io/img/friday13th.jpeg);"></div>
+        </div>
+    </a>
+    <a class="link dim pa3 fl w-50 w-third-m w-25-l border-box" href="https://itunes.apple.com/us/movie/pet-sematary/id212848151?at=1l3vqFJ&mt=6" title="pet-sematary">
+        <div class="aspect-ratio aspect-ratio--5x8">
+            <div class="aspect-ratio--object cover bg-center" style="background-image:url(http://tachyons.io/img/petsemetary.jpg);"></div>
+        </div>
+    </a>
+    <a class="link dim pa3 fl w-50 w-third-m w-25-l border-box" href="https://itunes.apple.com/us/movie/from-dusk-till-dawn/id461537388?at=1l3vqFJ&mt=6" title="from-dusk-till-dawn">
+        <div class="aspect-ratio aspect-ratio--5x8">
+            <div class="aspect-ratio--object cover bg-center" style="background-image:url(http://tachyons.io/img/dusktildawn.jpg);"></div>
+        </div>
+    </a>
+    <a class="link dim pa3 fl w-50 w-third-m w-25-l border-box" href="https://geo.itunes.apple.com/us/movie/zombieland/id336702170?at=1l3vqFJ&mt=6" title="zombieland">
+        <div class="aspect-ratio aspect-ratio--5x8">
+            <div class="aspect-ratio--object cover bg-center" style="background-image:url(http://tachyons.io/img/zombieland.jpg);"></div>
+        </div>
+    </a>
+    <a class="link dim pa3 fl w-50 w-third-m w-25-l border-box" href="https://geo.itunes.apple.com/us/movie/the-evil-dead/id326373852?at=1l3vqFJ&mt=6" title="the-evil-dead">
+        <div class="aspect-ratio aspect-ratio--5x8">
+            <div class="aspect-ratio--object cover bg-center" style="background-image:url(http://tachyons.io/img/evildead.jpg);"></div>
+        </div>
+    </a>
+    <a class="link dim pa3 fl w-50 w-third-m w-25-l border-box" href="https://geo.itunes.apple.com/us/movie/evil-dead-2/id423066738?at=1l3vqFJ&mt=6" title="evil-dead-2">
+        <div class="aspect-ratio aspect-ratio--5x8">
+            <div class="aspect-ratio--object cover bg-center" style="background-image:url(http://tachyons.io/img/evildead-2.png);"></div>
+        </div>
+    </a>
+    <a class="link dim pa3 fl w-50 w-third-m w-25-l border-box" href="https://geo.itunes.apple.com/us/movie/army-of-darkness/id280526877?at=1l3vqFJ&mt=6" title="army-of-darkness">
+        <div class="aspect-ratio aspect-ratio--5x8">
+            <div class="aspect-ratio--object cover bg-center" style="background-image:url(http://tachyons.io/img/armyofdarkness.jpg);"></div>
+        </div>
+    </a>
+</main>
--- a/docs/components/collections/posters.html
+++ b/docs/components/collections/posters.html
@ -0,0 +1,27 @@
+<main class="cf pa2">
+    <div class="fl w-100 w-50-ns ph2">
+      <a href="" class="pv2 grow db no-underline black"><img class="db w-100" src="https://s3-us-west-2.amazonaws.com/prnt/elevaters030211_960.jpg"></a>
+      <a href="" class="no-underline pv2 grow db"><img class="db w-100" src="https://s3-us-west-2.amazonaws.com/prnt/elevaters.jpg"></a>
+      <a href="#" class="no-underline pv2 grow db"><img class="db w-100" src="https://s3-us-west-2.amazonaws.com/prnt/pink-and-noseworthy-22.12.10-cargo_960.jpg"/></a>
+      <a href="" class="pv2 grow db no-underline black"><img class="db w-100" src="https://s3-us-west-2.amazonaws.com/prnt/hw090911_960.jpg"></a>
+    </div>
+    <div class="fl w-50 w-25-ns ph2">
+      <a href="" class="pv2 grow db no-underline black"><img class="db w-100" src="https://s3-us-west-2.amazonaws.com/prnt/adam-stern-031209_960-2.jpg"></a>
+      <a href="" class="pv2 grow db no-underline black"><img class="db w-100" src="https://s3-us-west-2.amazonaws.com/prnt/hw-080411-cargo_960.jpg"></a>
+      <a href="" class="pv2 grow db no-underline black"><img class="db w-100" src="https://s3-us-west-2.amazonaws.com/prnt/hw18-240112-cc_960.jpg"> </a>
+      <a href="" class="pv2 grow db no-underline black"><img class="db w-100" src="https://s3-us-west-2.amazonaws.com/prnt/hw-residency-cargo_960.jpg"></a>
+      <a href="" class="pv2 grow db no-underline black"><img class="db w-100" src="https://s3-us-west-2.amazonaws.com/prnt/orchid-2-mnkr_960.jpg"></a>
+      <a href="" class="pv2 grow db no-underline black"><img class="db w-100" src="https://s3-us-west-2.amazonaws.com/prnt/O270711_960-2.jpg"></a>
+      <a href="" class="pv2 grow db no-underline black"><img class="db w-100" src="https://s3-us-west-2.amazonaws.com/prnt/adam-stern-020510_960.jpg"></a>
+      <a href="" class="pv2 grow db no-underline black"><img class="db w-100" src="https://s3-us-west-2.amazonaws.com/prnt/adam-stern-130610_960.jpg"></a>
+    </div>
+    <div class="fl w-50 w-25-ns ph2">
+      <a href="" class="pv2 grow db no-underline black"><img class="db w-100" src="https://s3-us-west-2.amazonaws.com/prnt/zach-hurd-101218_960.jpg"></a>
+      <a href="" class="pv2 grow db no-underline black"><img class="db w-100" src="https://s3-us-west-2.amazonaws.com/prnt/zh170311.4.cargo_960.jpg"></a>
+      <a href="" class="pv2 grow db no-underline black"><img class="db w-100" src="https://s3-us-west-2.amazonaws.com/prnt/hwspringtour-cargo_960-1.jpg"></a>
+      <a href="" class="pv2 grow db no-underline black"><img class="db w-100" src="https://s3-us-west-2.amazonaws.com/prnt/cc-shanee_960.jpg"></a>
+      <a href="" class="pv2 grow db no-underline black"><img class="db w-100" src="https://s3-us-west-2.amazonaws.com/prnt/ZachHurd-190111s_960.jpg"></a>
+      <a href="" class="pv2 grow db no-underline black"><img class="db w-100" src="https://s3-us-west-2.amazonaws.com/prnt/hw170211pie-cargo_960.jpg"></a>
+      <a href="" class="pv2 grow db no-underline black"><img class="db w-100" src="https://s3-us-west-2.amazonaws.com/prnt/adam-stern-191110_960.jpg"></a>
+    </div>
+</main>
--- a/docs/components/collections/square-title-subtitle.html
+++ b/docs/components/collections/square-title-subtitle.html
@ -0,0 +1,202 @@
+<section class="cf w-100 pa2-ns">
+  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
+    <div class="aspect-ratio aspect-ratio--1x1">
+      <img style="background-image:url(http://mrmrs.github.io/images/0006.jpg);"
+      class="db bg-center cover aspect-ratio--object" />
+    </div>
+    <a href="#0" class="ph2 ph0-ns pb3 link db">
+      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
+      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
+    </a>
+  </article>
+  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
+    <div class="aspect-ratio aspect-ratio--1x1">
+      <img style="background-image:url(http://mrmrs.github.io/images/0002.jpg);"
+      class="db bg-center cover aspect-ratio--object" />
+    </div>
+    <a href="#0" class="ph2 ph0-ns pb3 link db">
+      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
+      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
+    </a>
+  </article>
+  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
+    <div class="aspect-ratio aspect-ratio--1x1">
+      <img style="background-image:url(http://mrmrs.github.io/images/0003.jpg);"
+      class="db bg-center cover aspect-ratio--object" />
+    </div>
+    <a href="#0" class="ph2 ph0-ns pb3 link db">
+      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
+      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
+    </a>
+  </article>
+  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
+    <div class="aspect-ratio aspect-ratio--1x1">
+      <img style="background-image:url(http://mrmrs.github.io/images/0004.jpg);"
+      class="db bg-center cover aspect-ratio--object" />
+    </div>
+    <a href="#0" class="ph2 ph0-ns pb3 link db">
+      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
+      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
+    </a>
+  </article>
+  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
+    <div class="aspect-ratio aspect-ratio--1x1">
+      <img style="background-image:url(http://mrmrs.github.io/images/0007.jpg);"
+      class="db bg-center cover aspect-ratio--object" />
+    </div>
+    <a href="#0" class="ph2 ph0-ns pb3 link db">
+      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
+      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
+    </a>
+  </article>
+  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
+    <div class="aspect-ratio aspect-ratio--1x1">
+      <img style="background-image:url(http://mrmrs.github.io/images/0008.jpg);"
+      class="db bg-center cover aspect-ratio--object" />
+    </div>
+    <a href="#0" class="ph2 ph0-ns pb3 link db">
+      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
+      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
+    </a>
+  </article>
+  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
+    <div class="aspect-ratio aspect-ratio--1x1">
+      <img style="background-image:url(http://mrmrs.github.io/images/0009.jpg);"
+      class="db bg-center cover aspect-ratio--object" />
+    </div>
+    <a href="#0" class="ph2 ph0-ns pb3 link db">
+      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
+      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
+    </a>
+  </article>
+  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
+    <div class="aspect-ratio aspect-ratio--1x1">
+      <img style="background-image:url(http://mrmrs.github.io/images/0010.jpg);"
+      class="db bg-center cover aspect-ratio--object" />
+    </div>
+    <a href="#0" class="ph2 ph0-ns pb3 link db">
+      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
+      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
+    </a>
+  </article>
+  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
+    <div class="aspect-ratio aspect-ratio--1x1">
+      <img style="background-image:url(http://mrmrs.github.io/images/0011.jpg);"
+      class="db bg-center cover aspect-ratio--object" />
+    </div>
+    <a href="#0" class="ph2 ph0-ns pb3 link db">
+      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
+      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
+    </a>
+  </article>
+  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
+    <div class="aspect-ratio aspect-ratio--1x1">
+      <img style="background-image:url(http://mrmrs.github.io/images/0012.jpg);"
+      class="db bg-center cover aspect-ratio--object" />
+    </div>
+    <a href="#0" class="ph2 ph0-ns pb3 link db">
+      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
+      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
+    </a>
+  </article>
+  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
+    <div class="aspect-ratio aspect-ratio--1x1">
+      <img style="background-image:url(http://mrmrs.github.io/images/0013.jpg);"
+      class="db bg-center cover aspect-ratio--object" />
+    </div>
+    <a href="#0" class="ph2 ph0-ns pb3 link db">
+      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
+      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
+    </a>
+  </article>
+  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
+    <div class="aspect-ratio aspect-ratio--1x1">
+      <img style="background-image:url(http://mrmrs.github.io/images/0014.jpg);"
+      class="db bg-center cover aspect-ratio--object" />
+    </div>
+    <a href="#0" class="ph2 ph0-ns pb3 link db">
+      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
+      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
+    </a>
+  </article>
+  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
+    <div class="aspect-ratio aspect-ratio--1x1">
+      <img style="background-image:url(http://mrmrs.github.io/images/0015.jpg);"
+      class="db bg-center cover aspect-ratio--object" />
+    </div>
+    <a href="#0" class="ph2 ph0-ns pb3 link db">
+      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
+      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
+    </a>
+  </article>
+  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
+    <div class="aspect-ratio aspect-ratio--1x1">
+      <img style="background-image:url(http://mrmrs.github.io/images/0016.jpg);"
+      class="db bg-center cover aspect-ratio--object" />
+    </div>
+    <a href="#0" class="ph2 ph0-ns pb3 link db">
+      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
+      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
+    </a>
+  </article>
+  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
+    <div class="aspect-ratio aspect-ratio--1x1">
+      <img style="background-image:url(http://mrmrs.github.io/images/0017.jpg);"
+      class="db bg-center cover aspect-ratio--object" />
+    </div>
+    <a href="#0" class="ph2 ph0-ns pb3 link db">
+      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
+      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
+    </a>
+  </article>
+  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
+    <div class="aspect-ratio aspect-ratio--1x1">
+      <img style="background-image:url(http://mrmrs.github.io/images/0018.jpg);"
+      class="db bg-center cover aspect-ratio--object" />
+    </div>
+    <a href="#0" class="ph2 ph0-ns pb3 link db">
+      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
+      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
+    </a>
+  </article>
+  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
+    <div class="aspect-ratio aspect-ratio--1x1">
+      <img style="background-image:url(http://mrmrs.github.io/images/0019.jpg);"
+      class="db bg-center cover aspect-ratio--object" />
+    </div>
+    <a href="#0" class="ph2 ph0-ns pb3 link db">
+      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
+      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
+    </a>
+  </article>
+  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
+    <div class="aspect-ratio aspect-ratio--1x1">
+      <img style="background-image:url(http://mrmrs.github.io/images/0020.jpg);"
+      class="db bg-center cover aspect-ratio--object" />
+    </div>
+    <a href="#0" class="ph2 ph0-ns pb3 link db">
+      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
+      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
+    </a>
+  </article>
+  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
+    <div class="aspect-ratio aspect-ratio--1x1">
+      <img style="background-image:url(http://mrmrs.github.io/images/0021.jpg);"
+      class="db bg-center cover aspect-ratio--object" />
+    </div>
+    <a href="#0" class="ph2 ph0-ns pb3 link db">
+      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
+      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
+    </a>
+  </article>
+  <article class="fl w-100 w-50-m  w-25-ns pa2-ns">
+    <div class="aspect-ratio aspect-ratio--1x1">
+      <img style="background-image:url(http://mrmrs.github.io/images/0022.jpg);"
+      class="db bg-center cover aspect-ratio--object" />
+    </div>
+    <a href="#0" class="ph2 ph0-ns pb3 link db">
+      <h3 class="f5 f4-ns mb0 black-90">Title of piece</h3>
+      <h3 class="f6 f5 fw4 mt2 black-60">Subtitle of piece</h3>
+    </a>
+  </article>
+</section>
--- a/docs/components/collections/vinyl.html
+++ b/docs/components/collections/vinyl.html
@ -0,0 +1,89 @@
+<article class="cf">
+  <div class="fl w-50 w-25-ns">
+    <a href="https://www.amazon.com/BEYONCÉ-Beyonce/dp/B00KCOMBJC/ref=sr_1_2_twi_lp__3?s=music&ie=UTF8&qid=1480422067&sr=1-2&keywords=beyonce&tag=mrmrs01-20" class="db aspect-ratio aspect-ratio--1x1 dim">
+      <span role="img" aria-label="Beyoncé" style="background-image:url(http://mrmrs.github.io/photos/beyonce.jpg);" class="bg-center cover aspect-ratio--object"></span>
+    </a>
+  </div>
+  <div class="fl w-50 w-25-ns">
+    <a href="https://www.amazon.com/99-9-KAYTRANADA/dp/B01D9DBNX2/ref=sr_1_1_twi_lp__3?s=music&ie=UTF8&qid=1480422105&sr=1-1&keywords=kaytranada+vinyl&tag=mrmrs01-20" class="db aspect-ratio aspect-ratio--1x1 dim">
+      <span role="img" aria-label="Kaytranada" style="background-image:url(http://mrmrs.github.io/photos/kaytranada.jpg);" class="bg-center cover aspect-ratio--object"></span>
+    </a>
+  </div>
+  <div class="fl w-50 w-25-ns">
+    <a href="https://www.amazon.com/Woman-2LP-Set-Full-Album/dp/B01LX3E0ET/ref=sr_1_1?s=music&ie=UTF8&qid=1480422119&sr=1-1&keywords=justice&tag=mrmrs01-20" class="db aspect-ratio aspect-ratio--1x1 dim">
+      <span role="img" aria-label="Woman - Justice" style="background-image:url(http://mrmrs.github.io/photos/justice.jpg);" class="bg-center cover aspect-ratio--object"></span>
+    </a>
+  </div>
+  <div class="fl w-50 w-25-ns">
+    <a href="https://www.amazon.com/Skin-Flume/dp/B01DD5N35W/ref=sr_1_1_twi_lp__3?s=music&ie=UTF8&qid=1480422133&sr=1-1&keywords=flume&tag=mrmrs01-20" class="db aspect-ratio aspect-ratio--1x1 dim">
+      <span role="img" aria-label="Skin - Flume" style="background-image:url(http://mrmrs.github.io/photos/flume.jpg);" class="bg-center cover aspect-ratio--object"></span>
+    </a>
+  </div>
+  <div class="fl w-50">
+    <a href="https://www.amazon.com/Seat-at-Table-Solange/dp/B01LXP7I5N/ref=sr_tnr_p_1_195429011_1_twi_lp__3?s=music&ie=UTF8&qid=1480422087&sr=1-1&keywords=solange+seat+at+the+table&tag=mrmrs01-20" class="db aspect-ratio aspect-ratio--1x1 dim">
+      <span role="img" aria-label="Seat at Table Solange" style="background-image:url(http://mrmrs.github.io/photos/solange.jpg);" class="bg-center cover aspect-ratio--object"></span>
+    </a>
+  </div>
+  <div class="fl w-50 w-25-ns">
+    <a href="https://www.amazon.com/untitled-unmastered-LP-Kendrick-Lamar/dp/B01DET9BV2/ref=sr_1_3_twi_lp__3?s=music&ie=UTF8&qid=1480370912&sr=1-3&keywords=kendrick+lamar&tag=mrmrs01-20" class="db aspect-ratio aspect-ratio--1x1 dim">
+      <span role="img" aria-label="Untitled Unmastered - Kendrick Lamar" style="background-image:url(http://mrmrs.github.io/photos/untitledunmastered.jpg);" class="bg-center cover aspect-ratio--object"></span>
+    </a>
+  </div>
+  <div class="fl w-100 w-25-ns">
+    <a href="https://www.amazon.com/Moon-Shaped-Pool-2-LP-Download/dp/B01FDF12UI/ref=sr_1_1_twi_lp__3?s=music&ie=UTF8&qid=1480370971&sr=1-1&keywords=moon+shaped+pool&tag=mrmrs01-20" class="db aspect-ratio aspect-ratio--1x1 dim">
+      <span role="img" aria-label="Moon Shaped Pool 2" style="background-image:url(http://mrmrs.github.io/photos/moonshapedpool.jpg);" class="bg-center cover aspect-ratio--object"></span>
+    </a>
+  </div>
+  <div class="fl w-50 w-25-ns">
+    <a href="https://www.amazon.com/Colour-Anything-2-LP/dp/B01F8674B8/ref=sr_1_1_twi_lp__3?s=music&ie=UTF8&qid=1480371036&sr=1-1&keywords=color+in+anything&tag=mrmrs01-20" class="db aspect-ratio aspect-ratio--1x1 dim">
+      <span role="img" aria-label="Colour Anything 2" style="background-image:url(http://mrmrs.github.io/photos/colouranything.jpg);" class="bg-center cover aspect-ratio--object"></span>
+    </a>
+  </div>
+  <div class="fl w-50 w-25-ns">
+    <a href="https://www.amazon.com/Good-Luck-Do-Your-Best/dp/B01C3IHINI/ref=sr_1_1_twi_lp__3?s=music&ie=UTF8&qid=1480371123&sr=1-1&keywords=good+luck+gold+panda&tag=mrmrs01-20" class="db aspect-ratio aspect-ratio--1x1 dim">
+      <span role="img" aria-label="Good Luck Do Your Best" style="background-image:url(http://mrmrs.github.io/photos/goldpanda.jpg);" class="bg-center cover aspect-ratio--object"></span>
+    </a>
+  </div>
+  <div class="fl w-100 w-50-m w-25-ns">
+    <a href="https://www.amazon.com/32-Levels-Clams-Casino/dp/B01GU83I4K/ref=sr_1_2_twi_lp__1?s=music&ie=UTF8&qid=1480371183&sr=1-2&keywords=clams+casino&tag=mrmrs01-20" class="db aspect-ratio aspect-ratio--1x1 dim">
+      <span role="img" aria-label="32 Levels Clams Casino" style="background-image:url(http://mrmrs.github.io/photos/clamscasino.jpg);" class="bg-center cover aspect-ratio--object"></span>
+    </a>
+    <a href="https://www.amazon.com/Danny-Brown-Atrocity-Exhibition-Exclusive/dp/B01M9F0LSQ/ref=sr_1_2?ie=UTF8&qid=1480421198&sr=8-2&keywords=danny+brown+vinyl&tag=mrmrs01-20" class="db aspect-ratio aspect-ratio--1x1 dim">
+      <span role="img" aria-label="Danny Brown Atrocity Exhibition Exclusive" style="background-image:url(http://mrmrs.github.io/photos/dannybrown.jpg);" class="bg-center cover aspect-ratio--object"></span>
+    </a>
+  </div>
+  <div class="fl w-100 w-50-m w-25-l">
+    <div class="fl w-100">
+      <a href="https://www.amazon.com/Human-Energy-MACHINEDRUM/dp/B01HC7UTBI/ref=sr_1_1_twi_lp__3?s=music&ie=UTF8&qid=1480371226&sr=1-1&keywords=human+energy&tag=mrmrs01-20" class="db aspect-ratio aspect-ratio--1x1 dim">
+        <span role="img" aria-label="Human Energy - Machinedrum" style="background-image:url(http://mrmrs.github.io/photos/humanenergy.jpg);" class="bg-center cover aspect-ratio--object"></span>
+      </a>
+    </div>
+    <div class="fl w-100">
+      <div class="fl w-50">
+        <a href="https://www.amazon.com/Moodymann-DJ-Kicks-DJ-KICKS/dp/B01AEOM6D0/ref=sr_1_1_twi_lp__3?s=music&ie=UTF8&qid=1480371894&sr=1-1&keywords=dj+kicks+moodymann&tag=mrmrs01-20" class="db aspect-ratio aspect-ratio--1x1 dim">
+          <span role="img" aria-label="Moodymann - DJ Kicks" style="background-image:url(http://mrmrs.github.io/photos/moodyman.jpg);" class="bg-center cover aspect-ratio--object"></span>
+        </a>
+      </div>
+      <div class="fl w-50">
+        <a href="https://www.amazon.com/Stranger-Things-Netflix-Original-Soundtrack/dp/B01KA4MVF2/ref=sr_1_1_twi_lp__3?s=music&ie=UTF8&qid=1480423240&sr=1-1&keywords=stranger+things&tag=mrmrs01-20" class="db aspect-ratio aspect-ratio--1x1 dim">
+          <span role="img" aria-label="Stranger Things Netflix Original Soundtrack" style="background-image:url(http://mrmrs.github.io/photos/strangerthings.jpg);" class="bg-center cover aspect-ratio--object"></span>
+        </a>
+      </div>
+      <div class="fl w-50">
+        <a href="https://www.amazon.com/How-Be-Human-Being-LP/dp/B01GQ7DIJA/ref=tmm_vnl_swatch_0?_encoding=UTF8&qid=1480421224&sr=8-1&tag=mrmrs01-20" class="db aspect-ratio aspect-ratio--1x1 dim">
+          <span role="img" aria-label="How Be Human Being LP" style="background-image:url(http://mrmrs.github.io/photos/glassanimals.jpg);" class="bg-center cover aspect-ratio--object"></span>
+        </a>
+      </div>
+      <div class="fl w-50">
+        <a href="https://www.amazon.com/22-Million-Bon-Iver/dp/B01KBKVK2K/ref=sr_tnr_p_6_195212011_1_twi_lp__3?s=music&ie=UTF8&qid=1480422776&sr=1-6&tag=mrmrs01-20" class="db aspect-ratio aspect-ratio--1x1 dim">
+          <span role="img" aria-label="22 Million - Bon Iver" style="background-image:url(http://mrmrs.github.io/photos/boniver.jpg);" class="bg-center cover aspect-ratio--object"></span>
+        </a>
+      </div>
+    </div>
+  </div>
+  <div class="fl w-100 w-50-l">
+    <a href="https://www.amazon.com/Malibu-Anderson-Paak/dp/B01BXNXBAS/ref=sr_1_1_twi_lp__3?s=music&ie=UTF8&qid=1480422041&sr=1-1&keywords=paak&tag=mrmrs01-20" class="db aspect-ratio aspect-ratio--1x1 dim">
+      <span role="img" aria-label="Malibu -  Anderson Paak" style="background-image:url(http://mrmrs.github.io/photos/paak.jpg);" class="bg-center cover aspect-ratio--object"></span>
+    </a>
+  </div>
+</article>
--- a/docs/components/definition-lists/inline.html
+++ b/docs/components/definition-lists/inline.html
@ -0,0 +1,31 @@
+<div class="pa3 pa5-ns">
+  <h4 class="f6 fw6">Glossary</h4>
+  <dl class="f6 lh-title mv2">
+    <dt class="dib b">W:</dt>
+    <dd class="dib ml0 gray">Wins</dd>
+  </dl>
+  <dl class="f6 lh-title mv2">
+    <dt class="dib b">L:</dt>
+    <dd class="dib ml0 gray">Losses</dd>
+  </dl>
+  <dl class="f6 lh-title mv2">
+    <dt class="dib b">PCT:</dt>
+    <dd class="dib ml0 gray">Winning Percentages</dd>
+  </dl>
+  <dl class="f6 lh-title mv2">
+    <dt class="dib b">GB:</dt>
+    <dd class="dib ml0 gray">Games Back</dd>
+  </dl>
+  <dl class="f6 lh-title mv2">
+    <dt class="dib b">Home:</dt>
+    <dd class="dib ml0 gray">Home Record</dd>
+  </dl>
+  <dl class="f6 lh-title mv2">
+    <dt class="dib b">Road:</dt>
+    <dd class="dib ml0 gray">Road Record</dd>
+  </dl>
+  <dl class="f6 lh-title mv2">
+    <dt class="dib b">Div:</dt>
+    <dd class="dib ml0 gray">Division Record</dd>
+  </dl>
+</div>
--- a/docs/components/definition-lists/simple.html
+++ b/docs/components/definition-lists/simple.html
@ -0,0 +1,14 @@
+<dl class="lh-title pa4 mt0">
+  <dt class="f6 b">Favorite Song</dt>
+  <dd class="ml0">Devil Got My Woman - Skip James</dd>
+  <dt class="f6 b mt2">Favorite Movie</dt>
+  <dd class="ml0">Primer</dd>
+  <dt class="f6 b mt2">Favorite Artist</dt>
+  <dd class="ml0">Kanye West</dd>
+  <dt class="f6 b mt2">Favorite Food</dt>
+  <dd class="ml0">Cheese Pizza</dd>
+  <dt class="f6 b mt2">Least Favorite Flavor</dt>
+  <dd class="ml0">Cherry</dd>
+  <dt class="f6 b mt2">Favorite Hobby</dt>
+  <dd class="ml0">Eating Cheese Pizza</dd>
+</dl>
--- a/docs/components/error-pages/404.html
+++ b/docs/components/error-pages/404.html
@ -0,0 +1,15 @@
+<section class="vh-100 bg-washed-blue baskerville">
+  <header class="tc ph5 lh-copy">
+      <h1 class="f1 f-headline-l code mb3 fw9 dib tracked-tight light-purple">404</h1>
+      <h2 class="tc f1-l fw1">Sorry, we can't find the page you are looking for.</h2>
+  </header>
+  <p class="fw1 i tc mt4 mt5-l f4 f3-l">Are you looking for one of these?</p>
+  <ul class="list tc pl0 w-100 mt5">
+    <li class="dib"><a class="f5 f4-ns link black db pv2 ph3 hover-light-purple" href="/">Home</a></li>
+    <li class="dib"><a class="f5 f4-ns link black db pv2 ph3 hover-light-purple" href="/about">About</a></li>
+    <li class="dib"><a class="f5 f4-ns link black db pv2 ph3 hover-light-purple" href="/careers">Careers</a></li>
+    <li class="dib"><a class="f5 f4-ns link black db pv2 ph3 hover-light-purple" href="/contact">Contact</a></li>
+    <li class="dib"><a class="f5 f4-ns link black db pv2 ph3 hover-light-purple" href="/signup">Sign Up</a></li>
+    <li class="dib"><a class="f5 f4-ns link black db pv2 ph3 hover-light-purple" href="/help">Help</a></li>
+  </ul>
+</section>
--- a/docs/components/footers/centered-icons-hover-glow.html
+++ b/docs/components/footers/centered-icons-hover-glow.html
@ -0,0 +1,41 @@
+<!-- SVG Icons are from https://simpleicons.org -->
+<footer style="background-image:url(http://i.giphy.com/5lF3pQpdquCBy.gif);" class="tc-l bg-center cover bg-black">
+  <div class="w-100 ph3 pv5 bg-black-80">
+    <a class="link white-60 bg-transparent hover-white inline-flex items-center ma2 tc br2 pa2" href="https://facebook.com" title="Facebook">
+      <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M15.117 0H.883C.395 0 0 .395 0 .883v14.234c0 .488.395.883.883.883h7.663V9.804H6.46V7.39h2.086V5.607c0-2.066 1.262-3.19 3.106-3.19.883 0 1.642.064 1.863.094v2.16h-1.28c-1 0-1.195.476-1.195 1.176v1.54h2.39l-.31 2.416h-2.08V16h4.077c.488 0 .883-.395.883-.883V.883C16 .395 15.605 0 15.117 0" fill-rule="nonzero"/></svg>
+      <span class="f6 ml3 pr2">Facebook</span>
+    </a>
+    <a class="link white-60 bg-transparent hover-white inline-flex items-center ma2 tc br2 pa2" href="https://github.com/mrmrs" title="GitHub">
+      <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8 0C3.58 0 0 3.582 0 8c0 3.535 2.292 6.533 5.47 7.59.4.075.547-.172.547-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.223 1.873.87 2.33.665.072-.517.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.953 0-.873.31-1.587.823-2.147-.083-.202-.358-1.015.077-2.117 0 0 .672-.215 2.2.82.638-.178 1.323-.266 2.003-.27.68.004 1.364.092 2.003.27 1.527-1.035 2.198-.82 2.198-.82.437 1.102.163 1.915.08 2.117.513.56.823 1.274.823 2.147 0 3.073-1.87 3.75-3.653 3.947.287.246.543.735.543 1.48 0 1.07-.01 1.933-.01 2.195 0 .215.144.463.55.385C13.71 14.53 16 11.534 16 8c0-4.418-3.582-8-8-8"/></svg>
+      <span class="f6 ml3 pr2">GitHub</span>
+    </a>
+    <a class="link white-60 bg-transparent hover-white inline-flex items-center ma2 tc br2 pa2" href="https://instagram.com/mrmrs_" title="Instagram">
+      <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8 0C5.827 0 5.555.01 4.702.048 3.85.088 3.27.222 2.76.42c-.526.204-.973.478-1.417.923-.445.444-.72.89-.923 1.417-.198.51-.333 1.09-.372 1.942C.008 5.555 0 5.827 0 8s.01 2.445.048 3.298c.04.852.174 1.433.372 1.942.204.526.478.973.923 1.417.444.445.89.72 1.417.923.51.198 1.09.333 1.942.372.853.04 1.125.048 3.298.048s2.445-.01 3.298-.048c.852-.04 1.433-.174 1.942-.372.526-.204.973-.478 1.417-.923.445-.444.72-.89.923-1.417.198-.51.333-1.09.372-1.942.04-.853.048-1.125.048-3.298s-.01-2.445-.048-3.298c-.04-.852-.174-1.433-.372-1.942-.204-.526-.478-.973-.923-1.417-.444-.445-.89-.72-1.417-.923-.51-.198-1.09-.333-1.942-.372C10.445.008 10.173 0 8 0zm0 1.44c2.136 0 2.39.01 3.233.048.78.036 1.203.166 1.485.276.374.145.64.318.92.598.28.28.453.546.598.92.11.282.24.705.276 1.485.038.844.047 1.097.047 3.233s-.01 2.39-.048 3.233c-.036.78-.166 1.203-.276 1.485-.145.374-.318.64-.598.92-.28.28-.546.453-.92.598-.282.11-.705.24-1.485.276-.844.038-1.097.047-3.233.047s-2.39-.01-3.233-.048c-.78-.036-1.203-.166-1.485-.276-.374-.145-.64-.318-.92-.598-.28-.28-.453-.546-.598-.92-.11-.282-.24-.705-.276-1.485C1.45 10.39 1.44 10.136 1.44 8s.01-2.39.048-3.233c.036-.78.166-1.203.276-1.485.145-.374.318-.64.598-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276C5.61 1.45 5.864 1.44 8 1.44zm0 2.452c-2.27 0-4.108 1.84-4.108 4.108 0 2.27 1.84 4.108 4.108 4.108 2.27 0 4.108-1.84 4.108-4.108 0-2.27-1.84-4.108-4.108-4.108zm0 6.775c-1.473 0-2.667-1.194-2.667-2.667 0-1.473 1.194-2.667 2.667-2.667 1.473 0 2.667 1.194 2.667 2.667 0 1.473-1.194 2.667-2.667 2.667zm5.23-6.937c0 .53-.43.96-.96.96s-.96-.43-.96-.96.43-.96.96-.96.96.43.96.96z"/></svg>
+      <span class="f6 ml3 pr2">Instagram</span>
+    </a>
+    <a class="link white-60 bg-transparent hover-white inline-flex items-center ma2 tc br2 pa2" href="https://youtube.com" title="youtube">
+      <svg class="dib w2 h2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M0 7.345c0-1.294.16-2.59.16-2.59s.156-1.1.636-1.587c.608-.637 1.408-.617 1.764-.684C3.84 2.36 8 2.324 8 2.324s3.362.004 5.6.166c.314.038.996.04 1.604.678.48.486.636 1.588.636 1.588S16 6.05 16 7.346v1.258c0 1.296-.16 2.59-.16 2.59s-.156 1.102-.636 1.588c-.608.638-1.29.64-1.604.678-2.238.162-5.6.166-5.6.166s-4.16-.037-5.44-.16c-.356-.067-1.156-.047-1.764-.684-.48-.487-.636-1.587-.636-1.587S0 9.9 0 8.605v-1.26zm6.348 2.73V5.58l4.323 2.255-4.32 2.24h-.002z"/></svg>
+      <span class="f6 ml3 pr2">Youtube</span>
+    </a>
+    <a class="link white-60 bg-transparent hover-white inline-flex items-center ma2 tc br2 pa2" href="https://soundcloud.com/mrsjxn" title="SoundCloud">
+      <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><g fill-rule="nonzero"><path d="M.773 8.13c-.034 0-.062.03-.067.066L.55 9.633l.156 1.405c.005.038.033.065.067.065.033 0 .06-.027.066-.065l.178-1.405-.18-1.437C.835 8.158.807 8.13.774 8.13M.18 8.682c-.032 0-.06.025-.063.062L0 9.634l.117.872c.004.037.03.063.064.063s.06-.027.065-.063l.14-.874-.14-.89c-.005-.036-.03-.06-.064-.06M1.4 7.85c-.04 0-.075.033-.08.078l-.148 1.705.15 1.643c.003.045.037.078.08.078.04 0 .074-.033.08-.078l.17-1.643-.17-1.705c-.006-.045-.04-.078-.08-.078M2.035 7.79c-.05 0-.09.04-.094.092l-.14 1.75.14 1.696c.005.052.045.092.095.092s.09-.04.094-.092l.16-1.695-.16-1.752c-.006-.05-.046-.09-.095-.09M2.78 11.342zM2.78 8.008c-.003-.06-.05-.106-.106-.106-.058 0-.104.046-.108.107l-.133 1.623.133 1.71c.004.06.05.105.108.105.057 0 .103-.046.107-.106l.152-1.71-.15-1.624zM3.318 6.87c-.065 0-.118.053-.12.12L3.07 9.634l.125 1.71c.003.065.056.118.12.118.065 0 .118-.053.122-.12l.14-1.708-.14-2.644c-.005-.067-.058-.12-.122-.12M3.957 6.262c-.072 0-.132.058-.135.133l-.117 3.248.117 1.698c.003.076.063.134.135.134.072 0 .13-.058.135-.133v.002l.132-1.7-.132-3.247c-.004-.075-.063-.133-.135-.133M4.62 5.968c-.08 0-.144.065-.147.148l-.11 3.52.11 1.68c.003.08.068.146.148.146.08 0 .146-.065.15-.147l.123-1.68-.123-3.52c-.004-.082-.07-.147-.15-.147M5.443 5.997c-.003-.09-.074-.16-.162-.16-.088 0-.16.07-.16.16l-.102 3.638.1 1.67c.003.09.074.16.163.16.09 0 .16-.07.163-.16l.113-1.67-.113-3.638zM5.443 11.304zM5.945 5.915c-.096 0-.173.077-.175.175l-.093 3.545.093 1.654c.002.096.08.173.175.173.096 0 .174-.077.176-.175v.002l.105-1.655L6.12 6.09c0-.098-.08-.175-.175-.175M6.615 6.03c-.104 0-.187.084-.19.19l-.084 3.416.086 1.643c.002.104.085.186.19.186.103 0 .186-.082.19-.188l.093-1.642-.095-3.416c-.003-.106-.086-.19-.19-.19M7.402 5.403c-.032-.02-.07-.034-.112-.034-.04 0-.078.01-.11.032-.054.036-.092.098-.093.17v.038L7.01 9.635l.077 1.634v.006c.003.045.02.087.048.12.037.045.093.074.155.074.055 0 .106-.023.142-.06.037-.036.06-.087.06-.142l.01-.162.077-1.47-.087-4.065c0-.07-.037-.13-.09-.167M7.493 11.27v-.002zM8.072 5.018c-.032-.02-.07-.03-.11-.03-.05 0-.1.017-.137.048-.048.04-.08.1-.08.167v.022l-.09 4.41.047.817.043.793c.002.118.1.215.217.215.118 0 .215-.097.217-.216v.002l.095-1.61-.096-4.433c-.002-.08-.045-.147-.108-.185M14.032 7.538c-.27 0-.527.055-.76.153-.158-1.773-1.645-3.164-3.46-3.164-.443 0-.876.087-1.258.235-.15.06-.188.117-.19.232v6.246c.002.12.095.215.213.226h5.455c1.087 0 1.968-.87 1.968-1.958 0-1.087-.88-1.968-1.968-1.968"/></g></svg>
+      <span class="f6 ml3 pr2">SoundCloud</span>
+    </a>
+    <a class="link white-60 bg-transparent hover-white inline-flex items-center ma2 tc br2 pa2" href="https://medium.com/@mrmrs_/" title="Medium">
+      <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M11.824 12.628l-.276.45.798.398 2.744 1.372c.15.076.294.11.418.11.278 0 .467-.177.467-.492V5.883l-4.15 6.745zm4.096-8.67c-.004-.003 0-.01-.003-.012l-4.825-2.412c-.06-.03-.123-.038-.187-.044-.016 0-.03-.01-.047-.01-.184 0-.368.092-.467.254l-.24.39-.5.814-1.89 3.08 1.89 3.076.5.813.5.812.59.95 4.71-7.64c.02-.03.01-.06-.02-.08zm-6.27 7.045L7.17 6.97l-.295-.477-.294-.477-.25-.416v4.867l3.32 1.663.5.25.5.25-.5-.813-.5-.813zM.737 1.68L.59 1.608c-.085-.042-.166-.062-.24-.062-.206 0-.35.16-.35.427v10.162c0 .272.2.594.442.716l4.145 2.08c.107.06.208.08.3.08.257 0 .438-.2.438-.53V4.01c0-.02-.012-.04-.03-.047L.738 1.68z"/></svg>
+      <span class="f6 ml3 pr2">Medium</span>
+    </a>
+    <a class="link white-60 bg-transparent hover-white inline-flex items-center ma2 tc br2 pa2" href="https://linkedin.com title="LinkedIn">
+      <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M13.632 13.635h-2.37V9.922c0-.886-.018-2.025-1.234-2.025-1.235 0-1.424.964-1.424 1.96v3.778h-2.37V6H8.51V7.04h.03c.318-.6 1.092-1.233 2.247-1.233 2.4 0 2.845 1.58 2.845 3.637v4.188zM3.558 4.955c-.762 0-1.376-.617-1.376-1.377 0-.758.614-1.375 1.376-1.375.76 0 1.376.617 1.376 1.375 0 .76-.617 1.377-1.376 1.377zm1.188 8.68H2.37V6h2.376v7.635zM14.816 0H1.18C.528 0 0 .516 0 1.153v13.694C0 15.484.528 16 1.18 16h13.635c.652 0 1.185-.516 1.185-1.153V1.153C16 .516 15.467 0 14.815 0z" fill-rule="nonzero"/></svg>
+      <span class="f6 ml3 pr2">LinkedIn</span>
+    </a>
+    <a class="link white-60 bg-transparent hover-white inline-flex items-center ma2 tc br2 pa2" href="https://twitter.com/mrmrs_" title="Twitter">
+      <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.375-1.337.648-2.085.795-.598-.638-1.45-1.036-2.396-1.036-1.812 0-3.282 1.468-3.282 3.28 0 .258.03.51.085.75C5.152 5.39 2.733 4.084 1.114 2.1.83 2.583.67 3.147.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.416-.02-.617-.058.418 1.304 1.63 2.253 3.067 2.28-1.124.88-2.54 1.404-4.077 1.404-.265 0-.526-.015-.783-.045 1.453.93 3.178 1.474 5.032 1.474 6.038 0 9.34-5 9.34-9.338 0-.143-.004-.284-.01-.425.64-.463 1.198-1.04 1.638-1.7z" fill-rule="nonzero"/></svg>
+      <span class="f6 ml3 pr2">Twitter</span>
+    </a>
+    <a class="link white-60 bg-transparent hover-white inline-flex items-center ma2 tc br2 pa2" href="http://codepen.io" title="CodePen">
+      <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M15.988 5.443c-.004-.02-.007-.04-.012-.058l-.01-.033c-.006-.017-.012-.034-.02-.05-.003-.012-.01-.023-.014-.034l-.023-.045-.02-.032-.03-.04-.024-.03c-.01-.013-.022-.026-.034-.038l-.027-.027-.04-.032-.03-.024-.012-.01L8.38.117c-.23-.155-.53-.155-.76 0L.305 4.99.296 5c-.012.007-.022.015-.032.023-.014.01-.027.02-.04.032l-.027.027-.034.037-.024.03-.03.04c-.006.012-.013.022-.02.033l-.023.045-.015.034c-.007.016-.012.033-.018.05l-.01.032c-.005.02-.01.038-.012.058l-.006.03C.002 5.5 0 5.53 0 5.56v4.875c0 .03.002.06.006.09l.007.03c.003.02.006.04.013.058l.01.033c.006.018.01.035.018.05l.015.033c.006.016.014.03.023.047l.02.03c.008.016.018.03.03.042.007.01.014.02.023.03.01.012.02.025.034.036.01.01.018.02.028.026l.04.033.03.023.01.01 7.31 4.876c.116.078.248.117.382.116.134 0 .266-.04.38-.116l7.314-4.875.01-.01c.012-.007.022-.015.032-.023.014-.01.027-.02.04-.032l.027-.027.034-.037.024-.03.03-.04.02-.032.023-.046.015-.033.018-.052.01-.033c.005-.02.01-.038.013-.058 0-.01.003-.02.004-.03.004-.03.006-.06.006-.09V5.564c0-.03-.002-.06-.006-.09l-.007-.03zM8 9.626L5.568 8 8 6.374 10.432 8 8 9.626zM7.312 5.18l-2.98 1.993-2.406-1.61 5.386-3.59v3.206zM3.095 8l-1.72 1.15v-2.3L3.095 8zm1.237.828l2.98 1.993v3.208l-5.386-3.59 2.406-1.61zm4.355 1.993l2.98-1.993 2.407 1.61-5.387 3.59v-3.206zM12.905 8l1.72-1.15v2.3L12.905 8zm-1.237-.827L8.688 5.18V1.97l5.386 3.59-2.406 1.61z" fill-rule="nonzero"/></svg>
+      <span class="f6 ml3 pr2">Code Pen</span>
+    </a>
+  </div>
+</footer>
--- a/docs/components/footers/inline-text.html
+++ b/docs/components/footers/inline-text.html
@ -0,0 +1,7 @@
+<footer class="bg-near-black white-80 pv5 pv6-l ph4">
+  <p class="f6"><span class="dib mr4 mr5-ns">©2048 Your Company LLC, Inc.</span>
+    <a class="link white-80 hover-light-purple" href="/terms">Terms</a> /
+    <a class="link white-80 hover-gold" href="/privacy"> Privacy </a> /
+    <a class="link white-80 hover-green" href="#">hi@yourcompany.com </a>
+  </p>
+</footer>
--- a/docs/components/footers/simple-large-type.html
+++ b/docs/components/footers/simple-large-type.html
@ -0,0 +1,9 @@
+<footer class="ph3 ph4-ns pv6 bt b--black-10 black-70">
+  <a href="mailto:" class="link b f3 f2-ns dim black-70 lh-solid">hello@email.com</a>
+  <p class="f6 db b ttu lh-solid">© 2016 COMPANY Inc.</p>
+  <div class="mt5">
+    <a href="/language/" title="Language" class="f6 dib pr2 mid-gray dim">Language</a>
+    <a href="/terms/"    title="Terms" class="f6 dib ph2 mid-gray dim">Terms of Use</a>
+    <a href="/privacy/"  title="Privacy" class="f6 dib pl2 mid-gray dim">Privacy</a>
+  </div>
+</footer>
--- a/docs/components/footers/small-print.html
+++ b/docs/components/footers/small-print.html
@ -0,0 +1,8 @@
+<footer class="pv4 ph3 ph5-m ph6-l mid-gray">
+  <small class="f6 db tc">© 2016 <b class="ttu">SOME COMPANY Inc</b>., All Rights Reserved</small>
+  <div class="tc mt3">
+    <a href="/language/" title="Language" class="f6 dib ph2 link mid-gray dim">Language</a>
+    <a href="/terms/"    title="Terms" class="f6 dib ph2 link mid-gray dim">Terms of Use</a>
+    <a href="/privacy/"  title="Privacy" class="f6 dib ph2 link mid-gray dim">Privacy</a>
+  </div>
+</footer>
--- a/docs/components/footers/social-circles.html
+++ b/docs/components/footers/social-circles.html
@ -0,0 +1,26 @@
+<footer class="pv4 ph3 ph5-ns tc">
+  <a class="link dim gray dib h2 w2 br-100 mr3 pa2 bg-near-white ba b--black-10" href="#" title="">
+    <svg data-icon="facebook" viewBox="0 0 32 32" style="fill:currentcolor">
+      <title>facebook icon</title>
+      <path d="M8 12 L13 12 L13 8 C13 2 17 1 24 2 L24 7 C20 7 19 7 19 10 L19 12 L24 12 L23 18 L19 18 L19 30 L13 30 L13 18 L8 18 z"></path>
+    </svg>
+  </a>
+  <a class="link dim gray dib h2 w2 br-100 mr3 pa2 bg-near-white ba b--black-10" href="#" title="">
+    <svg data-icon="twitter" viewBox="0 0 32 32" style="fill:currentcolor">
+      <title>twitter icon</title>
+      <path d="M2 4 C6 8 10 12 15 11 A6 6 0 0 1 22 4 A6 6 0 0 1 26 6 A8 8 0 0 0 31 4 A8 8 0 0 1 28 8 A8 8 0 0 0 32 7 A8 8 0 0 1 28 11 A18 18 0 0 1 10 30 A18 18 0 0 1 0 27 A12 12 0 0 0 8 24 A8 8 0 0 1 3 20 A8 8 0 0 0 6 19.5 A8 8 0 0 1 0 12 A8 8 0 0 0 3 13 A8 8 0 0 1 2 4"></path>
+    </svg>
+  </a>
+  <a class="link dim gray dib br-100 h2 w2 mr3 pa2 bg-near-white ba b--black-10" href="#" title="">
+    <svg data-icon="github" viewBox="0 0 32 32" style="fill:currentcolor">
+      <title>github icon</title>
+      <path d="M0 18 C0 12 3 10 3 9 C2.5 7 2.5 4 3 3 C6 3 9 5 10 6 C12 5 14 5 16 5 C18 5 20 5 22 6 C23 5 26 3 29 3 C29.5 4 29.5 7 29 9 C29 10 32 12 32 18 C32 25 30 30 16 30 C2 30 0 25 0 18 M3 20 C3 24 4 28 16 28 C28 28 29 24 29 20 C29 16 28 14 16 14 C4 14 3 16 3 20 M8 21 A1.5 2.5 0 0 0 13 21 A1.5 2.5 0 0 0 8 21 M24 21 A1.5 2.5 0 0 0 19 21 A1.5 2.5 0 0 0 24 21 z"></path>
+    </svg>
+  </a>
+  <a class="link dim gray dib br-100 h2 w2 mr3 pa2 bg-near-white ba b--black-10" href="#" title="">
+    <svg data-icon="dribbble" viewBox="0 0 32 32" style="fill:currentcolor">
+      <title>dribbble icon</title>
+      <path d="M16 0 A16 16 0 0 0 0 16 A16 16 0 0 0 16 32 A16 16 0 0 0 32 16 A16 16 0 0 0 16 0 M5 11.5 A12 12 0 0 1 11 5 A46 46 0 0 1 13.5 9.25 A46 46 0 0 1 5 11.5 M15 4 A12 12 0 0 1 21.5 5.25 A46 46 0 0 1 17 7.75 A50 50 0 0 0 15 4 M4 16 A50 50 0 0 0 15 13 A46 46 0 0 1 16 15.5 A26 26 0 0 0 6 22.5 A12 12 0 0 1 4 16 M18.5 11.5 A50 50 0 0 0 25 8 A12 12 0 0 1 28 13.75 A26 26 0 0 0 19.75 14.5 A50 50 0 0 0 18.5 11.5 M17 19.5 A46 46 0 0 1 18 28 A12 12 0 0 1 8.75 25.5 A22 22 0 0 1 17 19.5 M20.75 18.25 A22 22 0 0 1 28 17.75 A12 12 0 0 1 22 26.5 A50 50 0 0 0 20.75 18.25"></path>
+    </svg>
+  </a>
+</footer>
--- a/docs/components/footers/social-simple-text.html
+++ b/docs/components/footers/social-simple-text.html
@ -0,0 +1,51 @@
+<!-- SVG Icons are from https://simpleicons.org -->
+<footer class="pv4 ph3 tc">
+  <a class="link near-black hover-silver dib mh3 tc" href="https://facebook.com" title="Facebook">
+    <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M15.117 0H.883C.395 0 0 .395 0 .883v14.234c0 .488.395.883.883.883h7.663V9.804H6.46V7.39h2.086V5.607c0-2.066 1.262-3.19 3.106-3.19.883 0 1.642.064 1.863.094v2.16h-1.28c-1 0-1.195.476-1.195 1.176v1.54h2.39l-.31 2.416h-2.08V16h4.077c.488 0 .883-.395.883-.883V.883C16 .395 15.605 0 15.117 0" fill-rule="nonzero"/></svg>
+    <span class="f6 db">Facebook</span>
+  </a>
+  <a class="link near-black hover-silver dib mh3 tc" href="https://github.com/mrmrs" title="GitHub">
+    <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8 0C3.58 0 0 3.582 0 8c0 3.535 2.292 6.533 5.47 7.59.4.075.547-.172.547-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.223 1.873.87 2.33.665.072-.517.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.953 0-.873.31-1.587.823-2.147-.083-.202-.358-1.015.077-2.117 0 0 .672-.215 2.2.82.638-.178 1.323-.266 2.003-.27.68.004 1.364.092 2.003.27 1.527-1.035 2.198-.82 2.198-.82.437 1.102.163 1.915.08 2.117.513.56.823 1.274.823 2.147 0 3.073-1.87 3.75-3.653 3.947.287.246.543.735.543 1.48 0 1.07-.01 1.933-.01 2.195 0 .215.144.463.55.385C13.71 14.53 16 11.534 16 8c0-4.418-3.582-8-8-8"/></svg>
+    <span class="f6 db">GitHub</span>
+  </a>
+  <a class="link hover-silver near-black dib mh3 tc" href="https://instagram.com/mrmrs_" title="Instagram">
+    <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8 0C5.827 0 5.555.01 4.702.048 3.85.088 3.27.222 2.76.42c-.526.204-.973.478-1.417.923-.445.444-.72.89-.923 1.417-.198.51-.333 1.09-.372 1.942C.008 5.555 0 5.827 0 8s.01 2.445.048 3.298c.04.852.174 1.433.372 1.942.204.526.478.973.923 1.417.444.445.89.72 1.417.923.51.198 1.09.333 1.942.372.853.04 1.125.048 3.298.048s2.445-.01 3.298-.048c.852-.04 1.433-.174 1.942-.372.526-.204.973-.478 1.417-.923.445-.444.72-.89.923-1.417.198-.51.333-1.09.372-1.942.04-.853.048-1.125.048-3.298s-.01-2.445-.048-3.298c-.04-.852-.174-1.433-.372-1.942-.204-.526-.478-.973-.923-1.417-.444-.445-.89-.72-1.417-.923-.51-.198-1.09-.333-1.942-.372C10.445.008 10.173 0 8 0zm0 1.44c2.136 0 2.39.01 3.233.048.78.036 1.203.166 1.485.276.374.145.64.318.92.598.28.28.453.546.598.92.11.282.24.705.276 1.485.038.844.047 1.097.047 3.233s-.01 2.39-.048 3.233c-.036.78-.166 1.203-.276 1.485-.145.374-.318.64-.598.92-.28.28-.546.453-.92.598-.282.11-.705.24-1.485.276-.844.038-1.097.047-3.233.047s-2.39-.01-3.233-.048c-.78-.036-1.203-.166-1.485-.276-.374-.145-.64-.318-.92-.598-.28-.28-.453-.546-.598-.92-.11-.282-.24-.705-.276-1.485C1.45 10.39 1.44 10.136 1.44 8s.01-2.39.048-3.233c.036-.78.166-1.203.276-1.485.145-.374.318-.64.598-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276C5.61 1.45 5.864 1.44 8 1.44zm0 2.452c-2.27 0-4.108 1.84-4.108 4.108 0 2.27 1.84 4.108 4.108 4.108 2.27 0 4.108-1.84 4.108-4.108 0-2.27-1.84-4.108-4.108-4.108zm0 6.775c-1.473 0-2.667-1.194-2.667-2.667 0-1.473 1.194-2.667 2.667-2.667 1.473 0 2.667 1.194 2.667 2.667 0 1.473-1.194 2.667-2.667 2.667zm5.23-6.937c0 .53-.43.96-.96.96s-.96-.43-.96-.96.43-.96.96-.96.96.43.96.96z"/></svg>
+    <span class="f6 db">Instagram</span>
+  </a>
+  <a class="link hover-silver near-black dib mh3 tc" href="https://youtube.com" title="youtube">
+    <svg class="dib w2 h2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M0 7.345c0-1.294.16-2.59.16-2.59s.156-1.1.636-1.587c.608-.637 1.408-.617 1.764-.684C3.84 2.36 8 2.324 8 2.324s3.362.004 5.6.166c.314.038.996.04 1.604.678.48.486.636 1.588.636 1.588S16 6.05 16 7.346v1.258c0 1.296-.16 2.59-.16 2.59s-.156 1.102-.636 1.588c-.608.638-1.29.64-1.604.678-2.238.162-5.6.166-5.6.166s-4.16-.037-5.44-.16c-.356-.067-1.156-.047-1.764-.684-.48-.487-.636-1.587-.636-1.587S0 9.9 0 8.605v-1.26zm6.348 2.73V5.58l4.323 2.255-4.32 2.24h-.002z"/></svg>
+    <span class="f6 db">Youtube</span>
+  </a>
+  <a class="link hover-silver near-black dib mh3 tc" href="https://soundcloud.com/mrsjxn" title="SoundCloud">
+    <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><g fill-rule="nonzero"><path d="M.773 8.13c-.034 0-.062.03-.067.066L.55 9.633l.156 1.405c.005.038.033.065.067.065.033 0 .06-.027.066-.065l.178-1.405-.18-1.437C.835 8.158.807 8.13.774 8.13M.18 8.682c-.032 0-.06.025-.063.062L0 9.634l.117.872c.004.037.03.063.064.063s.06-.027.065-.063l.14-.874-.14-.89c-.005-.036-.03-.06-.064-.06M1.4 7.85c-.04 0-.075.033-.08.078l-.148 1.705.15 1.643c.003.045.037.078.08.078.04 0 .074-.033.08-.078l.17-1.643-.17-1.705c-.006-.045-.04-.078-.08-.078M2.035 7.79c-.05 0-.09.04-.094.092l-.14 1.75.14 1.696c.005.052.045.092.095.092s.09-.04.094-.092l.16-1.695-.16-1.752c-.006-.05-.046-.09-.095-.09M2.78 11.342zM2.78 8.008c-.003-.06-.05-.106-.106-.106-.058 0-.104.046-.108.107l-.133 1.623.133 1.71c.004.06.05.105.108.105.057 0 .103-.046.107-.106l.152-1.71-.15-1.624zM3.318 6.87c-.065 0-.118.053-.12.12L3.07 9.634l.125 1.71c.003.065.056.118.12.118.065 0 .118-.053.122-.12l.14-1.708-.14-2.644c-.005-.067-.058-.12-.122-.12M3.957 6.262c-.072 0-.132.058-.135.133l-.117 3.248.117 1.698c.003.076.063.134.135.134.072 0 .13-.058.135-.133v.002l.132-1.7-.132-3.247c-.004-.075-.063-.133-.135-.133M4.62 5.968c-.08 0-.144.065-.147.148l-.11 3.52.11 1.68c.003.08.068.146.148.146.08 0 .146-.065.15-.147l.123-1.68-.123-3.52c-.004-.082-.07-.147-.15-.147M5.443 5.997c-.003-.09-.074-.16-.162-.16-.088 0-.16.07-.16.16l-.102 3.638.1 1.67c.003.09.074.16.163.16.09 0 .16-.07.163-.16l.113-1.67-.113-3.638zM5.443 11.304zM5.945 5.915c-.096 0-.173.077-.175.175l-.093 3.545.093 1.654c.002.096.08.173.175.173.096 0 .174-.077.176-.175v.002l.105-1.655L6.12 6.09c0-.098-.08-.175-.175-.175M6.615 6.03c-.104 0-.187.084-.19.19l-.084 3.416.086 1.643c.002.104.085.186.19.186.103 0 .186-.082.19-.188l.093-1.642-.095-3.416c-.003-.106-.086-.19-.19-.19M7.402 5.403c-.032-.02-.07-.034-.112-.034-.04 0-.078.01-.11.032-.054.036-.092.098-.093.17v.038L7.01 9.635l.077 1.634v.006c.003.045.02.087.048.12.037.045.093.074.155.074.055 0 .106-.023.142-.06.037-.036.06-.087.06-.142l.01-.162.077-1.47-.087-4.065c0-.07-.037-.13-.09-.167M7.493 11.27v-.002zM8.072 5.018c-.032-.02-.07-.03-.11-.03-.05 0-.1.017-.137.048-.048.04-.08.1-.08.167v.022l-.09 4.41.047.817.043.793c.002.118.1.215.217.215.118 0 .215-.097.217-.216v.002l.095-1.61-.096-4.433c-.002-.08-.045-.147-.108-.185M14.032 7.538c-.27 0-.527.055-.76.153-.158-1.773-1.645-3.164-3.46-3.164-.443 0-.876.087-1.258.235-.15.06-.188.117-.19.232v6.246c.002.12.095.215.213.226h5.455c1.087 0 1.968-.87 1.968-1.958 0-1.087-.88-1.968-1.968-1.968"/></g></svg>
+    <span class="f6 db">SoundCloud</span>
+  </a>
+  <a class="link hover-silver near-black dib mh3 tc" href="http://stackoverflow.com" title="Stack Overflow">
+    <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M12.658 14.577v-4.27h1.423V16H1.23v-5.693H2.65v4.27h10.006zm-8.583-1.423h7.16V11.73h-7.16v1.424zm.173-3.235l6.987 1.465.3-1.38L4.55 8.54l-.302 1.38zm.906-3.365l6.47 3.02.602-1.295-6.47-3.02-.602 1.295zm1.81-3.19l5.478 4.57.906-1.078-5.477-4.57-.905 1.077zM10.502 0L9.338.863l4.27 5.735 1.164-.862L10.5 0z"/></svg>
+    <span class="f6 db">Stack Overflow</span>
+  </a>
+  <a class="link hover-silver near-black dib mh3 tc" href="http://tachyons-slack-invite.herokuapp.com" title="Slack">
+    <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><g fill-rule="nonzero"><path d="M6.586 7.33l.69 2.057 2.137-.716-.69-2.056-2.137.716z"/><path d="M12.55 9.37l-1.037.347.36 1.073c.145.434-.09.904-.524 1.05-.096.03-.19.045-.287.042-.338-.01-.65-.226-.765-.566l-.36-1.072-2.138.716.36 1.072c.145.435-.09.905-.523 1.05-.096.032-.192.045-.286.043-.34-.01-.65-.226-.764-.566l-.36-1.075-1.037.348c-.096.03-.19.045-.286.042-.34-.008-.65-.226-.765-.565-.146-.434.09-.904.522-1.05L5.7 9.914l-.69-2.058-1.037.347c-.094.032-.19.045-.285.043-.338-.01-.65-.226-.765-.566-.145-.434.09-.904.523-1.05l1.037-.347-.36-1.073c-.145-.434.09-.904.524-1.05.435-.145.905.09 1.05.524l.36 1.072 2.137-.716-.36-1.072c-.144-.435.09-.905.524-1.05.435-.145.906.09 1.05.523l.36 1.075 1.037-.347c.434-.146.904.088 1.05.522.145.434-.09.904-.523 1.05l-1.037.347.69 2.057 1.036-.347c.435-.145.905.09 1.05.523.146.434-.09.904-.522 1.05zm2.78-3.57C13.68.304 11.298-.98 5.8.67.304 2.32-.98 4.7.67 10.2c1.65 5.497 4.03 6.78 9.53 5.13 5.497-1.65 6.78-4.03 5.13-9.53z"/></g></svg>
+    <span class="f6 db">Slack</span>
+  </a>
+  <a class="link hover-silver near-black dib mh3 tc" href="#" title="Medium">
+    <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M11.824 12.628l-.276.45.798.398 2.744 1.372c.15.076.294.11.418.11.278 0 .467-.177.467-.492V5.883l-4.15 6.745zm4.096-8.67c-.004-.003 0-.01-.003-.012l-4.825-2.412c-.06-.03-.123-.038-.187-.044-.016 0-.03-.01-.047-.01-.184 0-.368.092-.467.254l-.24.39-.5.814-1.89 3.08 1.89 3.076.5.813.5.812.59.95 4.71-7.64c.02-.03.01-.06-.02-.08zm-6.27 7.045L7.17 6.97l-.295-.477-.294-.477-.25-.416v4.867l3.32 1.663.5.25.5.25-.5-.813-.5-.813zM.737 1.68L.59 1.608c-.085-.042-.166-.062-.24-.062-.206 0-.35.16-.35.427v10.162c0 .272.2.594.442.716l4.145 2.08c.107.06.208.08.3.08.257 0 .438-.2.438-.53V4.01c0-.02-.012-.04-.03-.047L.738 1.68z"/></svg>
+    <span class="f6 db">Medium</span>
+  </a>
+  <a class="link hover-silver near-black dib mh3 tc" href="#" title="LinkedIn">
+    <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M13.632 13.635h-2.37V9.922c0-.886-.018-2.025-1.234-2.025-1.235 0-1.424.964-1.424 1.96v3.778h-2.37V6H8.51V7.04h.03c.318-.6 1.092-1.233 2.247-1.233 2.4 0 2.845 1.58 2.845 3.637v4.188zM3.558 4.955c-.762 0-1.376-.617-1.376-1.377 0-.758.614-1.375 1.376-1.375.76 0 1.376.617 1.376 1.375 0 .76-.617 1.377-1.376 1.377zm1.188 8.68H2.37V6h2.376v7.635zM14.816 0H1.18C.528 0 0 .516 0 1.153v13.694C0 15.484.528 16 1.18 16h13.635c.652 0 1.185-.516 1.185-1.153V1.153C16 .516 15.467 0 14.815 0z" fill-rule="nonzero"/></svg>
+    <span class="f6 db">LinkedIn</span>
+  </a>
+  <a class="link hover-silver near-black dib mh3 tc" href="#" title="">
+    <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.375-1.337.648-2.085.795-.598-.638-1.45-1.036-2.396-1.036-1.812 0-3.282 1.468-3.282 3.28 0 .258.03.51.085.75C5.152 5.39 2.733 4.084 1.114 2.1.83 2.583.67 3.147.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.416-.02-.617-.058.418 1.304 1.63 2.253 3.067 2.28-1.124.88-2.54 1.404-4.077 1.404-.265 0-.526-.015-.783-.045 1.453.93 3.178 1.474 5.032 1.474 6.038 0 9.34-5 9.34-9.338 0-.143-.004-.284-.01-.425.64-.463 1.198-1.04 1.638-1.7z" fill-rule="nonzero"/></svg>
+    <span class="f6 db">Twitter</span>
+  </a>
+  <a class="link hover-silver near-black dib mh3 tc" href="#" title="Tumblr">
+    <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M9.708 16c-3.396 0-4.687-2.504-4.687-4.274V6.498H3.403V4.432C5.83 3.557 6.412 1.368 6.55.12c.01-.086.077-.12.115-.12H9.01v4.076h3.2v2.422H8.997v4.98c.01.667.25 1.58 1.472 1.58h.067c.424-.012.994-.136 1.29-.278l.77 2.283c-.288.424-1.594.916-2.77.936h-.12z" fill-rule="nonzero"/></svg>
+    <span class="f6 db">Tumblr</span>
+  </a>
+  <a class="link hover-silver near-black dib mh3 tc" href="#" title="CodePen">
+    <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M15.988 5.443c-.004-.02-.007-.04-.012-.058l-.01-.033c-.006-.017-.012-.034-.02-.05-.003-.012-.01-.023-.014-.034l-.023-.045-.02-.032-.03-.04-.024-.03c-.01-.013-.022-.026-.034-.038l-.027-.027-.04-.032-.03-.024-.012-.01L8.38.117c-.23-.155-.53-.155-.76 0L.305 4.99.296 5c-.012.007-.022.015-.032.023-.014.01-.027.02-.04.032l-.027.027-.034.037-.024.03-.03.04c-.006.012-.013.022-.02.033l-.023.045-.015.034c-.007.016-.012.033-.018.05l-.01.032c-.005.02-.01.038-.012.058l-.006.03C.002 5.5 0 5.53 0 5.56v4.875c0 .03.002.06.006.09l.007.03c.003.02.006.04.013.058l.01.033c.006.018.01.035.018.05l.015.033c.006.016.014.03.023.047l.02.03c.008.016.018.03.03.042.007.01.014.02.023.03.01.012.02.025.034.036.01.01.018.02.028.026l.04.033.03.023.01.01 7.31 4.876c.116.078.248.117.382.116.134 0 .266-.04.38-.116l7.314-4.875.01-.01c.012-.007.022-.015.032-.023.014-.01.027-.02.04-.032l.027-.027.034-.037.024-.03.03-.04.02-.032.023-.046.015-.033.018-.052.01-.033c.005-.02.01-.038.013-.058 0-.01.003-.02.004-.03.004-.03.006-.06.006-.09V5.564c0-.03-.002-.06-.006-.09l-.007-.03zM8 9.626L5.568 8 8 6.374 10.432 8 8 9.626zM7.312 5.18l-2.98 1.993-2.406-1.61 5.386-3.59v3.206zM3.095 8l-1.72 1.15v-2.3L3.095 8zm1.237.828l2.98 1.993v3.208l-5.386-3.59 2.406-1.61zm4.355 1.993l2.98-1.993 2.407 1.61-5.387 3.59v-3.206zM12.905 8l1.72-1.15v2.3L12.905 8zm-1.237-.827L8.688 5.18V1.97l5.386 3.59-2.406 1.61z" fill-rule="nonzero"/></svg>
+    <span class="f6 db">Code Pen</span>
+  </a>
+</footer>
--- a/docs/components/footers/social-simple.html
+++ b/docs/components/footers/social-simple.html
@ -0,0 +1,39 @@
+<!-- SVG Icons are from https://simpleicons.org -->
+<footer class="pv4 ph3 ph5-ns tc">
+  <a class="link near-black hover-silver dib h2 w2 mr3" href="https://facebook.com title="Facebook">
+    <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M15.117 0H.883C.395 0 0 .395 0 .883v14.234c0 .488.395.883.883.883h7.663V9.804H6.46V7.39h2.086V5.607c0-2.066 1.262-3.19 3.106-3.19.883 0 1.642.064 1.863.094v2.16h-1.28c-1 0-1.195.476-1.195 1.176v1.54h2.39l-.31 2.416h-2.08V16h4.077c.488 0 .883-.395.883-.883V.883C16 .395 15.605 0 15.117 0" fill-rule="nonzero"/></svg>
+  </a>
+  <a class="link near-black hover-silver dib h2 w2 mr3" href="https://github.com/mrmrs" title="GitHub">
+    <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8 0C3.58 0 0 3.582 0 8c0 3.535 2.292 6.533 5.47 7.59.4.075.547-.172.547-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.223 1.873.87 2.33.665.072-.517.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.953 0-.873.31-1.587.823-2.147-.083-.202-.358-1.015.077-2.117 0 0 .672-.215 2.2.82.638-.178 1.323-.266 2.003-.27.68.004 1.364.092 2.003.27 1.527-1.035 2.198-.82 2.198-.82.437 1.102.163 1.915.08 2.117.513.56.823 1.274.823 2.147 0 3.073-1.87 3.75-3.653 3.947.287.246.543.735.543 1.48 0 1.07-.01 1.933-.01 2.195 0 .215.144.463.55.385C13.71 14.53 16 11.534 16 8c0-4.418-3.582-8-8-8"/></svg>
+  </a>
+  <a class="link hover-silver near-black dib h2 w2 mr3" href="https://instagram.com/mrmrs_" title="Instagram">
+    <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8 0C5.827 0 5.555.01 4.702.048 3.85.088 3.27.222 2.76.42c-.526.204-.973.478-1.417.923-.445.444-.72.89-.923 1.417-.198.51-.333 1.09-.372 1.942C.008 5.555 0 5.827 0 8s.01 2.445.048 3.298c.04.852.174 1.433.372 1.942.204.526.478.973.923 1.417.444.445.89.72 1.417.923.51.198 1.09.333 1.942.372.853.04 1.125.048 3.298.048s2.445-.01 3.298-.048c.852-.04 1.433-.174 1.942-.372.526-.204.973-.478 1.417-.923.445-.444.72-.89.923-1.417.198-.51.333-1.09.372-1.942.04-.853.048-1.125.048-3.298s-.01-2.445-.048-3.298c-.04-.852-.174-1.433-.372-1.942-.204-.526-.478-.973-.923-1.417-.444-.445-.89-.72-1.417-.923-.51-.198-1.09-.333-1.942-.372C10.445.008 10.173 0 8 0zm0 1.44c2.136 0 2.39.01 3.233.048.78.036 1.203.166 1.485.276.374.145.64.318.92.598.28.28.453.546.598.92.11.282.24.705.276 1.485.038.844.047 1.097.047 3.233s-.01 2.39-.048 3.233c-.036.78-.166 1.203-.276 1.485-.145.374-.318.64-.598.92-.28.28-.546.453-.92.598-.282.11-.705.24-1.485.276-.844.038-1.097.047-3.233.047s-2.39-.01-3.233-.048c-.78-.036-1.203-.166-1.485-.276-.374-.145-.64-.318-.92-.598-.28-.28-.453-.546-.598-.92-.11-.282-.24-.705-.276-1.485C1.45 10.39 1.44 10.136 1.44 8s.01-2.39.048-3.233c.036-.78.166-1.203.276-1.485.145-.374.318-.64.598-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276C5.61 1.45 5.864 1.44 8 1.44zm0 2.452c-2.27 0-4.108 1.84-4.108 4.108 0 2.27 1.84 4.108 4.108 4.108 2.27 0 4.108-1.84 4.108-4.108 0-2.27-1.84-4.108-4.108-4.108zm0 6.775c-1.473 0-2.667-1.194-2.667-2.667 0-1.473 1.194-2.667 2.667-2.667 1.473 0 2.667 1.194 2.667 2.667 0 1.473-1.194 2.667-2.667 2.667zm5.23-6.937c0 .53-.43.96-.96.96s-.96-.43-.96-.96.43-.96.96-.96.96.43.96.96z"/></svg>
+  </a>
+  <a class="link hover-silver near-black dib h2 w2 mr3" href="https://youtube.com title="youtube">
+    <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M0 7.345c0-1.294.16-2.59.16-2.59s.156-1.1.636-1.587c.608-.637 1.408-.617 1.764-.684C3.84 2.36 8 2.324 8 2.324s3.362.004 5.6.166c.314.038.996.04 1.604.678.48.486.636 1.588.636 1.588S16 6.05 16 7.346v1.258c0 1.296-.16 2.59-.16 2.59s-.156 1.102-.636 1.588c-.608.638-1.29.64-1.604.678-2.238.162-5.6.166-5.6.166s-4.16-.037-5.44-.16c-.356-.067-1.156-.047-1.764-.684-.48-.487-.636-1.587-.636-1.587S0 9.9 0 8.605v-1.26zm6.348 2.73V5.58l4.323 2.255-4.32 2.24h-.002z"/></svg>
+  </a>
+  <a class="link hover-silver near-black dib h2 w2 mr3" href="https://soundcloud.com/mrsjxn" title="SoundCloud">
+    <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><g fill-rule="nonzero"><path d="M.773 8.13c-.034 0-.062.03-.067.066L.55 9.633l.156 1.405c.005.038.033.065.067.065.033 0 .06-.027.066-.065l.178-1.405-.18-1.437C.835 8.158.807 8.13.774 8.13M.18 8.682c-.032 0-.06.025-.063.062L0 9.634l.117.872c.004.037.03.063.064.063s.06-.027.065-.063l.14-.874-.14-.89c-.005-.036-.03-.06-.064-.06M1.4 7.85c-.04 0-.075.033-.08.078l-.148 1.705.15 1.643c.003.045.037.078.08.078.04 0 .074-.033.08-.078l.17-1.643-.17-1.705c-.006-.045-.04-.078-.08-.078M2.035 7.79c-.05 0-.09.04-.094.092l-.14 1.75.14 1.696c.005.052.045.092.095.092s.09-.04.094-.092l.16-1.695-.16-1.752c-.006-.05-.046-.09-.095-.09M2.78 11.342zM2.78 8.008c-.003-.06-.05-.106-.106-.106-.058 0-.104.046-.108.107l-.133 1.623.133 1.71c.004.06.05.105.108.105.057 0 .103-.046.107-.106l.152-1.71-.15-1.624zM3.318 6.87c-.065 0-.118.053-.12.12L3.07 9.634l.125 1.71c.003.065.056.118.12.118.065 0 .118-.053.122-.12l.14-1.708-.14-2.644c-.005-.067-.058-.12-.122-.12M3.957 6.262c-.072 0-.132.058-.135.133l-.117 3.248.117 1.698c.003.076.063.134.135.134.072 0 .13-.058.135-.133v.002l.132-1.7-.132-3.247c-.004-.075-.063-.133-.135-.133M4.62 5.968c-.08 0-.144.065-.147.148l-.11 3.52.11 1.68c.003.08.068.146.148.146.08 0 .146-.065.15-.147l.123-1.68-.123-3.52c-.004-.082-.07-.147-.15-.147M5.443 5.997c-.003-.09-.074-.16-.162-.16-.088 0-.16.07-.16.16l-.102 3.638.1 1.67c.003.09.074.16.163.16.09 0 .16-.07.163-.16l.113-1.67-.113-3.638zM5.443 11.304zM5.945 5.915c-.096 0-.173.077-.175.175l-.093 3.545.093 1.654c.002.096.08.173.175.173.096 0 .174-.077.176-.175v.002l.105-1.655L6.12 6.09c0-.098-.08-.175-.175-.175M6.615 6.03c-.104 0-.187.084-.19.19l-.084 3.416.086 1.643c.002.104.085.186.19.186.103 0 .186-.082.19-.188l.093-1.642-.095-3.416c-.003-.106-.086-.19-.19-.19M7.402 5.403c-.032-.02-.07-.034-.112-.034-.04 0-.078.01-.11.032-.054.036-.092.098-.093.17v.038L7.01 9.635l.077 1.634v.006c.003.045.02.087.048.12.037.045.093.074.155.074.055 0 .106-.023.142-.06.037-.036.06-.087.06-.142l.01-.162.077-1.47-.087-4.065c0-.07-.037-.13-.09-.167M7.493 11.27v-.002zM8.072 5.018c-.032-.02-.07-.03-.11-.03-.05 0-.1.017-.137.048-.048.04-.08.1-.08.167v.022l-.09 4.41.047.817.043.793c.002.118.1.215.217.215.118 0 .215-.097.217-.216v.002l.095-1.61-.096-4.433c-.002-.08-.045-.147-.108-.185M14.032 7.538c-.27 0-.527.055-.76.153-.158-1.773-1.645-3.164-3.46-3.164-.443 0-.876.087-1.258.235-.15.06-.188.117-.19.232v6.246c.002.12.095.215.213.226h5.455c1.087 0 1.968-.87 1.968-1.958 0-1.087-.88-1.968-1.968-1.968"/></g></svg>
+  </a>
+  <a class="link hover-silver near-black dib h2 w2 mr3" href="#" title="Stack Overflow">
+    <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M12.658 14.577v-4.27h1.423V16H1.23v-5.693H2.65v4.27h10.006zm-8.583-1.423h7.16V11.73h-7.16v1.424zm.173-3.235l6.987 1.465.3-1.38L4.55 8.54l-.302 1.38zm.906-3.365l6.47 3.02.602-1.295-6.47-3.02-.602 1.295zm1.81-3.19l5.478 4.57.906-1.078-5.477-4.57-.905 1.077zM10.502 0L9.338.863l4.27 5.735 1.164-.862L10.5 0z"/></svg>
+  </a>
+  <a class="link hover-silver near-black dib h2 w2 mr3" href="https://slack.com title="Slack">
+    <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><g fill-rule="nonzero"><path d="M6.586 7.33l.69 2.057 2.137-.716-.69-2.056-2.137.716z"/><path d="M12.55 9.37l-1.037.347.36 1.073c.145.434-.09.904-.524 1.05-.096.03-.19.045-.287.042-.338-.01-.65-.226-.765-.566l-.36-1.072-2.138.716.36 1.072c.145.435-.09.905-.523 1.05-.096.032-.192.045-.286.043-.34-.01-.65-.226-.764-.566l-.36-1.075-1.037.348c-.096.03-.19.045-.286.042-.34-.008-.65-.226-.765-.565-.146-.434.09-.904.522-1.05L5.7 9.914l-.69-2.058-1.037.347c-.094.032-.19.045-.285.043-.338-.01-.65-.226-.765-.566-.145-.434.09-.904.523-1.05l1.037-.347-.36-1.073c-.145-.434.09-.904.524-1.05.435-.145.905.09 1.05.524l.36 1.072 2.137-.716-.36-1.072c-.144-.435.09-.905.524-1.05.435-.145.906.09 1.05.523l.36 1.075 1.037-.347c.434-.146.904.088 1.05.522.145.434-.09.904-.523 1.05l-1.037.347.69 2.057 1.036-.347c.435-.145.905.09 1.05.523.146.434-.09.904-.522 1.05zm2.78-3.57C13.68.304 11.298-.98 5.8.67.304 2.32-.98 4.7.67 10.2c1.65 5.497 4.03 6.78 9.53 5.13 5.497-1.65 6.78-4.03 5.13-9.53z"/></g></svg>
+  </a>
+  <a class="link hover-silver near-black dib h2 w2 mr3" href="https://medium.com/@mrmrs_/" title="Medium">
+    <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M11.824 12.628l-.276.45.798.398 2.744 1.372c.15.076.294.11.418.11.278 0 .467-.177.467-.492V5.883l-4.15 6.745zm4.096-8.67c-.004-.003 0-.01-.003-.012l-4.825-2.412c-.06-.03-.123-.038-.187-.044-.016 0-.03-.01-.047-.01-.184 0-.368.092-.467.254l-.24.39-.5.814-1.89 3.08 1.89 3.076.5.813.5.812.59.95 4.71-7.64c.02-.03.01-.06-.02-.08zm-6.27 7.045L7.17 6.97l-.295-.477-.294-.477-.25-.416v4.867l3.32 1.663.5.25.5.25-.5-.813-.5-.813zM.737 1.68L.59 1.608c-.085-.042-.166-.062-.24-.062-.206 0-.35.16-.35.427v10.162c0 .272.2.594.442.716l4.145 2.08c.107.06.208.08.3.08.257 0 .438-.2.438-.53V4.01c0-.02-.012-.04-.03-.047L.738 1.68z"/></svg>
+  </a>
+  <a class="link hover-silver near-black dib h2 w2 mr3" href="https://linkedin.com title="LinkedIn">
+    <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M13.632 13.635h-2.37V9.922c0-.886-.018-2.025-1.234-2.025-1.235 0-1.424.964-1.424 1.96v3.778h-2.37V6H8.51V7.04h.03c.318-.6 1.092-1.233 2.247-1.233 2.4 0 2.845 1.58 2.845 3.637v4.188zM3.558 4.955c-.762 0-1.376-.617-1.376-1.377 0-.758.614-1.375 1.376-1.375.76 0 1.376.617 1.376 1.375 0 .76-.617 1.377-1.376 1.377zm1.188 8.68H2.37V6h2.376v7.635zM14.816 0H1.18C.528 0 0 .516 0 1.153v13.694C0 15.484.528 16 1.18 16h13.635c.652 0 1.185-.516 1.185-1.153V1.153C16 .516 15.467 0 14.815 0z" fill-rule="nonzero"/></svg>
+  </a>
+  <a class="link hover-silver near-black dib h2 w2 mr3" href="https://twitter.com/mrmrs_" title="Twitter">
+    <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.375-1.337.648-2.085.795-.598-.638-1.45-1.036-2.396-1.036-1.812 0-3.282 1.468-3.282 3.28 0 .258.03.51.085.75C5.152 5.39 2.733 4.084 1.114 2.1.83 2.583.67 3.147.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.416-.02-.617-.058.418 1.304 1.63 2.253 3.067 2.28-1.124.88-2.54 1.404-4.077 1.404-.265 0-.526-.015-.783-.045 1.453.93 3.178 1.474 5.032 1.474 6.038 0 9.34-5 9.34-9.338 0-.143-.004-.284-.01-.425.64-.463 1.198-1.04 1.638-1.7z" fill-rule="nonzero"/></svg>
+  </a>
+  <a class="link hover-silver near-black dib h2 w2 mr3" href="https://tumblr.com" title="Tumblr">
+    <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M9.708 16c-3.396 0-4.687-2.504-4.687-4.274V6.498H3.403V4.432C5.83 3.557 6.412 1.368 6.55.12c.01-.086.077-.12.115-.12H9.01v4.076h3.2v2.422H8.997v4.98c.01.667.25 1.58 1.472 1.58h.067c.424-.012.994-.136 1.29-.278l.77 2.283c-.288.424-1.594.916-2.77.936h-.12z" fill-rule="nonzero"/></svg>
+  </a>
+  <a class="link hover-silver near-black dib h2 w2 mr3" href="https://codepen.io" title="CodePen">
+    <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M15.988 5.443c-.004-.02-.007-.04-.012-.058l-.01-.033c-.006-.017-.012-.034-.02-.05-.003-.012-.01-.023-.014-.034l-.023-.045-.02-.032-.03-.04-.024-.03c-.01-.013-.022-.026-.034-.038l-.027-.027-.04-.032-.03-.024-.012-.01L8.38.117c-.23-.155-.53-.155-.76 0L.305 4.99.296 5c-.012.007-.022.015-.032.023-.014.01-.027.02-.04.032l-.027.027-.034.037-.024.03-.03.04c-.006.012-.013.022-.02.033l-.023.045-.015.034c-.007.016-.012.033-.018.05l-.01.032c-.005.02-.01.038-.012.058l-.006.03C.002 5.5 0 5.53 0 5.56v4.875c0 .03.002.06.006.09l.007.03c.003.02.006.04.013.058l.01.033c.006.018.01.035.018.05l.015.033c.006.016.014.03.023.047l.02.03c.008.016.018.03.03.042.007.01.014.02.023.03.01.012.02.025.034.036.01.01.018.02.028.026l.04.033.03.023.01.01 7.31 4.876c.116.078.248.117.382.116.134 0 .266-.04.38-.116l7.314-4.875.01-.01c.012-.007.022-.015.032-.023.014-.01.027-.02.04-.032l.027-.027.034-.037.024-.03.03-.04.02-.032.023-.046.015-.033.018-.052.01-.033c.005-.02.01-.038.013-.058 0-.01.003-.02.004-.03.004-.03.006-.06.006-.09V5.564c0-.03-.002-.06-.006-.09l-.007-.03zM8 9.626L5.568 8 8 6.374 10.432 8 8 9.626zM7.312 5.18l-2.98 1.993-2.406-1.61 5.386-3.59v3.206zM3.095 8l-1.72 1.15v-2.3L3.095 8zm1.237.828l2.98 1.993v3.208l-5.386-3.59 2.406-1.61zm4.355 1.993l2.98-1.993 2.407 1.61-5.387 3.59v-3.206zM12.905 8l1.72-1.15v2.3L12.905 8zm-1.237-.827L8.688 5.18V1.97l5.386 3.59-2.406 1.61z" fill-rule="nonzero"/></svg>
+  </a>
+</footer>
--- a/docs/components/footers/social-text.html
+++ b/docs/components/footers/social-text.html
@ -0,0 +1,51 @@
+<!-- SVG Icons are from https://simpleicons.org -->
+<footer class="pv4 ph3 tc">
+  <a class="link near-black hover-silver dib mh3 tc" href="https://facebook.com" title="Facebook">
+    <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M15.117 0H.883C.395 0 0 .395 0 .883v14.234c0 .488.395.883.883.883h7.663V9.804H6.46V7.39h2.086V5.607c0-2.066 1.262-3.19 3.106-3.19.883 0 1.642.064 1.863.094v2.16h-1.28c-1 0-1.195.476-1.195 1.176v1.54h2.39l-.31 2.416h-2.08V16h4.077c.488 0 .883-.395.883-.883V.883C16 .395 15.605 0 15.117 0" fill-rule="nonzero"/></svg>
+    <span class="f6 db">Facebook</span>
+  </a>
+  <a class="link near-black hover-silver dib mh3 tc" href="https://github.com/mrmrs" title="GitHub">
+    <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8 0C3.58 0 0 3.582 0 8c0 3.535 2.292 6.533 5.47 7.59.4.075.547-.172.547-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.223 1.873.87 2.33.665.072-.517.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.953 0-.873.31-1.587.823-2.147-.083-.202-.358-1.015.077-2.117 0 0 .672-.215 2.2.82.638-.178 1.323-.266 2.003-.27.68.004 1.364.092 2.003.27 1.527-1.035 2.198-.82 2.198-.82.437 1.102.163 1.915.08 2.117.513.56.823 1.274.823 2.147 0 3.073-1.87 3.75-3.653 3.947.287.246.543.735.543 1.48 0 1.07-.01 1.933-.01 2.195 0 .215.144.463.55.385C13.71 14.53 16 11.534 16 8c0-4.418-3.582-8-8-8"/></svg>
+    <span class="f6 db">GitHub</span>
+  </a>
+  <a class="link hover-silver near-black dib mh3 tc" href="https://instagram.com/mrmrs_" title="Instagram">
+    <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8 0C5.827 0 5.555.01 4.702.048 3.85.088 3.27.222 2.76.42c-.526.204-.973.478-1.417.923-.445.444-.72.89-.923 1.417-.198.51-.333 1.09-.372 1.942C.008 5.555 0 5.827 0 8s.01 2.445.048 3.298c.04.852.174 1.433.372 1.942.204.526.478.973.923 1.417.444.445.89.72 1.417.923.51.198 1.09.333 1.942.372.853.04 1.125.048 3.298.048s2.445-.01 3.298-.048c.852-.04 1.433-.174 1.942-.372.526-.204.973-.478 1.417-.923.445-.444.72-.89.923-1.417.198-.51.333-1.09.372-1.942.04-.853.048-1.125.048-3.298s-.01-2.445-.048-3.298c-.04-.852-.174-1.433-.372-1.942-.204-.526-.478-.973-.923-1.417-.444-.445-.89-.72-1.417-.923-.51-.198-1.09-.333-1.942-.372C10.445.008 10.173 0 8 0zm0 1.44c2.136 0 2.39.01 3.233.048.78.036 1.203.166 1.485.276.374.145.64.318.92.598.28.28.453.546.598.92.11.282.24.705.276 1.485.038.844.047 1.097.047 3.233s-.01 2.39-.048 3.233c-.036.78-.166 1.203-.276 1.485-.145.374-.318.64-.598.92-.28.28-.546.453-.92.598-.282.11-.705.24-1.485.276-.844.038-1.097.047-3.233.047s-2.39-.01-3.233-.048c-.78-.036-1.203-.166-1.485-.276-.374-.145-.64-.318-.92-.598-.28-.28-.453-.546-.598-.92-.11-.282-.24-.705-.276-1.485C1.45 10.39 1.44 10.136 1.44 8s.01-2.39.048-3.233c.036-.78.166-1.203.276-1.485.145-.374.318-.64.598-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276C5.61 1.45 5.864 1.44 8 1.44zm0 2.452c-2.27 0-4.108 1.84-4.108 4.108 0 2.27 1.84 4.108 4.108 4.108 2.27 0 4.108-1.84 4.108-4.108 0-2.27-1.84-4.108-4.108-4.108zm0 6.775c-1.473 0-2.667-1.194-2.667-2.667 0-1.473 1.194-2.667 2.667-2.667 1.473 0 2.667 1.194 2.667 2.667 0 1.473-1.194 2.667-2.667 2.667zm5.23-6.937c0 .53-.43.96-.96.96s-.96-.43-.96-.96.43-.96.96-.96.96.43.96.96z"/></svg>
+    <span class="f6 db">Instagram</span>
+  </a>
+  <a class="link hover-silver near-black dib mh3 tc" href="https://youtube.com" title="youtube">
+    <svg class="dib w2 h2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M0 7.345c0-1.294.16-2.59.16-2.59s.156-1.1.636-1.587c.608-.637 1.408-.617 1.764-.684C3.84 2.36 8 2.324 8 2.324s3.362.004 5.6.166c.314.038.996.04 1.604.678.48.486.636 1.588.636 1.588S16 6.05 16 7.346v1.258c0 1.296-.16 2.59-.16 2.59s-.156 1.102-.636 1.588c-.608.638-1.29.64-1.604.678-2.238.162-5.6.166-5.6.166s-4.16-.037-5.44-.16c-.356-.067-1.156-.047-1.764-.684-.48-.487-.636-1.587-.636-1.587S0 9.9 0 8.605v-1.26zm6.348 2.73V5.58l4.323 2.255-4.32 2.24h-.002z"/></svg>
+    <span class="f6 db">Youtube</span>
+  </a>
+  <a class="link hover-silver near-black dib mh3 tc" href="https://soundcloud.com/mrsjxn" title="SoundCloud">
+    <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><g fill-rule="nonzero"><path d="M.773 8.13c-.034 0-.062.03-.067.066L.55 9.633l.156 1.405c.005.038.033.065.067.065.033 0 .06-.027.066-.065l.178-1.405-.18-1.437C.835 8.158.807 8.13.774 8.13M.18 8.682c-.032 0-.06.025-.063.062L0 9.634l.117.872c.004.037.03.063.064.063s.06-.027.065-.063l.14-.874-.14-.89c-.005-.036-.03-.06-.064-.06M1.4 7.85c-.04 0-.075.033-.08.078l-.148 1.705.15 1.643c.003.045.037.078.08.078.04 0 .074-.033.08-.078l.17-1.643-.17-1.705c-.006-.045-.04-.078-.08-.078M2.035 7.79c-.05 0-.09.04-.094.092l-.14 1.75.14 1.696c.005.052.045.092.095.092s.09-.04.094-.092l.16-1.695-.16-1.752c-.006-.05-.046-.09-.095-.09M2.78 11.342zM2.78 8.008c-.003-.06-.05-.106-.106-.106-.058 0-.104.046-.108.107l-.133 1.623.133 1.71c.004.06.05.105.108.105.057 0 .103-.046.107-.106l.152-1.71-.15-1.624zM3.318 6.87c-.065 0-.118.053-.12.12L3.07 9.634l.125 1.71c.003.065.056.118.12.118.065 0 .118-.053.122-.12l.14-1.708-.14-2.644c-.005-.067-.058-.12-.122-.12M3.957 6.262c-.072 0-.132.058-.135.133l-.117 3.248.117 1.698c.003.076.063.134.135.134.072 0 .13-.058.135-.133v.002l.132-1.7-.132-3.247c-.004-.075-.063-.133-.135-.133M4.62 5.968c-.08 0-.144.065-.147.148l-.11 3.52.11 1.68c.003.08.068.146.148.146.08 0 .146-.065.15-.147l.123-1.68-.123-3.52c-.004-.082-.07-.147-.15-.147M5.443 5.997c-.003-.09-.074-.16-.162-.16-.088 0-.16.07-.16.16l-.102 3.638.1 1.67c.003.09.074.16.163.16.09 0 .16-.07.163-.16l.113-1.67-.113-3.638zM5.443 11.304zM5.945 5.915c-.096 0-.173.077-.175.175l-.093 3.545.093 1.654c.002.096.08.173.175.173.096 0 .174-.077.176-.175v.002l.105-1.655L6.12 6.09c0-.098-.08-.175-.175-.175M6.615 6.03c-.104 0-.187.084-.19.19l-.084 3.416.086 1.643c.002.104.085.186.19.186.103 0 .186-.082.19-.188l.093-1.642-.095-3.416c-.003-.106-.086-.19-.19-.19M7.402 5.403c-.032-.02-.07-.034-.112-.034-.04 0-.078.01-.11.032-.054.036-.092.098-.093.17v.038L7.01 9.635l.077 1.634v.006c.003.045.02.087.048.12.037.045.093.074.155.074.055 0 .106-.023.142-.06.037-.036.06-.087.06-.142l.01-.162.077-1.47-.087-4.065c0-.07-.037-.13-.09-.167M7.493 11.27v-.002zM8.072 5.018c-.032-.02-.07-.03-.11-.03-.05 0-.1.017-.137.048-.048.04-.08.1-.08.167v.022l-.09 4.41.047.817.043.793c.002.118.1.215.217.215.118 0 .215-.097.217-.216v.002l.095-1.61-.096-4.433c-.002-.08-.045-.147-.108-.185M14.032 7.538c-.27 0-.527.055-.76.153-.158-1.773-1.645-3.164-3.46-3.164-.443 0-.876.087-1.258.235-.15.06-.188.117-.19.232v6.246c.002.12.095.215.213.226h5.455c1.087 0 1.968-.87 1.968-1.958 0-1.087-.88-1.968-1.968-1.968"/></g></svg>
+    <span class="f6 db">SoundCloud</span>
+  </a>
+  <a class="link hover-silver near-black dib mh3 tc" href="http://stackoverflow.com" title="Stack Overflow">
+    <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M12.658 14.577v-4.27h1.423V16H1.23v-5.693H2.65v4.27h10.006zm-8.583-1.423h7.16V11.73h-7.16v1.424zm.173-3.235l6.987 1.465.3-1.38L4.55 8.54l-.302 1.38zm.906-3.365l6.47 3.02.602-1.295-6.47-3.02-.602 1.295zm1.81-3.19l5.478 4.57.906-1.078-5.477-4.57-.905 1.077zM10.502 0L9.338.863l4.27 5.735 1.164-.862L10.5 0z"/></svg>
+    <span class="f6 db">Stack Overflow</span>
+  </a>
+  <a class="link hover-silver near-black dib mh3 tc" href="http://tachyons-slack-invite.herokuapp.com" title="Slack">
+    <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><g fill-rule="nonzero"><path d="M6.586 7.33l.69 2.057 2.137-.716-.69-2.056-2.137.716z"/><path d="M12.55 9.37l-1.037.347.36 1.073c.145.434-.09.904-.524 1.05-.096.03-.19.045-.287.042-.338-.01-.65-.226-.765-.566l-.36-1.072-2.138.716.36 1.072c.145.435-.09.905-.523 1.05-.096.032-.192.045-.286.043-.34-.01-.65-.226-.764-.566l-.36-1.075-1.037.348c-.096.03-.19.045-.286.042-.34-.008-.65-.226-.765-.565-.146-.434.09-.904.522-1.05L5.7 9.914l-.69-2.058-1.037.347c-.094.032-.19.045-.285.043-.338-.01-.65-.226-.765-.566-.145-.434.09-.904.523-1.05l1.037-.347-.36-1.073c-.145-.434.09-.904.524-1.05.435-.145.905.09 1.05.524l.36 1.072 2.137-.716-.36-1.072c-.144-.435.09-.905.524-1.05.435-.145.906.09 1.05.523l.36 1.075 1.037-.347c.434-.146.904.088 1.05.522.145.434-.09.904-.523 1.05l-1.037.347.69 2.057 1.036-.347c.435-.145.905.09 1.05.523.146.434-.09.904-.522 1.05zm2.78-3.57C13.68.304 11.298-.98 5.8.67.304 2.32-.98 4.7.67 10.2c1.65 5.497 4.03 6.78 9.53 5.13 5.497-1.65 6.78-4.03 5.13-9.53z"/></g></svg>
+    <span class="f6 db">Slack</span>
+  </a>
+  <a class="link hover-silver near-black dib mh3 tc" href="https://medium.com/@mrmrs_/" title="Medium">
+    <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M11.824 12.628l-.276.45.798.398 2.744 1.372c.15.076.294.11.418.11.278 0 .467-.177.467-.492V5.883l-4.15 6.745zm4.096-8.67c-.004-.003 0-.01-.003-.012l-4.825-2.412c-.06-.03-.123-.038-.187-.044-.016 0-.03-.01-.047-.01-.184 0-.368.092-.467.254l-.24.39-.5.814-1.89 3.08 1.89 3.076.5.813.5.812.59.95 4.71-7.64c.02-.03.01-.06-.02-.08zm-6.27 7.045L7.17 6.97l-.295-.477-.294-.477-.25-.416v4.867l3.32 1.663.5.25.5.25-.5-.813-.5-.813zM.737 1.68L.59 1.608c-.085-.042-.166-.062-.24-.062-.206 0-.35.16-.35.427v10.162c0 .272.2.594.442.716l4.145 2.08c.107.06.208.08.3.08.257 0 .438-.2.438-.53V4.01c0-.02-.012-.04-.03-.047L.738 1.68z"/></svg>
+    <span class="f6 db">Medium</span>
+  </a>
+  <a class="link hover-silver near-black dib mh3 tc" href="https://linkedin.com title="LinkedIn">
+    <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M13.632 13.635h-2.37V9.922c0-.886-.018-2.025-1.234-2.025-1.235 0-1.424.964-1.424 1.96v3.778h-2.37V6H8.51V7.04h.03c.318-.6 1.092-1.233 2.247-1.233 2.4 0 2.845 1.58 2.845 3.637v4.188zM3.558 4.955c-.762 0-1.376-.617-1.376-1.377 0-.758.614-1.375 1.376-1.375.76 0 1.376.617 1.376 1.375 0 .76-.617 1.377-1.376 1.377zm1.188 8.68H2.37V6h2.376v7.635zM14.816 0H1.18C.528 0 0 .516 0 1.153v13.694C0 15.484.528 16 1.18 16h13.635c.652 0 1.185-.516 1.185-1.153V1.153C16 .516 15.467 0 14.815 0z" fill-rule="nonzero"/></svg>
+    <span class="f6 db">LinkedIn</span>
+  </a>
+  <a class="link hover-silver near-black dib mh3 tc" href="https://twitter.com/mrmrs_" title="Twitter">
+    <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.375-1.337.648-2.085.795-.598-.638-1.45-1.036-2.396-1.036-1.812 0-3.282 1.468-3.282 3.28 0 .258.03.51.085.75C5.152 5.39 2.733 4.084 1.114 2.1.83 2.583.67 3.147.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.416-.02-.617-.058.418 1.304 1.63 2.253 3.067 2.28-1.124.88-2.54 1.404-4.077 1.404-.265 0-.526-.015-.783-.045 1.453.93 3.178 1.474 5.032 1.474 6.038 0 9.34-5 9.34-9.338 0-.143-.004-.284-.01-.425.64-.463 1.198-1.04 1.638-1.7z" fill-rule="nonzero"/></svg>
+    <span class="f6 db">Twitter</span>
+  </a>
+  <a class="link hover-silver near-black dib mh3 tc" href="http://tumblr.com" title="Tumblr">
+    <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M9.708 16c-3.396 0-4.687-2.504-4.687-4.274V6.498H3.403V4.432C5.83 3.557 6.412 1.368 6.55.12c.01-.086.077-.12.115-.12H9.01v4.076h3.2v2.422H8.997v4.98c.01.667.25 1.58 1.472 1.58h.067c.424-.012.994-.136 1.29-.278l.77 2.283c-.288.424-1.594.916-2.77.936h-.12z" fill-rule="nonzero"/></svg>
+    <span class="f6 db">Tumblr</span>
+  </a>
+  <a class="link hover-silver near-black dib mh3 tc" href="http://codepen.io" title="CodePen">
+    <svg class="dib h2 w2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M15.988 5.443c-.004-.02-.007-.04-.012-.058l-.01-.033c-.006-.017-.012-.034-.02-.05-.003-.012-.01-.023-.014-.034l-.023-.045-.02-.032-.03-.04-.024-.03c-.01-.013-.022-.026-.034-.038l-.027-.027-.04-.032-.03-.024-.012-.01L8.38.117c-.23-.155-.53-.155-.76 0L.305 4.99.296 5c-.012.007-.022.015-.032.023-.014.01-.027.02-.04.032l-.027.027-.034.037-.024.03-.03.04c-.006.012-.013.022-.02.033l-.023.045-.015.034c-.007.016-.012.033-.018.05l-.01.032c-.005.02-.01.038-.012.058l-.006.03C.002 5.5 0 5.53 0 5.56v4.875c0 .03.002.06.006.09l.007.03c.003.02.006.04.013.058l.01.033c.006.018.01.035.018.05l.015.033c.006.016.014.03.023.047l.02.03c.008.016.018.03.03.042.007.01.014.02.023.03.01.012.02.025.034.036.01.01.018.02.028.026l.04.033.03.023.01.01 7.31 4.876c.116.078.248.117.382.116.134 0 .266-.04.38-.116l7.314-4.875.01-.01c.012-.007.022-.015.032-.023.014-.01.027-.02.04-.032l.027-.027.034-.037.024-.03.03-.04.02-.032.023-.046.015-.033.018-.052.01-.033c.005-.02.01-.038.013-.058 0-.01.003-.02.004-.03.004-.03.006-.06.006-.09V5.564c0-.03-.002-.06-.006-.09l-.007-.03zM8 9.626L5.568 8 8 6.374 10.432 8 8 9.626zM7.312 5.18l-2.98 1.993-2.406-1.61 5.386-3.59v3.206zM3.095 8l-1.72 1.15v-2.3L3.095 8zm1.237.828l2.98 1.993v3.208l-5.386-3.59 2.406-1.61zm4.355 1.993l2.98-1.993 2.407 1.61-5.387 3.59v-3.206zM12.905 8l1.72-1.15v2.3L12.905 8zm-1.237-.827L8.688 5.18V1.97l5.386 3.59-2.406 1.61z" fill-rule="nonzero"/></svg>
+    <span class="f6 db">Code Pen</span>
+  </a>
+</footer>
--- a/docs/components/footers/social.html
+++ b/docs/components/footers/social.html
@ -0,0 +1,32 @@
+<footer class="pv4 ph3 ph5-ns tc">
+  <a class="link dim gray dib h2 w2 br-100 mr3 " href="#" title="">
+    <svg data-icon="facebook" viewBox="0 0 32 32" style="fill:currentcolor">
+      <title>facebook icon</title>
+      <path d="M8 12 L13 12 L13 8 C13 2 17 1 24 2 L24 7 C20 7 19 7 19 10 L19 12 L24 12 L23 18 L19 18 L19 30 L13 30 L13 18 L8 18 z"></path>
+    </svg>
+  </a>
+  <a class="link dim gray dib h2 w2 br-100 mr3 " href="#" title="">
+    <svg data-icon="twitter" viewBox="0 0 32 32" style="fill:currentcolor">
+      <title>twitter icon</title>
+      <path d="M2 4 C6 8 10 12 15 11 A6 6 0 0 1 22 4 A6 6 0 0 1 26 6 A8 8 0 0 0 31 4 A8 8 0 0 1 28 8 A8 8 0 0 0 32 7 A8 8 0 0 1 28 11 A18 18 0 0 1 10 30 A18 18 0 0 1 0 27 A12 12 0 0 0 8 24 A8 8 0 0 1 3 20 A8 8 0 0 0 6 19.5 A8 8 0 0 1 0 12 A8 8 0 0 0 3 13 A8 8 0 0 1 2 4"></path>
+    </svg>
+  </a>
+  <a class="link dim gray dib br-100 h2 w2 mr3 " href="#" title="">
+    <svg data-icon="github" viewBox="0 0 32 32" style="fill:currentcolor">
+      <title>github icon</title>
+      <path d="M0 18 C0 12 3 10 3 9 C2.5 7 2.5 4 3 3 C6 3 9 5 10 6 C12 5 14 5 16 5 C18 5 20 5 22 6 C23 5 26 3 29 3 C29.5 4 29.5 7 29 9 C29 10 32 12 32 18 C32 25 30 30 16 30 C2 30 0 25 0 18 M3 20 C3 24 4 28 16 28 C28 28 29 24 29 20 C29 16 28 14 16 14 C4 14 3 16 3 20 M8 21 A1.5 2.5 0 0 0 13 21 A1.5 2.5 0 0 0 8 21 M24 21 A1.5 2.5 0 0 0 19 21 A1.5 2.5 0 0 0 24 21 z"></path>
+    </svg>
+  </a>
+  <a class="link dim gray dib br-100 h2 w2 mr3 " href="#" title="">
+    <svg data-icon="dribbble" viewBox="0 0 32 32" style="fill:currentcolor">
+      <title>dribbble icon</title>
+      <path d="M16 0 A16 16 0 0 0 0 16 A16 16 0 0 0 16 32 A16 16 0 0 0 32 16 A16 16 0 0 0 16 0 M5 11.5 A12 12 0 0 1 11 5 A46 46 0 0 1 13.5 9.25 A46 46 0 0 1 5 11.5 M15 4 A12 12 0 0 1 21.5 5.25 A46 46 0 0 1 17 7.75 A50 50 0 0 0 15 4 M4 16 A50 50 0 0 0 15 13 A46 46 0 0 1 16 15.5 A26 26 0 0 0 6 22.5 A12 12 0 0 1 4 16 M18.5 11.5 A50 50 0 0 0 25 8 A12 12 0 0 1 28 13.75 A26 26 0 0 0 19.75 14.5 A50 50 0 0 0 18.5 11.5 M17 19.5 A46 46 0 0 1 18 28 A12 12 0 0 1 8.75 25.5 A22 22 0 0 1 17 19.5 M20.75 18.25 A22 22 0 0 1 28 17.75 A12 12 0 0 1 22 26.5 A50 50 0 0 0 20.75 18.25"></path>
+    </svg>
+  </a>
+  <div class="mt4">
+    <a href="#" class="f6 link dim gray dib mr3 mr4-ns">Help</a>
+    <a href="#" class="f6 link dim gray dib mr3 mr4-ns">Send feedback</a>
+    <a href="#" class="f6 link dim gray dib mr3 mr4-ns">Privacy</a>
+    <a href="#" class="f6 link dim gray dib">Terms</a>
+  </div>
+</footer>
--- a/docs/components/footers/studios.html
+++ b/docs/components/footers/studios.html
@ -0,0 +1,114 @@
+<footer class="pa4 pa5-l black-70 bt b--black-10">
+  <div class="mb4-l cf">
+    <h1 class="fl w-100 pv0 f6 fw6 ttu tracked mb4">Studios</h1>
+    <article class="fl w-50 dib-ns w-auto-ns mr4-m mr5-l mb4 pr2 pr0-ns">
+      <h4 class="f5 f4-l fw6">SF</h4>
+      <span class="f7 f6-l db black-70">837 Larkin St.</span>
+      <span class="f7 f6-l black-70">San Francisco, CA 94109 </span>
+      <a class="f6 db fw6 pv3 black-70 link dim" title="Call SF" href="tel:+12075555555">
+        +1 207-555-5555
+      </a>
+    </article>
+    <article class="fl w-50 dib-ns w-auto-ns mr4-m mr5-l mb4 pl2 pl0-ns">
+      <h4 class="f5 f4-l fw6">LA</h4>
+      <span class="f7 f6-l db black-70">
+        1111 Manor Way
+      </span>
+      <span class="f7 f6-l di black-70">
+        Los Angeles, CA 90048
+      </span>
+      <a href="tel:+13235555555" class="f6 db fw6 pv3 link dim black-70" title="Call the LA office.">
+        +1 323-555-5555
+      </a>
+    </article>
+    <article class="fl w-50 dib-ns w-auto-ns mr4-m mr5-l mb4 pr2 pr0-ns">
+      <h4 class="f5 f4-l fw6">London</h4>
+      <span class="f7 f6-l db black-70">11 Downey St.</span>
+      <span class="f7 f6-l black-70">London, UK</span>
+      <a href="tel:+5555555555" class="link dim f6 db fw6 pv3 black-70" title="Call the London office">+44 0 5555-5555</a>
+    </article>
+    <article class="fl w-50 dib-ns w-auto-ns mb4 pl2 pl0-ns">
+      <h4 class="f5 f4-l fw6">Tokyo</h4>
+      <span class="f7 f6-l db black-70">1982 Flangan Rd.</span>
+      <span class="f7 f6-l">Shinjuku, Tokyo</span>
+      <a href="tel:+444444444444" class="f6 db dim fw6 pv3 link black-70" title="Call Tokyo Office">
+        +99 5555-5555
+      </a>
+    </article>
+  </div>
+  <section class="cf mb5">
+    <div class="mb4 mb0-ns w-100 w-50-l fr">
+      <a class="black-70 f3 f2-ns fw6 tl link dim dib pv3 mt2 mb4 mb0-l" href="mailto:hello@impossible.com" >
+        hello@yourcompany.com
+      </a>
+    </div>
+    <div class="mb4 mb0-ns fl w-100 w-50-l" >
+      <p class="f4 fw6 mb2 f6 mt0">
+        Sign up for our newsletter.
+      </p>
+      <input placeholder="Email Address" class="mw-100 w-100 w5-ns f5 input-reset ba b--black-20 pv3 ph4 border-box">
+      <input type="submit" class="input-reset w-100 w-auto-ns bg-black-80 white f5 pv2 pv3-ns ph4 ba b--black-80 bg-hover-mid-gray">
+    </div>
+  </section>
+  <div class="dt dt--fixed w-100" >
+    <div class="dn dtc-ns v-mid">
+      <p class="f7 black-70 dib pr3 mb3">
+        Copyright © Your Company 2048
+      </p>
+    </div>
+    <div class="db dtc-ns black-70 tc tr-ns v-mid">
+      <a href="https://www.facebook.com/" class="link dim dib mr3 black-70" title="Impossible Labs on Facebook">
+        <svg class="db w2 h2" data-icon="facebook" viewBox="0 0 32 32" fill="currentColor">
+          <title >facebook icon</title>
+          <path d="M8 12 L13 12 L13 8 C13 2 17 1 24 2 L24 7 C20 7 19 7 19 10 L19 12 L24 12 L23 18 L19 18 L19 30 L13 30 L13 18 L8 18 z"
+          ></path>
+        </svg>
+      </a>
+      <a href="https://twitter.com/" class="link dim dib mr3 black-70">
+        <svg class="db w2 h2" data-icon="twitter" viewBox="0 0 32 32"
+          fill="currentColor" >
+          <title >twitter icon</title>
+          <path d="M2 4 C6 8 10 12 15 11 A6 6 0 0 1 22 4 A6 6 0 0 1 26 6 A8 8 0 0 0 31 4 A8 8 0 0 1 28 8 A8 8 0 0 0 32 7 A8 8 0 0 1 28 11 A18 18 0 0 1 10 30 A18 18 0 0 1 0 27 A12 12 0 0 0 8 24 A8 8 0 0 1 3 20 A8 8 0 0 0 6 19.5 A8 8 0 0 1 0 12 A8 8 0 0 0 3 13 A8 8 0 0 1 2 4"
+          ></path>
+        </svg>
+      </a>
+      <a href="https://medium.com/" class="link dim dib mr3 black-70" title="Impossible Labs on Medium">
+        <svg class="db w2 h2" x="0px" y="0px" viewBox="0 0 290 248.6"
+          fill="currentColor" >
+          <g >
+            <path fill="currentColor" class="st0" d="M287.8,46.3L196,0.3c-0.4-0.2-0.9-0.3-1.3-0.3c0,0-0.1,0-0.1,0c-1.1,0-2.2,0.6-2.8,1.5l-56.6,92l63.2,102.7 l90.4-146.9C289.4,48.3,289,46.8,287.8,46.3z"
+            ></path>
+            <polygon fill="currentColor" points="105.2,61.2 105.2,160.3 193.3,204.4 	"
+            ></polygon>
+            <path fill="currentColor" d="M201,208.2l80.9,40.5c4.4,2.2,8,0,8-5v-180L201,208.2z"
+            ></path>
+            <path fill="currentColor" d="M95.5,46.7L10.7,4.3L5.4,1.7C4.6,1.3,3.8,1.1,3.2,1.1c-0.9,0-1.7,0.4-2.3,1.1C0.3,2.8,0,3.8,0,5v193.4 c0,3.3,2.4,7.2,5.4,8.7l83.3,41.6c1.2,0.6,2.3,0.9,3.3,0.9c2.8,0,4.8-2.2,4.8-5.8V48.7C96.7,47.8,96.2,47.1,95.5,46.7z"
+            ></path>
+          </g>
+        </svg>
+      </a>
+      <a href="https://www.linkedin.com/company/" class="link dim dib black-70">
+        <svg class="db w2 h2" x="0px" y="0px" viewBox="0 0 48 48" >
+          <linearGradient gradientUnits="userSpaceOnUse" x1="23.9995"
+            y1="0" x2="23.9995" y2="48.0005" >
+            <stop offset="0" ></stop>
+            <stop offset="1" ></stop>
+          </linearGradient>
+          <path fill="currentColor" d="M48,42c0,3.313-2.687,6-6,6H6c-3.313,0-6-2.687-6-6V6 c0-3.313,2.687-6,6-6h36c3.313,0,6,2.687,6,6V42z"
+          ></path>
+          <g >
+            <g >
+              <path fill="#FFFFFF" d="M15.731,11.633c-1.608,0-2.658,1.083-2.625,2.527c-0.033,1.378,1.018,2.494,2.593,2.494 c1.641,0,2.691-1.116,2.691-2.494C18.357,12.716,17.339,11.633,15.731,11.633z M13.237,35.557h4.988V18.508h-4.988V35.557z M31.712,18.748c-1.595,0-3.222-0.329-4.956,2.36h-0.099l-0.087-2.599h-4.417c0.065,1.411,0.074,3.518,0.074,5.52v11.529h4.988 v-9.854c0-0.46,0.065-0.919,0.196-1.248c0.328-0.919,1.149-1.871,2.527-1.871c1.805,0,2.527,1.411,2.527,3.479v9.494h4.988V25.439 C37.455,20.713,34.993,18.748,31.712,18.748z"
+              ></path>
+            </g>
+          </g>
+        </svg>
+      </a>
+    </div>
+  </div>
+  <div class="db dn-ns">
+    <p class="f7 black-70 mt4 tc">
+      Copyright © Your Company 2038
+    </p>
+  </div>
+</footer>
--- a/docs/components/forms/checkbox-list.html
+++ b/docs/components/forms/checkbox-list.html
@ -0,0 +1,33 @@
+<form class="pa4">
+  <fieldset id="favorite_movies" class="bn">
+    <legend class="fw7 mb2">Favorite Movies</legend>
+    <div class="flex items-center mb2">
+      <input class="mr2" type="checkbox" id="spacejam" value="spacejam">
+      <label for="spacejam" class="lh-copy">Space Jam</label>
+    </div>
+    <div class="flex items-center mb2">
+      <input class="mr2" type="checkbox" id="airbud" value="airbud">
+      <label for="airbud" class="lh-copy">Air Bud</label>
+    </div>
+    <div class="flex items-center mb2">
+      <input class="mr2" type="checkbox" id="hocuspocus" value="hocuspocus">
+      <label for="hocuspocus" class="lh-copy">Hocus Pocus</label>
+    </div>
+    <div class="flex items-center mb2">
+      <input class="mr2" type="checkbox" id="diehard" value="diehard">
+      <label for="diehard" class="lh-copy">Die Hard</label>
+    </div>
+    <div class="flex items-center mb2">
+      <input class="mr2" type="checkbox" id="primer" value="primer">
+      <label for="primer" class="lh-copy">Primer</label>
+    </div>
+    <div class="flex items-center mb2">
+      <input class="mr2" type="checkbox" id="proxy" value="proxy">
+      <label for="proxy" class="lh-copy">Hudsucker Proxy</label>
+    </div>
+    <div class="flex items-center mb2">
+      <input class="mr2" type="checkbox" id="homealone" value="homealone">
+      <label for="homealone" class="lh-copy">Home Alone</label>
+    </div>
+  </fieldset>
+</form>
--- a/docs/components/forms/input-text-label.html
+++ b/docs/components/forms/input-text-label.html
@ -0,0 +1,7 @@
+<form class="pa4 black-80">
+  <div class="measure">
+    <label for="name" class="f6 b db mb2">Name <span class="normal black-60">(optional)</span></label>
+    <input id="name" class="input-reset ba b--black-20 pa2 mb2 db w-100" type="text" aria-describedby="name-desc">
+    <small id="name-desc" class="f6 black-60 db mb2">Helper text for the form control.</small>
+  </div>
+</form>
--- a/docs/components/forms/newsletter-subscription.html
+++ b/docs/components/forms/newsletter-subscription.html
@ -0,0 +1,12 @@
+<div class="pa4-l">
+  <form class="bg-light-red mw7 center pa4 br2-ns ba b--black-10">
+    <fieldset class="cf bn ma0 pa0">
+      <legend class="pa0 f5 f4-ns mb3 black-80">Sign up for our newsletter</legend>
+      <div class="cf">
+        <label class="clip" for="email-address">Email Address</label>
+        <input class="f6 f5-l input-reset bn fl black-80 bg-white pa3 lh-solid w-100 w-75-m w-80-l br2-ns br--left-ns" placeholder="Your Email Address" type="text" name="email-address" value="" id="email-address">
+        <input class="f6 f5-l button-reset fl pv3 tc bn bg-animate bg-black-70 hover-bg-black white pointer w-100 w-25-m w-20-l br2-ns br--right-ns" type="submit" value="Subscribe">
+      </div>
+    </fieldset>
+  </form>
+</div>
--- a/docs/components/forms/password.html
+++ b/docs/components/forms/password.html
@ -0,0 +1,10 @@
+<form class="pa4 black-80">
+  <div class="measure-narrow">
+    <label for="password" class="f6 b db mb2">Password</label>
+    <input class="input-reset ba b--black-20 pa2 mb2 db w-100" type="password" id="password" aria-describedby="password-desc">
+    <small id="password-desc" class="f6 lh-copy black-60 db mb2">
+      Must be 9 characters long and contain both a number and an uppercase
+      character.
+    </small>
+  </div>
+</form>
--- a/docs/components/forms/sign-in.html
+++ b/docs/components/forms/sign-in.html
@ -0,0 +1,23 @@
+<main class="pa4 black-80">
+  <form class="measure center">
+    <fieldset id="sign_up" class="ba b--transparent ph0 mh0">
+      <legend class="f4 fw6 ph0 mh0">Sign In</legend>
+      <div class="mt3">
+        <label class="db fw6 lh-copy f6" for="email-address">Email</label>
+        <input class="pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100" type="email" name="email-address"  id="email-address">
+      </div>
+      <div class="mv3">
+        <label class="db fw6 lh-copy f6" for="password">Password</label>
+        <input class="b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100" type="password" name="password"  id="password">
+      </div>
+      <label class="pa0 ma0 lh-copy f6 pointer"><input type="checkbox"> Remember me</label>
+    </fieldset>
+    <div class="">
+      <input class="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib" type="submit" value="Sign in">
+    </div>
+    <div class="lh-copy mt3">
+      <a href="#0" class="f6 link dim black db">Sign up</a>
+      <a href="#0" class="f6 link dim black db">Forgot your password?</a>
+    </div>
+  </form>
+</main>
--- a/docs/components/forms/sign-up.html
+++ b/docs/components/forms/sign-up.html
@ -0,0 +1,16 @@
+<article class="pa4 black-80">
+  <form action="sign-up_submit" method="get" accept-charset="utf-8">
+    <fieldset id="sign_up" class="ba b--transparent ph0 mh0">
+      <legend class="ph0 mh0 fw6 clip">Sign Up</legend>
+      <div class="mt3">
+        <label class="db fw4 lh-copy f6" for="email-address">Email address</label>
+        <input class="pa2 input-reset ba bg-transparent w-100 measure" type="email" name="email-address"  id="email-address">
+      </div>
+      <div class="mt3">
+        <label class="db fw4 lh-copy f6" for="password">Password</label>
+        <input class="b pa2 input-reset ba bg-transparent" type="password" name="password"  id="password">
+      </div>
+    </fieldset>
+    <div class="mt3"><input class="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6" type="submit" value="Sign Up"></div>
+  </form>
+</article>
--- a/docs/components/forms/textarea-label.html
+++ b/docs/components/forms/textarea-label.html
@ -0,0 +1,7 @@
+<form class="pa4 black-80">
+  <div>
+    <label for="comment" class="f6 b db mb2">Comments <span class="normal black-60">(optional)</span></label>
+    <textarea id="comment" name="comment" class="db border-box hover-black w-100 measure ba b--black-20 pa2 br2 mb2" aria-describedby="comment-desc"></textarea>
+    <small id="comment-desc" class="f6 black-60">Helper text for a form control. Can use this text to <a href="#" class="link underline black-80 hover-blue">link to more info.</a></small>
+  </div>
+</form>
--- a/docs/components/headers/circle-avatar-title-subtitle.html
+++ b/docs/components/headers/circle-avatar-title-subtitle.html
@ -0,0 +1,5 @@
+<header class="tc pv4 pv5-ns">
+  <img src="http://tachyons.io/img/logo.jpg" class="br-100 pa1 ba b--black-10 h3 w3" alt="avatar">
+  <h1 class="f5 f4-ns fw6 mid-gray">Jasper Whitehouse</h1>
+  <h2 class="f6 gray fw2 ttu tracked">Los Angeles</h2>
+</header>
--- a/docs/components/headers/rounded-avatar-title-subtitle.html
+++ b/docs/components/headers/rounded-avatar-title-subtitle.html
@ -0,0 +1,5 @@
+<header class="tc pv4 pv5-ns">
+  <img src="http://tachyons.io/img/logo.jpg" class="br3 ba b--black-10 h3 w3" alt="avatar">
+  <h1 class="f5 f4-ns fw6 black-70">Jasper Whitehouse</h1>
+  <h2 class="f6 black-70 fw2 ttu tracked">Los Angeles</h2>
+</header>
--- a/docs/components/headers/startup-hero.html
+++ b/docs/components/headers/startup-hero.html
@ -0,0 +1,27 @@
+<header class="sans-serif">
+  <div class="cover bg-left bg-center-l" style="background-image: url(http://mrmrs.github.io/photos/u/011.jpg)">
+    <div class="bg-black-80 pb5 pb6-m pb7-l">
+      <nav class="dt w-100 mw8 center">
+        <div class="dtc w2 v-mid pa3">
+          <a href="/" class="dib w2 h2 pa1 ba b--white-90 grow-large border-box">
+            <svg class="link white-90 hover-white" data-icon="skull" viewBox="0 0 32 32" style="fill:currentcolor"><title>skull icon</title><path d="M16 0 C6 0 2 4 2 14 L2 22 L6 24 L6 30 L26 30 L26 24 L30 22 L30 14 C30 4 26 0 16 0 M9 12 A4.5 4.5 0 0 1 9 21 A4.5 4.5 0 0 1 9 12 M23 12 A4.5 4.5 0 0 1 23 21 A4.5 4.5 0 0 1 23 12"></path></svg>
+          </a>
+        </div>
+        <div class="dtc v-mid tr pa3">
+          <a class="f6 fw4 hover-white no-underline white-70 dn dib-ns pv2 ph3" href="/" >How it Works</a>
+          <a class="f6 fw4 hover-white no-underline white-70 dn dib-ns pv2 ph3" href="/" >Pricing</a>
+          <a class="f6 fw4 hover-white no-underline white-70 dn dib-l pv2 ph3" href="/" >About</a>
+          <a class="f6 fw4 hover-white no-underline white-70 dn dib-l pv2 ph3" href="/" >Careers</a>
+          <a class="f6 fw4 hover-white no-underline white-70 dib ml2 pv2 ph3 ba" href="/" >Sign Up</a>
+        </div>
+      </nav>
+      <div class="tc-l mt4 mt5-m mt6-l ph3">
+        <h1 class="f2 f1-l fw2 white-90 mb0 lh-title">This is your super impressive headline</h1>
+        <h2 class="fw1 f3 white-80 mt3 mb4">Now a subheadline where explain your wonderful new startup even more</h2>
+        <a class="f6 no-underline grow dib v-mid bg-blue white ba b--blue ph3 pv2 mb3" href="/">Call to Action</a>
+        <span class="dib v-mid ph3 white-70 mb3">or</span>
+        <a class="f6 no-underline grow dib v-mid white ba b--white ph3 pv2 mb3" href="">Secondary call to action</a>
+      </div>
+    </div>
+  </div>
+</header>
--- a/docs/components/layout/aspect-ratio-16x9.html
+++ b/docs/components/layout/aspect-ratio-16x9.html
@ -0,0 +1,5 @@
+<article class="mw5 mw6-ns center pt4">
+  <div class="aspect-ratio aspect-ratio--16x9 mb4">
+    <div class="aspect-ratio--object cover" style="background:url(http://mrmrs.github.io/photos/001.jpg) center;"></div>
+  </div>
+</article>
--- a/docs/components/layout/aspect-ratio-1x1.html
+++ b/docs/components/layout/aspect-ratio-1x1.html
@ -0,0 +1,5 @@
+<article class="mw5 mw6-ns center pt4">
+  <div class="aspect-ratio aspect-ratio--1x1 mb4">
+    <div class="aspect-ratio--object cover" style="background:url(http://mrmrs.github.io/photos/001.jpg) center;"></div>
+  </div>
+</article>
--- a/docs/components/layout/aspect-ratio-3x4.html
+++ b/docs/components/layout/aspect-ratio-3x4.html
@ -0,0 +1,5 @@
+<article class="mw5 mw6-ns center pt4">
+  <div class="aspect-ratio aspect-ratio--3x4 mb4">
+    <div class="aspect-ratio--object cover" style="background:url(http://mrmrs.github.io/photos/001.jpg) center;"></div>
+  </div>
+</article>
--- a/docs/components/layout/aspect-ratio-4x3.html
+++ b/docs/components/layout/aspect-ratio-4x3.html
@ -0,0 +1,5 @@
+<article class="mw5 mw6-ns center pt4">
+  <div class="aspect-ratio aspect-ratio--4x3 mb4">
+    <div class="aspect-ratio--object cover" style="background:url(http://mrmrs.github.io/photos/001.jpg) center;"></div>
+  </div>
+</article>
--- a/docs/components/layout/aspect-ratio-4x6.html
+++ b/docs/components/layout/aspect-ratio-4x6.html
@ -0,0 +1,5 @@
+<article class="mw5 mw6-ns center pt4">
+  <div class="aspect-ratio aspect-ratio--4x6 mb4">
+    <div class="aspect-ratio--object cover" style="background:url(http://mrmrs.github.io/photos/001.jpg) center;"></div>
+  </div>
+</article>
--- a/docs/components/layout/aspect-ratio-5x7.html
+++ b/docs/components/layout/aspect-ratio-5x7.html
@ -0,0 +1,5 @@
+<article class="mw5 mw6-ns center pt4">
+  <div class="aspect-ratio aspect-ratio--5x7 mb4">
+    <div class="aspect-ratio--object cover" style="background:url(http://mrmrs.github.io/photos/001.jpg) center;"></div>
+  </div>
+</article>
--- a/docs/components/layout/aspect-ratio-5x8.html
+++ b/docs/components/layout/aspect-ratio-5x8.html
@ -0,0 +1,5 @@
+<article class="mw5 mw6-ns center pt4">
+  <div class="aspect-ratio aspect-ratio--5x8 mb4">
+    <div class="aspect-ratio--object cover" style="background:url(http://mrmrs.github.io/photos/001.jpg) center;"></div>
+  </div>
+</article>
--- a/docs/components/layout/aspect-ratio-6x4.html
+++ b/docs/components/layout/aspect-ratio-6x4.html
@ -0,0 +1,5 @@
+<article class="mw5 mw6-ns center pt4">
+  <div class="aspect-ratio aspect-ratio--6x4 mb4">
+    <div class="aspect-ratio--object cover" style="background:url(http://mrmrs.github.io/photos/001.jpg) center;"></div>
+  </div>
+</article>
--- a/docs/components/layout/aspect-ratio-7x5.html
+++ b/docs/components/layout/aspect-ratio-7x5.html
@ -0,0 +1,5 @@
+<article class="mw5 mw6-ns center pt4">
+  <div class="aspect-ratio aspect-ratio--7x5 mb4">
+    <div class="aspect-ratio--object cover" style="background:url(http://mrmrs.github.io/photos/001.jpg) center;"></div>
+  </div>
+</article>
--- a/docs/components/layout/aspect-ratio-8x5.html
+++ b/docs/components/layout/aspect-ratio-8x5.html
@ -0,0 +1,5 @@
+<article class="mw5 mw6-ns center pt4">
+  <div class="aspect-ratio aspect-ratio--8x5 mb4">
+    <div class="aspect-ratio--object cover" style="background:url(http://mrmrs.github.io/photos/001.jpg) center;"></div>
+  </div>
+</article>
--- a/docs/components/layout/aspect-ratio-9x16.html
+++ b/docs/components/layout/aspect-ratio-9x16.html
@ -0,0 +1,5 @@
+<article class="mw5 mw6-ns center pt4">
+  <div class="aspect-ratio aspect-ratio--9x16 mb4">
+    <div class="aspect-ratio--object cover" style="background:url(http://mrmrs.github.io/photos/001.jpg) center;"></div>
+  </div>
+</article>
--- a/docs/components/layout/centered-container.html
+++ b/docs/components/layout/centered-container.html
@ -0,0 +1,7 @@
+<section class="mw5 mw7-ns center bg-light-gray pa3 ph5-ns">
+  <h1 class="mt0">Centered Container</h1>
+  <p class="lh-copy measure">
+    Combine width or max-width values with the center class to create a centered
+    container for your content.
+  </p>
+</section>
--- a/docs/components/layout/five-column-collapse-alternate.html
+++ b/docs/components/layout/five-column-collapse-alternate.html
@ -0,0 +1,17 @@
+<div class="cf">
+  <div class="fl w-50 w-20-ns tc pv5 bg-black-05">
+    1
+  </div>
+  <div class="fl w-50 w-20-ns tc pv5 bg-black-10">
+    2
+  </div>
+  <div class="fl w-100 w-20-ns tc pv5 bg-black-20">
+    3
+  </div>
+  <div class="fl w-50 w-20-ns tc pv5 bg-black-10">
+    4
+  </div>
+  <div class="fl w-50 w-20-ns tc pv5 bg-black-05">
+    5
+  </div>
+</div>
--- a/docs/components/layout/five-column-collapse-asymmetrical.html
+++ b/docs/components/layout/five-column-collapse-asymmetrical.html
@ -0,0 +1,17 @@
+<div class="cf">
+  <div class="fl w-100 w-20-l tc pv5 bg-black-20">
+    1
+  </div>
+  <div class="fl w-25 w-20-l tc pv5 bg-black-10">
+    2
+  </div>
+  <div class="fl w-75 w-20-l tc pv5 bg-black-05">
+    3
+  </div>
+  <div class="fl w-75 w-20-l tc pv5 bg-black-10">
+    4
+  </div>
+  <div class="fl w-25 w-20-l tc pv5 bg-black-05">
+    5
+  </div>
+</div>
--- a/docs/components/layout/five-column-collapse-mixed.html
+++ b/docs/components/layout/five-column-collapse-mixed.html
@ -0,0 +1,17 @@
+<div class="cf">
+  <div class="fl w-100 w-20-ns tc pv5 bg-black-20">
+    1
+  </div>
+  <div class="fl w-25 w-20-ns tc pv5 bg-black-10">
+    2
+  </div>
+  <div class="fl w-25 w-20-ns tc pv5 bg-black-05">
+    3
+  </div>
+  <div class="fl w-25 w-20-ns tc pv5 bg-black-10">
+    4
+  </div>
+  <div class="fl w-25 w-20-ns tc pv5 bg-black-05">
+    5
+  </div>
+</div>
--- a/docs/components/layout/five-column-collapse-one.html
+++ b/docs/components/layout/five-column-collapse-one.html
@ -0,0 +1,17 @@
+<div class="cf">
+  <div class="fl w-100 w-20-ns tc pv5 bg-black-05">
+    1
+  </div>
+  <div class="fl w-100 w-20-ns tc pv5 bg-black-10">
+    2
+  </div>
+  <div class="fl w-100 w-20-ns tc pv5 bg-black-20">
+    3
+  </div>
+  <div class="fl w-100 w-20-ns tc pv5 bg-black-10">
+    4
+  </div>
+  <div class="fl w-100 w-20-ns tc pv5 bg-black-05">
+    5
+  </div>
+</div>
--- a/docs/components/layout/five-column.html
+++ b/docs/components/layout/five-column.html
@ -0,0 +1,17 @@
+<div class="cf">
+  <div class="fl w-20 tc pv5 bg-black-05">
+    1
+  </div>
+  <div class="fl w-20 tc pv5 bg-black-10">
+    2
+  </div>
+  <div class="fl w-20 tc pv5 bg-black-05">
+    3
+  </div>
+  <div class="fl w-20 tc pv5 bg-black-10">
+    4
+  </div>
+  <div class="fl w-20 tc pv5 bg-black-05">
+    5
+  </div>
+</div>
--- a/docs/components/layout/fixed-table-layout-grid-mixed-rows.html
+++ b/docs/components/layout/fixed-table-layout-grid-mixed-rows.html
@ -0,0 +1,62 @@
+<div class="dt dt--fixed">
+  <div class="dt-row">
+    <div class="dtc tc pv4 bg-black-10">
+      1
+    </div>
+    <div class="dtc tc pv4 bg-black-05">
+      2
+    </div>
+    <div class="dtc tc pv4 bg-black-10">
+      3
+    </div>
+  </div>
+  <div class="dt-row">
+    <div class="dtc tc pv4 white bg-black">
+      1
+    </div>
+    <div class="dtc tc pv4 white bg-black-70">
+      2
+    </div>
+    <div class="dtc tc pv4 white bg-black">
+      3
+    </div>
+    <div class="dtc tc pv4 white bg-black-70">
+      4
+    </div>
+    <div class="dtc tc pv4 white bg-black">
+      5
+    </div>
+    <div class="dtc tc pv4 white bg-black-70">
+      6
+    </div>
+    <div class="dtc tc pv4 white bg-black">
+      7
+    </div>
+    <div class="dtc tc pv4 white bg-black-70">
+      8
+    </div>
+    <div class="dtc tc pv4 white bg-black">
+      9
+    </div>
+  </div>
+  <div class="dt-row">
+    <div class="dtc tc pv4 bg-black-10">
+      1
+    </div>
+    <div class="dtc tc pv4 bg-black-05">
+      2
+    </div>
+    <div class="dtc tc pv4 bg-black-10">
+      3
+    </div>
+    <div class="dtc tc pv4 bg-black-10">
+      4
+    </div>
+    <div class="dtc tc pv4 bg-black-05">
+      5
+    </div>
+    <div class="dtc tc pv4 bg-black-10">
+      6
+    </div>
+  </div>
+</div>
--- a/docs/components/layout/fixed-table-layout-grid.html
+++ b/docs/components/layout/fixed-table-layout-grid.html
@ -0,0 +1,60 @@
+<div class="dt dt--fixed">
+  <div class="dtc tc pv4 bg-black-10">
+    1
+  </div>
+  <div class="dtc tc pv4 bg-black-05">
+    2
+  </div>
+  <div class="dtc tc pv4 bg-black-10">
+    3
+  </div>
+</div>
+<div class="dt dt--fixed">
+  <div class="dtc tc pv4 white bg-black">
+    1
+  </div>
+  <div class="dtc tc pv4 white bg-black-70">
+    2
+  </div>
+  <div class="dtc tc pv4 white bg-black">
+    3
+  </div>
+  <div class="dtc tc pv4 white bg-black-70">
+    4
+  </div>
+  <div class="dtc tc pv4 white bg-black">
+    5
+  </div>
+  <div class="dtc tc pv4 white bg-black-70">
+    6
+  </div>
+  <div class="dtc tc pv4 white bg-black">
+    7
+  </div>
+  <div class="dtc tc pv4 white bg-black-70">
+    8
+  </div>
+  <div class="dtc tc pv4 white bg-black">
+    9
+  </div>
+</div>
+<div class="dt dt--fixed">
+  <div class="dtc tc pv4 bg-black-10">
+    1
+  </div>
+  <div class="dtc tc pv4 bg-black-05">
+    2
+  </div>
+  <div class="dtc tc pv4 bg-black-10">
+    3
+  </div>
+  <div class="dtc tc pv4 bg-black-10">
+    4
+  </div>
+  <div class="dtc tc pv4 bg-black-05">
+    5
+  </div>
+  <div class="dtc tc pv4 bg-black-10">
+    6
+  </div>
+</div>
--- a/Show More
+++ b/Show More