Merge pull request #541 from tachyons-css/css-reference

Css reference
2026-02-06 14:26:46 +00:00 · 2018-03-24 10:35:37 -06:00 · 2018-03-24 10:35:37 -06:00 · 4013eb8942
commit 4013eb8942
parent 4c0b703bf7 ac908208d8
15 changed files with 4283 additions and 3400 deletions
--- a/docs/build/modules.js
+++ b/docs/build/modules.js
@ -9,12 +9,8 @@ const px = Object.keys(dependencies)
  .filter(m => !/^tachyons-(colors|generator|styles|component-loader)/.test(m))
  .map(async m => {
    const pkg = require(`${m}/package.json`)
-    const readme = readFileSync(
-      path.resolve('node_modules', m, 'readme.md'),
-      'utf8'
-    )
    const src = readFileSync(
-      path.resolve('node_modules', m, 'src', `${m}.css`),
+      path.resolve('..', 'src', `_${m.replace(/^tachyons-/, '')}.css`),
      'utf8'
    )
    const css = readFileSync(
@ -22,7 +18,10 @@ const px = Object.keys(dependencies)
      'utf8'
    )

-    const tableOfStyles = await cssTable(css, { from: m })
+    const docsComment = src.match(/\/\*!!!([\S\s]*?)\*\//m)
+    const readme = docsComment && docsComment[0].replace(/^\/\*!!!/, '').replace(/\*\/$/, '')
+
+    const tableOfStyles = await cssTable(src, { from: m })

    return {
      name: m,
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@ -2033,11 +2033,33 @@
      "resolved": "https://registry.npmjs.org/del/-/del-3.0.0.tgz",
      "integrity": "sha1-U+z2mf/LyzljdpGrE7rxYIGXZuU=",
      "requires": {
+        "globby": "6.1.0",
        "is-path-cwd": "1.0.0",
        "is-path-in-cwd": "1.0.0",
        "p-map": "1.2.0",
        "pify": "3.0.0",
        "rimraf": "2.6.2"
+      },
+      "dependencies": {
+        "globby": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+          "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=",
+          "requires": {
+            "array-union": "1.0.2",
+            "glob": "7.1.2",
+            "object-assign": "4.1.1",
+            "pify": "2.3.0",
+            "pinkie-promise": "2.0.1"
+          },
+          "dependencies": {
+            "pify": {
+              "version": "2.3.0",
+              "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+              "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
+            }
+          }
+        }
      }
    },
    "delayed-stream": {
@ -6173,6 +6195,41 @@
        }
      }
    },
+    "postcss-custom-media": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-6.0.0.tgz",
+      "integrity": "sha1-vlMnhBEOyylQRPtTlaGABushpzc=",
+      "requires": {
+        "postcss": "6.0.21"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.2.tgz",
+          "integrity": "sha512-ZM4j2/ld/YZDc3Ma8PgN7gyAk+kHMMMyzLNryCPGhWrsfAuDVeuid5bpRFTDgMH9JBK2lA4dyyAkkZYF/WcqDQ==",
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.3.0"
+          }
+        },
+        "postcss": {
+          "version": "6.0.21",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.21.tgz",
+          "integrity": "sha512-y/bKfbQz2Nn/QBC08bwvYUxEFOVGfPIUOTsJ2CK5inzlXW9SdYR1x4pEsG9blRAF/PX+wRNdOah+gx/hv4q7dw==",
+          "requires": {
+            "chalk": "2.3.2",
+            "source-map": "0.6.1",
+            "supports-color": "5.3.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
    "postcss-discard-comments": {
      "version": "2.0.4",
      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz",
@ -7556,15 +7613,16 @@
      "integrity": "sha1-MLCgZiUj9NI+1uO5tUx4zfRjWw0="
    },
    "tachyons-component-loader": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/tachyons-component-loader/-/tachyons-component-loader-0.0.1.tgz",
-      "integrity": "sha512-TLZed5WfBiMBRCAmDgJIyItPrZDLJTK8hOaHd2yVU77ujNFmOejSJfQIA3uamaV5Eokef52PTizQEMls6dj3Jg==",
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/tachyons-component-loader/-/tachyons-component-loader-0.0.2.tgz",
+      "integrity": "sha512-40qcQ1DCNowE0Uxz3VD7hjxiziNhgzPXjIK2e8nusJRoekJmWTYmCgyX86hKR61dIHOWp+8KGlGW/F0Zqt9/2w==",
      "requires": {
        "css-mqpacker": "6.0.2",
        "cssstats": "3.2.0",
        "get-classes-from-html": "1.0.1",
        "perfectionist": "2.4.0",
        "postcss": "6.0.21",
+        "postcss-custom-media": "6.0.0",
        "postcss-discard-comments": "2.0.4",
        "postcss-discard-empty": "2.1.0",
        "postcss-import": "11.1.0",
@ -7808,11 +7866,6 @@
      "resolved": "https://registry.npmjs.org/tachyons-widths/-/tachyons-widths-5.2.1.tgz",
      "integrity": "sha512-LrqK5D8pH1K5JPrv1ld2o+oybDzvhq4dIEW43u3RpyPYg2PizUnxdKWm+QREsOWDDGgwwOMi094P6y5yoBSDNw=="
    },
-    "tachyons-word-break": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/tachyons-word-break/-/tachyons-word-break-3.0.4.tgz",
-      "integrity": "sha1-JC/vWMFlC5mINMpfZ/If/1b/oRg="
-    },
    "tachyons-z-index": {
      "version": "1.0.9",
      "resolved": "https://registry.npmjs.org/tachyons-z-index/-/tachyons-z-index-1.0.9.tgz",
--- a/docs/package.json
+++ b/docs/package.json
@ -43,7 +43,7 @@
    "tachyons-box-sizing": "^3.2.2",
    "tachyons-clears": "^3.0.4",
    "tachyons-colors": "^5.3.3",
-    "tachyons-component-loader": "0.0.1",
+    "tachyons-component-loader": "0.0.2",
    "tachyons-coordinates": "^4.0.4",
    "tachyons-debug": "^1.1.10",
    "tachyons-debug-children": "^1.0.0",
@ -86,7 +86,6 @@
    "tachyons-visibility": "^2.0.5",
    "tachyons-white-space": "^4.0.6",
    "tachyons-widths": "^5.2.1",
-    "tachyons-word-break": "^3.0.4",
    "tachyons-z-index": "^1.0.9"
  },
  "contributors": [
@ -122,7 +121,7 @@
    "globby": "^8.0.1",
    "mkdirp": "^0.5.1",
    "prettier": "^1.11.1",
-    "titleize": "^1.0.0",
+    "titleize": "^1.0.1",
    "webpack": "^4.2.0"
  }
 }
--- a/docs/pages/index.js
+++ b/docs/pages/index.js
@ -12,10 +12,7 @@ export default () => (
  <Layout>
    <section className="bg-black-0125 w-100">
      <article>
-        <Nav />
-        <Hero version={version} />
-        <GettingStarted version={version} />
-        <StartUsing />
+        <H1>Hello, world!</H1>
      </article>
    </section>
  </Layout>
--- a/docs/pages/reference.js
+++ b/docs/pages/reference.js
@ -0,0 +1,59 @@
+import React, { Component } from 'react'
+import Highlight from 'react-highlight'
+
+import Layout from '../ui/Layout'
+import Link from '../ui/Link'
+import SrcReference from '../ui/SrcReference'
+import { Flex, md } from '../ui'
+import { modules } from '../ui/data.json'
+
+class Reference extends Component {
+  static getInitialProps = ({ query = {} }) => query
+
+  render () {
+    const { view = 'table', module } = this.props
+    const currModule = modules[module]
+
+    return (
+      <Layout skipFooter={true} skipHeader={true}>
+        <Flex>
+          <div className='fixed bg-near-white w5 h-100 overflow-container br b--black-10 flex-shrink-0'>
+            <nav
+              className='pv2'
+              children={Object.keys(modules).map(k => {
+                const m = modules[k]
+                const shortName = m.name.replace(/^tachyons-/, '')
+
+                return (
+                  <Link
+                    href={`/reference?module=${m.name}`}
+                    className='db link pl3 pv2 black'
+                    children={shortName}
+                  />
+                )
+              })}
+            />
+          </div>
+          <Flex className='ml6 pl6 w-100 mh-100'>
+            <div className='flex-1 pa3 pv4'>
+              <Highlight>{currModule.readme}</Highlight>
+            </div>
+            <div className='flex-1'>
+              <SrcReference
+                view={view}
+                {...currModule}
+              />
+            </div>
+          </Flex>
+        </Flex>
+      </Layout>
+    )
+  }
+}
+
+Reference.defaultProps = {
+  module: 'tachyons-widths',
+  view: 'table'
+}
+
+export default Reference
--- a/docs/ui/Header.js
+++ b/docs/ui/Header.js
@ -46,7 +46,7 @@ class Header extends Component {
    const icon = this.state.mobileMenuOpen ? <TimesIcon /> : <HamburgerIcon />

    return (
-      <header>
+      <header className="bg-white w-100 bb b--black-10">
        <div className="pv3">
          <Container padding={true}>
            <Flex justify="between" alignItems="center">
--- a/docs/ui/Layout.js
+++ b/docs/ui/Layout.js
@ -7,6 +7,8 @@ import Footer from './Footer'
 export default ({
  title = 'TACHYONS - Css Toolkit',
  className = '',
+  skipHeader,
+  skipFooter,
  children
 }) => {
  console.log(`
@ -17,7 +19,6 @@ export default ({
 /_/    \\__,_/ \\___/ /_/ /_/_\__, / \\____//_/ /_//____/
                            /____/

-
 ---------------------------------------------------------
 👩‍💻 https://github.com/tachyons-css/tachyons
 🚀 v${version}
@ -29,9 +30,9 @@ export default ({
      <link rel="stylesheet" href="https://file-jyzsebnxow.now.sh" />
      <link rel="stylesheet" href="https://file-zlngimivyb.now.sh" />

-      <Header version={version} />
+      {skipHeader ? null : <Header version={version} />}
      <main className={className} children={children} />
-      <Footer />
+      {skipFooter ? null : <Footer />}
    </div>
  )
 }
--- a/docs/ui/ModuleDocs.js
+++ b/docs/ui/ModuleDocs.js
@ -68,7 +68,11 @@ const Module = data => {
                  <code>{decl.selector}</code>
                </td>
                <td className="pa2 bb b--black-05 black-60">
-                  <code>{decl.declarations.join('; ')}</code>
+                  <code
+                    children={decl.declarations.map(d => (
+                      <span key={d} className="db" children={d + ';'} />
+                    ))}
+                  />
                </td>
              </tr>
            ))}
--- a/docs/ui/SrcReference.js
+++ b/docs/ui/SrcReference.js
@ -0,0 +1,73 @@
+import React from 'react'
+import classNames from 'classnames'
+import Highlight from 'react-highlight'
+
+import Link from './Link'
+import data from './data.json'
+
+export const Table = ({ tableOfStyles }) =>
+  <table className="collapse w-100">
+    <thead>
+      <tr>
+        <th className="f7 tracked ttu tl bb bt b--white-20 pa2">Class</th>
+        <th className="f7 tracked ttu tl bb bt b--white-20 pa2">
+          Properties
+        </th>
+      </tr>
+    </thead>
+    <tbody
+      children={tableOfStyles.map(decl => (
+        <tr key={decl.selector}>
+          <td className="pa2 bb b--white-10 near-white">
+            <code>{decl.selector}</code>
+          </td>
+          <td className="pa2 bb b--white-10 white-80">
+            <code
+              children={decl.declarations.map(d => (
+                <span key={d} className="db" children={d + ';'} />
+              ))}
+            />
+          </td>
+        </tr>
+      ))}
+    />
+  </table>
+
+export const Css = ({ src }) => (
+  <div className='pa3'>
+    <Highlight>{src}</Highlight>
+  </div>
+)
+
+export default ({ src, view, name, tableOfStyles }) => {
+  const tabCx = 'f6 ttu ba tracked br3 dib link ph2 pv1'
+  const cssTabCx = classNames('br--right', tabCx, {
+    'white': view !== 'css',
+    'bg-white black b--white':  view === 'css'
+  })
+  const tableTabCx = classNames('br--left', tabCx, {
+    'white': view !== 'table',
+    'bg-white black b--white':  view === 'table'
+  })
+
+  return (
+    <div className="bg-black white">
+      <div className="dib mt3 ph2 pt2">
+        <Link
+          href={`?module=${name}&view=table`}
+          className={tableTabCx}
+          children='Table'
+        />
+        <Link
+          href={`?module=${name}&view=css`}
+          className={cssTabCx}
+          children='Css'
+        />
+      </div>
+      <div
+        className="overflow-auto pt2 pt3-m pt3-l"
+        children={view === 'css' ? <Css src={src} /> : <Table tableOfStyles={tableOfStyles} />}
+      />
+    </div>
+  )
+}
--- a/docs/ui/components.json
+++ b/docs/ui/components.json
@ -1,13 +1,5 @@
 {
  "article-lists": [
-    {
-      "name": "title-preview-author-media",
-      "title": "Title Preview Author Media",
-      "section": "article-lists",
-      "src": "article-lists/title-preview-author-media.html",
-      "slug": "/components/article-lists/title-preview-author-media",
-      "importPath": "../../../components/article-lists/title-preview-author-media.html"
-    },
    {
      "name": "title-preview-author-media-flipped",
      "title": "Title Preview Author Media Flipped",
@ -15,6 +7,14 @@
      "src": "article-lists/title-preview-author-media-flipped.html",
      "slug": "/components/article-lists/title-preview-author-media-flipped",
      "importPath": "../../../components/article-lists/title-preview-author-media-flipped.html"
+    },
+    {
+      "name": "title-preview-author-media",
+      "title": "Title Preview Author Media",
+      "section": "article-lists",
+      "src": "article-lists/title-preview-author-media.html",
+      "slug": "/components/article-lists/title-preview-author-media",
+      "importPath": "../../../components/article-lists/title-preview-author-media.html"
    }
  ],
  "articles": [
@ -66,14 +66,6 @@
      "slug": "/components/articles/left-title",
      "importPath": "../../../components/articles/left-title.html"
    },
-    {
-      "name": "single-column-large-title",
-      "title": "Single Column Large Title",
-      "section": "articles",
-      "src": "articles/single-column-large-title.html",
-      "slug": "/components/articles/single-column-large-title",
-      "importPath": "../../../components/articles/single-column-large-title.html"
-    },
    {
      "name": "photo-essay",
      "title": "Photo Essay",
@ -82,6 +74,14 @@
      "slug": "/components/articles/photo-essay",
      "importPath": "../../../components/articles/photo-essay.html"
    },
+    {
+      "name": "single-column-large-title",
+      "title": "Single Column Large Title",
+      "section": "articles",
+      "src": "articles/single-column-large-title.html",
+      "slug": "/components/articles/single-column-large-title",
+      "importPath": "../../../components/articles/single-column-large-title.html"
+    },
    {
      "name": "title-highlight-header-cover",
      "title": "Title Highlight Header Cover",
@ -107,32 +107,6 @@
      "importPath": "../../../components/articles/title-text.html"
    }
  ],
-  "banners": [
-    {
-      "name": "basic",
-      "title": "Basic",
-      "section": "banners",
-      "src": "banners/basic.html",
-      "slug": "/components/banners/basic",
-      "importPath": "../../../components/banners/basic.html"
-    },
-    {
-      "name": "info",
-      "title": "Info",
-      "section": "banners",
-      "src": "banners/info.html",
-      "slug": "/components/banners/info",
-      "importPath": "../../../components/banners/info.html"
-    },
-    {
-      "name": "single-cta",
-      "title": "Single Cta",
-      "section": "banners",
-      "src": "banners/single-cta.html",
-      "slug": "/components/banners/single-cta",
-      "importPath": "../../../components/banners/single-cta.html"
-    }
-  ],
  "avatars": [
    {
      "name": "circle-border",
@ -191,6 +165,32 @@
      "importPath": "../../../components/avatars/square.html"
    }
  ],
+  "banners": [
+    {
+      "name": "basic",
+      "title": "Basic",
+      "section": "banners",
+      "src": "banners/basic.html",
+      "slug": "/components/banners/basic",
+      "importPath": "../../../components/banners/basic.html"
+    },
+    {
+      "name": "info",
+      "title": "Info",
+      "section": "banners",
+      "src": "banners/info.html",
+      "slug": "/components/banners/info",
+      "importPath": "../../../components/banners/info.html"
+    },
+    {
+      "name": "single-cta",
+      "title": "Single Cta",
+      "section": "banners",
+      "src": "banners/single-cta.html",
+      "slug": "/components/banners/single-cta",
+      "importPath": "../../../components/banners/single-cta.html"
+    }
+  ],
  "buttons": [
    {
      "name": "basic-previous-next",
@ -200,14 +200,6 @@
      "slug": "/components/buttons/basic-previous-next",
      "importPath": "../../../components/buttons/basic-previous-next.html"
    },
-    {
-      "name": "basic-rounded-small",
-      "title": "Basic Rounded Small",
-      "section": "buttons",
-      "src": "buttons/basic-rounded-small.html",
-      "slug": "/components/buttons/basic-rounded-small",
-      "importPath": "../../../components/buttons/basic-rounded-small.html"
-    },
    {
      "name": "basic-rounded-extra-small",
      "title": "Basic Rounded Extra Small",
@ -216,6 +208,14 @@
      "slug": "/components/buttons/basic-rounded-extra-small",
      "importPath": "../../../components/buttons/basic-rounded-extra-small.html"
    },
+    {
+      "name": "basic-rounded-small",
+      "title": "Basic Rounded Small",
+      "section": "buttons",
+      "src": "buttons/basic-rounded-small.html",
+      "slug": "/components/buttons/basic-rounded-small",
+      "importPath": "../../../components/buttons/basic-rounded-small.html"
+    },
    {
      "name": "basic-rounded",
      "title": "Basic Rounded",
@ -434,14 +434,6 @@
      "slug": "/components/footers/simple-large-type",
      "importPath": "../../../components/footers/simple-large-type.html"
    },
-    {
-      "name": "social-circles",
-      "title": "Social Circles",
-      "section": "footers",
-      "src": "footers/social-circles.html",
-      "slug": "/components/footers/social-circles",
-      "importPath": "../../../components/footers/social-circles.html"
-    },
    {
      "name": "small-print",
      "title": "Small Print",
@ -450,6 +442,14 @@
      "slug": "/components/footers/small-print",
      "importPath": "../../../components/footers/small-print.html"
    },
+    {
+      "name": "social-circles",
+      "title": "Social Circles",
+      "section": "footers",
+      "src": "footers/social-circles.html",
+      "slug": "/components/footers/social-circles",
+      "importPath": "../../../components/footers/social-circles.html"
+    },
    {
      "name": "social-simple-text",
      "title": "Social Simple Text",
@ -491,32 +491,6 @@
      "importPath": "../../../components/footers/studios.html"
    }
  ],
-  "headers": [
-    {
-      "name": "circle-avatar-title-subtitle",
-      "title": "Circle Avatar Title Subtitle",
-      "section": "headers",
-      "src": "headers/circle-avatar-title-subtitle.html",
-      "slug": "/components/headers/circle-avatar-title-subtitle",
-      "importPath": "../../../components/headers/circle-avatar-title-subtitle.html"
-    },
-    {
-      "name": "rounded-avatar-title-subtitle",
-      "title": "Rounded Avatar Title Subtitle",
-      "section": "headers",
-      "src": "headers/rounded-avatar-title-subtitle.html",
-      "slug": "/components/headers/rounded-avatar-title-subtitle",
-      "importPath": "../../../components/headers/rounded-avatar-title-subtitle.html"
-    },
-    {
-      "name": "startup-hero",
-      "title": "Startup Hero",
-      "section": "headers",
-      "src": "headers/startup-hero.html",
-      "slug": "/components/headers/startup-hero",
-      "importPath": "../../../components/headers/startup-hero.html"
-    }
-  ],
  "forms": [
    {
      "name": "checkbox-list",
@ -550,14 +524,6 @@
      "slug": "/components/forms/password",
      "importPath": "../../../components/forms/password.html"
    },
-    {
-      "name": "sign-up",
-      "title": "Sign Up",
-      "section": "forms",
-      "src": "forms/sign-up.html",
-      "slug": "/components/forms/sign-up",
-      "importPath": "../../../components/forms/sign-up.html"
-    },
    {
      "name": "sign-in",
      "title": "Sign In",
@ -566,6 +532,14 @@
      "slug": "/components/forms/sign-in",
      "importPath": "../../../components/forms/sign-in.html"
    },
+    {
+      "name": "sign-up",
+      "title": "Sign Up",
+      "section": "forms",
+      "src": "forms/sign-up.html",
+      "slug": "/components/forms/sign-up",
+      "importPath": "../../../components/forms/sign-up.html"
+    },
    {
      "name": "textarea-label",
      "title": "Textarea Label",
@ -575,38 +549,30 @@
      "importPath": "../../../components/forms/textarea-label.html"
    }
  ],
-  "links": [
+  "headers": [
    {
-      "name": "animate-background-color",
-      "title": "Animate Background Color",
-      "section": "links",
-      "src": "links/animate-background-color.html",
-      "slug": "/components/links/animate-background-color",
-      "importPath": "../../../components/links/animate-background-color.html"
+      "name": "circle-avatar-title-subtitle",
+      "title": "Circle Avatar Title Subtitle",
+      "section": "headers",
+      "src": "headers/circle-avatar-title-subtitle.html",
+      "slug": "/components/headers/circle-avatar-title-subtitle",
+      "importPath": "../../../components/headers/circle-avatar-title-subtitle.html"
    },
    {
-      "name": "animate-color",
-      "title": "Animate Color",
-      "section": "links",
-      "src": "links/animate-color.html",
-      "slug": "/components/links/animate-color",
-      "importPath": "../../../components/links/animate-color.html"
+      "name": "rounded-avatar-title-subtitle",
+      "title": "Rounded Avatar Title Subtitle",
+      "section": "headers",
+      "src": "headers/rounded-avatar-title-subtitle.html",
+      "slug": "/components/headers/rounded-avatar-title-subtitle",
+      "importPath": "../../../components/headers/rounded-avatar-title-subtitle.html"
    },
    {
-      "name": "dim-no-underline",
-      "title": "Dim No Underline",
-      "section": "links",
-      "src": "links/dim-no-underline.html",
-      "slug": "/components/links/dim-no-underline",
-      "importPath": "../../../components/links/dim-no-underline.html"
-    },
-    {
-      "name": "underline-on-hover",
-      "title": "Underline On Hover",
-      "section": "links",
-      "src": "links/underline-on-hover.html",
-      "slug": "/components/links/underline-on-hover",
-      "importPath": "../../../components/links/underline-on-hover.html"
+      "name": "startup-hero",
+      "title": "Startup Hero",
+      "section": "headers",
+      "src": "headers/startup-hero.html",
+      "slug": "/components/headers/startup-hero",
+      "importPath": "../../../components/headers/startup-hero.html"
    }
  ],
  "layout": [
@ -939,14 +905,38 @@
      "importPath": "../../../components/layout/two-column.html"
    }
  ],
-  "marketing": [
+  "links": [
    {
-      "name": "iphone-app",
-      "title": "Iphone App",
-      "section": "marketing",
-      "src": "marketing/iphone-app.html",
-      "slug": "/components/marketing/iphone-app",
-      "importPath": "../../../components/marketing/iphone-app.html"
+      "name": "animate-background-color",
+      "title": "Animate Background Color",
+      "section": "links",
+      "src": "links/animate-background-color.html",
+      "slug": "/components/links/animate-background-color",
+      "importPath": "../../../components/links/animate-background-color.html"
+    },
+    {
+      "name": "animate-color",
+      "title": "Animate Color",
+      "section": "links",
+      "src": "links/animate-color.html",
+      "slug": "/components/links/animate-color",
+      "importPath": "../../../components/links/animate-color.html"
+    },
+    {
+      "name": "dim-no-underline",
+      "title": "Dim No Underline",
+      "section": "links",
+      "src": "links/dim-no-underline.html",
+      "slug": "/components/links/dim-no-underline",
+      "importPath": "../../../components/links/dim-no-underline.html"
+    },
+    {
+      "name": "underline-on-hover",
+      "title": "Underline On Hover",
+      "section": "links",
+      "src": "links/underline-on-hover.html",
+      "slug": "/components/links/underline-on-hover",
+      "importPath": "../../../components/links/underline-on-hover.html"
    }
  ],
  "lists": [
@ -1079,6 +1069,16 @@
      "importPath": "../../../components/lists/title-text.html"
    }
  ],
+  "marketing": [
+    {
+      "name": "iphone-app",
+      "title": "Iphone App",
+      "section": "marketing",
+      "src": "marketing/iphone-app.html",
+      "slug": "/components/marketing/iphone-app",
+      "importPath": "../../../components/marketing/iphone-app.html"
+    }
+  ],
  "nav": [
    {
      "name": "fixed-semi-transparent",
@ -1180,14 +1180,6 @@
    }
  ],
  "quotes": [
-    {
-      "name": "left-border",
-      "title": "Left Border",
-      "section": "quotes",
-      "src": "quotes/left-border.html",
-      "slug": "/components/quotes/left-border",
-      "importPath": "../../../components/quotes/left-border.html"
-    },
    {
      "name": "pull-quote",
      "title": "Pull Quote",
@ -1195,6 +1187,14 @@
      "src": "quotes/pull-quote.html",
      "slug": "/components/quotes/pull-quote",
      "importPath": "../../../components/quotes/pull-quote.html"
+    },
+    {
+      "name": "left-border",
+      "title": "Left Border",
+      "section": "quotes",
+      "src": "quotes/left-border.html",
+      "slug": "/components/quotes/left-border",
+      "importPath": "../../../components/quotes/left-border.html"
    }
  ],
  "tables": [
@ -1216,14 +1216,6 @@
    }
  ],
  "text": [
-    {
-      "name": "large-paragraph",
-      "title": "Large Paragraph",
-      "section": "text",
-      "src": "text/large-paragraph.html",
-      "slug": "/components/text/large-paragraph",
-      "importPath": "../../../components/text/large-paragraph.html"
-    },
    {
      "name": "narrow-paragraph",
      "title": "Narrow Paragraph",
@ -1232,6 +1224,14 @@
      "slug": "/components/text/narrow-paragraph",
      "importPath": "../../../components/text/narrow-paragraph.html"
    },
+    {
+      "name": "large-paragraph",
+      "title": "Large Paragraph",
+      "section": "text",
+      "src": "text/large-paragraph.html",
+      "slug": "/components/text/large-paragraph",
+      "importPath": "../../../components/text/large-paragraph.html"
+    },
    {
      "name": "paragraph",
      "title": "Paragraph",
@ -1273,4 +1273,4 @@
      "importPath": "../../../components/text/wide-paragraph.html"
    }
  ]
-}
+}
--- a/docs/ui/data.json
+++ b/docs/ui/data.json
--- a/docs/ui/nav.js
+++ b/docs/ui/nav.js
@ -301,9 +301,9 @@ export const header = [
    href: '/components/'
  },
  {
-    title: 'Gallery of sites built with Tachyons',
-    label: 'Gallery',
-    href: '/gallery'
+    title: 'Reference',
+    label: 'Reference',
+    href: '/reference'
  },
  {
    title: 'Tachyons on GitHub',
@ -326,6 +326,11 @@ export const footer = [
    label: 'Components',
    href: '/components/'
  },
+  {
+    title: 'Reference',
+    label: 'Reference',
+    href: '/reference'
+  },
  {
    title: 'Blog',
    href: '/blog'
--- a/docs/ui/withComponentLayout.js
+++ b/docs/ui/withComponentLayout.js
@ -3,16 +3,16 @@ import Highlight from 'react-highlight'
 import Layout from './Layout'
 import { Flex } from './'

-export default ({ html, css, meta: { stats } }) => () =>
+export default ({ html, css, meta: { stats } }) => () => (
  <Layout>
    <div class="pa3 pa4-m pa5-l bb bt b--black-05">
      <div dangerouslySetInnerHTML={{ __html: html }} />
    </div>
    <Flex wrap={true}>
-      <div className='w-100 w-50-m w-50-l br b--black-05 f6 pa3'>
+      <div className="w-100 w-50-m w-50-l br b--black-05 f6 pa3">
        <Highlight>{css}</Highlight>
      </div>
-      <div className='w-100 w-50-m w-50-l br b--black-05 f6'>
+      <div className="w-100 w-50-m w-50-l br b--black-05 f6">
        <div class="bb b--black-05 pa3">
          <dl className="dib mr4 mt0">
            <dt className="f6 db">Declarations </dt>
@ -22,7 +22,9 @@ export default ({ html, css, meta: { stats } }) => () =>
          </dl>
          <dl className="dib mr4">
            <dt className="f6 db pr2">Selectors </dt>
-            <dd className="db pl0 ml0 f4 f2-m f2-l b">{stats.selectors.total}</dd>
+            <dd className="db pl0 ml0 f4 f2-m f2-l b">
+              {stats.selectors.total}
+            </dd>
          </dl>
          <dl className="dib mr4">
            <dt className="f6 db pr2">Max. Specificity Score </dt>
@ -41,3 +43,4 @@ export default ({ html, css, meta: { stats } }) => () =>
      </div>
    </Flex>
  </Layout>
+)
--- a/packages/components-loader/package-lock.json
+++ b/packages/components-loader/package-lock.json
@ -1,6 +1,6 @@
 {
-  "name": "tachyons-components-loader",
-  "version": "0.0.1",
+  "name": "tachyons-component-loader",
+  "version": "0.0.2",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@ -5658,6 +5658,14 @@
        }
      }
    },
+    "postcss-custom-media": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-6.0.0.tgz",
+      "integrity": "sha1-vlMnhBEOyylQRPtTlaGABushpzc=",
+      "requires": {
+        "postcss": "6.0.20"
+      }
+    },
    "postcss-discard-comments": {
      "version": "2.0.4",
      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz",
--- a/packages/components-loader/package.json
+++ b/packages/components-loader/package.json
@ -1,6 +1,6 @@
 {
  "name": "tachyons-component-loader",
-  "version": "0.0.1",
+  "version": "0.0.2",
  "description": "Webpack loader for components in Tachyons docs",
  "main": "index.js",
  "scripts": {
@ -27,6 +27,7 @@
    "get-classes-from-html": "^1.0.1",
    "perfectionist": "^2.4.0",
    "postcss": "^6.0.20",
+    "postcss-custom-media": "^6.0.0",
    "postcss-discard-comments": "^2.0.4",
    "postcss-discard-empty": "^2.1.0",
    "postcss-import": "^11.1.0",