feat(site): add docusaurus site files (#788)

.travis.yml

@@ -1,5 +1,11 @@
 language: node_js
 node_js:
   - 12
-  - 10
-  - 8
+branches:
+  only:
+    - master
+script:
+  - git config --global user.name "${GH_NAME}"
+  - git config --global user.email "${GH_EMAIL}"
+  - echo "machine github.com login ${GH_NAME} password ${GH_TOKEN}" > ~/.netrc
+  - cd site && npm install && GIT_USER="${GH_NAME}" npm run deploy

Gruntfile.js

@@ -109,7 +109,7 @@ grunt.initConfig({
     postcss: {
         options: {
             processors: [
-                require('autoprefixer')({browsers: ['last 2 versions', 'ie >= 8', 'iOS >= 6', 'Android >= 4']})
+                require('autoprefixer')()
             ]
         },
         dist: {

package.json

@@ -6,9 +6,9 @@
     "url": "git://github.com/pure-css/pure.git"
   },
   "scripts": {
+    "prepare": "grunt release",
     "pretest": "grunt build",
-    "test": "grunt test && tap test/*.js",
-    "prepublish": "grunt release"
+    "test": "grunt test && tap test/*.js"
   },
   "files": "build/",
   "devDependencies": {
@@ -49,5 +49,13 @@
     "msweeney <matt.sweeney@yahoo.com>",
     "jamesalley <manalagi001@yahoo.com>"
   ],
-  "license": "BSD"
+  "license": "BSD",
+  "browserslist": {
+    "production": [
+      "last 2 versions",
+      "ie >= 8",
+      "iOS >= 6",
+      "Android >= 4"
+    ]
+  }
 }

site/.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

site/README.md

@@ -0,0 +1,33 @@
+# Pure Documentation
+
+This website is built using [Docusaurus 2](https://v2.docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ npm install
+```
+
+### Local Development
+
+```
+$ npm run start
+```
+
+This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ npm run build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+```
+$ GIT_USER=<Your GitHub username> USE_SSH=true npm run deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

site/components/CodeBlock.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import classnames from 'classnames';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+
+function CodeBlock({ children, language = 'html', full = false, wrap = false }) {
+    var fullClass = classnames({ 'is-code-full': full });
+    var codeClass = classnames({ code: true, 'code-wrap': wrap });
+    return (
+        <div className={fullClass}>
+            <div className={codeClass}>
+                <SyntaxHighlighter language={language} style={docco} wrapLines={full}>{children}</SyntaxHighlighter>
+            </div>
+        </div>
+    );
+}
+
+export default CodeBlock;

site/components/Example.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOMServer from 'react-dom/server';
+import CodeBlock from './CodeBlock';
+import { html } from 'js-beautify';
+
+function Example({ children }) {
+    const opts = { inline: 'b' };
+    const markup = html(ReactDOMServer.renderToStaticMarkup(children), opts);
+    return (
+        <div className="example">
+            <div dangerouslySetInnerHTML={{ __html: markup }} />
+            <CodeBlock>{markup}</CodeBlock>
+        </div>
+    );
+}
+
+export default Example;

site/components/Footer.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+
+function Footer({ siteConfig }) {
+    const { customFields, organizationName, projectName } = siteConfig;
+    return (
+        <div className="footer">
+            <div className="legal pure-g">
+                <div className="pure-u-1 u-sm-1-2">
+                    <p className="legal-license">
+                        This site is built with ❤️ using Pure v{customFields.pureVersion}<br />
+                        All code on this site is licensed under the <a href={`https://github.com/${organizationName}/${projectName}/blob/master/LICENSE`}>Yahoo BSD License</a> unless otherwise stated.
+                    </p>
+                </div>
+                <div className="pure-u-1 u-sm-1-2">
+                    <ul className="legal-links">
+                        <li><a href={`https://github.com/${organizationName}/${projectName}/`}>GitHub Project</a></li>
+                        <li><a href="https://hackerone.com/yahoo/">Security Contact Info</a></li>
+                    </ul>
+                    <p className="legal-copyright">
+                        &copy; 2014 - Present Yahoo! Inc. All rights reserved.
+                    </p>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default Footer;

site/components/Header.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+function Header({ description, title }) {
+    return (
+        <div className="header">
+            <h1>{title}</h1>
+            <h2>{description}</h2>
+        </div>
+    );
+}
+
+export default Header;

site/components/Menu.js

@@ -0,0 +1,62 @@
+import Link from '@docusaurus/Link';
+import React from 'react';
+
+function Menu(props) {
+    return (
+        <>
+            <a href="#menu" id="menuLink" className="menu-link">
+                <span></span>
+            </a>
+            
+            <div id="menu">
+                <div className="pure-menu">
+                    <Link className="pure-menu-heading" to="/">Pure</Link>
+
+                    <ul className="pure-menu-list">
+                        <li className="pure-menu-item">
+                            <Link to="/start/" className="pure-menu-link">Get Started</Link>
+                        </li>
+                        <li className="pure-menu-item">
+                            <Link to="/layouts/" className="pure-menu-link">Layouts</Link>
+                        </li>
+                        <li className="pure-menu-item menu-item-divided">
+                            <Link to="/base/" className="pure-menu-link">Base</Link>
+                        </li>
+                        <li className="pure-menu-item">
+                            <Link to="/grids/" className="pure-menu-link">Grids</Link>
+                        </li>
+                        <li className="pure-menu-item">
+                            <Link to="/forms/" className="pure-menu-link">Forms</Link>
+                        </li>
+                        <li className="pure-menu-item">
+                            <Link to="/buttons/" className="pure-menu-link">Buttons</Link>
+                        </li>
+                        <li className="pure-menu-item">
+                            <Link to="/tables/" className="pure-menu-link">Tables</Link>
+                        </li>
+                        <li className="pure-menu-item">
+                            <Link to="/menus/" className="pure-menu-link">Menus</Link>
+                        </li>
+                        <li className="pure-menu-item menu-item-divided">
+                            <Link to="/tools/" className="pure-menu-link">Tools</Link>
+                        </li>
+                        <li className="pure-menu-item">
+                            <Link to="/customize/" className="pure-menu-link">Customize</Link>
+                        </li>
+                        <li className="pure-menu-item">
+                            <Link to="/extend/" className="pure-menu-link">Extend</Link>
+                        </li>
+                        <li className="pure-menu-item">
+                            <a href="http://blog.purecss.io/" className="pure-menu-link">Blog</a>
+                        </li>
+                        <li className="pure-menu-item">
+                            <a href="https://github.com/pure-css/pure/releases/" className="pure-menu-link">Releases</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </>
+    );
+}
+
+export default Menu;

site/components/SectionHeader.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+    function SectionHeader({ heading, TagName = 'h2' }) {
+    // Remove HTML entities, and all chars except whitespace, word chars, and from the `heading`.
+    const id = heading.toLowerCase()
+            .replace(/&[^\s;]+;?/g, '')
+            .replace(/[^\s\w\-]+/g, '')
+            .replace(/\s+/g, '-');
+
+    return (
+        <TagName id={id} className="content-subhead">
+            {heading}
+            <a href={`#${id}`} className="content-link" title="Heading anchor"></a>
+        </TagName>
+    );
+}
+
+export default SectionHeader;

site/docusaurus.config.js

@@ -0,0 +1,27 @@
+const { moduleSizes, PURE_DOWNLOAD_SNIPPET } = require('./lib/pure');
+const { version } = require('../package.json');
+
+module.exports = {
+  title: 'Pure',
+  tagline: 'Pure is a ridiculously tiny CSS library you can use to start any web project.',
+  url: 'https://pure-css.github.io',
+  baseUrl: '/',
+  favicon: 'img/favicon.ico',
+  organizationName: 'pure-css',
+  projectName: 'pure-css.github.io',
+  plugins: [
+    '@docusaurus/plugin-content-pages',
+    '@docusaurus/plugin-google-analytics',
+  ],
+  themeConfig: {
+    googleAnalytics: {
+      trackingID: 'UA-41480445-1',
+      anonymizeIP: true,
+    },
+  },
+  customFields: {
+    PURE_DOWNLOAD_SNIPPET,
+    moduleSizes: moduleSizes(),
+    pureVersion: version,
+  },
+};

site/lib/pure.js

@@ -0,0 +1,36 @@
+const crypto = require('crypto');
+const fs = require('fs');
+const gzip = require('gzip-size');
+const path = require('path');
+const { version } = require('../../package.json');
+
+const pureDir = path.resolve(__dirname, '..', '..', 'build');
+const pureMin = fs.readFileSync(path.resolve(__dirname, '..', '..', 'build', 'pure-min.css'), 'utf-8');
+
+// use pure-min.css to determine site integrity hash
+const sriHash = crypto.createHash('sha384').update(pureMin, 'utf8').digest('base64');
+
+// copy/pastable code snippet for users
+module.exports.PURE_DOWNLOAD_SNIPPET = `<link rel="stylesheet" href="https://unpkg.com/purecss@${version}/build/pure-min.css" integrity="sha384-${sriHash}" crossorigin="anonymous">`;
+
+// calculate each pure module size
+module.exports.moduleSizes = function moduleSizes() {
+    const files = fs.readdirSync(pureDir);
+
+    // collect all minified module files
+    const modules = files.filter(file => (/\-min\.css$/).test(file))
+                         .map(file => file.replace(/\-min\.css$/, ''));
+
+    // get sizes across all modules
+    const moduleSizes = modules.map(module => {
+        const filePath = path.join(pureDir, module + '-min.css');
+        const contents = fs.readFileSync(filePath, { encoding: 'utf-8' });
+        return gzip.sync(contents);
+    });
+
+    // return final list of sizes
+    return moduleSizes.reduce((map, size, i) => {
+        map[modules[i]] = size;
+        return map;
+    }, {});
+}

site/lib/utils.js

@@ -0,0 +1,26 @@
+/**
+ * Calculates filesize for a given module
+ */
+export function fileSize({ module, decimals = 1, filesizes }) {
+    const filesize = (filesizes[module] / 1024);
+    return filesize.toFixed(decimals) + 'KB';
+}
+
+/**
+ * Calculates the module percentage size against all modules
+ */
+export function filePercent({ modules, module, filesizes }) {
+    const total = modules.reduce((size, m) => {
+        return size + filesizes[m];
+    }, 0);
+    return (filesizes[module] / total * 100).toFixed(4) + '%';
+}
+
+/**
+ * Generic click handler for pages
+ */
+export function handleClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    e.nativeEvent.stopImmediatePropagation();
+}

site/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "pure",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "docusaurus start",
+    "build": "docusaurus build",
+    "swizzle": "docusaurus swizzle",
+    "deploy": "docusaurus deploy"
+  },
+  "dependencies": {
+    "@docusaurus/core": "^2.0.0-alpha.53",
+    "@docusaurus/plugin-content-pages": "^2.0.0-alpha.53",
+    "@docusaurus/plugin-google-analytics": "^2.0.0-alpha.53",
+    "classnames": "^2.2.6",
+    "gzip-size": "^5.1.1",
+    "js-beautify": "^1.11.0",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4",
+    "react-syntax-highlighter": "^12.2.1"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

site/src/index.js

@@ -0,0 +1,15 @@
+const path = require('path');
+module.exports = function(context, options) {
+  return {
+    name: 'pure-theme',
+
+    getThemePath() {
+      return path.resolve(__dirname, './theme');
+    },
+
+    getClientModules() {
+      return [];
+    },
+
+  };
+};

site/src/pages/base/index.js

@@ -0,0 +1,82 @@
+import Link from '@docusaurus/Link';
+import classnames from 'classnames';
+import React from 'react';
+import Layout from '../../theme/Layout';
+import Header from '../../../components/Header';
+import CodeBlock from '../../../components/CodeBlock';
+import SectionHeader from '../../../components/SectionHeader';
+
+const title = 'Base';
+const description = 'Leveraging Normalize.css, an HTML5-ready alternative to CSS resets.';
+
+function Base() {
+  return (
+    <Layout description={description} title={title}>
+        <Header description={description} title={title} />
+
+        <div className="content">
+            <SectionHeader heading="The Foundation" />
+
+            <p>
+                All modules in Pure build on top of <a href="https://necolas.github.io/normalize.css/">Normalize.css</a>. It's our foundational layer to maintain some degree of cross-browser consistency. You can pull in Normalize.css by adding this <code>&lt;link&gt;</code> element on your page:
+            </p>
+
+            <CodeBlock wrap={true}>
+                {`<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/base-min.css">`}
+            </CodeBlock>
+
+            <h3>A bit about Normalize.css</h3>
+
+            <p>
+                <a href="https://necolas.github.io/normalize.css/">Normalize.css</a> is an open-source project by <a href="http://twitter.com/necolas">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal">Jonathan Neal</a>. <a href="http://nicolasgallagher.com/about-normalize-css/">In their own words</a>:
+            </p>
+
+            <blockquote className="content-quote">
+                Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready, alternative to the traditional CSS reset."
+            </blockquote>
+
+            <p>
+                Normalize.css comes with <a href="https://github.com/necolas/normalize.css/wiki">great documentation</a> and a <a href="http://nicolasgallagher.com/about-normalize-css/">thorough guide</a> explaining how it differs from a traditional reset.
+            </p>
+
+            <SectionHeader heading="Extras" />
+
+            <p>
+                In addition to Normalize.css rules, Pure's Base module contains some common styles that are used by most websites.
+            </p>
+
+            <h3>Hiding Elements</h3>
+
+            <p>
+                Add the <code>hidden</code> attribute to an HTML element to hide it from the screen via <code>display: none !important;</code>. Alternatively, for compatibility with old IE, you may use the CSS classname <code>.hidden</code>.
+            </p>
+
+            <CodeBlock wrap={true}>
+                {`<input type="text" name="_csrf" hidden>`}
+            </CodeBlock>
+
+            <h3>Responsive Images</h3>
+
+            <p>
+                Add the <code>.pure-img</code> class name to an <code>&lt;img&gt;</code> element to make it scale with the viewport. This is handy when building responsive websites.
+            </p>
+
+            <CodeBlock wrap={true}>
+                {`<img class="pure-img" src="...">`}
+            </CodeBlock>
+
+            <SectionHeader heading="Moving beyong Normalize" />
+
+            <p>
+                Normalize.css is a great starting place for your project, but some HTML elements such as forms, tables, and menus require more styling than what's provided by Normalize.
+            </p>
+
+            <p>
+                We made a more opinionated look and feel for these elements, while keeping them minimal enough so that you can customize them for your site or app's needs. Check out our CSS for <Link to="/forms">Forms</Link>, <Link to="/tables">Tables</Link>, and <Link to="/menus">Menus</Link>.
+            </p>
+        </div>
+    </Layout>
+  );
+}
+
+export default Base;

site/src/pages/buttons/index.js

@@ -0,0 +1,176 @@
+import Link from '@docusaurus/Link';
+import React from 'react';
+import Layout from '../../theme/Layout';
+import Header from '../../../components/Header';
+import Example from '../../../components/Example';
+import SectionHeader from '../../../components/SectionHeader';
+import { handleClick } from '../../../lib/utils';
+
+const title = 'Buttons';
+const description = 'Simple CSS for buttons.';
+
+function Buttons() {
+  return (
+    <Layout description={description} title={title}>
+        <Header description={description} title={title} />
+
+        <div className="content" onClick={handleClick}>
+            <SectionHeader heading="Default Buttons" />
+
+            <p>
+              To create a Pure Button, add the <code>pure-button</code> classname to any <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> element.
+            </p>
+
+            <Example>
+                <a className="pure-button" href="#">A Pure Button</a>
+                <button className="pure-button">A Pure Button</button>
+            </Example>
+
+            <SectionHeader heading="Disabled Buttons" />
+
+            <p>
+              To mark a button as disabled, add the <code>pure-button-disabled</code> classname alongside <code>pure-button</code>.
+              Alternatively, add the "disabled" attribute directly to your button.
+            </p>
+
+            <Example>
+                <button className="pure-button pure-button-disabled">A Disabled Button</button>
+                <button className="pure-button" disabled>A Disabled Button</button>
+            </Example>
+
+            <SectionHeader heading="Active Buttons" />
+
+            <p>
+              To style a button so that it appears "pressed", add the <code>pure-button-active</code> classname alongside <code>pure-button</code>.
+            </p>
+
+            <Example>
+                <a className="pure-button pure-button-active" href="#">An Active Button</a>
+                <button className="pure-button pure-button-active">An Active Button</button>
+            </Example>
+
+            <SectionHeader heading="Primary Buttons" />
+
+            <p>
+              To indicate that a button represents a primary action, add the <code>pure-button-primary</code> classname alongside <code>pure-button</code>.
+            </p>
+
+            <Example>
+                <a className="pure-button pure-button-primary" href="#">A Primary Button</a>
+                <button className="pure-button pure-button-primary">A Primary Button</button>
+            </Example>
+
+            <SectionHeader heading="Customizing Buttons" />
+
+            <p>
+              Thanks to Pure's minimal styling, it is easy to build off of the generic Pure button and create customized buttons for your own application.
+            </p>
+
+            <p>
+              To customize button styles, you should group your custom CSS into a class such as <code>button-foo</code>, which you can then add to an element that already has the <code>pure-button</code> classname. Here are some examples.
+            </p>
+
+            <h3 className="content-subhead">Colored buttons with rounded corners</h3>
+
+            <Example>
+                <div>
+                    <style scoped dangerouslySetInnerHTML={{ __html: `
+                     .button-success,
+                     .button-error,
+                     .button-warning,
+                     .button-secondary {
+                         color: white;
+                         border-radius: 4px;
+                         text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+                     }
+                     .button-success {
+                         background: rgb(28, 184, 65); /* this is a green */
+                     }
+                     .button-error {
+                         background: rgb(202, 60, 60); /* this is a maroon */
+                     }
+                     .button-warning {
+                         background: rgb(223, 117, 20); /* this is an orange */
+                     }
+                     .button-secondary {
+                         background: rgb(66, 184, 221); /* this is a light blue */
+                     }
+                    `}} />
+                    <button className="button-success pure-button">Success Button</button>
+                    <button className="button-error pure-button">Error Button</button>
+                    <button className="button-warning pure-button">Warning Button</button>
+                    <button className="button-secondary pure-button">Secondary Button</button>
+                </div>
+            </Example>
+
+            <h3 className="content-subhead">Buttons with different sizes</h3>
+
+            <Example>
+                <div>
+                  <style scoped dangerouslySetInnerHTML={{ __html: `
+                     .button-xsmall {
+                         font-size: 70%;
+                     }
+                     .button-small {
+                         font-size: 85%;
+                     }
+                     .button-large {
+                         font-size: 110%;
+                     }
+                     .button-xlarge {
+                         font-size: 125%;
+                     }
+                  `}} />
+                  <button className="button-xsmall pure-button">Extra Small Button</button>
+                  <button className="button-small pure-button">Small Button</button>
+                  <button className="pure-button">Regular Button</button>
+                  <button className="button-large pure-button">Large Button</button>
+                  <button className="button-xlarge pure-button">Extra Large Button</button>
+                </div>
+            </Example>
+
+            <h3 className="content-subhead">Buttons with icons</h3>
+
+            <p>
+              Pure doesn't ship with icon fonts, but we play nice with existing ones. Incorporating icon fonts with Pure Buttons is easy. In the example below, we're using icon fonts from <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a>. Put the <a href="http://fortawesome.github.io/Font-Awesome/get-started/">Font Awesome CSS file</a> on your page and use an <code>&lt;i&gt;</code> element within a <code>pure-button</code> element.
+            </p>
+
+            <Example>
+                <button className="pure-button">
+                    <i className="fa fa-cog"></i>
+                    Settings
+                </button>
+                <a className="pure-button" href="#">
+                    <i className="fa fa-shopping-cart fa-lg"></i>
+                    Checkout
+                </a>
+            </Example>
+
+            <SectionHeader heading="Button Groups" />
+
+            <p>
+              Group multiple buttons together on a single line.
+            </p>
+
+            <aside>
+              <p>
+                 For assistive technologies (i.e, screen readers) a <code>role</code> attribute should be provided to ensure that proper meaning is conveyed. Button groups should have a <code>role&#x3D;&quot;group&quot;</code>, while toolbars should have <code>role&#x3D;&quot;toolbar&quot;</code>.
+              </p>
+              <p>
+                 Additionally, a clear label should be provided since most assistive technologies will not announce them. The code snippet below provides an example.
+              </p>
+            </aside>
+
+            <Example>
+                <div className="pure-button-group" role="group" aria-label="...">
+                  <button className="pure-button">A Pure Button</button>
+                  <button className="pure-button">A Pure Button</button>
+                  <button className="pure-button pure-button-active">A Pure Button</button>
+                </div>
+            </Example>
+        </div>
+    </Layout>
+  );
+}
+
+export default Buttons;

site/src/pages/customize/index.js

@@ -0,0 +1,209 @@
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import React from 'react';
+import Layout from '../../theme/Layout';
+import Header from '../../../components/Header';
+import CodeBlock from '../../../components/CodeBlock';
+import SectionHeader from '../../../components/SectionHeader';
+import { filePercent, fileSize } from '../../../lib/utils';
+
+const title = 'Customize';
+const description = 'Choose the modules that you need.';
+
+function Customize() {
+    const context = useDocusaurusContext();
+    const {siteConfig = {}} = context;
+    const {
+        customFields: {
+            moduleSizes: filesizes,
+            pureVersion,
+        },
+    } = siteConfig;
+    return (
+        <Layout description={description} title={title}>
+            <Header description={description} title={title} />
+
+            <div className="content">
+                <SectionHeader heading="Rollups" />
+
+                <p>
+                    Rollups consist of all the modules in Pure. There are two rollups available - a regular (responsive) one, and a non-responsive one. Choose that one that's right for your project.
+                </p>
+
+                <div className="table-responsive">
+                    <table className="pure-table pure-table-bordered">
+                        <thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>URL</th>
+                                <th>Size (gzip)</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>Responsive Rollup</td>
+                                <td>https://unpkg.com/purecss@{pureVersion}/build/pure-min.css</td>
+                                <td>{fileSize({ module: 'pure', filesizes })}</td>
+                            </tr>
+                            <tr>
+                                <td>Non-Responsive Rollup</td>
+                                <td>https://unpkg.com/purecss@{pureVersion}/build/pure-nr-min.css</td>
+                                <td>{fileSize({ module: 'pure-nr', filesizes })}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <aside>
+                    <p>
+                        The non-responsive rollup does not include media queries, thus making it easier for you to override styles in the base library. Additionally, you can also create a <Link to="/grids/#pure-responsive-grids">custom grid</Link> that better suits your projects needs.
+                    </p>
+                </aside>
+
+                <h3>Alternate CDNs</h3>
+
+                <p>
+                    The main host for Pure is the unpkg CDN where Pure is available over HTTPS. The following table lists alternate CDNs where Pure is hosted.
+                </p>
+
+                <div className="table-responsive">
+                    <table className="pure-table pure-table-bordered">
+                        <thead>
+                            <tr>
+                                <th>CDN</th>
+                                <th>URL</th>
+                                <th>HTTPS</th>
+                                <th>Combo</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td><a href="http://cdnjs.com/">cdnjs</a></td>
+                                <td>//cdnjs.cloudflare.com/ajax/libs/pure/{pureVersion}/pure-min.css</td>
+                                <td>Yes</td>
+                                <td>No</td>
+                            </tr>
+                            <tr>
+                                <td><a href="http://www.jsdelivr.com/">jsDelivr</a></td>
+                                <td>//cdn.jsdelivr.net/npm/purecss@{pureVersion}/build/pure-min.css</td>
+                                <td>Yes</td>
+                                <td>Yes</td>
+                            </tr>
+                            <tr>
+                                <td><a href="https://www.keycdn.com/">KeyCDN</a></td>
+                                <td>//opensource.keycdn.com/pure/{pureVersion}/pure-min.css</td>
+                                <td>Yes</td>
+                                <td>No</td>
+                            </tr>
+                            <tr>
+                                <td><a href="http://www.osscdn.com/">OSS MaxCDN</a></td>
+                                <td>//oss.maxcdn.com/libs/pure/{pureVersion}/pure-min.css</td>
+                                <td>Yes</td>
+                                <td>No</td>
+                            </tr>
+                            <tr>
+                                <td><a href="http://rawgit.com/">RawGit</a></td>
+                                <td>//cdn.rawgit.com/pure-css/pure-release/v{pureVersion}/pure-min.css</td>
+                                <td>Yes</td>
+                                <td>No</td>
+                            </tr>
+                            <tr>
+                                <td><a href="http://www.staticfile.org/">Staticfile</a></td>
+                                <td>//cdn.staticfile.org/pure/{pureVersion}/pure-min.css</td>
+                                <td>Yes</td>
+                                <td>No</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <p>
+                    <b>Note:</b> If the latest version of Pure is not yet on one of the alternate CDNs, please contact them to update to the latest version of Pure: <b>{pureVersion}.</b>
+                </p>
+
+                <SectionHeader heading="Individual Modules" />
+
+                <p>
+                    You can also pull in the following modules individually.
+                </p>
+
+                <div className="table-responsive">
+                    <table className="pure-table pure-table-bordered">
+                        <thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>URL</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>Base</td>
+                                <td>https://unpkg.com/purecss@{pureVersion}/build/base-min.css</td>
+                            </tr>
+                            <tr>
+                                <td>Buttons</td>
+                                <td>https://unpkg.com/purecss@{pureVersion}/build/buttons-min.css</td>
+                            </tr>
+                            <tr>
+                                <td>Forms (Responsive)</td>
+                                <td>https://unpkg.com/purecss@{pureVersion}/build/forms-min.css</td>
+                            </tr>
+                            <tr>
+                                <td>Forms (Non-Responsive)</td>
+                                <td>https://unpkg.com/purecss@{pureVersion}/build/forms-nr-min.css</td>
+                            </tr>
+                            <tr>
+                                <td>Grids (Base)</td>
+                                <td>https://unpkg.com/purecss@{pureVersion}/build/grids-min.css</td>
+                            </tr>
+                            <tr>
+                                <td>Grids (Responsive)</td>
+                                <td>https://unpkg.com/purecss@{pureVersion}/build/grids-responsive-min.css</td>
+                            </tr>
+                            <tr>
+                                <td>Menus (Responsive)</td>
+                                <td>https://unpkg.com/purecss@{pureVersion}/build/menus-min.css</td>
+                            </tr>
+                            <tr>
+                                <td>Tables</td>
+                                <td>https://unpkg.com/purecss@{pureVersion}/build/tables-min.css</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <SectionHeader heading="Combo Handling" />
+
+                <p>
+                    jsDelivr is a CDN that supports combo handling. Here's an example of a combo URL that includes the same CSS <a href="/base/">Base</a>, <a href="/grids/">Grids</a>, and <a href="/forms/">Forms</a> as above.
+                </p>
+
+                <CodeBlock>
+                    {`<link rel="stylesheet" href="//cdn.jsdelivr.net/combine/npm/purecss@${pureVersion}/build/base-min.css,npm/purecss@${pureVersion}/build/grids-min.css,npm/purecss@${pureVersion}/build/forms-min.css" />`}
+                </CodeBlock>
+
+                <p>
+                    See the <a href="https://github.com/jsdelivr/jsdelivr#combine-multiple-files">jsDelivr combo handler documentation</a> to learn more about its features.
+                </p>
+
+                <SectionHeader heading="Using Pure with Google AMP" />
+
+                <p>
+                    Google's <a href="https://www.ampproject.org/">Accelerated Mobile Pages</a> (AMP) allow web pages to get pre-rendered on Google at the cost of restrictions on JS and <a href="https://www.ampproject.org/docs/guides/responsive/style_pages#disallowed-styles">CSS</a>, such as completely inlining all styles rather than using stylesheets in external files such as those hosted at the CDNs mentioned above.
+                </p>
+
+                <p>
+                    Furthermore, AMP disallows some CSS functionality. In Pure, the only bit currently used disallowed by AMP is '!important', currently used in the definition of the '.hidden' helper class. Removing this modifier should suffice to render Pure usable with AMP.
+                </p>
+
+                <SectionHeader heading="Contribute on GitHub" />
+
+                <p>
+                    Pure is an open-source project under the BSD License. We welcome issues, pull requests, and feedback. Check out our <a href="https://github.com/pure-css/pure">repo on GitHub</a>.
+                </p>
+            </div>
+        </Layout>
+    );
+}
+
+export default Customize;

site/src/pages/extend/index.js

@@ -0,0 +1,180 @@
+import Link from '@docusaurus/Link';
+import React from 'react';
+import Layout from '../../theme/Layout';
+import Header from '../../../components/Header';
+import CodeBlock from '../../../components/CodeBlock';
+import SectionHeader from '../../../components/SectionHeader';
+
+const title = 'Extend';
+const description = 'Build on top of Pure.';
+
+function Extend() {
+    return (
+        <Layout description={description} title={title}>
+            <Header description={description} title={title} />
+
+            <div className="content">
+                <p>
+                    One of our goals when developing Pure was to make it extremely extensible. By including Pure and writing some CSS on top of it, you can ensure that your site or app works across browsers, while looking truly unique. Best of all, your CSS file size will remain tiny, which is a great thing for mobile users and others with slow connections.
+                </p>
+
+                <aside>
+                    <p>
+                        Want a quick start? Take a look at some <Link href="/layouts/">layouts</Link> that we've built on top of Pure.
+                    </p>
+                </aside>
+
+                <SectionHeader heading="Style Guide" />
+
+                <h3>Based on SMACSS</h3>
+
+                <p>
+                    Pure is broken up into a set of responsive modules. From the beginning, we adopted <a href="http://smacss.com/">SMACSS</a> as a convention for writing our CSS. For those who are new to SMACSS, you should give it a quick read, especially the section on <a href="http://smacss.com/book/type-module">module rules</a>.
+                </p>
+
+                <h3>Class Name Conventions</h3>
+
+                <p>
+                    One of the conventions in Pure is for every module to have a standard class name for common rules across a module, and then have additional class names for specific presentational rules for a specific sub-module. All classes start with a <code>pure-</code> prefix to prevent collisions. In addition, we try not to have presentational class names. Instead of calling something <code>pure-form-horizontal</code>, we prefer to call it <code>pure-form-aligned</code>. This prevents a tight coupling between class names and styles, which is good for maintainability.
+                </p>
+
+                <p>
+                    For example, let's consider the HTML and CSS for a <Link href="/forms/">Stacked Form</Link>:
+                </p>
+
+                <h4>Stacked Form: HTML</h4>
+
+                <p>
+                    A stacked form is created by adding two class names, <code>pure-form</code> and <code>pure-form-stacked</code>.
+                </p>
+
+                <CodeBlock>
+                    {`<form class="pure-form pure-form-stacked"></form>`}
+                </CodeBlock>
+
+                <h4>Stacked Form: CSS</h4>
+
+                <p>
+                    The two class names serve different purposes. One is used as a general selector to group common rules for all forms, while the other defines specific rules for a stacked form.
+                </p>
+
+                <CodeBlock>
+{`/*
+    Standard rules that all Pure Forms have. This includes rules for
+    styling .pure-form &lt;inputs&gt;, &lt;fieldsets&gt;, and &lt;legends&gt;, as well as layout
+    rules such as vertical alignments.
+*/
+.pure-form { ... }
+
+/*
+    Specific rules that apply to stacked forms. This includes rules
+    such as taking child &lt;input&gt; elements and making them display: block
+    for the stacked effect.
+*/
+.pure-form-stacked  { ... }`}
+                </CodeBlock>
+
+                <SectionHeader heading="Extending Pure" />
+
+                <p>
+                    When you're extending Pure, we recommend that you follow this convention. For instance, if you wanted to create a new type of form, your HTML and CSS should look something like this:
+                </p>
+
+                <CodeBlock>
+                    {`<form class="form-custom pure-form"></form>`}
+                </CodeBlock>
+
+                <CodeBlock className="test">
+{`/* add your custom styles in this selector */
+.form-custom { ... }`}
+                </CodeBlock>
+
+                <p>
+                    One common task that you may wish to do is to style buttons so they look different. The <a href="/buttons/">Pure Button Documentation</a> has some examples on how you can create buttons with custom sizes and styles by adopting this modular architecture.
+                </p>
+
+                <SectionHeader heading="Pure + Bootstrap + JavaScript" />
+
+                <p>
+                    Pure plays well with other libraries, including Bootstrap and jQuery. As a developer, you can pull in Pure as a foundational CSS framework, and then include specific Bootstrap or jQuery modules that your application may require. There are several benefits to doing this:
+                </p>
+
+                <ul>
+                    <li>
+                        <p>
+                            Your website or webapp's CSS will be a lot smaller &mdash; up to <em>5X smaller</em> in some cases!
+                        </p>
+                    </li>
+                    <li>
+                        <p>
+                            You get Pure's minimalist look that's easy to build on top of. No need to overwrite styles!
+                        </p>
+                    </li>
+                    <li>
+                        <p>
+                            You can take advantage of Bootstrap's ecosystem without pulling in a monolithic Bootstrap CSS file.
+                        </p>
+                    </li>
+                </ul>
+
+                <p>
+                    For example, here's a Bootstrap Modal. It's created by including the Pure CSS Rollup, and just adding Bootstrap's <a href="/css/bootstrap/modal.css"><code>modal.css</code></a> along with the jQuery plugin.
+                </p>
+
+                <CodeBlock>
+{`<!-- Button to trigger modal -->
+<p>
+    <a href="#myModal" role="button" className="pure-button-primary pure-button" data-toggle="modal">
+    Launch Pure + Bootstrap Modal
+    </a>
+</p>
+
+<!-- Modal -->
+<!--
+    * Bootstrap v2.3.2
+    *
+    * Copyright 2012 Twitter, Inc
+    * Licensed under the Apache License v2.0
+    * http://www.apache.org/licenses/LICENSE-2.0
+    *
+    * Designed and built with all the love in the world @twitter by @mdo and @fat.
+    -->
+<div id="myModal" className="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+    <div className="modal-header">
+        <h1 id="myModalLabel">A Bootstrap Modal with Pure</h1>
+    </div>
+    <div className="modal-body">
+        <p>
+            This modal is launched by including <em>just</em> the <code>modal.css</code> and <code>modal.js</code> file from Bootstrap, and including Pure to drive all low-level styles. The result is a fully-functional Modal using just a fraction of the CSS.
+        </p>
+        <form className="pure-form pure-form-stacked">
+            <legend>A Stacked Form</legend>
+            <label for="email">Email</label>
+            <input id="email" type="text" placeholder="Email">
+            <label for="password">Password</label>
+            <input id="password" type="password" placeholder="Password">
+            <label for="state">State</label>
+            <select id="state">
+                <option>AL</option>
+                <option>CA</option>
+                <option>IL</option>
+            </select>
+            <label className="pure-checkbox">
+            <input type="checkbox"> Remember me
+            </label>
+        </form>
+    </div>
+    <div className="modal-footer">
+        <button className="pure-button" data-dismiss="modal" aria-hidden="true">Close</button>
+        <button className="pure-button pure-button-primary">Submit</button>
+    </div>
+</div>
+<script src="//code.jquery.com/jquery-1.9.1.js"></script>
+<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>`}
+                </CodeBlock>
+            </div>
+        </Layout>
+    );
+}
+
+export default Extend;

site/src/pages/forms/index.js

@@ -0,0 +1,305 @@
+import Link from '@docusaurus/Link';
+import React from 'react';
+import Layout from '../../theme/Layout';
+import Header from '../../../components/Header';
+import Example from '../../../components/Example';
+import SectionHeader from '../../../components/SectionHeader';
+
+const title = 'Forms';
+const description = 'Simple CSS for HTML forms.';
+
+function Forms() {
+  return (
+    <Layout description={description} title={title}>
+        <Header description={description} title={title} />
+
+        <div className="content">
+          <SectionHeader heading="Default Form" />
+
+           <p>
+              To create a default inline form, add the <code>pure-form</code> classname to any <code>&lt;form&gt;</code> element.
+           </p>
+
+           <Example>
+               <form className="pure-form">
+                  <fieldset>
+                     <legend>A compact inline form</legend>
+                     <input type="email" placeholder="Email" />
+                     <input type="password" placeholder="Password" />
+                     <label htmlFor="default-remember">
+                        <input id="default-remember" type="checkbox" />
+                        Remember me
+                     </label>
+                     <button type="submit" className="pure-button pure-button-primary">Sign in</button>
+                  </fieldset>
+               </form>
+           </Example>
+
+           <SectionHeader heading="Stacked Form" />
+
+           <p>
+              To create a stacked form with input elements below the labels, add the <code>pure-form-stacked</code> classname to a <code>&lt;form&gt;</code> element alongside <code>pure-form</code>.
+           </p>
+
+           <Example>
+               <form className="pure-form pure-form-stacked">
+                  <fieldset>
+                     <legend>A Stacked Form</legend>
+                     <label htmlFor="stacked-email">Email</label>
+                     <input id="stacked-email" type="email" placeholder="Email" />
+                     <span className="pure-form-message">This is a required field.</span>
+                     <label htmlFor="stacked-password">Password</label>
+                     <input id="stacked-password" type="password" placeholder="Password" />
+                     <label htmlFor="stacked-state">State</label>
+                     <select id="stacked-state">
+                        <option>AL</option>
+                        <option>CA</option>
+                        <option>IL</option>
+                     </select>
+                     <label htmlFor="stacked-remember" className="pure-checkbox">
+                     <input id="stacked-remember" type="checkbox" /> Remember me
+                     </label>
+                     <button type="submit" className="pure-button pure-button-primary">Sign in</button>
+                  </fieldset>
+               </form>
+           </Example>
+
+           <SectionHeader heading="Aligned Form" />
+
+           <p>
+              To create an aligned form, add the <code>pure-form-aligned</code> classname to a <code>&lt;form&gt;</code> element alongside <code>pure-form</code>. In an aligned form, the labels are right-aligned against the form input controls, but on smaller screens revert to a <Link to="#stacked-form">stacked form</Link>.
+           </p>
+
+           <Example>
+               <form className="pure-form pure-form-aligned">
+                  <fieldset>
+                     <div className="pure-control-group">
+                        <label htmlFor="aligned-name">Username</label>
+                        <input id="aligned-name" type="text" placeholder="Username" />
+                        <span className="pure-form-message-inline">This is a required field.</span>
+                     </div>
+                     <div className="pure-control-group">
+                        <label htmlFor="aligned-password">Password</label>
+                        <input id="aligned-password" type="password" placeholder="Password" />
+                     </div>
+                     <div className="pure-control-group">
+                        <label htmlFor="aligned-email">Email Address</label>
+                        <input id="aligned-email" type="email" placeholder="Email Address" />
+                     </div>
+                     <div className="pure-control-group">
+                        <label htmlFor="aligned-foo">Supercalifragilistic Label</label>
+                        <input id="aligned-foo" type="text" placeholder="Enter something here..." />
+                     </div>
+                     <div className="pure-controls">
+                        <label htmlFor="aligned-cb" className="pure-checkbox">
+                        <input id="aligned-cb" type="checkbox" /> I've read the terms and conditions
+                        </label>
+                        <button type="submit" className="pure-button pure-button-primary">Submit</button>
+                     </div>
+                  </fieldset>
+               </form>
+           </Example>
+
+           <SectionHeader heading="Multi-Column Form (with Pure Grids)" />
+
+           <p>
+              To create multi-column forms, include your form elements within a <Link to="/grids">Pure Grid</Link>. Creating responsive multi-column forms (like the example below) requires <Link to="/grids/#pure-responsive-grids">Pure Responsive Grids</Link> to be present on the page.
+           </p>
+
+           <Example>
+               <form className="pure-form pure-form-stacked">
+                  <fieldset>
+                     <legend>Legend</legend>
+                     <div className="pure-g">
+                        <div className="pure-u-1 pure-u-md-1-3">
+                           <label htmlFor="multi-first-name">First Name</label>
+                           <input id="multi-first-name" className="pure-u-23-24" type="text" />
+                        </div>
+                        <div className="pure-u-1 pure-u-md-1-3">
+                           <label htmlFor="multi-last-name">Last Name</label>
+                           <input id="multi-last-name" className="pure-u-23-24" type="text" />
+                        </div>
+                        <div className="pure-u-1 pure-u-md-1-3">
+                           <label htmlFor="multi-email">E-Mail</label>
+                           <input id="multi-email" className="pure-u-23-24" type="email" required />
+                        </div>
+                        <div className="pure-u-1 pure-u-md-1-3">
+                           <label htmlFor="multi-city">City</label>
+                           <input id="multi-city" className="pure-u-23-24" type="text" />
+                        </div>
+                        <div className="pure-u-1 pure-u-md-1-3">
+                           <label htmlFor="multi-state">State</label>
+                           <select id="multi-state" className="pure-input-1-2">
+                              <option>AL</option>
+                              <option>CA</option>
+                              <option>IL</option>
+                           </select>
+                        </div>
+                     </div>
+                     <label htmlFor="multi-terms" className="pure-checkbox">
+                     <input id="multi-terms" type="checkbox" /> I've read the terms and conditions
+                     </label>
+                     <button type="submit" className="pure-button pure-button-primary">Submit</button>
+                  </fieldset>
+               </form>
+           </Example>
+
+           <SectionHeader heading="Grouped Inputs" />
+
+           <p>
+              To group sets of text-based input elements, wrap them in a <code>&lt;fieldset&gt;</code> element with a <code>pure-group</code> classname. Grouped inputs work well for sign-up forms and look natural on mobile devices.
+           </p>
+
+           <Example>
+               <form className="pure-form">
+                  <fieldset className="pure-group">
+                     <input type="text" className="pure-input-1-2" placeholder="Username" />
+                     <input type="text" className="pure-input-1-2" placeholder="Password" />
+                     <input type="email" className="pure-input-1-2" placeholder="Email" />
+                  </fieldset>
+                  <fieldset className="pure-group">
+                     <input type="text" className="pure-input-1-2" placeholder="A title" />
+                     <textarea className="pure-input-1-2" placeholder="Textareas work too"></textarea>
+                  </fieldset>
+                  <button type="submit" className="pure-button pure-input-1-2 pure-button-primary">Sign in</button>
+               </form>
+           </Example>
+
+           <SectionHeader heading="Input Sizing" />
+
+           <p>
+              Input elements have fluid width sizes in a syntax that is similar to <Link to="/grids/">Pure Grids</Link>. You can apply a <code>pure-input-*</code> class to these elements.
+           </p>
+
+           <Example>
+               <form className="pure-form">
+                  <input className="pure-input-1" type="text" placeholder=".pure-input-1" /><br />
+                  <input className="pure-input-2-3" type="text" placeholder=".pure-input-2-3" /><br />
+                  <input className="pure-input-1-2" type="text" placeholder=".pure-input-1-2" /><br />
+                  <input className="pure-input-1-3" type="text" placeholder=".pure-input-1-3" /><br />
+                  <input className="pure-input-1-4" type="text" placeholder=".pure-input-1-4" /><br />
+               </form>
+           </Example>
+
+           <p>
+              You can control input sizing even further by wrapping them in grid containers. In the example below, the <code>&lt;input&gt;</code> elements have a <code>pure-input-1</code> class, but are wrapped in a <code>&lt;div&gt;</code> with a specific grid class.
+           </p>
+
+           <Example>
+               <form className="pure-form pure-g">
+                  <div className="pure-u-1-4">
+                     <input className="pure-input-1" type="text" placeholder=".pure-u-1-4" />
+                  </div>
+                  <div className="pure-u-3-4">
+                     <input className="pure-input-1" type="text" placeholder=".pure-u-3-4" />
+                  </div>
+                  <div className="pure-u-1-2">
+                     <input className="pure-input-1" type="text" placeholder=".pure-u-1-2" />
+                  </div>
+                  <div className="pure-u-1-2">
+                     <input className="pure-input-1" type="text" placeholder=".pure-u-1-2" />
+                  </div>
+                  <div className="pure-u-1-8">
+                     <input className="pure-input-1" type="text" placeholder=".pure-u-1-8" />
+                  </div>
+                  <div className="pure-u-1-8">
+                     <input className="pure-input-1" type="text" placeholder=".pure-u-1-8" />
+                  </div>
+                  <div className="pure-u-1-4">
+                     <input className="pure-input-1" type="text" placeholder=".pure-u-1-4" />
+                  </div>
+                  <div className="pure-u-1-2">
+                     <input className="pure-input-1" type="text" placeholder=".pure-u-1-2" />
+                  </div>
+                  <div className="pure-u-1-5">
+                     <input className="pure-input-1" type="text" placeholder=".pure-u-1-5" />
+                  </div>
+                  <div className="pure-u-2-5">
+                     <input className="pure-input-1" type="text" placeholder=".pure-u-2-5" />
+                  </div>
+                  <div className="pure-u-2-5">
+                     <input className="pure-input-1" type="text" placeholder=".pure-u-2-5" />
+                  </div>
+                  <div className="pure-u-1">
+                     <input className="pure-input-1" type="text" placeholder=".pure-u-1" />
+                  </div>
+               </form>
+           </Example>
+
+          <SectionHeader heading="Required Inputs" />
+
+           <p>
+              To mark a form control as required, add the <code>required</code> attribute.
+           </p>
+
+           <Example>
+               <form className="pure-form">
+                  <input type="email" placeholder="Requires an email" required />
+               </form>
+           </Example>
+
+           <SectionHeader heading="Disabled Inputs" />
+
+           <p>
+              To disable a form control, add the <code>disabled</code> attribute.
+           </p>
+
+           <Example>
+               <form className="pure-form">
+                  <input type="text" placeholder="Disabled input here..." disabled />
+               </form>
+           </Example>
+
+           <SectionHeader heading="Read-Only Inputs" />
+
+           <p>
+              To make a form input read-only, add the <code>readonly</code> attribute. The difference between <code>disabled</code> and <code>readonly</code> is read-only inputs are still focusable. This allows people to interact with the input and select its text, whereas disabled controls are not interactive.
+           </p>
+
+           <Example>
+               <form className="pure-form">
+                  <input type="text" value="Readonly input here..." readOnly />
+               </form>
+           </Example>
+
+           <SectionHeader heading="Rounded Inputs" />
+
+           <p>
+              To display a form control with rounded corners, add the <code>pure-input-rounded</code> classname.
+           </p>
+
+           <Example>
+               <form className="pure-form">
+                  <input type="text" className="pure-input-rounded" />
+                  <button type="submit" className="pure-button">Search</button>
+               </form>
+           </Example>
+
+           <SectionHeader heading="Checkboxes and Radios" />
+
+           <p>
+              To normalize and align checkboxes and radio inputs, add the <code>pure-checkbox</code> or <code>pure-radio</code> classname.
+           </p>
+
+           <Example>
+               <form className="pure-form">
+                  <label htmlFor="checkbox-radio-option-one" className="pure-checkbox">
+                  <input id="checkbox-radio-option-one" type="checkbox" value="" />
+                  Here's option one.
+                  </label>
+                  <label htmlFor="checkbox-radio-option-two" className="pure-radio">
+                  <input id="checkbox-radio-option-two" type="radio" name="optionsRadios" value="option1" defaultChecked />
+                  Here's a radio button. You can choose this one..
+                  </label>
+                  <label htmlFor="checkbox-radio-option-three" className="pure-radio">
+                  <input id="checkbox-radio-option-three" type="radio" name="optionsRadios" value="option2" />
+                  ..Or this one!
+                  </label>
+               </form>
+           </Example>
+        </div>
+    </Layout>
+  );
+}
+
+export default Forms;

site/src/pages/grids/index.js

@@ -0,0 +1,821 @@
+import Link from '@docusaurus/Link';
+import classnames from 'classnames';
+import React from 'react';
+import Layout from '../../theme/Layout';
+import Header from '../../../components/Header';
+import CodeBlock from '../../../components/CodeBlock';
+import SectionHeader from '../../../components/SectionHeader';
+
+import styles from './styles.css';
+
+const title = 'Grids';
+const description = 'Fully customizable and responsive CSS grids.';
+
+function Grids() {
+  return (
+    <Layout description={description} title={title}>
+        <Header description={description} title={title} />
+
+        <div className="content">
+            <SectionHeader heading="Introduction to Pure Grids" />
+
+            <p>Pure Grids are easy to work with, and very powerful. There are a few simple concepts to keep in mind:</p>
+
+            <dl>
+                <dt>Grid classes vs. unit classes</dt>
+                <dd>
+                    Pure Grids consist of two types of classes: the grid class (<code>pure-g</code>) and unit classes (<code>pure-u</code> or <code>pure-u-*</code>)
+                </dd>
+                <dt>The widths of the units are fractions</dt>
+                <dd>
+                    Units have various class names that represent their widths. For example, <code>pure-u-1-2</code> has a width of 50%, whereas <code>pure-u-1-5</code> would have a width of 20%.
+                </dd>
+                <dt>All child elements of a grid must be units</dt>
+                <dd>
+                    Child elements contained within an element with a <code>pure-g</code> classname <em>must</em> be a grid unit with a <code>pure-u</code> or <code>pure-u-*</code> classname.
+                </dd>
+                <dt>Content goes inside grid units</dt>
+                <dd>
+                    All content which is visible to people needs to be contained inside a grid unit. This ensures that the content will be rendered properly.
+                </dd>
+            </dl>
+
+            <aside>
+                <p>When setting a <code>font-family</code> in your project, be sure to check out the section on <Link to="#using-grids-with-your-font-family">using Grids with your font-family</Link>.</p>
+            </aside>
+
+            <p>
+                Let's start with a simple example. Here's a grid with three columns:
+            </p>
+
+            <CodeBlock wrap={true}>
+{`<div class="pure-g">
+    <div class="pure-u-1-3"><p>Thirds</p></div>
+    <div class="pure-u-1-3"><p>Thirds</p></div>
+    <div class="pure-u-1-3"><p>Thirds</p></div>
+</div>`}
+            </CodeBlock>
+
+            <SectionHeader heading="Grids Units Sizes" />
+
+            <p>
+                Pure ships with both a <b>5ths</b> and <b>24ths</b> based grid. Depicted below are the available units that can be appended to the <b><code>pure-u-*</code></b> classname where <code>*</code> is one of the unit fractions listed below. For example the unit classname for 50% width is: <code>pure-u-1-2</code>.
+            </p>
+
+            <h3>5ths-Based Units</h3>
+
+            <div className="grids-unit  pure-g">
+                <div className="grids-unit-width pure-u">1-5</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-1-5"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit  pure-g">
+                <div className="grids-unit-width pure-u">2-5</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-2-5"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit  pure-g">
+                <div className="grids-unit-width pure-u">3-5</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-3-5"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit  pure-g">
+                <div className="grids-unit-width pure-u">4-5</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-4-5"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit  pure-g">
+                <div className="grids-unit-width pure-u">1</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-1"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit  pure-g">
+                <div className="grids-unit-width pure-u">1-1</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-1-1"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit grids-unit-not-reduced pure-g">
+                <div className="grids-unit-width pure-u">5-5</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-5-5"></div>
+                    </div>
+                </div>
+            </div>
+
+            <h3>24ths-Based Units</h3>
+
+            <div className="grids-unit pure-g">
+                <div className="grids-unit-width pure-u">1-24</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-1-24"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit  pure-g">
+                <div className="grids-unit-width pure-u">1-12</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-1-12"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit grids-unit-not-reduced pure-g">
+                <div className="grids-unit-width pure-u">2-24</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-2-24"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit grids-unit-not-reduced pure-g">
+                <div className="grids-unit-width pure-u">3-24</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-3-24"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit  pure-g">
+                <div className="grids-unit-width pure-u">1-8</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-1-8"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit grids-unit-not-reduced pure-g">
+                <div className="grids-unit-width pure-u">4-24</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-4-24"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit  pure-g">
+                <div className="grids-unit-width pure-u">1-6</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-1-6"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit  pure-g">
+                <div className="grids-unit-width pure-u">5-24</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-5-24"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit  pure-g">
+                <div className="grids-unit-width pure-u">1-4</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-1-4"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit grids-unit-not-reduced pure-g">
+                <div className="grids-unit-width pure-u">6-24</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-6-24"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit  pure-g">
+                <div className="grids-unit-width pure-u">7-24</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-7-24"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit  pure-g">
+                <div className="grids-unit-width pure-u">1-3</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-1-3"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit grids-unit-not-reduced pure-g">
+                <div className="grids-unit-width pure-u">8-24</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-8-24"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit  pure-g">
+                <div className="grids-unit-width pure-u">3-8</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-3-8"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit grids-unit-not-reduced pure-g">
+                <div className="grids-unit-width pure-u">9-24</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-9-24"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit  pure-g">
+                <div className="grids-unit-width pure-u">5-12</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-5-12"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit grids-unit-not-reduced pure-g">
+                <div className="grids-unit-width pure-u">10-24</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-10-24"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit  pure-g">
+                <div className="grids-unit-width pure-u">11-24</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-11-24"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit  pure-g">
+                <div className="grids-unit-width pure-u">1-2</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-1-2"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit grids-unit-not-reduced pure-g">
+                <div className="grids-unit-width pure-u">12-24</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-12-24"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit  pure-g">
+                <div className="grids-unit-width pure-u">13-24</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-13-24"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit  pure-g">
+                <div className="grids-unit-width pure-u">7-12</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-7-12"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit grids-unit-not-reduced pure-g">
+                <div className="grids-unit-width pure-u">14-24</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-14-24"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit  pure-g">
+                <div className="grids-unit-width pure-u">5-8</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-5-8"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit grids-unit-not-reduced pure-g">
+                <div className="grids-unit-width pure-u">15-24</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-15-24"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit  pure-g">
+                <div className="grids-unit-width pure-u">2-3</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-2-3"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit grids-unit-not-reduced pure-g">
+                <div className="grids-unit-width pure-u">16-24</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-16-24"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit  pure-g">
+                <div className="grids-unit-width pure-u">17-24</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-17-24"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit  pure-g">
+                <div className="grids-unit-width pure-u">3-4</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-3-4"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit grids-unit-not-reduced pure-g">
+                <div className="grids-unit-width pure-u">18-24</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-18-24"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit  pure-g">
+                <div className="grids-unit-width pure-u">19-24</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-19-24"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit  pure-g">
+                <div className="grids-unit-width pure-u">5-6</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-5-6"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit grids-unit-not-reduced pure-g">
+                <div className="grids-unit-width pure-u">20-24</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-20-24"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit  pure-g">
+                <div className="grids-unit-width pure-u">7-8</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-7-8"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit grids-unit-not-reduced pure-g">
+                <div className="grids-unit-width pure-u">21-24</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-21-24"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit  pure-g">
+                <div className="grids-unit-width pure-u">11-12</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-11-12"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit grids-unit-not-reduced pure-g">
+                <div className="grids-unit-width pure-u">22-24</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-22-24"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit  pure-g">
+                <div className="grids-unit-width pure-u">23-24</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-23-24"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit  pure-g">
+                <div className="grids-unit-width pure-u">1</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-1"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit  pure-g">
+                <div className="grids-unit-width pure-u">1-1</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-1-1"></div>
+                    </div>
+                </div>
+            </div>
+            <div className="grids-unit grids-unit-not-reduced pure-g">
+                <div className="grids-unit-width pure-u">24-24</div>
+                <div className="grids-unit-details pure-u-1">
+                    <div className="pure-g">
+                        <div className="grids-unit-bar pure-u-24-24"></div>
+                    </div>
+                </div>
+            </div>
+
+            <h3>Custom Unit Sizes</h3>
+
+            <p>
+                We are working on building tools to allow people to customize Pure Grids. The first low-level tools, the <b><a href="https://github.com/ericf/rework-pure-grids">Pure Grids Rework Plugin</a></b>, is available to use today&mdash;we use this tool to generate Pure's built-in unit sizes.
+            </p>
+
+            <SectionHeader heading="Pure Responsive Grids" />
+
+            <p>
+                Pure has a mobile-first responsive grid system that can be used declaratively through CSS class names. It's a robust and flexible grid  that builds on top of the default grid.
+            </p>
+
+            <h3>Including on Your Page</h3>
+
+            <p>
+                Since media queries cannot be over-written, we <u>do not</u> include the grid system as part of <code>pure.css</code>. You'll have to pull it in as a separate CSS file. You can do this by adding the following <code>&lt;link&gt;</code> tag to your page.
+            </p>
+
+            <CodeBlock wrap={true}>
+                {`<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/grids-responsive-min.css" />`}
+            </CodeBlock>
+
+            <p>
+                Even though Pure Grids are designed to be mobile-first, you may want to show the "desktop-experience" to users who view your website in IE 8 or below. Just include the <code>grids-responsive-old-ie.css</code> file inside an IE conditional statement and Pure Grids will adapt to show the desktop experience.
+            </p>
+
+            <h3>Pure's Regular Grid vs. Responsive Grid</h3>
+
+            <p>
+                The best way to understand the difference between Pure's regular grid and a responsive grid is through an example.The snippet below shows how regular Pure Grids are written. These grids are unresponsive. They'll always be <code>width: 33.33%</code>, irrespective of the width of the screen.
+            </p>
+
+            <CodeBlock wrap={true}>
+                {`<div class="pure-g">
+    <div class="pure-u-1-3"> ... </div>
+    <div class="pure-u-1-3"> ... </div>
+    <div class="pure-u-1-3"> ... </div>
+</div>`}
+            </CodeBlock>
+
+            <p>
+                Next, let's look at a responsive grid. Elements within this grid will be <code>width: 100%</code> on small screens, but will shrink to become <code>width: 33.33%</code> on medium-sized screens and above.
+            </p>
+
+            <CodeBlock wrap={true}>
+                {`<div class="pure-g">
+    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
+    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
+    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
+</div>`}
+            </CodeBlock>
+
+            <h3>Default Media Queries</h3>
+
+            <p>
+                When using Responsive Grids, you can control how the grid behaves at specific breakpoints by adding class names. Pure's default responsive grids comes with the following class names and media query breakpoints.
+            </p>
+
+            <div className="table-responsive">
+                <table className="mq-table pure-table-bordered pure-table">
+                    <thead>
+                        <tr>
+                            <th className="highlight">Key</th>
+                            <th className="highlight">CSS Media Query</th>
+                            <th>Applies</th>
+                            <th>Classname</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td className="highlight"><i>None</i></td>
+                            <td className="highlight"><i>None</i></td>
+                            <td><i>Always</i></td>
+                            <td><code>.pure-u-*</code></td>
+                        </tr>
+                        <tr>
+                            <td className="highlight"><b><code>sm</code></b></td>
+                            <td className="mq-table-mq highlight"><code>@media screen and (min-width: 35.5em)</code></td>
+                            <td>≥ <b>568px</b></td>
+                            <td><code>.pure-u-<b>sm</b>-*</code></td>
+                        </tr>
+                        <tr>
+                            <td className="highlight"><b><code>md</code></b></td>
+                            <td className="mq-table-mq highlight"><code>@media screen and (min-width: 48em)</code></td>
+                            <td>≥ <b>768px</b></td>
+                            <td><code>.pure-u-<b>md</b>-*</code></td>
+                        </tr>
+                        <tr>
+                            <td className="highlight"><b><code>lg</code></b></td>
+                            <td className="mq-table-mq highlight"><code>@media screen and (min-width: 64em)</code></td>
+                            <td>≥ <b>1024px</b></td>
+                            <td><code>.pure-u-<b>lg</b>-*</code></td>
+                        </tr>
+                        <tr>
+                            <td className="highlight"><b><code>xl</code></b></td>
+                            <td className="mq-table-mq highlight"><code>@media screen and (min-width: 80em)</code></td>
+                            <td>≥ <b>1280px</b></td>
+                            <td><code>.pure-u-<b>xl</b>-*</code></td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            {/*
+            <aside>
+                <p>
+                    If you want to customize these media query breakpoints, head over to the <Link to="/start/#build-your-pure-starter-kit">Get Started</Link> page and generate your own custom grid.
+                </p>
+            </aside>
+            */}
+
+            <h3>Using Relative Units for Widths</h3>
+
+            <p>
+                You may have noticed that we use <code>em</code> for our default CSS Media Query widths instead of <code>px</code>. This was a conscious decision since it allows the Media Queries to respond appropriately when people zoom the webpage. Check out <a href="http://bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries/#relative">this article by Brad Frost</a> for some background information on using relative units within Media Queries.
+            </p>
+
+            <p>
+                If you do want to use units other than <code>em</code>, you can always modify the default Media Queries on the <a href="/start/#build-your-pure-starter-kit">Get Started</a> page. Converting from <code>em</code> to <code>px</code> is pretty simple:
+            </p>
+
+            <CodeBlock wrap={true}>
+                {`1em == 16px *`}
+            </CodeBlock>
+
+            <p>
+                <small>
+                * The <code>em</code> to <code>px</code> conversion is based on the browser's default font size, which is generally <code>16px</code>, but can be overridden by a user in their browser settings.
+                </small>
+            </p>
+
+            <h3>An Example of Pure Responsive Grids</h3>
+
+            <p>
+                The example below leverages Pure's Responsive Grid to create a row with four columns. The columns stack on small screens, take up <code>width: 50%</code> on medium-sized screens, and <code>width: 25%</code> on large screens.
+            </p>
+
+            <p>
+                This is done by adding the <code>.pure-u-1</code> class for small screens, <code>.pure-u-md-1-2</code> for medium-sized screens, and <code>.pure-u-lg-1-4</code> for large screens. <em>Resize the page to see the grid respond to the screen size.</em>
+            </p>
+        </div>
+
+        <div className="grids-example">
+            <div className="pure-g">
+                <div className="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
+                    <div className="l-box">
+                        <h3>Lorem Ipsum</h3>
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+                        </p>
+                    </div>
+                </div>
+                <div className="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
+                    <div className="l-box">
+                        <h3>Dolor Sit Amet</h3>
+                        <p>
+                            Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
+                        </p>
+                    </div>
+                </div>
+                <div className="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
+                    <div className="l-box">
+                        <h3>Proident laborum</h3>
+                        <p>
+                            In culpa qui officia deserunt mollit anim id est laborum. incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
+                        </p>
+                    </div>
+                </div>
+                <div className="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
+                    <div className="l-box">
+                        <h3>Praesent consectetur</h3>
+                        <p>
+                            Integer vitae lectus accumsan, egestas dui eget, ullamcorper urn. In feugiat tortor at turpis rhoncus tincidunt. Duis sed porttitor ante, eget venenatis lectus.
+                        </p>
+                    </div>
+                </div>
+                <div className="pure-u-1">
+                    <img className="pure-img" src="https://s3.amazonaws.com/ooomf-com-files/wjNV6gWuQkqeuH8txHc9_sylwiabartyzel_unsplash_tatry_03.jpg" alt="By Sylwia Bartyzel from unsplash.com"  />
+                </div>
+                <div className="pure-u-2-5">
+                    <div className="l-box">
+                        <h3>Two-Fifth Column</h3>
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fermentum dui turpis.
+                        </p>
+                    </div>
+                </div>
+                <div className="pure-u-3-5">
+                    <div className="l-box">
+                        <h3>Three-Fifth Column</h3>
+                        <p>
+                            Quisque ac magna eget est porta varius ut eget quam. Curabitur tincidunt gravida nisl.
+                        </p>
+                        <p>
+                            Fusce accumsan, sem vitae tempus tempor, nulla lectus interdum felis, eget molestie urna mauris vel elit. Curabitur vel ipsum nulla.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div className="content">
+            <SectionHeader heading="Grids on Mobile" />
+
+            <p>
+                Pure's default grid system is mobile-first. If you want to have a grid on small screens, just use the <code>pure-u-*</code> classnames on your elements.
+            </p>
+        </div>
+
+        <div className="grids-example">
+            <div className="pure-g">
+                <div className="pure-u-1-3">
+                    <div className="l-box">
+                        <h3>Thirds</h3>
+                        <p>This cell will be 1/3 width all the time.</p>
+                    </div>
+                </div>
+                <div className="pure-u-1-3">
+                    <div className="l-box">
+                        <h3>Thirds</h3>
+                        <p>This cell will be 1/3 width all the time.</p>
+                    </div>
+                </div>
+                <div className="pure-u-1-3">
+                    <div className="l-box">
+                        <h3>Thirds</h3>
+                        <p>This cell will be 1/3 width all the time.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div className="content">
+            <SectionHeader heading="Responsive Images" />
+
+            <p>
+                When using Responsive Grids, you'll want your images to be fluid as well so they grow and shrink with the content, while maintaining the correct ratio. To do this, just add the <code>.pure-img</code> class on them. Check out the example below.
+            </p>
+        </div>
+
+        <div className="grids-example">
+            <div className="pure-g">
+                <div className="pure-u-1-4 pure-u-lg-1-8">
+                    <img className="pure-img" src="http://farm3.staticflickr.com/2875/9069037713_1752f5daeb.jpg" alt="Peyto Lake" />
+                </div>
+                <div className="pure-u-1-4 pure-u-lg-1-8">
+                    <img className="pure-img" src="http://farm3.staticflickr.com/2813/9069585985_80da8db54f.jpg" alt="Train" />
+                </div>
+                <div className="pure-u-1-4 pure-u-lg-1-8">
+                    <img className="pure-img" src="http://farm6.staticflickr.com/5456/9121446012_c1640e42d0.jpg" alt="T-Shirt Store" />
+                </div>
+                <div className="pure-u-1-4 pure-u-lg-1-8">
+                    <img className="pure-img" src="http://farm8.staticflickr.com/7357/9086701425_fda3024927.jpg" alt="Mountain" />
+                </div>
+                <div className="pure-u-1-4 pure-u-lg-1-8">
+                    <img className="pure-img" src="http://farm8.staticflickr.com/7478/16185861115_4ed6353a97.jpg" alt="Miami" />
+                </div>
+                <div className="pure-u-1-4 pure-u-lg-1-8">
+                    <img className="pure-img" src="http://farm3.staticflickr.com/4068/4666556755_091acf3253.jpg" alt="BCE Place, Toronto" />
+                </div>
+                <div className="pure-u-1-4 pure-u-lg-1-8">
+                    <img className="pure-img" src="http://farm6.staticflickr.com/7313/13136053333_f04b335933.jpg" alt="Banff" />
+                </div>
+                <div className="pure-u-1-4 pure-u-lg-1-8">
+                    <img className="pure-img" src="http://farm3.staticflickr.com/7628/16754137141_27dcaabd24.jpg" alt="Boston North Point Park" />
+                </div>
+            </div>
+        </div>
+
+        <div className="content">
+            <SectionHeader heading="Applying Padding and Borders to Grid Units" />
+
+            <p>
+                To add borders and padding to Pure Grids, you have two options. The first option is to nest a <code>&lt;div&gt;</code> inside each Grid unit and style the child container:
+            </p>
+
+            <CodeBlock wrap={true}>
+{`<style>
+    .l-box {
+        padding: 1em;
+    }
+</style>
+
+...
+
+<div class="pure-g">
+    <div class="pure-u-1-2">
+        <div class="l-box"> ... </div>
+    </div>
+    <div class="pure-u-1-2">
+        <div class="l-box"> ... </div>
+    </div>
+</div>`}
+            </CodeBlock>
+
+            <p>
+                The second option is to add borders and padding directly to a grid unit. This would ordinarily risk breaking the layout, but you can easily avoid this problem by augmenting the behavior of the grid itself with a <code>box-sizing: border-box</code> rule:
+            </p>
+
+            <CodeBlock wrap={true}>
+{`<style>
+    .pure-g > div {
+        box-sizing: border-box;
+    }
+    .l-box {
+        padding: 1em;
+    }
+</style>
+
+...
+
+<div class="pure-g">
+    <div class="pure-u-1-2 l-box"> ... </div>
+    <div class="pure-u-1-2 l-box"> ... </div>
+</div>`}
+            </CodeBlock>
+
+            <p>
+                Using <code>box-sizing: border-box</code> keeps your markup cleaner, but has one minor drawback. Setting this property on all grid units makes it harder to override or unset the value later on. As an unopinionated library, Pure lets <code>box-sizing</code> remain at the default value of <code>content-box</code> and leaves the choice up to you.
+            </p>
+
+            <SectionHeader heading="Using Grids with Your Font-Family" />
+
+            <p>
+                Pure Grids use a specific font stack to ensure the greatest OS/browser compatibility, and by default grid units will have <code>font-family: sans-serif;</code> applied — this is the default font stack Pure's Base (Normalize.css) applies to <code>&lt;html&gt;</code>, <code>&lt;button&gt;</code>, <code>&lt;input&gt;</code>, <code>&lt;select&gt;</code>, and <code>&lt;textarea&gt;</code> elements. Fortunately, it's quite easy to make sure your project's font stack applies to all content when using Pure. Instead of applying your <code>font-family</code> to only the <code>&lt;body&gt;</code> element, apply it like this:
+            </p>
+
+            <CodeBlock wrap={true}>
+{`<style>
+/*
+When setting the primary font stack, apply it to the Pure grid units along
+with "html", "button", "input", "select", and "textarea". Pure Grids use
+specific font stacks to ensure the greatest OS/browser compatibility.
+*/
+html, button, input, select, textarea,
+.pure-g [class *= "pure-u"] {
+    /* Set your content font stack here: */
+    font-family: Georgia, Times, "Times New Roman", serif;
+}
+</style>`}
+            </CodeBlock>
+
+            <SectionHeader heading="Want to just use Grids?" />
+
+            <p>
+                Grids is part of the Pure CSS file. However, if you just want Grids and not the other modules, you can pull it down separately. Just include this <code>&lt;link&gt;</code> element in your <code>&lt;head&gt;</code>.
+            </p>
+
+            <CodeBlock wrap={true}>
+{`<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/base-min.css">
+<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/grids-min.css">
+<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/grids-responsive-min.css">`}
+            </CodeBlock>
+
+            {/*
+            <aside>
+                <p>
+                    Optionally, you can head over to the <a href="/start/#build-your-pure-starter-kit">Get Started</a> page to make your very own grid with custom media query breakpoints and column sizes. Download the CSS and HTML file when you're done and get started quickly!
+                </p>
+            </aside>
+            */}
+        </div>
+    </Layout>
+  );
+}
+
+export default Grids;

site/src/pages/grids/styles.css

@@ -0,0 +1,43 @@
+.grids-unit {
+    margin: 0.25em 0;
+    padding-left: 4.5em;
+}
+.grids-unit-width {
+    width: 4em;
+    margin-left: -4.5em;
+    padding-right: 0.5em;
+    line-height: 2em;
+    text-align: right;
+    vertical-align: baseline;
+}
+.grids-unit .grids-unit-width {
+    font-family: Consolas, 'Liberation Mono', Courier, monospace;
+}
+.grids-unit-details {
+    position: relative;
+    background: #fafafa
+}
+.grids-unit-classnames {
+    position: absolute;
+    left: 0.5em;
+}
+.grids-unit-classname {
+    margin-right: 1em;
+}
+.grids-unit-classname code {
+    background: none;
+    padding: 0;
+    margin: 0;
+}
+.grids-unit-bar {
+    height: 2em;
+    background: #eee;
+}
+
+/* hack - start.css is being pulled in, overwrite for now */
+.grids .grids-example [class *= "pure-u"] {
+    padding: 0;
+    border-width: 1px 0 0;
+    text-align: left;
+    font-family: Helvetica, Arial, sans-serif;
+}

site/src/pages/index.js

@@ -0,0 +1,159 @@
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import React from 'react';
+import Layout from '@theme/Layout';
+import CodeBlock from '../../components/CodeBlock';
+import { filePercent, fileSize } from '../../lib/utils';
+import styles from './styles.css';
+
+const renderModuleSize = (filesizes) => {
+    const modules = ['base', 'grids', 'forms', 'buttons', 'tables', 'menus'];
+    return modules.map((module, idx) => (
+        <div key={idx} className={`size-chart-${module} pure-u`} style={{width: filePercent({ modules, module, filesizes })}}>
+            <Link className="size-chart-item" to={`/${module}`}>
+                <span className="size-chart-label">
+                    <span className="size-chart-mod">{module}</span>
+                    <span className="size-chart-size">{fileSize({ module, filesizes })}</span>
+                </span>
+            </Link>
+        </div>
+    ));
+}
+
+function Home() {
+  const context = useDocusaurusContext();
+  const {siteConfig = {}} = context;
+  const {
+      customFields: {
+          moduleSizes,
+          PURE_DOWNLOAD_SNIPPET,
+          pureVersion,
+      },
+      organizationName,
+      projectName,
+  } = siteConfig;
+  const renderSize = renderModuleSize(moduleSizes);
+  return (
+    <Layout description={siteConfig.tagline}>
+      <div className="hero">
+          <div className="hero-titles">
+              <img className="logo" src={useBaseUrl('img/logo_pure@2x.png')} alt="Pure" />
+
+              <h2 className="hero-tagline">A set of small, responsive CSS modules that you can use in every web project.</h2>
+          </div>
+
+          <div className="hero-cta">
+              <CodeBlock full={true} wrap={true}>{PURE_DOWNLOAD_SNIPPET}</CodeBlock>
+
+              <p>
+                  <Link className="button-cta pure-button" to="/start/">Get Started</Link>
+                  <a className="button-secondary pure-button" href={`https://github.com/${organizationName}/${projectName}/`}>View on GitHub</a>
+              </p>
+          </div>
+      </div>
+      <div className="marketing">
+          <div className="size-chart pure-g">
+              {renderSize}
+          </div>
+
+          <div className="content">
+              <h3 className="marketing-header">CSS with a minimal footprint.</h3>
+
+              <p>
+                  Pure is ridiculously tiny. The entire set of modules clocks in at <b>{fileSize({ module: 'pure', filesizes: moduleSizes })}* minified and gzipped</b>. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes.
+              </p>
+
+              <p style={{fontSize: 'smaller'}}>
+                  * We can add correctly :) the numbers above are individual module sizes; when grouped together they compress (gzip) even more.
+              </p>
+          </div>
+      </div>
+      <div className="marketing l-wrap pure-g">
+          <div className="content pure-u-1 u-sm-1-2 u-xl-1-3">
+              <h3 className="marketing-header">Your CSS foundation.</h3>
+              <p>
+                  Pure builds on <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> and provides layout and styling for native HTML elements, plus the most common UI components. It's what you need, without the cruft.
+              </p>
+          </div>
+
+          <div className="content pure-u-1 u-sm-1-2 u-xl-1-3">
+              <h3 className="marketing-header">Made with mobile in mind.</h3>
+
+              <p>
+                  Pure is responsive out of the box, so elements look great on all screen sizes.
+              </p>
+          </div>
+
+          <div className="content pure-u-1 u-lg-3-4 u-xl-1-3">
+              <h3 className="marketing-header">Stays out of your way.</h3>
+
+              <p>
+                  Pure has minimal styles and encourages you to write your application styles on top of it. It's designed to get out of your way and makes it easy to override styles.
+              </p>
+          </div>
+      </div>
+      <div className="marketing l-wrap pure-g">
+          <div className="marketing-diagram content pure-u-1 u-sm-2-3 u-md-1-2">
+              <Link to="/layouts">
+                <img src={useBaseUrl('img/layout-icon.jpg')} className="pure-img-responsive" alt="Diagram of a sample layout." />
+              </Link>
+          </div>
+
+          <div className="content pure-u-1 u-md-1-2">
+              <h3 className="marketing-header">Create responsive layouts.</h3>
+              <p>
+                  By using <a href="/grids/">Grids</a>, <a href="/menus/">Menus</a>, and more, it's easy to create beautiful responsive layouts for all screen sizes. We've made it easy for you to get started. Take a look at a few different <a href="/layouts/">layouts</a> and start your next web project with a rock-solid foundation.
+              </p>
+              <p>
+                  <Link to="/layouts/" className="pure-button">View Layouts</Link>
+              </p>
+          </div>
+      </div>
+      <div className="marketing marketing-customize l-wrap pure-g">
+          <div className="content pure-u-1 u-md-1-2">
+              <h3 className="marketing-header">Create your own look and feel.</h3>
+              <p>
+                  Unlike other frameworks, Pure's design is unopinionated, minimal and flat. We believe that it's much easier to add new CSS rules than to overwrite existing rules. By adding a few lines of CSS, you can customize Pure's appearance to work with your web project.
+              </p>
+              <p>
+                  <Link to="/extend/" className="pure-button">Extend Pure</Link>
+              </p>
+          </div>
+          <div className="sample-buttons content pure-u-1 u-md-1-2">
+              <div className="pure-g">
+                  <span className="sample-button pure-u-1-2 u-sm-1-3">
+                    <button className="pure-button">Default</button>
+                  </span>
+                  <span className="sample-button pure-u-1-2 u-sm-1-3">
+                    <button className="button-a pure-button">Blue</button>
+                  </span>
+                  <span className="sample-button pure-u-1-2 u-sm-1-3">
+                    <button className="button-b pure-button">Yellow</button>
+                  </span>
+                  <span className="sample-button pure-u-1-2 u-sm-1-3">
+                    <button className="button-c pure-button">Black</button>
+                  </span>
+                  <span className="sample-button pure-u-1-2 u-sm-1-3">
+                    <button className="button-d pure-button">Green</button>
+                  </span>
+                  <span className="sample-button pure-u-1-2 u-sm-1-3">
+                    <button className="button-e pure-button">Red</button>
+                  </span>
+                  <span className="sample-button pure-u-1-2 u-sm-1-3">
+                    <button className="button-f pure-button">Purple</button>
+                  </span>
+                  <span className="sample-button pure-u-1-2 u-sm-1-3">
+                    <button className="button-g pure-button">Orange</button>
+                  </span>
+                  <span className="sample-button pure-u-1 u-sm-1-3">
+                    <button className="button-h pure-button">Indigo</button>
+                  </span>
+              </div>
+          </div>
+      </div>
+    </Layout>
+  );
+}
+
+export default Home;

site/src/pages/layouts/README.md

@@ -0,0 +1,16 @@
+Pure CSS Layout Examples
+========================
+
+Layout examples using [Pure CSS][pure] compiled from the [pure-site][] project.
+
+[pure]: http://purecss.io/
+[pure-site]: https://github.com/pure-css/pure-site
+
+
+License
+-------
+
+This software is free to use under the zLib license.
+See the [zLib][] license for more information.
+
+[zLib]: http://www.zlib.net/zlib_license.html

site/src/pages/layouts/index.js

@@ -0,0 +1,121 @@
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import classnames from 'classnames';
+import React from 'react';
+import Layout from '@theme/Layout';
+import Header from '../../../components/Header';
+import SectionHeader from '../../../components/SectionHeader';
+
+import styles from './styles.css';
+
+const title = 'Layouts';
+const description = 'Quickstart your next web project with these example layouts.';
+const layouts = [
+    {
+        type: "blog",
+        title: "Blog",
+        summary: "A layout example that shows off a blog page with a list of posts.",
+        modules: ["base", "grids", "buttons", "menus"]
+    },
+    {
+        type: "email",
+        title: "Email",
+        summary: "A layout example that shows off a responsive email layout.",
+        modules: ["base", "grids", "buttons", "menus"]
+    },
+    {
+        type: "gallery",
+        title: "Photo Gallery",
+        summary: "A layout example that shows off a responsive photo gallery.",
+        modules: ["base", "grids", "forms", "buttons", "menus"]
+    },
+    {
+        type: "marketing",
+        title: "Landing Page",
+        summary: "A layout example that shows off a responsive product landing page.",
+        modules: ["base", "grids", "forms", "buttons", "menus"]
+    },
+    {
+        type: "pricing",
+        title: "Pricing Table",
+        summary: "A layout example that shows off a responsive pricing table.",
+        modules: ["base", "grids", "buttons", "menus"]
+    },
+    {
+        type: "side-menu",
+        title: "Responsive Side Menu",
+        summary: "A layout example with a side menu that hides on mobile, just like the Pure website.",
+        modules: ["base", "grids", "menus"]
+    },
+    {
+        type: "tucked-menu-vertical",
+        title: "Responsive Horizontal-to-Vertical Menu",
+        summary: "A set of horizontal menus that switch to vertical and which hide at small window widths.",
+        modules: ["base", "grids", "menus"]
+    },
+    {
+        type: "tucked-menu",
+        title: "Responsive Horizontal-to-Scrollable Menu",
+        summary: "Showcases a horizontal menu that hides at small window widths, and which scrolls when revealed.",
+        modules: ["base", "menus"]
+    }
+];
+
+const renderLayouts = (layout, idx) => (
+    <div key={idx} className="layout-item l-wrap pure-g">
+        <div className="layout-item-screenshot content pure-u-1 u-sm-1-2">
+            <Link to={`/layouts/${layout.type}`}>
+                <img src={useBaseUrl(`img/layouts/${layout.type}@2x.jpg`)} className="pure-img-responsive" width="400" height="214"
+                alt={`Screenshot of ${layout.title} example layout`} />
+            </Link>
+        </div>
+        <div className="layout-item-content content pure-u-1 u-sm-1-2">
+            <h3 className="layout-item-head">{layout.title}</h3>
+
+            <p>{layout.summary}</p>
+
+            <ul className="layout-item-modules pure-g">
+                {layout.modules.map((m, idx) => (
+                    <li key={idx} className={`layout-item-module layout-item-module-${m} pure-u`}>
+                        <Link to={`/${m}`}>{m}</Link>
+                    </li>
+                ))}
+            </ul>
+
+            <p>
+                <a href={`/layouts/${layout.type}/`}
+                    className="pure-button pure-button-primary">View</a>
+                <a href={`https://github.com/pure-css/pure/tree/master/site/static/layouts/${layout.type}`}
+                    className="pure-button">Source</a>
+            </p>
+        </div>
+    </div>
+);
+
+function Layouts() {
+    const layoutMarkup = layouts.map(renderLayouts);
+    return (
+        <Layout description={description} title={title}>
+            <Header description={description} title={title} />
+
+            <div className="content">
+                <SectionHeader heading="Common Layouts" />
+
+                <p>
+                    Pure was crafted with the goal that it can be used in every web project. To showcase this, we've made some common layouts that leverage Pure. These layouts are responsive and don't require JavaScript (except for
+                    certain menu interactions).
+                </p>
+
+                <aside>
+                    <p>
+                        When viewing these layouts, view or copy the source to get a good understanding of what's happening. These layout examples are free to use in your own projects under the <a href="http://www.zlib.net/zlib_license.html">zLib license</a>.
+                    </p>
+                </aside>
+
+                {layoutMarkup}
+            </div>
+        </Layout>
+    );
+}
+
+export default Layouts;

site/src/pages/layouts/styles.css

@@ -0,0 +1,47 @@
+.layout-item {
+    margin-top: 2em;
+    padding-top: 2em;
+    border-top: 1px solid #eee;
+}
+.layout-item-screenshot {
+    text-align: center;
+}
+.layout-item-head {
+    margin-top: 0; /* so that the .layout-item-head lines up with the image */
+}
+.layout-item-modules {
+    padding: 0;
+}
+.layout-item-module {
+    margin-right: 0.5714em;
+    font-size: 0.875em;
+}
+.layout-item-module-base a {
+    border-left: 3px solid rgb(14, 144, 210);
+}
+.layout-item-module-grids a {
+    border-left: 3px solid rgb(128, 88, 165);
+}
+.layout-item-module-forms a {
+    border-left: 3px solid rgb(94, 185, 94);
+}
+.layout-item-module-buttons a {
+    border-left: 3px solid rgb(221, 81, 76);
+}
+.layout-item-module-tables a {
+    border-left: 3px solid rgb(243, 123, 29);
+}
+.layout-item-module-menus a {
+    border-left: 3px solid rgb(250, 210, 50);
+}
+.layout-item-module a:link,
+.layout-item-module a:visited {
+    text-transform: capitalize;
+    color: rgb(75, 75, 75);
+    padding: 0 0.5714em;
+    line-height: 1.75;
+    display: block;
+}
+.layout-item-content .pure-button {
+    margin-right: 5px;
+}

site/src/pages/menus/index.js

@@ -0,0 +1,245 @@
+import Link from '@docusaurus/Link';
+import React from 'react';
+import Layout from '../../theme/Layout';
+import Header from '../../../components/Header';
+import Example from '../../../components/Example';
+import SectionHeader from '../../../components/SectionHeader';
+import { handleClick } from '../../../lib/utils';
+
+const title = 'Menus';
+const description = 'Simple CSS for menus.';
+
+function Menus() {
+  return (
+    <Layout description={description} title={title}>
+        <Header description={description} title={title} />
+
+        <div className="content" onClick={handleClick}>
+            <SectionHeader heading="Vertical Menu" />
+
+            <p>
+                Menus are vertical by default. Minimal default styling and low-specificity
+                selectors make them easy to customize. By default, menu items take up
+                100% of the width of their container, so you may want to limit the menu
+                width or set the menu to display:inline-block.
+            </p>
+
+            <Example>
+                <style dangerouslySetInnerHTML={{ __html: `
+                    .custom-restricted-width {
+                        /* To limit the menu width to the content of the menu: */
+                        display: inline-block;
+                        /* Or set the width explicitly: */
+                        /* width: 10em; */
+                    }
+                `}} />
+                <div className="pure-menu custom-restricted-width">
+                    <span className="pure-menu-heading">Yahoo Sites</span>
+                    <ul className="pure-menu-list">
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">Flickr</a></li>
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">Messenger</a></li>
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">Sports</a></li>
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">Finance</a></li>
+                        <li className="pure-menu-heading">More Sites</li>
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">Games</a></li>
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">News</a></li>
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">OMG!</a></li>
+                    </ul>
+                </div>
+            </Example>
+
+            <SectionHeader heading="Horizontal Menu" />
+
+            <p>
+                To create a horizontal menu, add the <code>pure-menu-horizontal</code> class name.
+            </p>
+
+            <Example>
+                <div className="pure-menu pure-menu-horizontal">
+                    <a href="#" className="pure-menu-heading pure-menu-link">BRAND</a>
+                    <ul className="pure-menu-list">
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">News</a></li>
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">Sports</a></li>
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">Finance</a></li>
+                    </ul>
+                </div>
+            </Example>
+
+            <SectionHeader heading="Selected and Disabled Items" />
+
+            <p>
+                Mark a selected list element by adding the <code>pure-menu-selected</code> class to the list element. To mark a link as disabled, add an <code>&lt;a&gt;</code> element with the <code>pure-menu-disabled</code> class name. Disabled items appear faded and do not inherit hover styles.
+            </p>
+
+            <Example>
+                <div className="pure-menu pure-menu-horizontal">
+                    <ul className="pure-menu-list">
+                        <li className="pure-menu-item pure-menu-selected"><a href="#" className="pure-menu-link">Selected</a></li>
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">Normal</a></li>
+                        <li className="pure-menu-item pure-menu-disabled">Disabled</li>
+                    </ul>
+                </div>
+            </Example>
+
+            <SectionHeader heading="Dropdowns" />
+
+            <p>
+                We recommend enabling submenus via JavaScript to enable accessibility.
+                To help get you started, <a href="/js/menus.js">an example script</a>
+                written in vanilla JS provides ARIA support, limited submenu arrow-key
+                navigation, and the ability to dismiss menus with an outside event or
+                the ESC key. But you may wish to go further by adding edge detection,
+                comprehensive arrow-key navigation, and polyfills for compatibility
+                with old browsers.
+            </p>
+
+            <p>
+                Even with JavaScript in place, you still might want to display submenus
+                on hover. Just add <code>pure-menu-allow-hover</code> to the
+                <code>pure-menu-has-children</code> list item. This can be nice for desktop
+                users and provides a fallback for users with no JavaScript.
+            </p>
+
+            <Example>
+                <div className="pure-menu pure-menu-horizontal">
+                    <ul className="pure-menu-list">
+                        <li className="pure-menu-item pure-menu-selected"><a href="#" className="pure-menu-link">Home</a></li>
+                        <li className="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
+                            <a href="#" id="menuLink1" className="pure-menu-link">Contact</a>
+                            <ul className="pure-menu-children">
+                                <li className="pure-menu-item"><a href="#" className="pure-menu-link">Email</a></li>
+                                <li className="pure-menu-item"><a href="#" className="pure-menu-link">Twitter</a></li>
+                                <li className="pure-menu-item"><a href="#" className="pure-menu-link">Tumblr Blog</a></li>
+                            </ul>
+                        </li>
+                    </ul>
+                </div>
+            </Example>
+
+            <SectionHeader heading="Vertical Menu with Submenus" />
+
+            <p>
+                The same construct used to create dropdowns works in vertical menus as well. You
+                may nest submenus, but keep in mind that complex menus can present usability
+                challenges on small screens.
+            </p>
+
+            <Example>
+                <div className="pure-menu custom-restricted-width">
+                    <ul className="pure-menu-list">
+                        <li className="pure-menu-item pure-menu-selected"><a href="#" className="pure-menu-link">Flickr</a></li>
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">Messenger</a></li>
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">Sports</a></li>
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">Finance</a></li>
+                        <li className="pure-menu-item pure-menu-has-children">
+                            <a href="#" id="menuLink1" className="pure-menu-link">More</a>
+                            <ul className="pure-menu-children">
+                                <li className="pure-menu-item"><a href="#" className="pure-menu-link">Autos</a></li>
+                                <li className="pure-menu-item"><a href="#" className="pure-menu-link">Flickr</a></li>
+                                <li className="pure-menu-item pure-menu-has-children">
+                                    <a href="#" id="menuLink1" className="pure-menu-link">Even More</a>
+                                    <ul className="pure-menu-children">
+                                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">Foo</a></li>
+                                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">Bar</a></li>
+                                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">Baz</a></li>
+                                    </ul>
+                                </li>
+                            </ul>
+                        </li>
+                    </ul>
+                </div>
+            </Example>
+
+            <SectionHeader heading="Scrollable Horizontal Menu" />
+
+            <p>
+                To create a scrollable horizontal menu, add the <code>pure-menu-scrollable</code> class name. When
+                there isn't enough room, the menu items can be scrolled or flicked. Dropdown menus are not supported.
+            </p>
+
+            <Example>
+                <div className="pure-menu pure-menu-horizontal pure-menu-scrollable">
+                    <a href="#" className="pure-menu-link pure-menu-heading">Yahoo</a>
+                    <ul className="pure-menu-list">
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">Home</a></li>
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">Flickr</a></li>
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">Messenger</a></li>
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">Sports</a></li>
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">Finance</a></li>
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">Autos</a></li>
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">Beauty</a></li>
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">Movies</a></li>
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">Small Business</a></li>
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">Cricket</a></li>
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">Tech</a></li>
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">World</a></li>
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">News</a></li>
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">Support</a></li>
+                    </ul>
+                </div>
+            </Example>
+
+            <SectionHeader heading="Scrollable Vertical Menu" />
+
+            <p>
+                To create a scrollable vertical menu, limit the height of your menu, and then add the <code>pure-menu-scrollable</code> class name. The menu items can be scrolled or flicked. Submenus are not supported.
+            </p>
+
+            <Example>
+                <style dangerouslySetInnerHTML={{ __html: `
+                    /* Customization to limit height of the menu */
+                    .custom-restricted {
+                        height: 160px;
+                        width: 150px;
+                        border: 1px solid gray;
+                        border-radius: 4px;
+                    }
+                `}} />
+                <div className="pure-menu pure-menu-scrollable custom-restricted">
+                    <a href="#" className="pure-menu-link pure-menu-heading">Yahoo</a>
+                    <ul className="pure-menu-list">
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">Home</a></li>
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">Flickr</a></li>
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">Messenger</a></li>
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">Sports</a></li>
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">Finance</a></li>
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">Autos</a></li>
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">Beauty</a></li>
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">Movies</a></li>
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">Small Business</a></li>
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">Cricket</a></li>
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">Tech</a></li>
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">World</a></li>
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">News</a></li>
+                        <li className="pure-menu-item"><a href="#" className="pure-menu-link">Support</a></li>
+                    </ul>
+                </div>
+            </Example>
+
+            <SectionHeader heading="Responsive Menus That Hide" />
+
+            <p>
+                Check out our <Link to="/layouts/">Layout Examples</Link> to see how you can use
+                Pure as a foundation for more complex menus, such as:
+            </p>
+
+            <Example>
+                <ul>
+                    <li><a href="/layouts/side-menu/">Responsive Vertical Menu</a>, which
+                        collapses behind a hamburger,
+                        similar to the menu on this Pure website.
+                    </li>
+                    <li><a href="/layouts/tucked-menu/">Responsive Horizontal-Scrollable Menu</a>,
+                        which tucks out of the way on small screens.
+                    </li>
+                    <li><a href="/layouts/tucked-menu-vertical/">Responsive Horizontal-to-Vertical Menu</a>,
+                        which slides out of view.
+                    </li>
+                </ul>
+            </Example>
+        </div>
+    </Layout>
+  );
+}
+
+export default Menus;

site/src/pages/start/index.js

@@ -0,0 +1,351 @@
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import classnames from 'classnames';
+import React from 'react';
+import Layout from '../../theme/Layout';
+import Header from '../../../components/Header';
+import SectionHeader from '../../../components/SectionHeader';
+import CodeBlock from '../../../components/CodeBlock';
+import styles from './styles.css';
+
+const title = 'Get Started';
+const description = 'Start your next web project with Pure.';
+
+function Start() {
+    const context = useDocusaurusContext();
+    const {siteConfig = {}} = context;
+    const {
+        customFields: {
+            PURE_DOWNLOAD_SNIPPET,
+            pureVersion
+        }
+    } = siteConfig;
+    return (
+        <Layout description={description} title={title}>
+          <Header description={description} title={title} />
+
+          <div className="content">
+              <SectionHeader heading="Add Pure to Your Page" />
+
+              <p>
+                  You can add Pure to your page via the <b>free unpkg CDN</b>. Just add the following <code>&lt;link&gt;</code> element into your page's <code>&lt;head&gt;</code>, before your project's stylesheets.
+              </p>
+          </div>
+
+          <CodeBlock full={true} wrap={true}>{PURE_DOWNLOAD_SNIPPET}</CodeBlock>
+
+          <div className="content">
+              <aside>
+                  <p>
+                      Alternatively, you can <a href={`https://github.com/pure-css/pure-release/archive/v${pureVersion}.zip`}>download Pure</a>, or <a href="/customize/">check out other CDNs</a> that host Pure.
+                  </p>
+              </aside>
+
+              <SectionHeader heading="Add the Viewport Meta Element" />
+
+              <p>
+                  The viewport <code>meta</code> element lets you control the the width and scale of the viewport on mobile browsers. Since you're building a responsive website, you want the width to be equal to the device's native width. Add this into your page's <code>&lt;head&gt;</code>.
+              </p>
+          </div>
+
+          <CodeBlock full={true} wrap={true}>
+              {`<meta name="viewport" content="width=device-width, initial-scale=1">`}
+          </CodeBlock>
+
+          <div className="content">
+              <SectionHeader heading="Understand Pure Grids" />
+
+              <p>
+                  Pure's grid system is very simple. You create a row by using the <code>.pure-g</code> class, and create columns within that row by using the <code>pure-u-*</code> classes.
+              </p>
+
+              <p>
+                  Here's a grid with three columns:
+              </p>
+
+              <CodeBlock wrap={true}>
+        {`<div class="pure-g">
+    <div class="pure-u-1-3"><p>Thirds</p></div>
+    <div class="pure-u-1-3"><p>Thirds</p></div>
+    <div class="pure-u-1-3"><p>Thirds</p></div>
+</div>`}
+              </CodeBlock>
+          </div>
+
+          <div className="grids-example">
+              <div className="pure-g">
+                  <div className="pure-u-1-3">
+                      <p>Thirds</p>
+                  </div>
+                  <div className="pure-u-1-3">
+                      <p>Thirds</p>
+                  </div>
+                  <div className="pure-u-1-3">
+                      <p>Thirds</p>
+                  </div>
+              </div>
+          </div>
+
+          <div className="content">
+              <SectionHeader heading="Responsive Grids" />
+
+              <p>
+                  Pure's grid system is also <b>mobile-first</b> and <b>responsive</b>, and you're able to customize the grid by specifying CSS Media Query breakpoints and grid classnames.
+                  {/*If needed, you can <a href="#build-your-pure-starter-kit">customize Pure Grids below</a>, but let's start off with an example.*/}
+              </p>
+
+              <p>
+                  You'll need to <em>also</em> include Pure's <code>grids-responsive.css</code> onto your page:
+              </p>
+
+              <CodeBlock wrap={true}>
+                  {`<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/grids-responsive-min.css">`}
+              </CodeBlock>
+
+              <p>
+                  Here's the default responsive breakpoints included in <code>grids-responsive.css</code>:
+              </p>
+
+              <div className="table-responsive">
+                  <table className="mq-table pure-table-bordered pure-table">
+                      <thead>
+                          <tr>
+                              <th className="highlight">Key</th>
+                              <th className="highlight">CSS Media Query</th>
+                              <th>Applies</th>
+                              <th>Classname</th>
+                          </tr>
+                      </thead>
+                      <tbody>
+                          <tr>
+                              <td className="highlight"><i>None</i></td>
+                              <td className="highlight"><i>None</i></td>
+                              <td><i>Always</i></td>
+                              <td><code>.pure-u-*</code></td>
+                          </tr>
+                          <tr>
+                              <td className="highlight"><b><code>sm</code></b></td>
+                              <td className="mq-table-mq highlight"><code>@media screen and (min-width: 35.5em)</code></td>
+                              <td>≥ <b>568px</b></td>
+                              <td><code>.pure-u-<b>sm</b>-*</code></td>
+                          </tr>
+                          <tr>
+                              <td className="highlight"><b><code>md</code></b></td>
+                              <td className="mq-table-mq highlight"><code>@media screen and (min-width: 48em)</code></td>
+                              <td>≥ <b>768px</b></td>
+                              <td><code>.pure-u-<b>md</b>-*</code></td>
+                          </tr>
+                          <tr>
+                              <td className="highlight"><b><code>lg</code></b></td>
+                              <td className="mq-table-mq highlight"><code>@media screen and (min-width: 64em)</code></td>
+                              <td>≥ <b>1024px</b></td>
+                              <td><code>.pure-u-<b>lg</b>-*</code></td>
+                          </tr>
+                          <tr>
+                              <td className="highlight"><b><code>xl</code></b></td>
+                              <td className="mq-table-mq highlight"><code>@media screen and (min-width: 80em)</code></td>
+                              <td>≥ <b>1280px</b></td>
+                              <td><code>.pure-u-<b>xl</b>-*</code></td>
+                          </tr>
+                      </tbody>
+                  </table>
+              </div>
+
+              <p>
+                  Here's an example of what you'd be able to do. <i>Try resizing your screen to see how the grid responds.</i>
+              </p>
+          </div>
+          <div className="grids-example">
+              <div className="pure-g">
+                  <div className="pure-u-1">.pure-u-1</div>
+                  <div className="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
+                      .pure-u-1<br/>.pure-u-md-1-2<br/>.pure-u-lg-1-4
+                  </div>
+                  <div className="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
+                      .pure-u-1<br/>.pure-u-md-1-2<br/>.pure-u-lg-1-4
+                  </div>
+                  <div className="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
+                      .pure-u-1<br/>.pure-u-md-1-2<br/>.pure-u-lg-1-4
+                  </div>
+                  <div className="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
+                      .pure-u-1<br/>.pure-u-md-1-2<br/>.pure-u-lg-1-4
+                  </div>
+                  <div className="pure-u-1 pure-u-md-3-4">.pure-u-1<br/>.pure-u-md-3-4</div>
+                  <div className="pure-u-1 pure-u-md-1-4">.pure-u-1<br/>.pure-u-md-1-4</div>
+              </div>
+          </div>
+          {/*
+          <div className="content">
+              <aside>
+                  <p>
+                      <a href="/grids/#pure-responsive-grids">Learn More</a> about how to include and use Pure's Responsive Grids system, and how it compares to Basic Grids.
+                  </p>
+              </aside>
+              <h2 id="build-your-pure-starter-kit" className="content-subhead">Build Your Pure Starter Kit<a href="#build-your-pure-starter-kit" className="content-link" title="Heading anchor"></a></h2>
+              <p>
+                  Now that you know how grids work, you might want to customize things to better suit your web project. You can define your own breakpoints by specifying a CSS Media Queries. You can also customize the number of columns that your layout needs.
+              </p>
+              <p>
+                  We'll generate an <code>index.html</code> file, and if needed, a <code>grid.css</code> file that you can download and use as the starting-point for your project.
+              </p>
+              <div className="grid-input">
+                  <ul className="grid-tabs pure-g">
+                      <li className="grid-tab pure-u">
+                          <a data-action="tab" className="grid-tab-link-selected grid-tab-link" href="#mqs">
+                          Media Queries
+                          </a>
+                      </li>
+                      <li className="grid-tab pure-u">
+                          <a data-action="tab" className="grid-tab-link" href="#options">
+                          Grid Options
+                          </a>
+                      </li>
+                  </ul>
+                  <div className="grid-content">
+                      <form id="mqs" className="grid-panel-selected grid-panel pure-form-aligned pure-form">
+                          <h3>Grids Media Queries</h3>
+                          <p>
+                              You can use Pure's default CSS Media Queries which will add <code>grids-responsive.css</code> to your Pure Starter Kit, or we can generate a mobile-first, responsive grid if you provide us with the breakpoints.
+                          </p>
+                          <p>
+                              Pure's generated Responsive Grids is simple to use. It provides you with a specific CSS classname for each Media Query. For example, <code>pure-u-md-*</code> for devices with <code>width &gt;&#x3D; 768px</code>, and <code>pure-u-lg-*</code> for devices with <code>width &gt;&#x3D; 1024px</code>.
+                          </p>
+                          <p>
+                              What Media Queries should your grid system respond to?
+                          </p>
+                          <table id="media-query-table" hidden>
+                              <thead>
+                                  <tr className="pure-g">
+                                      <th className="pure-u-6-24">
+                                          Grid Key <br/>
+                                          <span className="media-query-table-example">
+                                          <code>.pure-u-[key]-*</code>
+                                          </span>
+                                      </th>
+                                      <th className="pure-u-15-24 pure-u-sm-16-24">
+                                          Media Query <br/>
+                                          <span className="media-query-table-example">
+                                          <code>screen and (min-width: 48em)</code>
+                                          </span>
+                                      </th>
+                                  </tr>
+                              </thead>
+                              <tbody>
+                              </tbody>
+                          </table>
+                          <div className="controls">
+                              <button type="button" data-action="add-default-mq" className="pure-button pure-button-primary">
+                                Use Default Media Queries
+                              </button>
+                              <button type="button" data-action="add-mq" className="pure-button">
+                                Add Media Query
+                              </button>
+                          </div>
+                      </form>
+                      <form id="options" className="grid-panel pure-form-aligned pure-form">
+                          <h3>Grid Options</h3>
+                          <p>
+                              Pure has a 5<sup>ths</sup> and 24<sup>ths</sup>-column grid system by default. You define an element's width using fractional classnames, e.g; <code>.pure-u-2-5</code> for <code>width: 40%</code>, or <code>.pure-u-12-24</code> for <code>width: 50%</code>. You can <a href="/grids/#grids-units-sizes">view all the grid units</a> that are available in the default grid.
+                          </p>
+                          <p>
+                              You can customize the number of columns; the default grid is 24 columns. You can also change the Grids classname prefix; the default is <code>.pure-u-</code>.
+                          </p>
+                          <div>
+                              <div className="cols-control pure-control-group">
+                                  <label htmlFor="cols-input">Number of Columns</label>
+                                  <input id="cols-input" data-content="cols-input"
+                                      type="number" min="2" max="100" placeholder="24" />
+                              </div>
+                              <div className="prefix-control pure-control-group">
+                                  <label htmlFor="prefix-input">Grid Prefix</label>
+                                  <input id="prefix-input" data-content='prefix-input'
+                                      type="text" maxLength="20" placeholder=".pure-u-"
+                                      defaultValue="" />
+                              </div>
+                          </div>
+                      </form>
+                  </div>
+              </div>
+              <div className="grid-download">
+                  <p>
+                      Your Pure Starter Kit will be generated below in real-time as you make your customizations. When you're ready, just download it!
+                  </p>
+              </div>
+              <div className="grid-output-download">
+                  <a download href="/start/download"
+                      onClick="return Pure.trackDownload.call(this, 'start', 'default');"
+                      className="download-link pure-button-primary pure-button">Download Your Starter Kit</a>
+              </div>
+              <p>
+                  Here's what the downloaded zip file contains.
+              </p>
+              <div className="grid-output">
+                  <div className="grid-output-tabs pure-g">
+                      <div className="pure-u-1">
+                          <ul className="grid-tabs pure-g">
+                              <li className="grid-tab pure-u">
+                                  <a data-action="tab" className="grid-tab-link-selected grid-tab-link" href="#html">
+                                  index.html
+                                  </a>
+                              </li>
+                              <li className="grid-tab pure-u">
+                                  <a data-action="tab" className="grid-tab-link" href="#grid">
+                                  grid.css
+                                  </a>
+                              </li>
+                              <li className="grid-tab pure-u">
+                                  <a data-action="tab" className="grid-tab-link" href="#grid-old-ie">
+                                  grid-old-ie.css
+                                  </a>
+                              </li>
+                          </ul>
+                      </div>
+                  </div>
+                  <div className="grid-content">
+                      <div id="html" className="grid-panel-selected grid-panel">
+                          <pre className="code" data-language="html"><code>&lt;!doctype html&gt;
+                              &lt;html&gt;
+                              &lt;head&gt;
+                                  &lt;meta charset&#x3D;&quot;utf-8&quot;&gt;
+                                  &lt;meta name&#x3D;&quot;viewport&quot; content&#x3D;&quot;width&#x3D;device-width, initial-scale&#x3D;1.0&quot;&gt;
+
+                                  &lt;title&gt;Your page title&lt;/title&gt;
+
+                                  &lt;link rel&#x3D;&quot;stylesheet&quot; href&#x3D;&quot;https://unpkg.com/purecss@1.0.1/build/pure-min.css&quot;&gt;&lt;/head&gt;
+
+                              &lt;body&gt;
+                                  &lt;!--
+                                  Your HTML goes here. Visit purecss.io/layouts/ for some sample HTML code.
+                                  --&gt;
+                              &lt;/body&gt;
+                              &lt;/html&gt;</code></pre>
+                      </div>
+                      <div id="grid" className="grid-panel">
+                          <div id="css" className="grid-code">
+                              <p>
+                                  You haven't specified any customization that require any additional CSS.
+                              </p>
+                          </div>
+                      </div>
+                      <div id="grid-old-ie" className="grid-panel">
+                          <div id="css-old-ie" className="grid-code">
+                              <p>
+                                  You haven't specified any customization that requires IE-specific CSS.
+                              </p>
+                          </div>
+                      </div>
+                  </div>
+              </div>
+              <aside>
+                  <p>
+                      After downloading your Starter Kit, we recommend checking out <a href="/layouts/">our awesome layouts</a>. They're freely available to download. Use them to get started quickly with your next web project. Happy coding!
+                  </p>
+              </aside>
+          </div>
+          */}
+        </Layout>
+    );
+}
+
+export default Start;

site/src/pages/start/styles.css

@@ -0,0 +1,197 @@
+.pure-form label {
+    font-size: 100%;
+}
+
+.grids-example {
+    border-top: 0;
+}
+
+.grid-input,
+.grid-output {
+    margin-bottom: 1em;
+}
+
+.grid-tabs {
+    padding: 3em 0 0;
+    margin: 0;
+}
+
+
+.grid-output-download {
+    font-size: 1.2em;
+}
+
+.grid-tab-link,
+.grid-tab-link:visited {
+    font-weight: bold;
+    padding: 1em 1em;
+    border: 1px solid transparent;
+    border-bottom-color: transparent;
+    color: #666;
+    transition: all 0.1s;
+    cursor: pointer;
+    display: inline-block;
+    font-size: 0.8em;
+}
+
+.grid-output-tabs .grid-tab-link,
+.grid-output-tabs .grid-tab-link:visited,
+.download-link {
+    padding-left: 1em;
+    padding-right: 1em;
+}
+
+.grid-tab-link-selected,
+.grid-tab-link-selected:visited {
+    border: 1px solid #ccc;
+    border-bottom-color: transparent;
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+}
+
+.grid-content {
+    padding: 0.5em;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    border-top-left-radius: 0;
+    overflow-y: hidden;
+}
+
+.grid-panel {
+    /*
+    By default, we hide these off screen. Not using display:none; to preserve
+    accessibility.
+    */
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+
+}
+.grid-panel-selected {
+    /* when a tab is selected, we remove the position: absolute;*/
+    position: static;
+}
+
+.grid-output .code {
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    margin: 0;
+}
+#css .code,
+#css-old-ie .code {
+    max-height: 35em;
+}
+
+.offset-1-12 {
+    margin-left: 8.33%;
+}
+
+#media-query-table {
+    margin-bottom: 1em;
+    width: 100%;
+}
+
+#media-query-table td {
+    padding: 0.3em;
+}
+
+.media-query-table-example {
+    font-size: 0.875em;
+    font-weight: normal;
+    display: none;
+}
+.media-query-table-example code {
+    background: none;
+    color: inherit;
+    padding: 0;
+}
+
+.mq-key,
+.mq-value {
+    width: 100%;
+}
+
+.controls {
+    text-align: center;
+    margin-top: 1em;
+}
+
+#options .cols-control label,
+#options .prefix-control label {
+    width: 8.75em;
+}
+.cols-control input {
+    text-align: center;
+}
+
+.remove-row {
+    text-align: center;
+}
+
+.remove-mq {
+    background: white;
+    border: 1px solid rgb(229, 53, 53);
+    font-weight: 500;
+    color: rgb(229, 53, 53);
+    margin-top: 0.25em;
+    padding: 0.25em 0.5em;
+    box-shadow: none;
+    -webkit-transition: background 0.1s;
+    -moz-transition: background 0.1s;
+    transition: background 0.1s;
+}
+
+.remove-mq:hover,
+.remove-mq:active {
+    color: white;
+    background: rgb(249, 114, 114);
+    box-shadow: none;
+}
+
+.grids-example [class *= "pure-u"] {
+    font-family: Consolas, 'Liberation Mono', Courier, monospace;
+    text-align: center;
+    padding: 1em 0;
+    border: 1px solid #ddd;
+    border-right: none;
+    border-bottom: none;
+}
+
+.invalid-message {
+    color: #b94a48;
+    font-size: 90%;
+}
+
+.pure-form input[invalid] {
+    border: 1px solid rgb(229, 53, 53);
+}
+
+.download-link {
+    display: block;
+}
+
+@media screen and (min-width: 48em) {
+    .controls {
+        text-align: left;
+    }
+
+    .grid-content {
+        padding: 1em;
+    }
+
+    .grid-tab-link {
+        font-size: 1em;
+    }
+
+    .invalid-message {
+        padding-top: 0.625em;
+    }
+
+    .grid-output-download {
+        font-size: 1.5em;
+    }
+
+    .media-query-table-example {
+        display: block;
+    }
+}

site/src/pages/styles.css

@@ -0,0 +1,273 @@
+/* stylelint-disable docusaurus/copyright-header */
+ .hero {
+     display: block;
+     padding: 0;
+     text-align: center;
+ }
+     .hero-titles {
+         font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
+         padding: 0 1em;
+         margin: 2em auto;
+         max-width: 768px;
+     }
+     .hero-titles .logo {
+         width: 80%;
+         max-width: 419px;
+         margin: 40px 0;
+     }
+     .hero-site {
+         font-size: 400%;
+         font-weight: 200;
+         margin: 0;
+         color: #1f8dd6;
+     }
+     .hero-tagline {
+         font-size: 150%;
+         font-weight: 200;
+         line-height: 1.5;
+         margin: 0 0 1em;
+         color: #666;
+     }
+
+ a.button-cta,
+ a.button-secondary {
+     margin: 0.25em;
+ }
+
+ a.button-cta {
+     background: #1f8dd6;
+     color: #fff;
+     border: 1px solid #1f8dd6;
+ }
+
+ a.button-secondary {
+     background: #fff;
+     color: #666;
+     border: 1px solid #ddd;
+ }
+
+ .size-chart {
+     width: 100%;
+     font-size: 87.5%;
+     line-height: 1.4;
+     margin-bottom: 2em;
+ }
+
+     a.size-chart-item {
+         display: block;
+         color: #fff;
+         padding: 1.45em 0;
+         text-align: center;
+         text-decoration: none;
+         text-transform: capitalize;
+     }
+
+     .size-chart-label {
+         display: inline-block;
+         -webkit-transform: rotate(-90deg);
+         -moz-transform:    rotate(-90deg);
+         -ms-transform:     rotate(-90deg);
+         -o-transform:      rotate(-90deg);
+     }
+     .size-chart-size {
+         display: none;
+     }
+
+     .size-chart-base {
+         background: #1f8dd6;
+     }
+         .size-chart-base .size-chart-size {
+             color: rgb(103, 194, 240);
+         }
+
+     .size-chart-grids {
+         background: rgb(128, 88, 165);
+     }
+         .size-chart-grids .size-chart-size {
+             color: rgb(200, 131, 255);
+         }
+
+     .size-chart-forms {
+         background: #5eb95e;
+     }
+
+         .size-chart-forms .size-chart-size {
+             color: rgb(161, 240, 137);
+         }
+
+     .size-chart-buttons {
+         background: #dd514c;
+     }
+
+         .size-chart-buttons .size-chart-size {
+             color: rgb(236, 164, 154);
+         }
+
+     .size-chart-menus {
+         background: rgb(250, 210, 50);
+     }
+         .size-chart-menus .size-chart-size {
+             color: rgb(255, 240, 134);
+         }
+
+     .size-chart-tables {
+         background: rgb(243, 123, 29);
+     }
+         .size-chart-tables .size-chart-label {
+             margin-left: -0.5em;
+         }
+         .size-chart-tables .size-chart-size {
+             color: rgb(255, 190, 129);
+         }
+
+ .marketing {
+     border-bottom: 1px solid #eee;
+     margin-top: 1em;
+     margin-bottom: 1em;
+     padding-bottom: 2em;
+ }
+ .marketing-customize {
+     margin-bottom: 0;
+     border-bottom: 0;
+     padding-bottom: 0;
+ }
+
+     .marketing .content {
+         margin-bottom: 0;
+     }
+
+     .marketing-header {
+         font-weight: 400;
+     }
+
+     .marketing-diagram {
+         margin: 2em auto;
+     }
+
+ .sample-buttons {
+     margin: 1em auto;
+     padding: 0 0.5em;
+ }
+
+     .sample-button {
+         padding: 0.5em;
+         text-align: center;
+     }
+     .sample-button .pure-button {
+         width: 100%;
+     }
+
+     .button-a {
+         background: #e1f2fa;
+         color: #5992aa;
+     }
+
+     .button-b {
+         background: #fcebbd;
+         color: #af9540;
+     }
+
+     .button-c,
+     .button-d,
+     .button-e {
+         border-radius: 8px;
+     }
+
+     .button-f,
+     .button-g,
+     .button-h {
+         border-radius: 20px;
+     }
+
+     .button-c {
+         background: #333;
+         color: #fff;
+     }
+     .button-d {
+         background: #d3eda3;
+         color: #72962e;
+     }
+
+     .button-e {
+         background: #f5ab9e;
+         color: #8c3a2b;
+     }
+     .button-f {
+         background: #ddaeff;
+         color: #8156a7;
+     }
+
+     .button-g {
+         background: #f57b00;
+         color: #ffca95;
+     }
+
+     .button-h {
+         background: #008ed4;
+         color: #fff;
+     }
+     .sample-button .button-h {
+         width: 50%; /* Updated to 80% at sm breakpoint */
+     }
+
+ @media screen and (min-width: 30em) {
+     .size-chart-tables .size-chart-label {
+         margin-left: 0;
+     }
+ }
+
+ @media screen and (min-width: 35.5em) {
+     .hero {
+         margin-bottom: 3em;
+     }
+
+     .sample-button .button-h {
+         width: 100%;
+     }
+ }
+
+ @media screen and (min-width: 48em) {
+     .hero-titles {
+         padding: 0 2em;
+     }
+     .hero-titles .logo {
+         width: 419px;
+         height: auto;
+     }
+     .hero-site {
+         font-size: 720%;
+     }
+     .hero-tagline {
+         font-size: 220%;
+     }
+
+     a.button-cta,
+     a.button-secondary {
+         font-size: 125%;
+     }
+
+     .size-chart {
+         font-size: 100%;
+     }
+     a.size-chart-item {
+         padding: 0.5em;
+         text-align: left;
+     }
+     .size-chart-label {
+         -webkit-transform: none;
+         -moz-transform:    none;
+         -ms-transform:     none;
+         -o-transform:      none;
+     }
+     .size-chart-size {
+         display: block;
+     }
+
+     .marketing-header {
+         font-size: 150%;
+     }
+
+     .l-wrap .sample-buttons {
+         padding: 0 0.5em;
+     }
+ }

site/src/pages/tables/index.js

@@ -0,0 +1,211 @@
+import Link from '@docusaurus/Link';
+import React from 'react';
+import Layout from '../../theme/Layout';
+import Header from '../../../components/Header';
+import Example from '../../../components/Example';
+import SectionHeader from '../../../components/SectionHeader';
+
+const title = 'Tables';
+const description = 'Simple CSS for HTML tables.';
+
+function Tables() {
+  return (
+    <Layout description={description} title={title}>
+        <Header description={description} title={title} />
+
+        <div className="content">
+            <SectionHeader heading="Default Table" />
+
+            <p>
+              To style an HTML table, add the <code>pure-table</code> classname. This class adds padding and borders to table elements, and emphasizes the header.
+            </p>
+
+            <Example>
+                <table className="pure-table">
+                  <thead>
+                     <tr>
+                        <th>#</th>
+                        <th>Make</th>
+                        <th>Model</th>
+                        <th>Year</th>
+                     </tr>
+                  </thead>
+                  <tbody>
+                     <tr>
+                        <td>1</td>
+                        <td>Honda</td>
+                        <td>Accord</td>
+                        <td>2009</td>
+                     </tr>
+                     <tr>
+                        <td>2</td>
+                        <td>Toyota</td>
+                        <td>Camry</td>
+                        <td>2012</td>
+                     </tr>
+                     <tr>
+                        <td>3</td>
+                        <td>Hyundai</td>
+                        <td>Elantra</td>
+                        <td>2010</td>
+                     </tr>
+                  </tbody>
+                </table>
+            </Example>
+
+            <SectionHeader heading="Bordered Table" />
+
+            <p>
+              To add horizontal and vertical borders to all cells, add the <code>pure-table-bordered</code> classname to the <code>&lt;table&gt;</code> element.
+            </p>
+
+            <Example>
+                <table className="pure-table pure-table-bordered">
+                  <thead>
+                     <tr>
+                        <th>#</th>
+                        <th>Make</th>
+                        <th>Model</th>
+                        <th>Year</th>
+                     </tr>
+                  </thead>
+                  <tbody>
+                     <tr>
+                        <td>1</td>
+                        <td>Honda</td>
+                        <td>Accord</td>
+                        <td>2009</td>
+                     </tr>
+                     <tr>
+                        <td>2</td>
+                        <td>Toyota</td>
+                        <td>Camry</td>
+                        <td>2012</td>
+                     </tr>
+                     <tr>
+                        <td>3</td>
+                        <td>Hyundai</td>
+                        <td>Elantra</td>
+                        <td>2010</td>
+                     </tr>
+                  </tbody>
+                </table>
+            </Example>
+
+            <SectionHeader heading="Table with Horizontal Borders" />
+
+            <p>
+              If you prefer horizontal lines only, add the <code>pure-table-horizontal</code> classname to the <code>&lt;table&gt;</code> element.
+            </p>
+
+            <Example>
+                <table className="pure-table pure-table-horizontal">
+                  <thead>
+                     <tr>
+                        <th>#</th>
+                        <th>Make</th>
+                        <th>Model</th>
+                        <th>Year</th>
+                     </tr>
+                  </thead>
+                  <tbody>
+                     <tr>
+                        <td>1</td>
+                        <td>Honda</td>
+                        <td>Accord</td>
+                        <td>2009</td>
+                     </tr>
+                     <tr>
+                        <td>2</td>
+                        <td>Toyota</td>
+                        <td>Camry</td>
+                        <td>2012</td>
+                     </tr>
+                     <tr>
+                        <td>3</td>
+                        <td>Hyundai</td>
+                        <td>Elantra</td>
+                        <td>2010</td>
+                     </tr>
+                  </tbody>
+                </table>
+            </Example>
+
+            <SectionHeader heading="Striped Table" />
+
+            <p>
+              Large tables are easier to parse visually if rows are easily distinguishable. Adding the <code>pure-table-odd</code> class name to every other <code>&lt;tr&gt;</code> element changes the background of the row and creates a zebra-styled effect.
+            </p>
+
+            <p>
+              <b>Note:</b> In browsers which support the CSS3 <a href="http://caniuse.com/#search=nth-child"><code>nth-child</code> pseudo selector</a> a simpler approach can be used. The <code>pure-table-striped</code> classname can be added to the <code>&lt;table&gt;</code> element and the zebra-styled striping will happen automatically.
+            </p>
+
+            <Example>
+                <table className="pure-table">
+                  <thead>
+                     <tr>
+                        <th>#</th>
+                        <th>Make</th>
+                        <th>Model</th>
+                        <th>Year</th>
+                     </tr>
+                  </thead>
+                  <tbody>
+                     <tr className="pure-table-odd">
+                        <td>1</td>
+                        <td>Honda</td>
+                        <td>Accord</td>
+                        <td>2009</td>
+                     </tr>
+                     <tr>
+                        <td>2</td>
+                        <td>Toyota</td>
+                        <td>Camry</td>
+                        <td>2012</td>
+                     </tr>
+                     <tr className="pure-table-odd">
+                        <td>3</td>
+                        <td>Hyundai</td>
+                        <td>Elantra</td>
+                        <td>2010</td>
+                     </tr>
+                     <tr>
+                        <td>4</td>
+                        <td>Ford</td>
+                        <td>Focus</td>
+                        <td>2008</td>
+                     </tr>
+                     <tr className="pure-table-odd">
+                        <td>5</td>
+                        <td>Nissan</td>
+                        <td>Sentra</td>
+                        <td>2011</td>
+                     </tr>
+                     <tr>
+                        <td>6</td>
+                        <td>BMW</td>
+                        <td>M3</td>
+                        <td>2009</td>
+                     </tr>
+                     <tr className="pure-table-odd">
+                        <td>7</td>
+                        <td>Honda</td>
+                        <td>Civic</td>
+                        <td>2010</td>
+                     </tr>
+                     <tr>
+                        <td>8</td>
+                        <td>Kia</td>
+                        <td>Soul</td>
+                        <td>2010</td>
+                     </tr>
+                  </tbody>
+                </table>
+            </Example>
+        </div>
+    </Layout>
+  );
+}
+
+export default Tables;

site/src/pages/tools/index.js

@@ -0,0 +1,294 @@
+import Link from '@docusaurus/Link';
+import React from 'react';
+import Layout from '../../theme/Layout';
+import Header from '../../../components/Header';
+import CodeBlock from '../../../components/CodeBlock';
+import SectionHeader from '../../../components/SectionHeader';
+
+const title = 'Tools';
+const description = 'Write, manipulate, and do more with CSS.';
+
+function Tools() {
+  return (
+    <Layout description={description} title={title}>
+        <Header description={description} title={title} />
+
+        <div className="content">
+            <SectionHeader heading="Installing Pure with npm" />
+
+            <p>
+                You can add Pure to your project through <a href="https://www.npmjs.com/">npm</a>. This is our recommended way to to integrate Pure into your project's build process and tool chain.
+            </p>
+
+            <CodeBlock>$ npm install purecss --save</CodeBlock>
+
+            <p>
+                <code>require(&#x27;purecss&#x27;)</code> will load an object with the following methods:
+            </p>
+
+            <ul>
+                <li><code>getFile(name)</code></li>
+                &ndash; Retrieve contents of a Pure module file.
+                <li><code>getFilePath(name)</code></li>
+                &ndash; Return full path to a Pure file.
+            </ul>
+
+            <SectionHeader heading="Installing Pure with Bower" />
+
+            <p>
+                You can add Pure to your project through <a href="http://bower.io">Bower</a>. This works great if your website is SSL-encrypted.
+            </p>
+
+            <CodeBlock>$ bower install pure --save</CodeBlock>
+
+            <SectionHeader heading="Installing Pure with Composer" />
+
+            <p>
+                You can also install Pure with <a href="https://getcomposer.org/">Composer</a>.
+            </p>
+
+            <CodeBlock>$ composer require pure-css/purecss</CodeBlock>
+
+            <SectionHeader heading="Extending Pure with Grunt" />
+
+            <p>
+                We've written several tools that help you extend Pure and integrate it with your project's CSS. These tools are available as <b><a href="http://gruntjs.com">Grunt</a></b> plugins that can easily be integrated into your existing <code>Gruntfile.js</code>.
+            </p>
+
+            <aside>
+                <p>
+                    If you haven't used Grunt before, it's very easy to set up. Just head over to the <a href="http://gruntjs.com/getting-started">Getting Started</a> page to learn more.
+                </p>
+            </aside>
+
+            <SectionHeader heading="Extending Pure with Rework" />
+
+            <p>
+                We've taken a layered approach to developing Pure's tooling. Most of the tools are first built as <b><a href="https://github.com/reworkcss/rework">Rework</a></b> plugins. This allows you to compose Pure's Rework plugins together with other Rework plugins. It also allows the Grunt plugins to be written as <em>very thin</em> wrappers.
+            </p>
+
+            <SectionHeader heading="Generating Custom Responsive Grids" />
+
+            <p>
+                Pure was created to help developer's build mobile-first responsive web projects. However, since CSS Media Queries cannot be over-written via CSS, you can use Pure's tooling to customize Pure's Responsive Grids for your project.
+            </p>
+
+            <h3>Via Grunt</h3>
+
+            <p>
+                Install the <a href="https://www.npmjs.org/package/grunt-pure-grids">Pure Grids Grunt Plugin</a> through npm.
+            </p>
+
+            <CodeBlock>$ npm install grunt-pure-grids --save-dev</CodeBlock>
+
+            <p>
+                Next, add it to your <code>Gruntfile.js</code>.
+            </p>
+
+            <CodeBlock>grunt.loadNpmTasks(&#x27;grunt-pure-grids&#x27;);</CodeBlock>
+
+            <p>
+                Finally, add the necessary configuration through the <code>pure_grids</code> task. To see a full list of all configurable properties, check out the <a href="https://www.npmjs.org/package/grunt-pure-grids#readme">README documentation</a>.
+            </p>
+
+            <CodeBlock>
+{`grunt.initConfig({
+    pure_grids: {
+        dest : "build/public/css/main-grid.css",
+        options: {
+            units: 12, // 12-column grid
+            mediaQueries: {
+                sm: 'screen and (min-width: 35.5em)', // 568px
+                md: 'screen and (min-width: 48em)',   // 768px
+                lg: 'screen and (min-width: 64em)',   // 1024px
+                xl: 'screen and (min-width: 80em)'    // 1280px
+            }
+        }
+    }
+});`}
+            </CodeBlock>
+
+            <h3>Via Rework</h3>
+
+            <p>
+                If you're not using Grunt, you can also generate your custom responsive grids through using the <a href="https://www.npmjs.org/package/rework-pure-grids">Pure Grids Rework Plugin</a>. It has the same configuration options as the Grunt plugin &mdash; in fact, this is what powers the Grunt plugin.
+            </p>
+
+            <p>
+                You can install the Rework plugin through npm.
+            </p>
+
+            <CodeBlock>$ npm install rework rework-pure-grids</CodeBlock>
+
+            <p>
+                And it can be used on it's own like this, or along side other Rework plugins you might be using.
+            </p>
+
+            <CodeBlock>
+{`import rework from 'rework';
+import pureGrids from 'rework-pure-grids';
+
+const css = rework('').use(pureGrids.units({
+    mediaQueries: {
+        sm: 'screen and (min-width: 35.5em)', // 568px
+        md: 'screen and (min-width: 48em)',   // 768px
+        lg: 'screen and (min-width: 64em)',   // 1024px
+        xl: 'screen and (min-width: 80em)'    // 1280px
+    }
+})).toString();
+
+// This will log-out the grid CSS.
+console.log(css);`}
+            </CodeBlock>
+
+            {/*
+            <SectionHeader heading="Adapting Mobile-first Designs for Old Browsers" />
+
+            <p>
+                Developing your web project from a mobile-first perspective has benefits:
+            </p>
+
+            <ul>
+                <li>
+                    <p>
+                        CSS rules are easier to add than to remove, so it makes sense to start from the smallest and simplest layout, and add styles for larger screens.
+                    </p>
+                </li>
+                <li>
+                    <p>
+                        Forces you to think about your most important content, instead of shoe-horning desktop experiences into small screens.
+                    </p>
+                </li>
+            </ul>
+
+            <p>
+                However, one of the problems with mobile-first designs is that old browsers that don't support CSS Media Queries (such as IE 8) get a mobile-phone experience, which looks odd on a big screen.
+            </p>
+
+            <p>
+                To solve this, we helped develop the <a href="https://www.npmjs.org/package/grunt-stripmq">Strip MQ Grunt Plugin</a>. By using this Grunt plugin, you're able to write mobile-first CSS, while ensuring that users on IE 8 and below get to view the desktop experience. It's the best of both worlds!
+            </p>
+
+            <h3>Via Grunt</h3>
+
+            <p>
+                Install the <a href="https://www.npmjs.org/package/grunt-stripmq">Strip MQ Grunt Plugin</a> through npm.
+            </p>
+
+            <pre className="code" data-language="shell"><code>$ npm install grunt-stripmq --save-dev</code></pre>
+
+            <p>
+                Next, add the Grunt task to your <code>Gruntfile.js</code>
+            </p>
+
+            <pre className="code" data-language="js"><code>grunt.loadNpmTasks(&#x27;grunt-stripmq&#x27;);</code></pre>
+
+            <p>
+                Add the necessary configuration through the <code>stripmq</code> task. Check out the <a href="https://www.npmjs.org/package/grunt-stripmq#readme">README documentation</a> for a full list of available options.
+            </p>
+
+            <CodeBlock>
+{`grunt.initConfig({
+    stripmq: {
+        all: {
+            files: {
+                // Takes the input file &#x60;grid.css&#x60;, and generates &#x60;grid-old-ie.css&#x60;.
+                &#x27;css/grid-old-ie.css&#x27;: [&#x27;css/grid.css&#x27;],
+
+                // Takes the input file &#x60;app.css&#x60;, and generates &#x60;app-old-ie.css&#x60;.
+                &#x27;css/app-old-ie.css&#x27;: [&#x27;css/app.css&#x27;]
+            }
+        }
+    }
+});`}
+            </CodeBlock>
+
+            <p>
+                Finally, you'll need to add this block in your <code>&lt;head&gt;</code> to let old IE browsers request the generated CSS files.
+            </p>
+
+            <CodeBlock>
+                <link rel="stylesheet" href="css/grid.css" />
+                <link rel="stylesheet" href="css/app.css" />
+            </CodeBlock>
+            */}
+
+            <SectionHeader heading="Mutating Selectors" />
+
+            <p>
+                All selectors defined in Pure's source code begin with the <code>.pure-</code> prefix. However, you may want to change this. To accomplish this task, you can use Pure's tooling to mutate CSS selectors.
+            </p>
+
+            <h3>Via Grunt</h3>
+
+            <p>
+                Install the <a href="https://www.npmjs.org/package/grunt-css-selectors">CSS Selectors Grunt Plugin</a> through npm.
+            </p>
+
+            <CodeBlock>$ npm install grunt-css-selectors --save-dev</CodeBlock>
+
+            <p>
+                Once it's installed, add the task to your <code>Gruntfile.js</code>
+            </p>
+
+            <CodeBlock>grunt.loadNpmTasks(&#x27;grunt-css-selectors&#x27;);</CodeBlock>
+
+            <p>
+                Finally, add the necessary configuration through the <code>css_selectors</code> task. Check out the <a href="https://www.npmjs.org/package/grunt-css-selectors#readme">README documentation</a> for more details.
+            </p>
+
+            <CodeBlock>
+{`grunt.initConfig({
+    css_selectors: {
+        options: {
+            mutations: [
+                {prefix: '.foo'}
+            ]
+        },
+        files: {
+            'dest/foo-prefixed.css': ['src/foo.css'],
+        }
+    }
+});`}
+            </CodeBlock>
+
+            <h3>Via Rework</h3>
+
+            <p>
+                If you're not using Grunt, you can also mutate CSS selectors using the <a href="https://www.npmjs.org/package/rework-mutate-selectors">Mutate Selectors Rework Plugin</a>. It has a similar interface to the Grunt plugin &mdash; in fact, this is what powers the Grunt plugin.
+            </p>
+
+            <p>
+                You can install the Rework plugin through npm.
+            </p>
+
+            <CodeBlock>$ npm install rework rework-mutate-selectors</CodeBlock>
+
+            <p>
+                And it can be used on it's own like this, or along side other Rework plugins you might be using.
+            </p>
+
+            <CodeBlock>
+{`import rework from 'rework';
+import selectors from 'rework-mutate-selectors';
+
+const css = rework(inputCSS)
+    .use(selectors.prefix('.foo'))
+    .use(selectors.replace(/^\.pure/g, '.bar'))
+    .toString();
+
+// This will log-out the resulting CSS.
+console.log(css);`}
+            </CodeBlock>
+
+            <aside>
+                <p>
+                    If you have questions or run into issues while these tools, please file them on their respective GitHub repositories.
+                </p>
+            </aside>
+        </div>
+    </Layout>
+  );
+}
+
+export default Tools;

site/src/theme/Layout.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import Head from '@docusaurus/Head';
+import isInternalUrl from '@docusaurus/isInternalUrl';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+import Menu from '../../components/Menu';
+import Footer from '../../components/Footer';
+
+// load common custom css
+import '../../../build/pure-min.css';
+import '../../../build/grids-responsive-min.css';
+import '../../static/css/main-grid.css';
+import '../../static/css/main.css';
+
+function Layout(props) {
+  const {siteConfig = {}} = useDocusaurusContext();
+  const {
+    favicon,
+    title: siteTitle,
+    themeConfig: {image: defaultImage},
+    url: siteUrl,
+  } = siteConfig;
+  const {
+    children,
+    title,
+    noFooter,
+    description,
+    image,
+    keywords,
+    pageType,
+    permalink,
+    version,
+  } = props;
+  const metaTitle = title ? `${title} - ${siteTitle}` : siteTitle;
+
+  const metaImage = image || defaultImage;
+  let metaImageUrl = siteUrl + useBaseUrl(metaImage);
+  if (!isInternalUrl(metaImage)) {
+    metaImageUrl = metaImage;
+  }
+
+  const faviconUrl = useBaseUrl(favicon);
+
+  return (
+      <>
+        <Head>
+          <meta charset="utf-8" />
+          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+          {metaTitle && <title>{metaTitle}</title>}
+          {metaTitle && <meta property="og:title" content={metaTitle} />}
+          {favicon && <link rel="shortcut icon" href={faviconUrl} />}
+          {description && <meta name="description" content={description} />}
+          {description && (
+            <meta property="og:description" content={description} />
+          )}
+          {version && <meta name="docsearch:version" content={version} />}
+          {keywords && keywords.length && (
+            <meta name="keywords" content={keywords.join(',')} />
+          )}
+          {metaImage && <meta property="og:image" content={metaImageUrl} />}
+          {metaImage && (
+            <meta property="twitter:image" content={metaImageUrl} />
+          )}
+          {metaImage && (
+            <meta name="twitter:image:alt" content={`Image for ${metaTitle}`} />
+          )}
+          {permalink && (
+            <meta property="og:url" content={siteUrl + permalink} />
+          )}
+          <meta name="twitter:card" content="summary_large_image" />
+
+          <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:200" />
+        </Head>
+        <div id="layout">
+            <Menu />
+            <div id="main" className={(title || 'home').toLowerCase()}>
+                {children}
+                <Footer siteConfig={siteConfig} />
+            </div>
+        </div>
+      </>
+  );
+}
+
+export default Layout;

site/static/CNAME_tmp.bk

@@ -0,0 +1 @@
+purecss.io

site/static/css/main-grid.css

@@ -0,0 +1,855 @@
+@media screen and (min-width: 35.5em) {
+    .u-sm-1,
+    .u-sm-1-1,
+    .u-sm-1-2,
+    .u-sm-1-3,
+    .u-sm-2-3,
+    .u-sm-1-4,
+    .u-sm-3-4,
+    .u-sm-1-5,
+    .u-sm-2-5,
+    .u-sm-3-5,
+    .u-sm-4-5,
+    .u-sm-5-5,
+    .u-sm-1-6,
+    .u-sm-5-6,
+    .u-sm-1-8,
+    .u-sm-3-8,
+    .u-sm-5-8,
+    .u-sm-7-8,
+    .u-sm-1-12,
+    .u-sm-5-12,
+    .u-sm-7-12,
+    .u-sm-11-12,
+    .u-sm-1-24,
+    .u-sm-2-24,
+    .u-sm-3-24,
+    .u-sm-4-24,
+    .u-sm-5-24,
+    .u-sm-6-24,
+    .u-sm-7-24,
+    .u-sm-8-24,
+    .u-sm-9-24,
+    .u-sm-10-24,
+    .u-sm-11-24,
+    .u-sm-12-24,
+    .u-sm-13-24,
+    .u-sm-14-24,
+    .u-sm-15-24,
+    .u-sm-16-24,
+    .u-sm-17-24,
+    .u-sm-18-24,
+    .u-sm-19-24,
+    .u-sm-20-24,
+    .u-sm-21-24,
+    .u-sm-22-24,
+    .u-sm-23-24,
+    .u-sm-24-24 {
+        display: inline-block;
+        *display: inline;
+        zoom: 1;
+        letter-spacing: normal;
+        word-spacing: normal;
+        vertical-align: top;
+        text-rendering: auto;
+    }
+
+    .u-sm-1-24 {
+        width: 4.1667%;
+        *width: 4.1357%;
+    }
+
+    .u-sm-1-12,
+    .u-sm-2-24 {
+        width: 8.3333%;
+        *width: 8.3023%;
+    }
+
+    .u-sm-1-8,
+    .u-sm-3-24 {
+        width: 12.5000%;
+        *width: 12.4690%;
+    }
+
+    .u-sm-1-6,
+    .u-sm-4-24 {
+        width: 16.6667%;
+        *width: 16.6357%;
+    }
+
+    .u-sm-1-5 {
+        width: 20%;
+        *width: 19.9690%;
+    }
+
+    .u-sm-5-24 {
+        width: 20.8333%;
+        *width: 20.8023%;
+    }
+
+    .u-sm-1-4,
+    .u-sm-6-24 {
+        width: 25%;
+        *width: 24.9690%;
+    }
+
+    .u-sm-7-24 {
+        width: 29.1667%;
+        *width: 29.1357%;
+    }
+
+    .u-sm-1-3,
+    .u-sm-8-24 {
+        width: 33.3333%;
+        *width: 33.3023%;
+    }
+
+    .u-sm-3-8,
+    .u-sm-9-24 {
+        width: 37.5000%;
+        *width: 37.4690%;
+    }
+
+    .u-sm-2-5 {
+        width: 40%;
+        *width: 39.9690%;
+    }
+
+    .u-sm-5-12,
+    .u-sm-10-24 {
+        width: 41.6667%;
+        *width: 41.6357%;
+    }
+
+    .u-sm-11-24 {
+        width: 45.8333%;
+        *width: 45.8023%;
+    }
+
+    .u-sm-1-2,
+    .u-sm-12-24 {
+        width: 50%;
+        *width: 49.9690%;
+    }
+
+    .u-sm-13-24 {
+        width: 54.1667%;
+        *width: 54.1357%;
+    }
+
+    .u-sm-7-12,
+    .u-sm-14-24 {
+        width: 58.3333%;
+        *width: 58.3023%;
+    }
+
+    .u-sm-3-5 {
+        width: 60%;
+        *width: 59.9690%;
+    }
+
+    .u-sm-5-8,
+    .u-sm-15-24 {
+        width: 62.5000%;
+        *width: 62.4690%;
+    }
+
+    .u-sm-2-3,
+    .u-sm-16-24 {
+        width: 66.6667%;
+        *width: 66.6357%;
+    }
+
+    .u-sm-17-24 {
+        width: 70.8333%;
+        *width: 70.8023%;
+    }
+
+    .u-sm-3-4,
+    .u-sm-18-24 {
+        width: 75%;
+        *width: 74.9690%;
+    }
+
+    .u-sm-19-24 {
+        width: 79.1667%;
+        *width: 79.1357%;
+    }
+
+    .u-sm-4-5 {
+        width: 80%;
+        *width: 79.9690%;
+    }
+
+    .u-sm-5-6,
+    .u-sm-20-24 {
+        width: 83.3333%;
+        *width: 83.3023%;
+    }
+
+    .u-sm-7-8,
+    .u-sm-21-24 {
+        width: 87.5000%;
+        *width: 87.4690%;
+    }
+
+    .u-sm-11-12,
+    .u-sm-22-24 {
+        width: 91.6667%;
+        *width: 91.6357%;
+    }
+
+    .u-sm-23-24 {
+        width: 95.8333%;
+        *width: 95.8023%;
+    }
+
+    .u-sm-1,
+    .u-sm-1-1,
+    .u-sm-5-5,
+    .u-sm-24-24 {
+        width: 100%;
+    }
+}
+
+@media screen and (min-width: 48em) {
+    .u-md-1,
+    .u-md-1-1,
+    .u-md-1-2,
+    .u-md-1-3,
+    .u-md-2-3,
+    .u-md-1-4,
+    .u-md-3-4,
+    .u-md-1-5,
+    .u-md-2-5,
+    .u-md-3-5,
+    .u-md-4-5,
+    .u-md-5-5,
+    .u-md-1-6,
+    .u-md-5-6,
+    .u-md-1-8,
+    .u-md-3-8,
+    .u-md-5-8,
+    .u-md-7-8,
+    .u-md-1-12,
+    .u-md-5-12,
+    .u-md-7-12,
+    .u-md-11-12,
+    .u-md-1-24,
+    .u-md-2-24,
+    .u-md-3-24,
+    .u-md-4-24,
+    .u-md-5-24,
+    .u-md-6-24,
+    .u-md-7-24,
+    .u-md-8-24,
+    .u-md-9-24,
+    .u-md-10-24,
+    .u-md-11-24,
+    .u-md-12-24,
+    .u-md-13-24,
+    .u-md-14-24,
+    .u-md-15-24,
+    .u-md-16-24,
+    .u-md-17-24,
+    .u-md-18-24,
+    .u-md-19-24,
+    .u-md-20-24,
+    .u-md-21-24,
+    .u-md-22-24,
+    .u-md-23-24,
+    .u-md-24-24 {
+        display: inline-block;
+        *display: inline;
+        zoom: 1;
+        letter-spacing: normal;
+        word-spacing: normal;
+        vertical-align: top;
+        text-rendering: auto;
+    }
+
+    .u-md-1-24 {
+        width: 4.1667%;
+        *width: 4.1357%;
+    }
+
+    .u-md-1-12,
+    .u-md-2-24 {
+        width: 8.3333%;
+        *width: 8.3023%;
+    }
+
+    .u-md-1-8,
+    .u-md-3-24 {
+        width: 12.5000%;
+        *width: 12.4690%;
+    }
+
+    .u-md-1-6,
+    .u-md-4-24 {
+        width: 16.6667%;
+        *width: 16.6357%;
+    }
+
+    .u-md-1-5 {
+        width: 20%;
+        *width: 19.9690%;
+    }
+
+    .u-md-5-24 {
+        width: 20.8333%;
+        *width: 20.8023%;
+    }
+
+    .u-md-1-4,
+    .u-md-6-24 {
+        width: 25%;
+        *width: 24.9690%;
+    }
+
+    .u-md-7-24 {
+        width: 29.1667%;
+        *width: 29.1357%;
+    }
+
+    .u-md-1-3,
+    .u-md-8-24 {
+        width: 33.3333%;
+        *width: 33.3023%;
+    }
+
+    .u-md-3-8,
+    .u-md-9-24 {
+        width: 37.5000%;
+        *width: 37.4690%;
+    }
+
+    .u-md-2-5 {
+        width: 40%;
+        *width: 39.9690%;
+    }
+
+    .u-md-5-12,
+    .u-md-10-24 {
+        width: 41.6667%;
+        *width: 41.6357%;
+    }
+
+    .u-md-11-24 {
+        width: 45.8333%;
+        *width: 45.8023%;
+    }
+
+    .u-md-1-2,
+    .u-md-12-24 {
+        width: 50%;
+        *width: 49.9690%;
+    }
+
+    .u-md-13-24 {
+        width: 54.1667%;
+        *width: 54.1357%;
+    }
+
+    .u-md-7-12,
+    .u-md-14-24 {
+        width: 58.3333%;
+        *width: 58.3023%;
+    }
+
+    .u-md-3-5 {
+        width: 60%;
+        *width: 59.9690%;
+    }
+
+    .u-md-5-8,
+    .u-md-15-24 {
+        width: 62.5000%;
+        *width: 62.4690%;
+    }
+
+    .u-md-2-3,
+    .u-md-16-24 {
+        width: 66.6667%;
+        *width: 66.6357%;
+    }
+
+    .u-md-17-24 {
+        width: 70.8333%;
+        *width: 70.8023%;
+    }
+
+    .u-md-3-4,
+    .u-md-18-24 {
+        width: 75%;
+        *width: 74.9690%;
+    }
+
+    .u-md-19-24 {
+        width: 79.1667%;
+        *width: 79.1357%;
+    }
+
+    .u-md-4-5 {
+        width: 80%;
+        *width: 79.9690%;
+    }
+
+    .u-md-5-6,
+    .u-md-20-24 {
+        width: 83.3333%;
+        *width: 83.3023%;
+    }
+
+    .u-md-7-8,
+    .u-md-21-24 {
+        width: 87.5000%;
+        *width: 87.4690%;
+    }
+
+    .u-md-11-12,
+    .u-md-22-24 {
+        width: 91.6667%;
+        *width: 91.6357%;
+    }
+
+    .u-md-23-24 {
+        width: 95.8333%;
+        *width: 95.8023%;
+    }
+
+    .u-md-1,
+    .u-md-1-1,
+    .u-md-5-5,
+    .u-md-24-24 {
+        width: 100%;
+    }
+}
+
+@media screen and (min-width: 58em) {
+    .u-lg-1,
+    .u-lg-1-1,
+    .u-lg-1-2,
+    .u-lg-1-3,
+    .u-lg-2-3,
+    .u-lg-1-4,
+    .u-lg-3-4,
+    .u-lg-1-5,
+    .u-lg-2-5,
+    .u-lg-3-5,
+    .u-lg-4-5,
+    .u-lg-5-5,
+    .u-lg-1-6,
+    .u-lg-5-6,
+    .u-lg-1-8,
+    .u-lg-3-8,
+    .u-lg-5-8,
+    .u-lg-7-8,
+    .u-lg-1-12,
+    .u-lg-5-12,
+    .u-lg-7-12,
+    .u-lg-11-12,
+    .u-lg-1-24,
+    .u-lg-2-24,
+    .u-lg-3-24,
+    .u-lg-4-24,
+    .u-lg-5-24,
+    .u-lg-6-24,
+    .u-lg-7-24,
+    .u-lg-8-24,
+    .u-lg-9-24,
+    .u-lg-10-24,
+    .u-lg-11-24,
+    .u-lg-12-24,
+    .u-lg-13-24,
+    .u-lg-14-24,
+    .u-lg-15-24,
+    .u-lg-16-24,
+    .u-lg-17-24,
+    .u-lg-18-24,
+    .u-lg-19-24,
+    .u-lg-20-24,
+    .u-lg-21-24,
+    .u-lg-22-24,
+    .u-lg-23-24,
+    .u-lg-24-24 {
+        display: inline-block;
+        *display: inline;
+        zoom: 1;
+        letter-spacing: normal;
+        word-spacing: normal;
+        vertical-align: top;
+        text-rendering: auto;
+    }
+
+    .u-lg-1-24 {
+        width: 4.1667%;
+        *width: 4.1357%;
+    }
+
+    .u-lg-1-12,
+    .u-lg-2-24 {
+        width: 8.3333%;
+        *width: 8.3023%;
+    }
+
+    .u-lg-1-8,
+    .u-lg-3-24 {
+        width: 12.5000%;
+        *width: 12.4690%;
+    }
+
+    .u-lg-1-6,
+    .u-lg-4-24 {
+        width: 16.6667%;
+        *width: 16.6357%;
+    }
+
+    .u-lg-1-5 {
+        width: 20%;
+        *width: 19.9690%;
+    }
+
+    .u-lg-5-24 {
+        width: 20.8333%;
+        *width: 20.8023%;
+    }
+
+    .u-lg-1-4,
+    .u-lg-6-24 {
+        width: 25%;
+        *width: 24.9690%;
+    }
+
+    .u-lg-7-24 {
+        width: 29.1667%;
+        *width: 29.1357%;
+    }
+
+    .u-lg-1-3,
+    .u-lg-8-24 {
+        width: 33.3333%;
+        *width: 33.3023%;
+    }
+
+    .u-lg-3-8,
+    .u-lg-9-24 {
+        width: 37.5000%;
+        *width: 37.4690%;
+    }
+
+    .u-lg-2-5 {
+        width: 40%;
+        *width: 39.9690%;
+    }
+
+    .u-lg-5-12,
+    .u-lg-10-24 {
+        width: 41.6667%;
+        *width: 41.6357%;
+    }
+
+    .u-lg-11-24 {
+        width: 45.8333%;
+        *width: 45.8023%;
+    }
+
+    .u-lg-1-2,
+    .u-lg-12-24 {
+        width: 50%;
+        *width: 49.9690%;
+    }
+
+    .u-lg-13-24 {
+        width: 54.1667%;
+        *width: 54.1357%;
+    }
+
+    .u-lg-7-12,
+    .u-lg-14-24 {
+        width: 58.3333%;
+        *width: 58.3023%;
+    }
+
+    .u-lg-3-5 {
+        width: 60%;
+        *width: 59.9690%;
+    }
+
+    .u-lg-5-8,
+    .u-lg-15-24 {
+        width: 62.5000%;
+        *width: 62.4690%;
+    }
+
+    .u-lg-2-3,
+    .u-lg-16-24 {
+        width: 66.6667%;
+        *width: 66.6357%;
+    }
+
+    .u-lg-17-24 {
+        width: 70.8333%;
+        *width: 70.8023%;
+    }
+
+    .u-lg-3-4,
+    .u-lg-18-24 {
+        width: 75%;
+        *width: 74.9690%;
+    }
+
+    .u-lg-19-24 {
+        width: 79.1667%;
+        *width: 79.1357%;
+    }
+
+    .u-lg-4-5 {
+        width: 80%;
+        *width: 79.9690%;
+    }
+
+    .u-lg-5-6,
+    .u-lg-20-24 {
+        width: 83.3333%;
+        *width: 83.3023%;
+    }
+
+    .u-lg-7-8,
+    .u-lg-21-24 {
+        width: 87.5000%;
+        *width: 87.4690%;
+    }
+
+    .u-lg-11-12,
+    .u-lg-22-24 {
+        width: 91.6667%;
+        *width: 91.6357%;
+    }
+
+    .u-lg-23-24 {
+        width: 95.8333%;
+        *width: 95.8023%;
+    }
+
+    .u-lg-1,
+    .u-lg-1-1,
+    .u-lg-5-5,
+    .u-lg-24-24 {
+        width: 100%;
+    }
+}
+
+@media screen and (min-width: 75em) {
+    .u-xl-1,
+    .u-xl-1-1,
+    .u-xl-1-2,
+    .u-xl-1-3,
+    .u-xl-2-3,
+    .u-xl-1-4,
+    .u-xl-3-4,
+    .u-xl-1-5,
+    .u-xl-2-5,
+    .u-xl-3-5,
+    .u-xl-4-5,
+    .u-xl-5-5,
+    .u-xl-1-6,
+    .u-xl-5-6,
+    .u-xl-1-8,
+    .u-xl-3-8,
+    .u-xl-5-8,
+    .u-xl-7-8,
+    .u-xl-1-12,
+    .u-xl-5-12,
+    .u-xl-7-12,
+    .u-xl-11-12,
+    .u-xl-1-24,
+    .u-xl-2-24,
+    .u-xl-3-24,
+    .u-xl-4-24,
+    .u-xl-5-24,
+    .u-xl-6-24,
+    .u-xl-7-24,
+    .u-xl-8-24,
+    .u-xl-9-24,
+    .u-xl-10-24,
+    .u-xl-11-24,
+    .u-xl-12-24,
+    .u-xl-13-24,
+    .u-xl-14-24,
+    .u-xl-15-24,
+    .u-xl-16-24,
+    .u-xl-17-24,
+    .u-xl-18-24,
+    .u-xl-19-24,
+    .u-xl-20-24,
+    .u-xl-21-24,
+    .u-xl-22-24,
+    .u-xl-23-24,
+    .u-xl-24-24 {
+        display: inline-block;
+        *display: inline;
+        zoom: 1;
+        letter-spacing: normal;
+        word-spacing: normal;
+        vertical-align: top;
+        text-rendering: auto;
+    }
+
+    .u-xl-1-24 {
+        width: 4.1667%;
+        *width: 4.1357%;
+    }
+
+    .u-xl-1-12,
+    .u-xl-2-24 {
+        width: 8.3333%;
+        *width: 8.3023%;
+    }
+
+    .u-xl-1-8,
+    .u-xl-3-24 {
+        width: 12.5000%;
+        *width: 12.4690%;
+    }
+
+    .u-xl-1-6,
+    .u-xl-4-24 {
+        width: 16.6667%;
+        *width: 16.6357%;
+    }
+
+    .u-xl-1-5 {
+        width: 20%;
+        *width: 19.9690%;
+    }
+
+    .u-xl-5-24 {
+        width: 20.8333%;
+        *width: 20.8023%;
+    }
+
+    .u-xl-1-4,
+    .u-xl-6-24 {
+        width: 25%;
+        *width: 24.9690%;
+    }
+
+    .u-xl-7-24 {
+        width: 29.1667%;
+        *width: 29.1357%;
+    }
+
+    .u-xl-1-3,
+    .u-xl-8-24 {
+        width: 33.3333%;
+        *width: 33.3023%;
+    }
+
+    .u-xl-3-8,
+    .u-xl-9-24 {
+        width: 37.5000%;
+        *width: 37.4690%;
+    }
+
+    .u-xl-2-5 {
+        width: 40%;
+        *width: 39.9690%;
+    }
+
+    .u-xl-5-12,
+    .u-xl-10-24 {
+        width: 41.6667%;
+        *width: 41.6357%;
+    }
+
+    .u-xl-11-24 {
+        width: 45.8333%;
+        *width: 45.8023%;
+    }
+
+    .u-xl-1-2,
+    .u-xl-12-24 {
+        width: 50%;
+        *width: 49.9690%;
+    }
+
+    .u-xl-13-24 {
+        width: 54.1667%;
+        *width: 54.1357%;
+    }
+
+    .u-xl-7-12,
+    .u-xl-14-24 {
+        width: 58.3333%;
+        *width: 58.3023%;
+    }
+
+    .u-xl-3-5 {
+        width: 60%;
+        *width: 59.9690%;
+    }
+
+    .u-xl-5-8,
+    .u-xl-15-24 {
+        width: 62.5000%;
+        *width: 62.4690%;
+    }
+
+    .u-xl-2-3,
+    .u-xl-16-24 {
+        width: 66.6667%;
+        *width: 66.6357%;
+    }
+
+    .u-xl-17-24 {
+        width: 70.8333%;
+        *width: 70.8023%;
+    }
+
+    .u-xl-3-4,
+    .u-xl-18-24 {
+        width: 75%;
+        *width: 74.9690%;
+    }
+
+    .u-xl-19-24 {
+        width: 79.1667%;
+        *width: 79.1357%;
+    }
+
+    .u-xl-4-5 {
+        width: 80%;
+        *width: 79.9690%;
+    }
+
+    .u-xl-5-6,
+    .u-xl-20-24 {
+        width: 83.3333%;
+        *width: 83.3023%;
+    }
+
+    .u-xl-7-8,
+    .u-xl-21-24 {
+        width: 87.5000%;
+        *width: 87.4690%;
+    }
+
+    .u-xl-11-12,
+    .u-xl-22-24 {
+        width: 91.6667%;
+        *width: 91.6357%;
+    }
+
+    .u-xl-23-24 {
+        width: 95.8333%;
+        *width: 95.8023%;
+    }
+
+    .u-xl-1,
+    .u-xl-1-1,
+    .u-xl-5-5,
+    .u-xl-24-24 {
+        width: 100%;
+    }
+}

site/static/css/main.css

@@ -0,0 +1,626 @@
+* {
+    -webkit-box-sizing: border-box;
+       -moz-box-sizing: border-box;
+            box-sizing: border-box;
+}
+
+*:before,
+*:after {
+    -webkit-box-sizing: border-box;
+       -moz-box-sizing: border-box;
+            box-sizing: border-box;
+}
+
+html, button, input, select, textarea,
+.pure-g [class *= "pure-u"] {
+    font-family: Helvetica, Arial, sans-serif;
+    letter-spacing: 0.01em;
+}
+
+
+/* --------------------------
+ * Element Styles
+ * --------------------------
+*/
+
+body {
+    min-width: 320px;
+    background-color: #fff;
+    color: #777;
+    line-height: 1.6;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-weight: bold;
+    color: rgb(75, 75, 75);
+}
+h3 {
+    font-size: 1.25em;
+}
+h4 {
+    font-size: 1.125em;
+}
+
+a {
+    color: #3b8bba; /* block-background-text-normal */
+    text-decoration: none;
+}
+
+a:visited {
+    color: #265778; /* block-normal-text-normal */
+}
+
+dt {
+    font-weight: bold;
+}
+dd {
+    margin: 0 0 10px 0;
+}
+
+aside {
+    background: #1f8dd6; /* same color as selected state on site menu */
+    margin: 1em 0;
+    padding: 0.3em 1em;
+    border-radius: 3px;
+    color: #fff;
+}
+    aside a, aside a:visited {
+        color: rgb(169, 226, 255);
+    }
+
+
+/* --------------------------
+ * Layout Styles
+ * --------------------------
+*/
+
+/* Navigation Push Styles */
+#layout {
+    position: relative;
+    padding-left: 0;
+}
+    #layout.active #menu {
+        left: 160px;
+        width: 160px;
+    }
+
+/* Apply the .box class on the immediate parent of any grid element (pure-u-*) to apply some padding. */
+.l-box {
+    padding: 1em;
+}
+
+.l-wrap {
+    margin-left: auto;
+    margin-right: auto;
+}
+.content .l-wrap {
+    margin-left: -1em;
+    margin-right: -1em;
+}
+
+
+/* --------------------------
+ * Header Module Styles
+ * --------------------------
+*/
+
+.header {
+    font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    max-width: 768px;
+    margin: 0 auto;
+    padding: 1em;
+    text-align: center;
+    border-bottom: 1px solid #eee;
+    background: #fff;
+    letter-spacing: 0.05em;
+}
+    .header h1 {
+        font-size: 300%;
+        font-weight: 100;
+        margin: 0;
+    }
+     .header h2 {
+        font-size: 125%;
+        font-weight: 100;
+        line-height: 1.5;
+        margin: 0;
+        color: #666;
+        letter-spacing: -0.02em;
+    }
+
+
+ /* --------------------------
+  * Content Module Styles
+  * --------------------------
+ */
+
+/* The content div is placed as a wrapper around all the docs */
+.content {
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 1em;
+    padding-right: 1em;
+    max-width: 768px;
+}
+
+    .content .content-subhead {
+        margin: 2em 0 1em 0;
+        font-weight: 300;
+        color: #888;
+        position: relative;
+    }
+
+    .content .content-spaced {
+        line-height: 1.8;
+    }
+
+    .content .content-quote {
+        font-family: "Georgia", serif;
+        color: #666;
+        font-style: italic;
+        line-height: 1.8;
+        border-left: 5px solid #ddd;
+        padding-left: 1.5em;
+    }
+
+    .content-link {
+        position: absolute;
+        top: 0;
+        right: 0;
+        display: block;
+        height: 100%;
+        width: 20px;
+        background: transparent url('/img/link-icon.png') no-repeat center center;
+        background-size: 20px 20px;
+    }
+
+    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
+        .content-link {
+            background-image: url('/img/link-icon@2x.png');
+        }
+    }
+
+
+/* --------------------------
+ * Code Styles
+ * --------------------------
+*/
+
+pre,
+code {
+    font-family: Consolas, Courier, monospace;
+    color: #333;
+    background: rgb(250, 250, 250);
+}
+
+code {
+    padding: 0.2em 0.4em;
+    white-space: nowrap;
+}
+.content p code {
+    font-size: 90%;
+}
+
+.code {
+    margin-left: -1em;
+    margin-right: -1em;
+    border: 1px solid #eee;
+    border-left-width: 0;
+    border-right-width: 0;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+}
+.code pre {
+    margin: 0;
+}
+.code code {
+    font-size: 95%;
+    white-space: pre;
+    word-wrap: normal;
+    padding: 0;
+    background: none;
+}
+.code-wrap code {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+.example .code {
+    margin-top: 1em;
+}
+
+/* --------------------------
+ * Footer Module Styles
+ * --------------------------
+*/
+
+.footer {
+    font-size: 87.5%;
+    border-top: 1px solid #eee;
+    margin-top: 3.4286em;
+    padding: 1.1429em;
+    background: rgb(250, 250, 250);
+}
+
+.legal {
+    line-height: 1.6;
+    text-align: center;
+    margin: 0 auto;
+}
+
+    .legal-license {
+        margin-top: 0;
+    }
+    .legal-links {
+        list-style: none;
+        padding: 0;
+        margin-bottom: 0;
+    }
+    .legal-copyright {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+
+
+/* --------------------------
+ * Main Navigation Bar Styles
+ * --------------------------
+*/
+
+/* Add transition to containers so they can push in and out */
+#layout,
+#menu,
+.menu-link {
+    -webkit-transition: all 0.2s ease-out;
+    -moz-transition: all 0.2s ease-out;
+    -ms-transition: all 0.2s ease-out;
+    -o-transition: all 0.2s ease-out;
+    transition: all 0.2s ease-out;
+}
+
+#layout.active .menu-link {
+    left: 160px;
+}
+
+#menu {
+    margin-left: -160px; /* "#menu" width */
+    width: 160px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 1000; /* so the menu or its navicon stays above all content */
+    background: #191818;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+}
+    #menu a {
+        color: #999;
+        border: none;
+        white-space: normal;
+        padding: 0.625em 1em;
+    }
+
+    #menu .pure-menu-open {
+        background: transparent;
+        border: 0;
+    }
+
+    #menu .pure-menu ul {
+        border: none;
+        background: transparent;
+        display: block;
+    }
+
+    #menu .pure-menu ul,
+    #menu .pure-menu .menu-item-divided {
+        border-top: 1px solid #333;
+    }
+
+        #menu .pure-menu-list li .pure-menu-link:hover,
+        #menu .pure-menu-list li .pure-menu-link:focus {
+            background: #333;
+        }
+
+    .menu-link {
+        position: fixed;
+        display: block; /* show this only on small screens */
+        top: 0;
+        left: 0; /* "#menu width" */
+        background: #000;
+        background: rgba(0,0,0,0.7);
+        font-size: 11px; /* change this value to increase/decrease button size */
+        z-index: 10;
+        width: 4em;
+        height: 4em;
+        padding: 1em;
+    }
+
+        .menu-link:hover,
+        .menu-link:focus {
+            background: #000;
+        }
+
+        .menu-link span {
+            position: relative;
+            display: block;
+            margin-top: 0.9em;
+        }
+
+        .menu-link span,
+        .menu-link span:before,
+        .menu-link span:after {
+            background-color: #fff;
+            width: 100%;
+            height: .2em;
+            -webkit-transition: all 0.4s;
+               -moz-transition: all 0.4s;
+                -ms-transition: all 0.4s;
+                 -o-transition: all 0.4s;
+                    transition: all 0.4s;
+        }
+
+            .menu-link span:before,
+            .menu-link span:after {
+                position: absolute;
+                top: -.55em;
+                content: " ";
+            }
+
+            .menu-link span:after {
+                top: .55em;
+            }
+
+        .menu-link.active span {
+            background: transparent;
+        }
+
+            .menu-link.active span:before {
+                -webkit-transform: rotate(45deg) translate(.5em, .4em);
+                   -moz-transform: rotate(45deg) translate(.5em, .4em);
+                    -ms-transform: rotate(45deg) translate(.5em, .4em);
+                     -o-transform: rotate(45deg) translate(.5em, .4em);
+                        transform: rotate(45deg) translate(.5em, .4em);
+            }
+
+            .menu-link.active span:after {
+                -webkit-transform: rotate(-45deg) translate(.4em, -.3em);
+                   -moz-transform: rotate(-45deg) translate(.4em, -.3em);
+                    -ms-transform: rotate(-45deg) translate(.4em, -.3em);
+                     -o-transform: rotate(-45deg) translate(.4em, -.3em);
+                        transform: rotate(-45deg) translate(.4em, -.3em);
+            }
+
+    #menu .pure-menu-heading {
+        font-size: 125%;
+        font-weight: 300;
+        letter-spacing: 0.1em;
+        color: #fff;
+        margin-top: 0;
+        padding: 0.5em 0.8em;
+        text-transform: uppercase;
+    }
+    #menu .pure-menu-heading:hover,
+    #menu .pure-menu-heading:focus {
+        color: #999;
+    }
+
+    #menu .pure-menu-item .active {
+        background: #1f8dd6;
+        color: #fff;
+    }
+
+    #menu li.pure-menu-item .active:hover,
+    #menu li.pure-menu-item .active:focus {
+        background: #1f8dd6;
+    }
+
+
+/* ---------------------
+ * Smaller Module Styles
+ * ---------------------
+*/
+
+.pure-img-responsive {
+    max-width: 100%;
+    height: auto;
+}
+
+.pure-paginator .pure-button {
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+}
+
+.pure-button {
+    font-family: inherit;
+}
+a.pure-button-primary {
+    color: white;
+}
+
+
+/* green call to action button class */
+.notice {
+    background-color: #61B842;
+    color: white;
+}
+
+.muted {
+    color: #ccc;
+}
+
+
+
+/* -------------
+ * Table Styles
+ * -------------
+*/
+.pure-table th,
+.pure-table td {
+    padding: 0.5em 1em;
+}
+
+.table-responsive {
+    margin-left: -1em;
+    margin-right: -1em;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    margin-bottom: 1em;
+}
+.table-responsive table {
+    width: 100%;
+    min-width: 35.5em;
+    border-left-width: 0;
+    border-right-width: 0;
+}
+
+.table-responsive .mq-table {
+    width: 100%;
+    min-width: 44em;
+}
+.mq-table th.highlight {
+    background-color: rgb(255, 234, 133);
+}
+.mq-table td.highlight {
+    background-color: rgb(255, 250, 229);
+}
+.mq-table th.highlight code,
+.mq-table td.highlight code {
+    background: rgb(255, 255, 243);
+}
+.mq-table-mq code {
+    font-size: 0.875em;
+}
+
+/* ----------------------------
+ * Example for full-width Grids
+ * ----------------------------
+*/
+
+.grids-example {
+    background: rgb(250, 250, 250);
+    margin: 2em auto;
+    border-top: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
+}
+
+/* --------------------------
+ * State Rules
+ * --------------------------
+*/
+
+
+.is-code-full {
+    text-align: center;
+}
+.is-code-full .code {
+    margin-left: auto;
+    margin-right: auto;
+}
+.is-code-full code {
+    display: inline-block;
+    max-width: 768px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+
+/* --------------------------
+ * Responsive Styles
+ * --------------------------
+*/
+
+@media screen and (min-width: 35.5em) {
+
+    .legal-license {
+        text-align: left;
+        margin: 0;
+    }
+    .legal-copyright,
+    .legal-links,
+    .legal-links li {
+        text-align: right;
+        margin: 0;
+    }
+
+}
+
+@media screen and (min-width: 48em) {
+
+    .l-wrap,
+    .l-wrap .content {
+        padding-left: 1em;
+        padding-right: 1em;
+    }
+    .content .l-wrap {
+        margin-left: -2em;
+        margin-right: -2em;
+    }
+
+    .header,
+    .content {
+        padding-left: 2em;
+        padding-right: 2em;
+    }
+
+    .header h1 {
+        font-size: 320%;
+    }
+    .header h2 {
+        font-size: 128%;
+    }
+
+    .content p {
+        font-size: 1.125em;
+    }
+
+    .code {
+        margin-left: auto;
+        margin-right: auto;
+        border-left-width: 1px;
+        border-right-width: 1px;
+    }
+
+    .table-responsive {
+        margin-left: auto;
+        margin-right: auto;
+    }
+    .table-responsive table {
+        border-left-width: 1px;
+        border-right-width: 1px;
+    }
+
+}
+
+@media (max-width: 58em) {
+    /* Only apply this when the window is smaller. Otherwise, the following
+    case results in extra padding on the left:
+        * Make the window small. (Rotate to portrait on a mobile.)
+        * Tap the menu to trigger the active state.
+        * Make the window large again. (Rotate to landscape on mobile.)
+    */
+    #layout.active {
+        position: relative;
+        left: 160px;
+    }
+}
+
+@media (min-width: 58em) {
+
+    #layout {
+        padding-left: 160px; /* left col width "#menu" */
+        left: 0;
+    }
+    #menu {
+        left: 160px;
+    }
+    .menu-link {
+        position: fixed;
+        left: 160px;
+        display: none;
+    }
+    #layout.active .menu-link {
+        left: 160px;
+    }
+
+}

site/static/js/grids.js

@@ -0,0 +1,16 @@
+(function (window, document) {
+
+    var unitsToggle     = document.querySelector('.grids-show-all'),
+        notReducedUnits = document.querySelectorAll('.grids-unit-not-reduced');
+
+    unitsToggle.onclick = function (e) {
+        [].slice.call(notReducedUnits).forEach(function (unit) {
+            if (e.target.checked) {
+                unit.removeAttribute('hidden');
+            } else {
+                unit.setAttribute('hidden');
+            }
+        });
+    };
+
+}(this, this.document));

site/static/js/menus.js

@@ -0,0 +1,172 @@
+(function (window, document) {
+    'use strict';
+
+    // Enable drop-down menus in Pure
+    // Inspired by YUI3 gallery-simple-menu by Julien LeComte
+    // [https://github.com/yui/yui3-gallery/blob/master/src/gallery-simple-menu/js/simple-menu.js]
+
+    function PureDropdown(dropdownParent) {
+
+        var PREFIX = 'pure-',
+            ACTIVE_CLASS_NAME = PREFIX + 'menu-active',
+            ARIA_ROLE = 'role',
+            ARIA_HIDDEN = 'aria-hidden',
+            MENU_OPEN = 0,
+            MENU_CLOSED = 1,
+            MENU_PARENT_CLASS_NAME = 'pure-menu-has-children',
+            MENU_ACTIVE_SELECTOR = '.pure-menu-active',
+            MENU_LINK_SELECTOR = '.pure-menu-link',
+            MENU_SELECTOR = '.pure-menu-children',
+            DISMISS_EVENT = (window.hasOwnProperty &&
+                window.hasOwnProperty('ontouchstart')) ?
+                    'touchstart' : 'mousedown',
+
+            ARROW_KEYS_ENABLED = true,
+
+            ddm = this; // drop down menu
+
+            this._state = MENU_CLOSED;
+
+            this.show = function () {
+                if (this._state !== MENU_OPEN) {
+                    this._dropdownParent.classList.add(ACTIVE_CLASS_NAME);
+                    this._menu.setAttribute(ARIA_HIDDEN, false);
+                    this._state = MENU_OPEN;
+                }
+            };
+
+            this.hide = function () {
+                if (this._state !== MENU_CLOSED) {
+                    this._dropdownParent.classList.remove(ACTIVE_CLASS_NAME);
+                    this._menu.setAttribute(ARIA_HIDDEN, true);
+                    this._link.focus();
+                    this._state = MENU_CLOSED;
+                }
+            };
+
+            this.toggle = function () {
+                this[this._state === MENU_CLOSED ? 'show' : 'hide']();
+            };
+
+            this.halt = function (e) {
+                e.stopPropagation();
+                e.preventDefault();
+            };
+
+            this._dropdownParent = dropdownParent;
+            this._link = this._dropdownParent.querySelector(MENU_LINK_SELECTOR);
+            this._menu = this._dropdownParent.querySelector(MENU_SELECTOR);
+            this._firstMenuLink = this._menu.querySelector(MENU_LINK_SELECTOR);
+
+            // Set ARIA attributes
+            this._link.setAttribute('aria-haspopup', 'true');
+            this._menu.setAttribute(ARIA_ROLE, 'menu');
+            this._menu.setAttribute('aria-labelledby', this._link.getAttribute('id'));
+            this._menu.setAttribute('aria-hidden', 'true');
+            [].forEach.call(
+                this._menu.querySelectorAll('li'),
+                function(el){
+                    el.setAttribute(ARIA_ROLE, 'presentation');
+                }
+            );
+            [].forEach.call(
+                this._menu.querySelectorAll('a'),
+                function(el){
+                    el.setAttribute(ARIA_ROLE, 'menuitem');
+                }
+            );
+
+            // Toggle on click
+            this._link.addEventListener('click', function (e) {
+                e.stopPropagation();
+                e.preventDefault();
+                ddm.toggle();
+            });
+
+            // Keyboard navigation
+            document.addEventListener('keydown', function (e) {
+                var currentLink,
+                    previousSibling,
+                    nextSibling,
+                    previousLink,
+                    nextLink;
+
+                // if the menu isn't active, ignore
+                if (ddm._state !== MENU_OPEN) {
+                    return;
+                }
+
+                // if the menu is the parent of an open, active submenu, ignore
+                if (ddm._menu.querySelector(MENU_ACTIVE_SELECTOR)) {
+                    return;
+                }
+
+                currentLink = ddm._menu.querySelector(':focus');
+
+                // Dismiss an open menu on ESC
+                if (e.keyCode === 27) {
+                    /* Esc */
+                    ddm.halt(e);
+                    ddm.hide();
+                }
+                // Go to the next link on down arrow
+                else if (ARROW_KEYS_ENABLED && e.keyCode === 40) {
+                    /* Down arrow */
+                    ddm.halt(e);
+                    // get the nextSibling (an LI) of the current link's LI
+                    nextSibling = (currentLink) ? currentLink.parentNode.nextSibling : null;
+                    // if the nextSibling is a text node (not an element), go to the next one
+                    while (nextSibling && nextSibling.nodeType !== 1) {
+                        nextSibling = nextSibling.nextSibling;
+                    }
+                    nextLink = (nextSibling) ? nextSibling.querySelector('.pure-menu-link') : null;
+                    // if there is no currently focused link, focus the first one
+                    if (!currentLink) {
+                        ddm._menu.querySelector('.pure-menu-link').focus();
+                    }
+                    else if (nextLink) {
+                        nextLink.focus();
+                    }
+                }
+                // Go to the previous link on up arrow
+                else if (ARROW_KEYS_ENABLED && e.keyCode === 38) {
+                    /* Up arrow */
+                    ddm.halt(e);
+                    // get the currently focused link
+                    previousSibling = (currentLink) ? currentLink.parentNode.previousSibling : null;
+                    while (previousSibling && previousSibling.nodeType !== 1) {
+                        previousSibling = previousSibling.previousSibling;
+                    }
+                    previousLink = (previousSibling) ? previousSibling.querySelector('.pure-menu-link') : null;
+                    // if there is no currently focused link, focus the last link
+                    if (!currentLink) {
+                        ddm._menu.querySelector('.pure-menu-item:last-child .pure-menu-link').focus();
+                    }
+                    // else if there is a previous item, go to the previous item
+                    else if (previousLink) {
+                        previousLink.focus();
+                    }
+                }
+            });
+
+            // Dismiss an open menu on outside event
+            document.addEventListener(DISMISS_EVENT, function (e) {
+                var target = e.target;
+                if (target !== ddm._link && !ddm._menu.contains(target)) {
+                    ddm.hide();
+                    ddm._link.blur();
+                }
+            });
+
+    }
+
+    function initDropdowns() {
+        var dropdownParents = document.querySelectorAll('.pure-menu-has-children');
+        for (var i = 0; i < dropdownParents.length; i++) {
+            var ddm = new PureDropdown(dropdownParents[i]);
+        }
+    }
+
+    initDropdowns();
+
+}(this, this.document));

site/static/js/track-downloads.js

@@ -0,0 +1,30 @@
+(function (window, document) {
+
+    // Expose as `Pure.trackDownload()`
+    (window.Pure || (window.Pure = {})).trackDownload = trackDownload;
+
+    var HAS_DOWNLOAD_ATTR = 'download' in document.createElement('a');
+
+    function trackDownload(category, name) {
+        var ga   = window.ga,
+            link = this;
+
+        // Quit early if Google Analytics isn't on the page.
+        if (!ga) { return; }
+
+        // Fire off the GA ping to track the download event.
+        ga('send', 'event', category, 'download', name);
+
+        // If the browser does not support the HTML5 `download` attribute give
+        // the GA ping some time to complete before starting the download.
+        if (!HAS_DOWNLOAD_ATTR) {
+            setTimeout(function () {
+                window.location.href = link.href;
+            }, 100);
+
+            // Prevent default.
+            return false;
+        }
+    }
+
+}(this, this.document));

site/static/js/ui.js

@@ -0,0 +1,46 @@
+(function (window, document) {
+
+    var layout   = document.getElementById('layout'),
+        menu     = document.getElementById('menu'),
+        menuLink = document.getElementById('menuLink'),
+        content  = document.getElementById('main');
+
+    function toggleClass(element, className) {
+        var classes = element.className.split(/\s+/),
+            length = classes.length,
+            i = 0;
+
+        for(; i < length; i++) {
+          if (classes[i] === className) {
+            classes.splice(i, 1);
+            break;
+          }
+        }
+        // The className is not found
+        if (length === classes.length) {
+            classes.push(className);
+        }
+
+        element.className = classes.join(' ');
+    }
+
+    function toggleAll(e) {
+        var active = 'active';
+
+        e.preventDefault();
+        toggleClass(layout, active);
+        toggleClass(menu, active);
+        toggleClass(menuLink, active);
+    }
+
+    menuLink.onclick = function (e) {
+        toggleAll(e);
+    };
+
+    content.onclick = function(e) {
+        if (menu.className.indexOf('active') !== -1) {
+            toggleAll(e);
+        }
+    };
+
+}(this, this.document));

site/static/layouts/blog/index.html

@@ -0,0 +1,153 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="A layout example that shows off a blog page with a list of posts.">
+    <title>Blog &ndash; Layout Examples &ndash; Pure</title>
+    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
+    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/grids-responsive-min.css">
+    <link rel="stylesheet" href="/layouts/blog/styles.css">
+</head>
+<body>
+
+<div id="layout" class="pure-g">
+    <div class="sidebar pure-u-1 pure-u-md-1-4">
+        <div class="header">
+            <h1 class="brand-title">A Sample Blog</h1>
+            <h2 class="brand-tagline">Creating a blog layout using Pure</h2>
+
+            <nav class="nav">
+                <ul class="nav-list">
+                    <li class="nav-item">
+                        <a class="pure-button" href="http://purecss.io">Pure</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="pure-button" href="http://yuilibrary.com">YUI Library</a>
+                    </li>
+                </ul>
+            </nav>
+        </div>
+    </div>
+
+    <div class="content pure-u-1 pure-u-md-3-4">
+        <div>
+            <!-- A wrapper for all the blog posts -->
+            <div class="posts">
+                <h1 class="content-subhead">Pinned Post</h1>
+
+                <!-- A single blog post -->
+                <section class="post">
+                    <header class="post-header">
+                        <img width="48" height="48" alt="Tilo Mitra&#x27;s avatar" class="post-avatar" src="/img/common/tilo-avatar.png">
+
+                        <h2 class="post-title">Introducing Pure</h2>
+
+                        <p class="post-meta">
+                            By <a href="#" class="post-author">Tilo Mitra</a> under <a class="post-category post-category-design" href="#">CSS</a> <a class="post-category post-category-pure" href="#">Pure</a>
+                        </p>
+                    </header>
+
+                    <div class="post-description">
+                        <p>
+                            Yesterday at CSSConf, we launched Pure – a new CSS library. Phew! Here are the <a href="https://speakerdeck.com/tilomitra/pure-bliss">slides from the presentation</a>. Although it looks pretty minimalist, we’ve been working on Pure for several months. After many iterations, we have released Pure as a set of small, responsive, CSS modules that you can use in every web project.
+                        </p>
+                    </div>
+                </section>
+            </div>
+
+            <div class="posts">
+                <h1 class="content-subhead">Recent Posts</h1>
+
+                <section class="post">
+                    <header class="post-header">
+                        <img width="48" height="48" alt="Eric Ferraiuolo&#x27;s avatar" class="post-avatar" src="/img/common/ericf-avatar.png">
+
+                        <h2 class="post-title">Everything You Need to Know About Grunt</h2>
+
+                        <p class="post-meta">
+                            By <a class="post-author" href="#">Eric Ferraiuolo</a> under <a class="post-category post-category-js" href="#">JavaScript</a>
+                        </p>
+                    </header>
+
+                    <div class="post-description">
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                        </p>
+                    </div>
+                </section>
+
+                <section class="post">
+                    <header class="post-header">
+                        <img width="48" height="48" alt="Reid Burke&#x27;s avatar" class="post-avatar" src="/img/common/reid-avatar.png">
+
+                        <h2 class="post-title">Photos from CSSConf and JSConf</h2>
+
+                        <p class="post-meta">
+                            By <a class="post-author" href="#">Reid Burke</a> under <a class="post-category" href="#">Uncategorized</a>
+                        </p>
+                    </header>
+
+                    <div class="post-description">
+                        <div class="post-images pure-g">
+                            <div class="pure-u-1 pure-u-md-1-2">
+                                <a href="http://www.flickr.com/photos/uberlife/8915936174/">
+                                    <img alt="Photo of someone working poolside at a resort"
+                                         class="pure-img-responsive"
+                                         src="http://farm8.staticflickr.com/7448/8915936174_8d54ec76c6.jpg">
+                                </a>
+
+                                <div class="post-image-meta">
+                                    <h3>CSSConf Photos</h3>
+                                </div>
+                            </div>
+
+                            <div class="pure-u-1 pure-u-md-1-2">
+                                <a href="http://www.flickr.com/photos/uberlife/8907351301/">
+                                    <img alt="Photo of the sunset on the beach"
+                                         class="pure-img-responsive"
+                                         src="http://farm8.staticflickr.com/7382/8907351301_bd7460cffb.jpg">
+                                </a>
+
+                                <div class="post-image-meta">
+                                    <h3>JSConf Photos</h3>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <section class="post">
+                    <header class="post-header">
+                        <img width="48" height="48" alt="Andrew Wooldridge&#x27;s avatar" class="post-avatar" src="/img/common/andrew-avatar.png">
+
+                        <h2 class="post-title">YUI 3.10.2 Released</h2>
+
+                        <p class="post-meta">
+                            By <a class="post-author" href="#">Andrew Wooldridge</a> under <a class="post-category post-category-yui" href="#">YUI</a>
+                        </p>
+                    </header>
+
+                    <div class="post-description">
+                        <p>
+                            We are happy to announce the release of YUI 3.10.2! You can find it now on the Yahoo! CDN, download it directly, or pull it in via npm. We’ve also updated the YUI Library website with the latest documentation.
+                        </p>
+                    </div>
+                </section>
+            </div>
+
+            <div class="footer">
+                <div class="pure-menu pure-menu-horizontal">
+                    <ul>
+                        <li class="pure-menu-item"><a href="http://purecss.io/" class="pure-menu-link">About</a></li>
+                        <li class="pure-menu-item"><a href="http://twitter.com/yuilibrary/" class="pure-menu-link">Twitter</a></li>
+                        <li class="pure-menu-item"><a href="http://github.com/pure-css/pure/" class="pure-menu-link">GitHub</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+</body>
+</html>

site/static/layouts/blog/styles.css

@@ -0,0 +1,178 @@
+* {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+a {
+    text-decoration: none;
+    color: rgb(61, 146, 201);
+}
+a:hover,
+a:focus {
+    text-decoration: underline;
+}
+
+h3 {
+    font-weight: 100;
+}
+
+/* LAYOUT CSS */
+.pure-img-responsive {
+    max-width: 100%;
+    height: auto;
+}
+
+#layout {
+    padding: 0;
+}
+
+.header {
+    text-align: center;
+    top: auto;
+    margin: 3em auto;
+}
+
+.sidebar {
+    background: rgb(61, 79, 93);
+    color: #fff;
+}
+
+.brand-title,
+.brand-tagline {
+    margin: 0;
+}
+.brand-title {
+    text-transform: uppercase;
+}
+.brand-tagline {
+    font-weight: 300;
+    color: rgb(176, 202, 219);
+}
+
+.nav-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+.nav-item {
+    display: inline-block;
+    *display: inline;
+    zoom: 1;
+}
+.nav-item a {
+    background: transparent;
+    border: 2px solid rgb(176, 202, 219);
+    color: #fff;
+    margin-top: 1em;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    font-size: 85%;
+}
+.nav-item a:hover,
+.nav-item a:focus {
+    border: 2px solid rgb(61, 146, 201);
+    text-decoration: none;
+}
+
+.content-subhead {
+    text-transform: uppercase;
+    color: #aaa;
+    border-bottom: 1px solid #eee;
+    padding: 0.4em 0;
+    font-size: 80%;
+    font-weight: 500;
+    letter-spacing: 0.1em;
+}
+
+.content {
+    padding: 2em 1em 0;
+}
+
+.post {
+    padding-bottom: 2em;
+}
+.post-title {
+    font-size: 2em;
+    color: #222;
+    margin-bottom: 0.2em;
+}
+.post-avatar {
+    border-radius: 50px;
+    float: right;
+    margin-left: 1em;
+}
+.post-description {
+    font-family: Georgia, "Cambria", serif;
+    color: #444;
+    line-height: 1.8em;
+}
+.post-meta {
+    color: #999;
+    font-size: 90%;
+    margin: 0;
+}
+
+.post-category {
+    margin: 0 0.1em;
+    padding: 0.3em 1em;
+    color: #fff;
+    background: #999;
+    font-size: 80%;
+}
+    .post-category-design {
+        background: #5aba59;
+    }
+    .post-category-pure {
+        background: #4d85d1;
+    }
+    .post-category-yui {
+        background: #8156a7;
+    }
+    .post-category-js {
+        background: #df2d4f;
+    }
+
+.post-images {
+    margin: 1em 0;
+}
+.post-image-meta {
+    margin-top: -3.5em;
+    margin-left: 1em;
+    color: #fff;
+    text-shadow: 0 1px 1px #333;
+}
+
+.footer {
+    padding: 1em 0;
+}
+.footer a {
+    color: #ccc;
+    font-size: 80%;
+}
+.footer .pure-menu a:hover,
+.footer .pure-menu a:focus {
+    background: none;
+}
+
+@media (min-width: 48em) {
+    .content {
+        padding: 2em 3em 0;
+        margin-left: 25%;
+    }
+
+    .header {
+        margin: 80% 2em 0;
+        text-align: right;
+    }
+
+    .sidebar {
+        position: fixed;
+        top: 0;
+        bottom: 0;
+    }
+
+    .footer {
+        text-align: center;
+    }
+}

site/static/layouts/email/index.html

@@ -0,0 +1,176 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="A layout example that shows off a responsive email layout.">
+    <title>Email &ndash; Layout Examples &ndash; Pure</title>
+    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
+    <link rel="stylesheet" href="/layouts/email/styles.css">
+</head>
+<body>
+
+<div id="layout" class="content pure-g">
+    <div id="nav" class="pure-u">
+        <a href="#" class="nav-menu-button">Menu</a>
+
+        <div class="nav-inner">
+            <button class="primary-button pure-button">Compose</button>
+
+            <div class="pure-menu">
+                <ul class="pure-menu-list">
+                    <li class="pure-menu-item"><a href="#" class="pure-menu-link">Inbox <span class="email-count">(2)</span></a></li>
+                    <li class="pure-menu-item"><a href="#" class="pure-menu-link">Important</a></li>
+                    <li class="pure-menu-item"><a href="#" class="pure-menu-link">Sent</a></li>
+                    <li class="pure-menu-item"><a href="#" class="pure-menu-link">Drafts</a></li>
+                    <li class="pure-menu-item"><a href="#" class="pure-menu-link">Trash</a></li>
+                    <li class="pure-menu-heading">Labels</li>
+                    <li class="pure-menu-item"><a href="#" class="pure-menu-link"><span class="email-label-personal"></span>Personal</a></li>
+                    <li class="pure-menu-item"><a href="#" class="pure-menu-link"><span class="email-label-work"></span>Work</a></li>
+                    <li class="pure-menu-item"><a href="#" class="pure-menu-link"><span class="email-label-travel"></span>Travel</a></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+
+    <div id="list" class="pure-u-1">
+        <div class="email-item email-item-selected pure-g">
+            <div class="pure-u">
+                <img width="64" height="64" alt="Tilo Mitra&#x27;s avatar" class="email-avatar" src="/img/common/tilo-avatar.png">
+            </div>
+
+            <div class="pure-u-3-4">
+                <h5 class="email-name">Tilo Mitra</h5>
+                <h4 class="email-subject">Hello from Toronto</h4>
+                <p class="email-desc">
+                    Hey, I just wanted to check in with you from Toronto. I got here earlier today.
+                </p>
+            </div>
+        </div>
+
+        <div class="email-item email-item-unread pure-g">
+            <div class="pure-u">
+                <img width="64" height="64" alt="Eric Ferraiuolo&#x27;s avatar" class="email-avatar" src="/img/common/ericf-avatar.png">
+            </div>
+
+            <div class="pure-u-3-4">
+                <h5 class="email-name">Eric Ferraiuolo</h5>
+                <h4 class="email-subject">Re: Pull Requests</h4>
+                <p class="email-desc">
+                    Hey, I had some feedback for pull request #51. We should center the menu so it looks better on mobile.
+                </p>
+            </div>
+        </div>
+
+        <div class="email-item email-item-unread pure-g">
+            <div class="pure-u">
+                <img width="64" height="64" alt="YUI&#x27;s avatar" class="email-avatar" src="/img/common/yui-avatar.png">
+            </div>
+
+            <div class="pure-u-3-4">
+                <h5 class="email-name">YUI Library</h5>
+                <h4 class="email-subject">You have 5 bugs assigned to you</h4>
+                <p class="email-desc">
+                    Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla.
+                </p>
+            </div>
+        </div>
+
+        <div class="email-item pure-g">
+            <div class="pure-u">
+                <img width="64" height="64" alt="Reid Burke&#x27;s avatar" class="email-avatar" src="/img/common/reid-avatar.png">
+            </div>
+
+            <div class="pure-u-3-4">
+                <h5 class="email-name">Reid Burke</h5>
+                <h4 class="email-subject">Re: Design Language</h4>
+                <p class="email-desc">
+                    Excepteur sint occaecat cupidatat non proident, sunt in culpa.
+                </p>
+            </div>
+        </div>
+
+        <div class="email-item pure-g">
+            <div class="pure-u">
+                <img width="64" height="64" alt="Andrew Wooldridge&#x27;s avatar" class="email-avatar" src="/img/common/andrew-avatar.png">
+            </div>
+
+            <div class="pure-u-3-4">
+                <h5 class="email-name">Andrew Wooldridge</h5>
+                <h4 class="email-subject">YUI Blog Updates?</h4>
+                <p class="email-desc">
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
+                </p>
+            </div>
+        </div>
+
+        <div class="email-item pure-g">
+            <div class="pure-u">
+                <img width="64" height="64" alt="Yahoo! Finance&#x27;s Avatar" class="email-avatar" src="/img/common/yfinance-avatar.png">
+            </div>
+
+            <div class="pure-u-3-4">
+                <h5 class="email-name">Yahoo! Finance</h5>
+                <h4 class="email-subject">How to protect your finances from winter storms</h4>
+                <p class="email-desc">
+                    Mauris tempor mi vitae sem aliquet pharetra. Fusce in dui purus, nec malesuada mauris.
+                </p>
+            </div>
+        </div>
+
+        <div class="email-item pure-g">
+            <div class="pure-u">
+                <img width="64" height="64" alt="Yahoo! News&#x27; avatar" class="email-avatar" src="/img/common/ynews-avatar.png">
+            </div>
+
+            <div class="pure-u-3-4">
+                <h5 class="email-name">Yahoo! News</h5>
+                <h4 class="email-subject">Summary for April 3rd, 2012</h4>
+                <p class="email-desc">
+                    We found 10 news articles that you may like.
+                </p>
+            </div>
+        </div>
+    </div>
+
+    <div id="main" class="pure-u-1">
+        <div class="email-content">
+            <div class="email-content-header pure-g">
+                <div class="pure-u-1-2">
+                    <h1 class="email-content-title">Hello from Toronto</h1>
+                    <p class="email-content-subtitle">
+                        From <a>Tilo Mitra</a> at <span>3:56pm, April 3, 2012</span>
+                    </p>
+                </div>
+
+                <div class="email-content-controls pure-u-1-2">
+                    <button class="secondary-button pure-button">Reply</button>
+                    <button class="secondary-button pure-button">Forward</button>
+                    <button class="secondary-button pure-button">Move to</button>
+                </div>
+            </div>
+
+            <div class="email-content-body">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                </p>
+                <p>
+                    Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+                <p>
+                    Aliquam ac feugiat dolor. Proin mattis massa sit amet enim iaculis tincidunt. Mauris tempor mi vitae sem aliquet pharetra. Fusce in dui purus, nec malesuada mauris. Curabitur ornare arcu quis mi blandit laoreet. Vivamus imperdiet fermentum mauris, ac posuere urna tempor at. Duis pellentesque justo ac sapien aliquet egestas. Morbi enim mi, porta eget ullamcorper at, pharetra id lorem.
+                </p>
+                <p>
+                    Donec sagittis dolor ut quam pharetra pretium varius in nibh. Suspendisse potenti. Donec imperdiet, velit vel adipiscing bibendum, leo eros tristique augue, eu rutrum lacus sapien vel quam. Nam orci arcu, luctus quis vestibulum ut, ullamcorper ut enim. Morbi semper erat quis orci aliquet condimentum. Nam interdum mauris sed massa dignissim rhoncus.
+                </p>
+                <p>
+                    Regards,<br>
+                    Tilo
+                </p>
+            </div>
+        </div>
+    </div>
+</div>
+
+</body>
+</html>

site/static/layouts/email/styles.css

@@ -0,0 +1,274 @@
+/*
+ * -- BASE STYLES --
+ * Most of these are inherited from Base, but I want to change a few.
+ */
+body {
+    color: #333;
+}
+
+
+
+a {
+    text-decoration: none;
+    color: #1b98f8;
+}
+
+
+/*
+ * -- HELPER STYLES --
+ * Over-riding some of the .pure-button styles to make my buttons look unique
+ */
+.primary-button,
+.secondary-button {
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+    border-radius: 20px;
+}
+.primary-button {
+    color: #fff;
+    background: #1b98f8;
+    margin: 1em 0;
+}
+.secondary-button {
+    background: #fff;
+    border: 1px solid #ddd;
+    color: #666;
+    padding: 0.5em 2em;
+    font-size: 80%;
+}
+
+/*
+ * -- LAYOUT STYLES --
+ * This layout consists of three main elements, `#nav` (navigation bar), `#list` (email list), and `#main` (email content). All 3 elements are within `#layout`
+ */
+#layout, #nav, #list, #main {
+    margin: 0;
+    padding: 0;
+}
+
+/* Make the navigation 100% width on phones */
+#nav {
+    width: 100%;
+    height: 40px;
+    position: relative;
+    background: rgb(37, 42, 58);
+    text-align: center;
+}
+/* Show the "Menu" button on phones */
+#nav .nav-menu-button {
+    display: block;
+    top: 0.5em;
+    right: 0.5em;
+    position: absolute;
+}
+
+/* When "Menu" is clicked, the navbar should be 80% height */
+#nav.active {
+    height: 80%;
+}
+/* Don't show the navigation items... */
+.nav-inner {
+    display: none;
+}
+
+/* ...until the "Menu" button is clicked */
+#nav.active .nav-inner {
+    display: block;
+    padding: 2em 0;
+}
+
+
+/*
+ * -- NAV BAR STYLES --
+ * Styling the default .pure-menu to look a little more unique.
+ */
+#nav .pure-menu {
+    background: transparent;
+    border: none;
+    text-align: left;
+}
+    #nav .pure-menu-link:hover,
+    #nav .pure-menu-link:focus {
+        background: rgb(55, 60, 90);
+    }
+    #nav .pure-menu-link {
+        color: #fff;
+        margin-left: 0.5em;
+    }
+    #nav .pure-menu-heading {
+        border-bottom: none;
+        font-size:110%;
+        color: rgb(75, 113, 151);
+    }
+
+
+/*
+ * -- EMAIL STYLES --
+ * Styles relevant to the email messages, labels, counts, and more.
+ */
+.email-count {
+    color: rgb(75, 113, 151);
+}
+
+.email-label-personal,
+.email-label-work,
+.email-label-travel {
+    width: 15px;
+    height: 15px;
+    display: inline-block;
+    margin-right: 0.5em;
+    border-radius: 3px;
+}
+.email-label-personal {
+    background: #ffc94c;
+}
+.email-label-work {
+    background: #41ccb4;
+}
+.email-label-travel {
+    background: #40c365;
+}
+
+
+/* Email Item Styles */
+.email-item {
+    padding: 0.9em 1em;
+    border-bottom: 1px solid #ddd;
+    border-left: 6px solid transparent;
+}
+    .email-avatar {
+        border-radius: 3px;
+        margin-right: 0.5em;
+    }
+    .email-name,
+    .email-subject {
+        margin: 0;
+    }
+    .email-name {
+        text-transform: uppercase;
+        color: #999;
+    }
+    .email-desc {
+        font-size: 80%;
+        margin: 0.4em 0;
+    }
+
+.email-item-selected {
+    background: #eee;
+}
+.email-item-unread {
+    border-left: 6px solid #1b98f8;
+}
+
+/* Email Content Styles */
+.email-content-header, .email-content-body, .email-content-footer {
+    padding: 1em 2em;
+}
+    .email-content-header {
+        border-bottom: 1px solid #ddd;
+    }
+
+        .email-content-title {
+            margin: 0.5em 0 0;
+        }
+        .email-content-subtitle {
+            font-size: 1em;
+            margin: 0;
+            font-weight: normal;
+        }
+            .email-content-subtitle span {
+                color: #999;
+            }
+    .email-content-controls {
+        margin-top: 2em;
+        text-align: right;
+    }
+        .email-content-controls .secondary-button {
+            margin-bottom: 0.3em;
+        }
+
+    .email-avatar {
+        width: 40px;
+        height: 40px;
+    }
+
+
+/*
+ * -- TABLET (AND UP) MEDIA QUERIES --
+ * On tablets and other medium-sized devices, we want to customize some
+ * of the mobile styles.
+ */
+@media (min-width: 40em) {
+
+    /* Move the layout over so we can fit the nav + list in on the left */
+    #layout {
+        padding-left:500px; /* "left col (nav + list)" width */
+        position: relative;
+    }
+
+    /* These are position:fixed; elements that will be in the left 500px of the screen */
+    #nav, #list {
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        overflow: auto;
+    }
+    #nav {
+        margin-left:-500px; /* "left col (nav + list)" width */
+        width:150px;
+        height: 100%;
+    }
+
+    /* Show the menu items on the larger screen */
+    .nav-inner {
+        display: block;
+        padding: 2em 0;
+    }
+
+    /* Hide the "Menu" button on larger screens */
+    #nav .nav-menu-button {
+        display: none;
+    }
+
+    #list {
+        margin-left: -350px;
+        width: 100%;
+        height: 33%;
+        border-bottom: 1px solid #ddd;
+    }
+
+    #main {
+        position: fixed;
+        top: 33%;
+        right: 0;
+        bottom: 0;
+        left: 150px;
+        overflow: auto;
+        width: auto; /* so that it's not 100% */
+    }
+
+}
+
+/*
+ * -- DESKTOP (AND UP) MEDIA QUERIES --
+ * On desktops and other large-sized devices, we want to customize some
+ * of the mobile styles.
+ */
+@media (min-width: 60em) {
+
+    /* This will take up the entire height, and be a little thinner */
+    #list {
+        margin-left: -350px;
+        width:350px;
+        height: 100%;
+        border-right: 1px solid #ddd;
+    }
+
+    /* This will now take up it's own column, so don't need position: fixed; */
+    #main {
+        position: static;
+        margin: 0;
+        padding: 0;
+    }
+}

site/static/layouts/gallery/index.html

@@ -0,0 +1,170 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="A layout example that shows off a responsive photo gallery.">
+    <title>Photo Gallery &ndash; Layout Examples &ndash; Pure</title>
+    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
+    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/grids-responsive-min.css">
+    <link rel="stylesheet" href="/layouts/gallery/styles.css">
+</head>
+<body>
+
+<div>
+    <div class="header">
+        <div class="pure-menu pure-menu-horizontal">
+            <a class="pure-menu-heading" href="">Photo Gallery</a>
+
+            <ul class="pure-menu-list">
+                <li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Home</a></li>
+                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Blog</a></li>
+                <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
+            </ul>
+        </div>
+    </div>
+
+    <div class="pure-g">
+        <div class="photo-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-3">
+            <a href="http://www.dillonmcintosh.tumblr.com/">
+                <img src="http://24.media.tumblr.com/d6b9403c704c3e5aa1725c106e8a9430/tumblr_mvyxd9PUpZ1st5lhmo1_1280.jpg"
+                     alt="Beach">
+            </a>
+
+            <aside class="photo-box-caption">
+                <span>by <a href="http://www.dillonmcintosh.tumblr.com/">Dillon McIntosh</a></span>
+            </aside>
+        </div>
+
+        <div class="text-box pure-u-1 pure-u-md-1-2 pure-u-lg-2-3">
+            <div class="l-box">
+                <h1 class="text-box-head">Photos from around the world</h1>
+                <p class="text-box-subhead">A collection of beautiful photos gathered from Unsplash.com.</p>
+            </div>
+        </div>
+
+        <div class="photo-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-3">
+            <a href="https://www.flickr.com/photos/leshaines123/9199788659/in/photolist-f1XjDR-oqUsF4-eGN3fd-uLvGyn-nsUXqP-6tKPeq-h2Bwtz-6oVtec-3vzcD-nhKUBn-eGN7RY-atDkE4-6qpKgh-5qhbkM-eXSJSR-8YGjfD-eXSK7n-c3hvqo-ddvqc2-h1FgsH-4W6bip-dcnDYJ-ejny6W-bEnete-qoSUSt-nyApt1-cs1Paf-oanrNv-dmE5c9-c4Sgiq-nLYPa4-eHQbYp-fn8csk-uq4gKy-fp186j-7ZcaSx-6wMKEA-kERNCe-veHJHy-eGNaj5-4VddEM-rXUqrU-9X8YXf-87nMXX-tKCh7h-u88G4h-nHuLus-9WPUyn-8fjvkU-nKyT33">
+                <img src="https://c2.staticflickr.com/6/5515/9199788659_818383d0b8_k.jpg"
+                     alt="Meadow">
+            </a>
+
+            <aside class="photo-box-caption">
+                <span>
+                    by <a href="https://www.flickr.com/photos/leshaines123/9199788659/in/photolist-f1XjDR-oqUsF4-eGN3fd-uLvGyn-nsUXqP-6tKPeq-h2Bwtz-6oVtec-3vzcD-nhKUBn-eGN7RY-atDkE4-6qpKgh-5qhbkM-eXSJSR-8YGjfD-eXSK7n-c3hvqo-ddvqc2-h1FgsH-4W6bip-dcnDYJ-ejny6W-bEnete-qoSUSt-nyApt1-cs1Paf-oanrNv-dmE5c9-c4Sgiq-nLYPa4-eHQbYp-fn8csk-uq4gKy-fp186j-7ZcaSx-6wMKEA-kERNCe-veHJHy-eGNaj5-4VddEM-rXUqrU-9X8YXf-87nMXX-tKCh7h-u88G4h-nHuLus-9WPUyn-8fjvkU-nKyT33">Les Haines</a>
+                </span>
+            </aside>
+        </div>
+
+        <div class="photo-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-3">
+            <a href="http://www.nilssonlee.se/">
+                <img src="http://24.media.tumblr.com/23e3f4bb271b8bdc415275fb7061f204/tumblr_mve3rvxwaP1st5lhmo1_1280.jpg"
+                     alt="City">
+            </a>
+
+            <aside class="photo-box-caption">
+                <span>
+                    by <a href="http://www.nilssonlee.se/">Jonas Nilsson Lee</a>
+                </span>
+            </aside>
+        </div>
+
+        <div class="photo-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-3">
+            <a href="http://www.flickr.com/photos/rulasibai/">
+                <img src="http://24.media.tumblr.com/ac840897b5f73fa6bc43f73996f02572/tumblr_mrraat0H431st5lhmo1_1280.jpg"
+                     alt="Flowers">
+            </a>
+
+            <aside class="photo-box-caption">
+                <span>
+                    by <a href="http://www.flickr.com/photos/rulasibai/">Rula Sibai</a>
+                </span>
+            </aside>
+        </div>
+
+        <div class="photo-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-3">
+            <a href="http://www.flickr.com/photos/charliefoster/">
+                <img src="http://24.media.tumblr.com/e100564a3e73c9456acddb9f62f96c79/tumblr_mufs8mix841st5lhmo1_1280.jpg"
+                     alt="Bridge">
+            </a>
+
+            <aside class="photo-box-caption">
+                <span>
+                    by <a href="http://www.flickr.com/photos/charliefoster/">Charlie Foster</a>
+                </span>
+            </aside>
+        </div>
+
+        <div class="photo-box photo-box-thin pure-u-1 pure-u-lg-2-3">
+            <a href="https://www.flickr.com/photos/82955120@N05/12024271573/in/photolist-jjxx28-f2vns5-jjw3rg-phetyV-djcGV4-7TBwup-7DxDnn-d4c1eC-aYoN8H-dBd8UG-ayQR7Z-8yhyLk-4nTgvd-dGtHuM-6WHtpP-9Dz8tA-gtnVfQ-rkCwz9-aYCE1B-hnK3Xs-axv6P4-pFPBdL-9vFwzg-afJk9N-dd3EJJ-oF1Nc2-aYoMCx-xojot-4Ypyo9-6BxaC2-6ybPn5-HSvt5-asaoZL-dd3CtM-9RJXk3-HSuZp-fe9yXi-7irigF-pgqPwH-9QQ2SU-dd3C2T-ccB6t5-fhtH3c-odGZC3-a4ppMF-ohvnyp-uiUswa-uYhWFR-6Cb4M6-5GoD9y">
+                <img src="https://c2.staticflickr.com/4/3676/12024271573_d266422362_h.jpg"
+                     alt="Balloons">
+            </a>
+
+            <aside class="photo-box-caption">
+                <span>
+                    by <a href="https://www.flickr.com/photos/82955120@N05/12024271573/in/photolist-jjxx28-f2vns5-jjw3rg-phetyV-djcGV4-7TBwup-7DxDnn-d4c1eC-aYoN8H-dBd8UG-ayQR7Z-8yhyLk-4nTgvd-dGtHuM-6WHtpP-9Dz8tA-gtnVfQ-rkCwz9-aYCE1B-hnK3Xs-axv6P4-pFPBdL-9vFwzg-afJk9N-dd3EJJ-oF1Nc2-aYoMCx-xojot-4Ypyo9-6BxaC2-6ybPn5-HSvt5-asaoZL-dd3CtM-9RJXk3-HSuZp-fe9yXi-7irigF-pgqPwH-9QQ2SU-dd3C2T-ccB6t5-fhtH3c-odGZC3-a4ppMF-ohvnyp-uiUswa-uYhWFR-6Cb4M6-5GoD9y">Nicolas Raymond</a>
+                </span>
+            </aside>
+        </div>
+
+        <div class="photo-box photo-box-thin pure-u-1 pure-u-md-2-3">
+            <a href="http://twitter.com/iBoZR">
+                <img src="http://25.media.tumblr.com/95c842c76d60b7bc982d92c76216d037/tumblr_mx3tnm96k81st5lhmo1_1280.jpg"
+                     alt="Rain Drops">
+            </a>
+
+            <aside class="photo-box-caption">
+                <span>
+                    by <a href="http://twitter.com/iBoZR">Thanun Buranapong</a>
+                </span>
+            </aside>
+        </div>
+
+        <div class="photo-box pure-u-1 pure-u-md-1-3">
+            <a href="http://www.goodfreephotos.com/">
+                <img src="http://25.media.tumblr.com/88b812f5f9c3d7b83560fd635435d538/tumblr_mx3tlblmY21st5lhmo1_1280.jpg"
+                     alt="Port">
+            </a>
+
+            <aside class="photo-box-caption">
+                <span>
+                    by <a href="http://www.goodfreephotos.com/">Yinan Chen</a>
+                </span>
+            </aside>
+        </div>
+
+        <div class="pure-u-1 form-box">
+            <div class="l-box">
+                <h2>Submit a Photo</h2>
+
+                <form class="pure-form">
+                    <input type="text" placeholder="Photo URL" required>
+                    <input type="text" placeholder="Email">
+                    <button type="submit" class="pure-button">Submit</button>
+                </form>
+            </div>
+        </div>
+
+        <div class="pure-u-1">
+            <div class="l-box">
+                <h2>Creating a Photo Gallery Layout</h2>
+
+                <p>
+                    This page shows how to make a photo gallery using <a href="/grids/">Pure Grids</a>. Using Pure, we can create interesting layouts such as this photo gallery. This layout is fully responsive. We've added a bit of custom media queries on top of the responsive grid provided by Pure.
+                </p>
+
+                <p>
+                    We've also taken advantage of <a href="/forms/">Pure Forms</a> and <a href="/menus/">Pure Menus</a>. This example uses a form with the <code>pure-form</code> class name to create an inline form. We use <a href="/buttons/">Pure Buttons</a> for the button styling.
+                </p>
+            </div>
+        </div>
+    </div>
+
+    <div class="footer">
+        View the source of this layout to learn more. Made with love by the Pure Team.
+    </div>
+</div>
+
+</body>
+</html>

site/static/layouts/gallery/styles.css

@@ -0,0 +1,126 @@
+body {
+    color: #666;
+}
+
+h1,h2,h3,h4,h5,h6 {
+    color: #111;
+}
+
+.l-box {
+    padding: 2em;
+}
+
+.header .pure-menu {
+    border-bottom-color: black;
+    border-radius: 0;
+}
+
+.pure-menu-link {
+    padding: 1em .7em;
+}
+
+.photo-box, .text-box {
+    overflow: hidden;
+    position: relative;
+    height: 250px;
+    text-align: center;
+}
+
+.photo-box-thin {
+    height: 120px;
+}
+
+
+    .photo-box img {
+        max-width: 100%;
+        height: auto;
+        min-height: 250px;
+    }
+
+    .photo-box aside {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        padding: 1em 0.5em;
+        color: white;
+        width: 100%;
+        font-size: 80%;
+        text-align: right;
+        background: -moz-linear-gradient(top,  rgba(16,27,30,0) 0%, rgba(12,2,2,1) 90%); /* FF3.6+ */
+        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(16,27,30,0)), color-stop(90%,rgba(12,2,2,1))); /* Chrome,Safari4+ */
+        background: -webkit-linear-gradient(top,  rgba(16,27,30,0) 0%,rgba(12,2,2,1) 90%); /* Chrome10+,Safari5.1+ */
+        background: -o-linear-gradient(top,  rgba(16,27,30,0) 0%,rgba(12,2,2,1) 90%); /* Opera 11.10+ */
+        background: -ms-linear-gradient(top,  rgba(16,27,30,0) 0%,rgba(12,2,2,1) 90%); /* IE10+ */
+        background: linear-gradient(to bottom,  rgba(16,27,30,0) 0%,rgba(12,2,2,1) 90%); /* W3C */
+        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00101b1e', endColorstr='#0c0202',GradientType=0 ); /* IE6-9 */
+
+    }
+
+    .photo-box aside span {
+        color: #aaa;
+    }
+
+        .photo-box aside span a {
+            color: #ccc;
+            text-decoration: none;
+        }
+
+.text-box {
+    background: rgb(49, 49, 49); /* bluish grey */
+    color: rgb(255, 190, 94); /* steel blue */
+}
+
+    .text-box-head {
+        color: #fff;
+        padding-bottom: 0.2em;
+        font-weight: 400;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        font-size: 24px;
+    }
+
+    .text-box-subhead {
+        font-weight: normal;
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+    }
+
+.form-box {
+    text-align: center;
+    font-size: 120%;
+    border-bottom: 1px solid #eee;
+}
+
+    .form-box .pure-button {
+        background-color: #61B842;
+        color: white;
+        vertical-align: top;
+        font-size: 85%;
+        font-weight: 400;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        border-radius: 4px;
+        margin: 0.3em;
+    }
+    .pure-form input[type] {
+        margin: 0.3em auto;
+        text-align: center;
+    }
+
+.footer {
+    background: #111;
+    color: #666;
+    text-align: center;
+    padding: 1em;
+    font-size: 80%;
+}
+
+@media (min-width: 30em) {
+    .photo-box, .text-box {
+        text-align: left;
+    }
+
+    .photo-box-thin {
+        height: 250px;
+    }
+}

site/static/layouts/marketing/index.html

@@ -0,0 +1,150 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="A layout example that shows off a responsive product landing page.">
+    <title>Landing Page &ndash; Layout Examples &ndash; Pure</title>
+    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
+    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/grids-responsive-min.css">
+    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
+    <link rel="stylesheet" href="/layouts/marketing/styles.css">
+</head>
+<body>
+
+<div class="header">
+    <div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed">
+        <a class="pure-menu-heading" href="">Your Site</a>
+
+        <ul class="pure-menu-list">
+            <li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Home</a></li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Tour</a></li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Sign Up</a></li>
+        </ul>
+    </div>
+</div>
+
+<div class="splash-container">
+    <div class="splash">
+        <h1 class="splash-head">Big Bold Text</h1>
+        <p class="splash-subhead">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+        </p>
+        <p>
+            <a href="http://purecss.io" class="pure-button pure-button-primary">Get Started</a>
+        </p>
+    </div>
+</div>
+
+<div class="content-wrapper">
+    <div class="content">
+        <h2 class="content-head is-center">Excepteur sint occaecat cupidatat.</h2>
+
+        <div class="pure-g">
+            <div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
+
+                <h3 class="content-subhead">
+                    <i class="fa fa-rocket"></i>
+                    Get Started Quickly
+                </h3>
+                <p>
+                    Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.
+                </p>
+            </div>
+            <div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
+                <h3 class="content-subhead">
+                    <i class="fa fa-mobile"></i>
+                    Responsive Layouts
+                </h3>
+                <p>
+                    Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.
+                </p>
+            </div>
+            <div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
+                <h3 class="content-subhead">
+                    <i class="fa fa-th-large"></i>
+                    Modular
+                </h3>
+                <p>
+                    Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.
+                </p>
+            </div>
+            <div class="l-box pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
+                <h3 class="content-subhead">
+                    <i class="fa fa-check-square-o"></i>
+                    Plays Nice
+                </h3>
+                <p>
+                    Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum.
+                </p>
+            </div>
+        </div>
+    </div>
+
+    <div class="ribbon l-box-lrg pure-g">
+        <div class="l-box-lrg is-center pure-u-1 pure-u-md-1-2 pure-u-lg-2-5">
+            <img width="300" alt="File Icons" class="pure-img-responsive" src="/img/common/file-icons.png">
+        </div>
+        <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-3-5">
+
+            <h2 class="content-head content-head-ribbon">Laboris nisi ut aliquip.</h2>
+
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                consequat. Duis aute irure dolor.
+            </p>
+        </div>
+    </div>
+
+    <div class="content">
+        <h2 class="content-head is-center">Dolore magna aliqua. Uis aute irure.</h2>
+
+        <div class="pure-g">
+            <div class="l-box-lrg pure-u-1 pure-u-md-2-5">
+                <form class="pure-form pure-form-stacked">
+                    <fieldset>
+
+                        <label for="name">Your Name</label>
+                        <input id="name" type="text" placeholder="Your Name">
+
+
+                        <label for="email">Your Email</label>
+                        <input id="email" type="email" placeholder="Your Email">
+
+                        <label for="password">Your Password</label>
+                        <input id="password" type="password" placeholder="Your Password">
+
+                        <button type="submit" class="pure-button">Sign Up</button>
+                    </fieldset>
+                </form>
+            </div>
+
+            <div class="l-box-lrg pure-u-1 pure-u-md-3-5">
+                <h4>Contact Us</h4>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat.
+                </p>
+
+                <h4>More Information</h4>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                    tempor incididunt ut labore et dolore magna aliqua.
+                </p>
+            </div>
+        </div>
+
+    </div>
+
+    <div class="footer l-box is-center">
+        View the source of this layout to learn more. Made with love by the Pure Team.
+    </div>
+
+</div>
+
+</body>
+</html>

site/static/layouts/marketing/styles.css

@@ -0,0 +1,286 @@
+* {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+/*
+ * -- BASE STYLES --
+ * Most of these are inherited from Base, but I want to change a few.
+ */
+body {
+    line-height: 1.7em;
+    color: #7f8c8d;
+    font-size: 13px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+label {
+    color: #34495e;
+}
+
+.pure-img-responsive {
+    max-width: 100%;
+    height: auto;
+}
+
+/*
+ * -- LAYOUT STYLES --
+ * These are some useful classes which I will need
+ */
+.l-box {
+    padding: 1em;
+}
+
+.l-box-lrg {
+    padding: 2em;
+    border-bottom: 1px solid rgba(0,0,0,0.1);
+}
+
+.is-center {
+    text-align: center;
+}
+
+
+
+/*
+ * -- PURE FORM STYLES --
+ * Style the form inputs and labels
+ */
+.pure-form label {
+    margin: 1em 0 0;
+    font-weight: bold;
+    font-size: 100%;
+}
+
+.pure-form input[type] {
+    border: 2px solid #ddd;
+    box-shadow: none;
+    font-size: 100%;
+    width: 100%;
+    margin-bottom: 1em;
+}
+
+/*
+ * -- PURE BUTTON STYLES --
+ * I want my pure-button elements to look a little different
+ */
+.pure-button {
+    background-color: #1f8dd6;
+    color: white;
+    padding: 0.5em 2em;
+    border-radius: 5px;
+}
+
+a.pure-button-primary {
+    background: white;
+    color: #1f8dd6;
+    border-radius: 5px;
+    font-size: 120%;
+}
+
+
+/*
+ * -- MENU STYLES --
+ * I want to customize how my .pure-menu looks at the top of the page
+ */
+
+.home-menu {
+    padding: 0.5em;
+    text-align: center;
+    box-shadow: 0 1px 1px rgba(0,0,0, 0.10);
+}
+.home-menu {
+    background: #2d3e50;
+}
+.pure-menu.pure-menu-fixed {
+    /* Fixed menus normally have a border at the bottom. */
+    border-bottom: none;
+    /* I need a higher z-index here because of the scroll-over effect. */
+    z-index: 4;
+}
+
+.home-menu .pure-menu-heading {
+    color: white;
+    font-weight: 400;
+    font-size: 120%;
+}
+
+.home-menu .pure-menu-selected a {
+    color: white;
+}
+
+.home-menu a {
+    color: #6FBEF3;
+}
+.home-menu li a:hover,
+.home-menu li a:focus {
+    background: none;
+    border: none;
+    color: #AECFE5;
+}
+
+
+/*
+ * -- SPLASH STYLES --
+ * This is the blue top section that appears on the page.
+ */
+
+.splash-container {
+    background: #1f8dd6;
+    z-index: 1;
+    overflow: hidden;
+    /* The following styles are required for the "scroll-over" effect */
+    width: 100%;
+    height: 88%;
+    top: 0;
+    left: 0;
+    position: fixed !important;
+}
+
+.splash {
+    /* absolute center .splash within .splash-container */
+    width: 80%;
+    height: 50%;
+    margin: auto;
+    position: absolute;
+    top: 100px; left: 0; bottom: 0; right: 0;
+    text-align: center;
+    text-transform: uppercase;
+}
+
+/* This is the main heading that appears on the blue section */
+.splash-head {
+    font-size: 20px;
+    font-weight: bold;
+    color: white;
+    border: 3px solid white;
+    padding: 1em 1.6em;
+    font-weight: 100;
+    border-radius: 5px;
+    line-height: 1em;
+}
+
+/* This is the subheading that appears on the blue section */
+.splash-subhead {
+    color: white;
+    letter-spacing: 0.05em;
+    opacity: 0.8;
+}
+
+/*
+ * -- CONTENT STYLES --
+ * This represents the content area (everything below the blue section)
+ */
+.content-wrapper {
+    /* These styles are required for the "scroll-over" effect */
+    position: absolute;
+    top: 87%;
+    width: 100%;
+    min-height: 12%;
+    z-index: 2;
+    background: white;
+
+}
+
+/* We want to give the content area some more padding */
+.content {
+    padding: 1em 1em 3em;
+}
+
+/* This is the class used for the main content headers (<h2>) */
+.content-head {
+    font-weight: 400;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    margin: 2em 0 1em;
+}
+
+/* This is a modifier class used when the content-head is inside a ribbon */
+.content-head-ribbon {
+    color: white;
+}
+
+/* This is the class used for the content sub-headers (<h3>) */
+.content-subhead {
+    color: #1f8dd6;
+}
+    .content-subhead i {
+        margin-right: 7px;
+    }
+
+/* This is the class used for the dark-background areas. */
+.ribbon {
+    background: #2d3e50;
+    color: #aaa;
+}
+
+/* This is the class used for the footer */
+.footer {
+    background: #111;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+}
+
+/*
+ * -- TABLET (AND UP) MEDIA QUERIES --
+ * On tablets and other medium-sized devices, we want to customize some
+ * of the mobile styles.
+ */
+@media (min-width: 48em) {
+
+    /* We increase the body font size */
+    body {
+        font-size: 16px;
+    }
+
+    /* We can align the menu header to the left, but float the
+    menu items to the right. */
+    .home-menu {
+        text-align: left;
+    }
+        .home-menu ul {
+            float: right;
+        }
+
+    /* We increase the height of the splash-container */
+/*    .splash-container {
+        height: 500px;
+    }*/
+
+    /* We decrease the width of the .splash, since we have more width
+    to work with */
+    .splash {
+        width: 50%;
+        height: 50%;
+    }
+
+    .splash-head {
+        font-size: 250%;
+    }
+
+
+    /* We remove the border-separator assigned to .l-box-lrg */
+    .l-box-lrg {
+        border: none;
+    }
+
+}
+
+/*
+ * -- DESKTOP (AND UP) MEDIA QUERIES --
+ * On desktops and other large devices, we want to over-ride some
+ * of the mobile and tablet styles.
+ */
+@media (min-width: 78em) {
+    /* We increase the header font size even more */
+    .splash-head {
+        font-size: 300%;
+    }
+}

site/static/layouts/pricing/index.html

@@ -0,0 +1,150 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="A layout example that shows off a responsive pricing table.">
+    <title>Pricing Table &ndash; Layout Examples &ndash; Pure</title>
+    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
+    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/grids-responsive-min.css">
+    <link rel="stylesheet" href="/layouts/pricing/styles.css">
+</head>
+<body>
+
+<div class="pure-menu pure-menu-horizontal">
+    <a href="#" class="pure-menu-heading">Your Logo</a>
+    <ul class="pure-menu-list">
+        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
+        <li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Pricing</a></li>
+        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
+    </ul>
+</div>
+
+<div class="banner">
+    <h1 class="banner-head">
+        Simple Pricing.<br>
+        Try before you buy.
+    </h1>
+</div>
+
+<div class="l-content">
+    <div class="pricing-tables pure-g">
+        <div class="pure-u-1 pure-u-md-1-3">
+            <div class="pricing-table pricing-table-free">
+                <div class="pricing-table-header">
+                    <h2>Personal</h2>
+
+                    <span class="pricing-table-price">
+                        $5 <span>per month</span>
+                    </span>
+                </div>
+
+                <ul class="pricing-table-list">
+                    <li>Free setup</li>
+                    <li>Custom sub-domain</li>
+                    <li>Standard customer support</li>
+                    <li>1GB file storage</li>
+                    <li>1 database</li>
+                    <li>Unlimited bandwidth</li>
+                </ul>
+
+                <button class="button-choose pure-button">Choose</button>
+            </div>
+        </div>
+
+        <div class="pure-u-1 pure-u-md-1-3">
+            <div class="pricing-table pricing-table-biz pricing-table-selected">
+                <div class="pricing-table-header">
+                    <h2>Small Business</h2>
+
+                    <span class="pricing-table-price">
+                        $25 <span>per month</span>
+                    </span>
+                </div>
+
+                <ul class="pricing-table-list">
+                    <li>Free setup</li>
+                    <li>Use your own domain</li>
+                    <li>Standard customer support</li>
+                    <li>10GB file storage</li>
+                    <li>5 databases</li>
+                    <li>Unlimited bandwidth</li>
+                </ul>
+
+                <button class="button-choose pure-button">Choose</button>
+            </div>
+        </div>
+
+        <div class="pure-u-1 pure-u-md-1-3">
+            <div class="pricing-table pricing-table-enterprise">
+                <div class="pricing-table-header">
+                    <h2>Enterprise</h2>
+
+                    <span class="pricing-table-price">
+                        $45 <span>per month</span>
+                    </span>
+                </div>
+
+                <ul class="pricing-table-list">
+                    <li>Free setup</li>
+                    <li>Use your own domain</li>
+                    <li>Premium customer support</li>
+                    <li>Unlimited file storage</li>
+                    <li>25 databases</li>
+                    <li>Unlimited bandwidth</li>
+                </ul>
+
+                <button class="button-choose pure-button">Choose</button>
+            </div>
+        </div>
+    </div> <!-- end pricing-tables -->
+
+    <div class="information pure-g">
+        <div class="pure-u-1 pure-u-md-1-2">
+            <div class="l-box">
+                <h3 class="information-head">Get started today</h3>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
+                </p>
+            </div>
+        </div>
+
+        <div class="pure-u-1 pure-u-md-1-2">
+            <div class="l-box">
+                <h3 class="information-head">Pay monthly or annually</h3>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
+                </p>
+            </div>
+        </div>
+
+        <div class="pure-u-1 pure-u-md-1-2">
+            <div class="l-box">
+                <h3 class="information-head">24/7 customer support</h3>
+                <p>
+                    Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                </p>
+            </div>
+        </div>
+
+        <div class="pure-u-1 pure-u-md-1-2">
+            <div class="l-box">
+                <h3 class="information-head">Cancel your plan anytime</h3>
+                <p>
+                    Duis aute irure dolor in reprehenderit in voluptate velit esse
+                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </div>
+        </div>
+    </div> <!-- end information -->
+</div> <!-- end l-content -->
+
+<div class="footer l-box">
+    <p>
+        <a href="#">Try now</a> for 14 days. No credit card required. Header image courtesy of <a href='http://unsplash.com/'>Unsplash</a>.
+    </p>
+</div>
+
+</body>
+</html>

site/static/layouts/pricing/styles.css

@@ -0,0 +1,230 @@
+/*
+ * -- BASE STYLES --
+ * Most of these are inherited from Base, but I want to change a few.
+ */
+body {
+    color: #526066;
+}
+
+h2, h3 {
+    letter-spacing: 0.25em;
+    text-transform: uppercase;
+    font-weight: 600;
+}
+
+p {
+    line-height: 1.6em;
+}
+
+
+/*
+ * -- Layout Styles --
+ */
+.l-content {
+    margin: 0 auto;
+}
+
+.l-box {
+    padding: 0.5em 2em;
+}
+
+/*
+ * -- MENU STYLES --
+ * Make the menu have a very faint box-shadow.
+ */
+.pure-menu {
+    box-shadow: 0 1px 1px rgba(0,0,0, 0.10);
+}
+
+.pure-menu-link {
+    padding: .5em .7em;
+}
+
+
+/*
+ * -- BANNER --
+ * The top banner with the headings. By using a combination
+ * of `display: table;` and `display: table-cell;`, we can
+ * vertically center the text.
+ */
+
+.banner {
+    background: transparent url('http://24.media.tumblr.com/ccb268832580ac12951828a1c179de69/tumblr_mo2xbk8JUK1st5lhmo1_1280.jpg') 0 0 no-repeat fixed;
+    text-align: center;
+    background-size: cover;
+    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://24.media.tumblr.com/ccb268832580ac12951828a1c179de69/tumblr_mo2xbk8JUK1st5lhmo1_1280.jpg', sizingMethod='scale');
+
+    height: 200px;
+    width: 100%;
+    margin-bottom: 3em;
+    display: table;
+}
+
+    .banner-head {
+        display: table-cell;
+        vertical-align: middle;
+        margin-bottom: 0;
+        font-size: 2em;
+        color: white;
+        font-weight: 500;
+        text-shadow: 0 1px 1px black;
+    }
+
+
+
+/*
+ * -- PRICING TABLE WRAPPER --
+ * This element wraps up all the pricing table elements
+ */
+ .pricing-tables,
+ .information {
+    max-width: 980px;
+    margin: 0 auto;
+ }
+.pricing-tables {
+    margin-bottom: 3.125em;
+    text-align: center;
+}
+
+/*
+ * -- PRICING TABLE  --
+ * Every pricing table has the .pricing-table class
+ */
+.pricing-table {
+    border: 1px solid #ddd;
+    margin: 0 0.5em 2em;
+    padding: 0 0 3em;
+}
+
+/*
+ * -- PRICING TABLE HEADER COLORS --
+ * Choose a different color based on the type of pricing table.
+ */
+.pricing-table-free .pricing-table-header {
+    background: #519251;
+}
+
+.pricing-table-biz .pricing-table-header {
+    background: #2c4985;
+}
+
+/*
+ * -- PRICING TABLE HEADER --
+ * By default, a header is black/white, and has some styles for its <h2> name.
+ */
+.pricing-table-header {
+    background: #111;
+    color: #fff;
+}
+    .pricing-table-header h2 {
+        margin: 0;
+        padding-top: 2em;
+        font-size: 1em;
+        font-weight: normal;
+
+    }
+
+
+/*
+ * -- PRICING TABLE PRICE --
+ * Styles for the price and the corresponding <span>per month</span>
+ */
+.pricing-table-price {
+    font-size: 6em;
+    margin: 0.2em 0 0;
+    font-weight: 100;
+}
+    .pricing-table-price span {
+        display: block;
+        text-transform: uppercase;
+        font-size: 0.2em;
+        padding-bottom: 2em;
+        font-weight: 400;
+        color: rgba(255, 255, 255, 0.5);
+        *color: #fff;
+    }
+
+
+
+/*
+ * -- PRICING TABLE LIST --
+ * Each pricing table has a <ul> which is denoted by the .pricing-table-list class
+ */
+.pricing-table-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+}
+
+
+/*
+ * -- PRICING TABLE LIST ELEMENTS --
+ * Styles for the individual list elements within each pricing table
+ */
+.pricing-table-list li {
+    padding: 0.8em 0;
+    background: #f7f7f7;
+    border-bottom: 1px solid #e7e7e7;
+}
+
+
+/*
+ * -- PRICING TABLE BUTTON --
+ * Styles for the "Choose" button at the bottom of a pricing table.
+ * This inherits from Pure Button.
+ */
+.button-choose {
+    border: 1px solid #ccc;
+    background: #fff;
+    color: #333;
+    border-radius: 2em;
+    font-weight: bold;
+    position: relative;
+    bottom: -1.5em;
+}
+
+.information-head {
+    color: black;
+    font-weight: 500;
+}
+
+.footer {
+    background: #111;
+    color: #888;
+    text-align: center;
+}
+    .footer a {
+        color: #ddd;
+    }
+
+
+
+/*
+ * -- TABLET MEDIA QUERIES --
+ * On tablets, we want to slightly adjust the size of the banner
+ * text and add some vertical space between the various pricing tables
+ */
+@media(min-width: 767px) {
+
+    .banner-head {
+        font-size: 4em;
+    }
+    .pricing-table {
+        margin-bottom: 0;
+    }
+
+}
+
+/*
+ * -- PHONE MEDIA QUERIES --
+ * On phones, we want to reduce the height and font-size of the banner further
+ */
+@media (min-width: 480px) {
+    .banner {
+        height: 400px;
+    }
+    .banner-head {
+        font-size: 3em;
+    }
+}

site/static/layouts/side-menu/index.html

@@ -0,0 +1,80 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="A layout example with a side menu that hides on mobile, just like the Pure website.">
+    <title>Responsive Side Menu &ndash; Layout Examples &ndash; Pure</title>
+    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
+    <link rel="stylesheet" href="/layouts/side-menu/styles.css">
+</head>
+<body>
+
+<div id="layout">
+    <!-- Menu toggle -->
+    <a href="#menu" id="menuLink" class="menu-link">
+        <!-- Hamburger icon -->
+        <span></span>
+    </a>
+
+    <div id="menu">
+        <div class="pure-menu">
+            <a class="pure-menu-heading" href="#">Company</a>
+
+            <ul class="pure-menu-list">
+                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
+                <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
+
+                <li class="pure-menu-item menu-item-divided pure-menu-selected">
+                    <a href="#" class="pure-menu-link">Services</a>
+                </li>
+
+                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
+            </ul>
+        </div>
+    </div>
+
+    <div id="main">
+        <div class="header">
+            <h1>Page Title</h1>
+            <h2>A subtitle for your page goes here</h2>
+        </div>
+
+        <div class="content">
+            <h2 class="content-subhead">How to use this layout</h2>
+            <p>
+                To use this layout, you can just copy paste the HTML, along with the CSS in <a href="/css/layouts/side-menu.css" alt="Side Menu CSS">side-menu.css</a>, and the JavaScript in <a href="/js/ui.js">ui.js</a>. The JS file uses vanilla JavaScript to simply toggle an <code>active</code> class that makes the menu responsive.
+            </p>
+
+            <h2 class="content-subhead">Now Let's Speak Some Latin</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+
+            <div class="pure-g">
+                <div class="pure-u-1-4">
+                    <img class="pure-img-responsive" src="http://farm3.staticflickr.com/2875/9069037713_1752f5daeb.jpg" alt="Peyto Lake">
+                </div>
+                <div class="pure-u-1-4">
+                    <img class="pure-img-responsive" src="http://farm3.staticflickr.com/2813/9069585985_80da8db54f.jpg" alt="Train">
+                </div>
+                <div class="pure-u-1-4">
+                    <img class="pure-img-responsive" src="http://farm6.staticflickr.com/5456/9121446012_c1640e42d0.jpg" alt="T-Shirt Store">
+                </div>
+                <div class="pure-u-1-4">
+                    <img class="pure-img-responsive" src="http://farm8.staticflickr.com/7357/9086701425_fda3024927.jpg" alt="Mountain">
+                </div>
+            </div>
+
+            <h2 class="content-subhead">Try Resizing your Browser</h2>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </div>
+    </div>
+</div>
+
+<script src="/js/ui.js"></script>
+
+</body>
+</html>

site/static/layouts/side-menu/styles.css

@@ -0,0 +1,248 @@
+body {
+    color: #777;
+}
+
+.pure-img-responsive {
+    max-width: 100%;
+    height: auto;
+}
+
+/*
+Add transition to containers so they can push in and out.
+*/
+#layout,
+#menu,
+.menu-link {
+    -webkit-transition: all 0.2s ease-out;
+    -moz-transition: all 0.2s ease-out;
+    -ms-transition: all 0.2s ease-out;
+    -o-transition: all 0.2s ease-out;
+    transition: all 0.2s ease-out;
+}
+
+/*
+This is the parent `<div>` that contains the menu and the content area.
+*/
+#layout {
+    position: relative;
+    left: 0;
+    padding-left: 0;
+}
+    #layout.active #menu {
+        left: 150px;
+        width: 150px;
+    }
+
+    #layout.active .menu-link {
+        left: 150px;
+    }
+/*
+The content `<div>` is where all your content goes.
+*/
+.content {
+    margin: 0 auto;
+    padding: 0 2em;
+    max-width: 800px;
+    margin-bottom: 50px;
+    line-height: 1.6em;
+}
+
+.header {
+     margin: 0;
+     color: #333;
+     text-align: center;
+     padding: 2.5em 2em 0;
+     border-bottom: 1px solid #eee;
+ }
+    .header h1 {
+        margin: 0.2em 0;
+        font-size: 3em;
+        font-weight: 300;
+    }
+     .header h2 {
+        font-weight: 300;
+        color: #ccc;
+        padding: 0;
+        margin-top: 0;
+    }
+
+.content-subhead {
+    margin: 50px 0 20px 0;
+    font-weight: 300;
+    color: #888;
+}
+
+
+
+/*
+The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
+appears on the left side of the page.
+*/
+
+#menu {
+    margin-left: -150px; /* "#menu" width */
+    width: 150px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 1000; /* so the menu or its navicon stays above all content */
+    background: #191818;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+}
+    /*
+    All anchors inside the menu should be styled like this.
+    */
+    #menu a {
+        color: #999;
+        border: none;
+        padding: 0.6em 0 0.6em 0.6em;
+    }
+
+    /*
+    Remove all background/borders, since we are applying them to #menu.
+    */
+     #menu .pure-menu,
+     #menu .pure-menu ul {
+        border: none;
+        background: transparent;
+    }
+
+    /*
+    Add that light border to separate items into groups.
+    */
+    #menu .pure-menu ul,
+    #menu .pure-menu .menu-item-divided {
+        border-top: 1px solid #333;
+    }
+        /*
+        Change color of the anchor links on hover/focus.
+        */
+        #menu .pure-menu li a:hover,
+        #menu .pure-menu li a:focus {
+            background: #333;
+        }
+
+    /*
+    This styles the selected menu item `<li>`.
+    */
+    #menu .pure-menu-selected,
+    #menu .pure-menu-heading {
+        background: #1f8dd6;
+    }
+        /*
+        This styles a link within a selected menu item `<li>`.
+        */
+        #menu .pure-menu-selected a {
+            color: #fff;
+        }
+
+    /*
+    This styles the menu heading.
+    */
+    #menu .pure-menu-heading {
+        font-size: 110%;
+        color: #fff;
+        margin: 0;
+    }
+
+/* -- Dynamic Button For Responsive Menu -------------------------------------*/
+
+/*
+The button to open/close the Menu is custom-made and not part of Pure. Here's
+how it works:
+*/
+
+/*
+`.menu-link` represents the responsive menu toggle that shows/hides on
+small screens.
+*/
+.menu-link {
+    position: fixed;
+    display: block; /* show this only on small screens */
+    top: 0;
+    left: 0; /* "#menu width" */
+    background: #000;
+    background: rgba(0,0,0,0.7);
+    font-size: 10px; /* change this value to increase/decrease button size */
+    z-index: 10;
+    width: 2em;
+    height: auto;
+    padding: 2.1em 1.6em;
+}
+
+    .menu-link:hover,
+    .menu-link:focus {
+        background: #000;
+    }
+
+    .menu-link span {
+        position: relative;
+        display: block;
+    }
+
+    .menu-link span,
+    .menu-link span:before,
+    .menu-link span:after {
+        background-color: #fff;
+        width: 100%;
+        height: 0.2em;
+    }
+
+        .menu-link span:before,
+        .menu-link span:after {
+            position: absolute;
+            margin-top: -0.6em;
+            content: " ";
+        }
+
+        .menu-link span:after {
+            margin-top: 0.6em;
+        }
+
+
+/* -- Responsive Styles (Media Queries) ------------------------------------- */
+
+/*
+Hides the menu at `48em`, but modify this based on your app's needs.
+*/
+@media (min-width: 48em) {
+
+    .header,
+    .content {
+        padding-left: 2em;
+        padding-right: 2em;
+    }
+
+    #layout {
+        padding-left: 150px; /* left col width "#menu" */
+        left: 0;
+    }
+    #menu {
+        left: 150px;
+    }
+
+    .menu-link {
+        position: fixed;
+        left: 150px;
+        display: none;
+    }
+
+    #layout.active .menu-link {
+        left: 150px;
+    }
+}
+
+@media (max-width: 48em) {
+    /* Only apply this when the window is small. Otherwise, the following
+    case results in extra padding on the left:
+        * Make the window small.
+        * Tap the menu to trigger the active state.
+        * Make the window large again.
+    */
+    #layout.active {
+        position: relative;
+        left: 150px;
+    }
+}

site/static/layouts/tucked-menu-vertical/index.html

@@ -0,0 +1,346 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="A set of horizontal menus that switch to vertical and which hide at small window widths.">
+    <title>Responsive Horizontal-to-Vertical Menu &ndash; Layout Examples &ndash; Pure</title>
+    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
+    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/grids-responsive-min.css">
+</head>
+<body>
+
+<style>
+.custom-wrapper {
+    background-color: #ffd390;
+    margin-bottom: 1em;
+    -webkit-font-smoothing: antialiased;
+    height: 2.1em;
+    overflow: hidden;
+    -webkit-transition: height 0.5s;
+    -moz-transition: height 0.5s;
+    -ms-transition: height 0.5s;
+    transition: height 0.5s;
+}
+
+.custom-wrapper.open {
+    height: 14em;
+}
+
+.custom-menu-3 {
+    text-align: right;
+}
+
+.custom-toggle {
+    width: 34px;
+    height: 34px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: none;
+}
+
+.custom-toggle .bar {
+    background-color: #777;
+    display: block;
+    width: 20px;
+    height: 2px;
+    border-radius: 100px;
+    position: absolute;
+    top: 18px;
+    right: 7px;
+    -webkit-transition: all 0.5s;
+    -moz-transition: all 0.5s;
+    -ms-transition: all 0.5s;
+    transition: all 0.5s;
+}
+
+.custom-toggle .bar:first-child {
+    -webkit-transform: translateY(-6px);
+    -moz-transform: translateY(-6px);
+    -ms-transform: translateY(-6px);
+    transform: translateY(-6px);
+}
+
+.custom-toggle.x .bar {
+    -webkit-transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+}
+
+.custom-toggle.x .bar:first-child {
+    -webkit-transform: rotate(-45deg);
+    -moz-transform: rotate(-45deg);
+    -ms-transform: rotate(-45deg);
+    transform: rotate(-45deg);
+}
+
+@media (max-width: 47.999em) {
+
+    .custom-menu-3 {
+        text-align: left;
+    }
+
+    .custom-toggle {
+        display: block;
+    }
+
+}
+</style>
+<div class="custom-wrapper pure-g" id="menu">
+    <div class="pure-u-1 pure-u-md-1-3">
+        <div class="pure-menu">
+            <a href="#" class="pure-menu-heading custom-brand">Brand</a>
+            <a href="#" class="custom-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a>
+        </div>
+    </div>
+    <div class="pure-u-1 pure-u-md-1-3">
+        <div class="pure-menu pure-menu-horizontal custom-can-transform">
+            <ul class="pure-menu-list">
+                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
+                <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
+                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
+            </ul>
+        </div>
+    </div>
+    <div class="pure-u-1 pure-u-md-1-3">
+        <div class="pure-menu pure-menu-horizontal custom-menu-3 custom-can-transform">
+            <ul class="pure-menu-list">
+                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Yahoo</a></li>
+                <li class="pure-menu-item"><a href="#" class="pure-menu-link">W3C</a></li>
+            </ul>
+        </div>
+    </div>
+</div>
+<script>
+(function (window, document) {
+var menu = document.getElementById('menu'),
+    rollback,
+    WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange':'resize';
+
+function toggleHorizontal() {
+    menu.classList.remove('closing');
+    [].forEach.call(
+        document.getElementById('menu').querySelectorAll('.custom-can-transform'),
+        function(el){
+            el.classList.toggle('pure-menu-horizontal');
+        }
+    );
+};
+
+function toggleMenu() {
+    // set timeout so that the panel has a chance to roll up
+    // before the menu switches states
+    if (menu.classList.contains('open')) {
+        menu.classList.add('closing');
+        rollBack = setTimeout(toggleHorizontal, 500);
+    }
+    else {
+        if (menu.classList.contains('closing')) {
+            clearTimeout(rollBack);
+        } else {
+            toggleHorizontal();
+        }
+    }
+    menu.classList.toggle('open');
+    document.getElementById('toggle').classList.toggle('x');
+};
+
+function closeMenu() {
+    if (menu.classList.contains('open')) {
+        toggleMenu();
+    }
+}
+
+document.getElementById('toggle').addEventListener('click', function (e) {
+    toggleMenu();
+    e.preventDefault();
+});
+
+window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
+})(this, this.document);
+
+</script>
+<style>
+.main {
+    padding: 2em;
+    color: black;
+}
+</style>
+
+<div class="main">
+
+    <h1>Responsive Horizontal-to-Vertical Menu</h1>
+
+    <p>This example shows how you can build upon Pure Menu and Grid classes. At wide
+    window-widths we display a horizontal menu.
+    At smaller window-widths,
+    we switch to a vertical menu with a toggle control. Grids are used to
+    arrange the menus.
+    Code reproduced below:</p>
+
+<pre class="code" data-language="html"><code>&lt;!--[if lte IE 8]&gt;
+          &lt;link rel&#x3D;&quot;stylesheet&quot; href&#x3D;&quot;https://unpkg.com/purecss@1.0.1/build/grids-responsive-old-ie-min.css&quot;&gt;
+      &lt;![endif]--&gt;
+      &lt;!--[if gt IE 8]&gt;&lt;!--&gt;
+          &lt;link rel&#x3D;&quot;stylesheet&quot; href&#x3D;&quot;https://unpkg.com/purecss@1.0.1/build/grids-responsive-min.css&quot;&gt;
+      &lt;!--&lt;![endif]--&gt;
+
+      &lt;style&gt;
+      .custom-wrapper {
+          background-color: #ffd390;
+          margin-bottom: 1em;
+          -webkit-font-smoothing: antialiased;
+          height: 2.1em;
+          overflow: hidden;
+          -webkit-transition: height 0.5s;
+          -moz-transition: height 0.5s;
+          -ms-transition: height 0.5s;
+          transition: height 0.5s;
+      }
+
+      .custom-wrapper.open {
+          height: 14em;
+      }
+
+      .custom-menu-3 {
+          text-align: right;
+      }
+
+      .custom-toggle {
+          width: 34px;
+          height: 34px;
+          position: absolute;
+          top: 0;
+          right: 0;
+          display: none;
+      }
+
+      .custom-toggle .bar {
+          background-color: #777;
+          display: block;
+          width: 20px;
+          height: 2px;
+          border-radius: 100px;
+          position: absolute;
+          top: 18px;
+          right: 7px;
+          -webkit-transition: all 0.5s;
+          -moz-transition: all 0.5s;
+          -ms-transition: all 0.5s;
+          transition: all 0.5s;
+      }
+
+      .custom-toggle .bar:first-child {
+          -webkit-transform: translateY(-6px);
+          -moz-transform: translateY(-6px);
+          -ms-transform: translateY(-6px);
+          transform: translateY(-6px);
+      }
+
+      .custom-toggle.x .bar {
+          -webkit-transform: rotate(45deg);
+          -moz-transform: rotate(45deg);
+          -ms-transform: rotate(45deg);
+          transform: rotate(45deg);
+      }
+
+      .custom-toggle.x .bar:first-child {
+          -webkit-transform: rotate(-45deg);
+          -moz-transform: rotate(-45deg);
+          -ms-transform: rotate(-45deg);
+          transform: rotate(-45deg);
+      }
+
+      @media (max-width: 47.999em) {
+
+          .custom-menu-3 {
+              text-align: left;
+          }
+
+          .custom-toggle {
+              display: block;
+          }
+
+      }
+      &lt;/style&gt;
+      &lt;div class&#x3D;&quot;custom-wrapper pure-g&quot; id&#x3D;&quot;menu&quot;&gt;
+          &lt;div class&#x3D;&quot;pure-u-1 pure-u-md-1-3&quot;&gt;
+              &lt;div class&#x3D;&quot;pure-menu&quot;&gt;
+                  &lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-heading custom-brand&quot;&gt;Brand&lt;/a&gt;
+                  &lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;custom-toggle&quot; id&#x3D;&quot;toggle&quot;&gt;&lt;s class&#x3D;&quot;bar&quot;&gt;&lt;/s&gt;&lt;s class&#x3D;&quot;bar&quot;&gt;&lt;/s&gt;&lt;/a&gt;
+              &lt;/div&gt;
+          &lt;/div&gt;
+          &lt;div class&#x3D;&quot;pure-u-1 pure-u-md-1-3&quot;&gt;
+              &lt;div class&#x3D;&quot;pure-menu pure-menu-horizontal custom-can-transform&quot;&gt;
+                  &lt;ul class&#x3D;&quot;pure-menu-list&quot;&gt;
+                      &lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
+                      &lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
+                      &lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
+                  &lt;/ul&gt;
+              &lt;/div&gt;
+          &lt;/div&gt;
+          &lt;div class&#x3D;&quot;pure-u-1 pure-u-md-1-3&quot;&gt;
+              &lt;div class&#x3D;&quot;pure-menu pure-menu-horizontal custom-menu-3 custom-can-transform&quot;&gt;
+                  &lt;ul class&#x3D;&quot;pure-menu-list&quot;&gt;
+                      &lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;Yahoo&lt;/a&gt;&lt;/li&gt;
+                      &lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;W3C&lt;/a&gt;&lt;/li&gt;
+                  &lt;/ul&gt;
+              &lt;/div&gt;
+          &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;script&gt;
+      (function (window, document) {
+      var menu &#x3D; document.getElementById(&#x27;menu&#x27;),
+          rollback,
+          WINDOW_CHANGE_EVENT &#x3D; (&#x27;onorientationchange&#x27; in window) ? &#x27;orientationchange&#x27;:&#x27;resize&#x27;;
+
+      function toggleHorizontal() {
+          menu.classList.remove(&#x27;closing&#x27;);
+          [].forEach.call(
+              document.getElementById(&#x27;menu&#x27;).querySelectorAll(&#x27;.custom-can-transform&#x27;),
+              function(el){
+                  el.classList.toggle(&#x27;pure-menu-horizontal&#x27;);
+              }
+          );
+      };
+
+      function toggleMenu() {
+          // set timeout so that the panel has a chance to roll up
+          // before the menu switches states
+          if (menu.classList.contains(&#x27;open&#x27;)) {
+              menu.classList.add(&#x27;closing&#x27;);
+              rollBack &#x3D; setTimeout(toggleHorizontal, 500);
+          }
+          else {
+              if (menu.classList.contains(&#x27;closing&#x27;)) {
+                  clearTimeout(rollBack);
+              } else {
+                  toggleHorizontal();
+              }
+          }
+          menu.classList.toggle(&#x27;open&#x27;);
+          document.getElementById(&#x27;toggle&#x27;).classList.toggle(&#x27;x&#x27;);
+      };
+
+      function closeMenu() {
+          if (menu.classList.contains(&#x27;open&#x27;)) {
+              toggleMenu();
+          }
+      }
+
+      document.getElementById(&#x27;toggle&#x27;).addEventListener(&#x27;click&#x27;, function (e) {
+          toggleMenu();
+          e.preventDefault();
+      });
+
+      window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
+      })(this, this.document);
+
+      &lt;/script&gt;</code></pre>
+</div>
+
+
+</body>
+</html>

site/static/layouts/tucked-menu/index.html

@@ -0,0 +1,402 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Showcases a horizontal menu that hides at small window widths, and which scrolls when revealed.">
+    <title>Responsive Horizontal-to-Scrollable Menu &ndash; Layout Examples &ndash; Pure</title>
+    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
+</head>
+<body>
+
+<style>
+.custom-menu-wrapper {
+    background-color: #808080;
+    margin-bottom: 2.5em;
+    white-space: nowrap;
+    position: relative;
+}
+
+.custom-menu {
+    display: inline-block;
+    width: auto;
+    vertical-align: middle;
+    -webkit-font-smoothing: antialiased;
+}
+
+.custom-menu .pure-menu-link,
+.custom-menu .pure-menu-heading {
+    color: white;
+}
+
+.custom-menu .pure-menu-link:hover,
+.custom-menu .pure-menu-heading:hover {
+    background-color: transparent;
+}
+
+.custom-menu-top {
+    position: relative;
+    padding-top: .5em;
+    padding-bottom: .5em;
+}
+
+.custom-menu-brand {
+    display: block;
+    text-align: center;
+    position: relative;
+}
+
+.custom-menu-toggle {
+    width: 44px;
+    height: 44px;
+    display: block;
+    position: absolute;
+    top: 3px;
+    right: 0;
+    display: none;
+}
+
+.custom-menu-toggle .bar {
+    background-color: white;
+    display: block;
+    width: 20px;
+    height: 2px;
+    border-radius: 100px;
+    position: absolute;
+    top: 22px;
+    right: 12px;
+    -webkit-transition: all 0.5s;
+    -moz-transition: all 0.5s;
+    -ms-transition: all 0.5s;
+    transition: all 0.5s;
+}
+
+.custom-menu-toggle .bar:first-child {
+    -webkit-transform: translateY(-6px);
+    -moz-transform: translateY(-6px);
+    -ms-transform: translateY(-6px);
+    transform: translateY(-6px);
+}
+
+.custom-menu-toggle.x .bar {
+    -webkit-transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+}
+
+.custom-menu-toggle.x .bar:first-child {
+    -webkit-transform: rotate(-45deg);
+    -moz-transform: rotate(-45deg);
+    -ms-transform: rotate(-45deg);
+    transform: rotate(-45deg);
+}
+
+.custom-menu-screen {
+    background-color: rgba(0, 0, 0, 0.5);
+    -webkit-transition: all 0.5s;
+    -moz-transition: all 0.5s;
+    -ms-transition: all 0.5s;
+    transition: all 0.5s;
+    height: 3em;
+    width: 70em;
+    position: absolute;
+    top: 0;
+    z-index: -1;
+}
+
+.custom-menu-tucked .custom-menu-screen {
+    -webkit-transform: translateY(-44px);
+    -moz-transform: translateY(-44px);
+    -ms-transform: translateY(-44px);
+    transform: translateY(-44px);
+}
+
+@media (max-width: 62em) {
+
+    .custom-menu {
+        display: block;
+    }
+
+    .custom-menu-toggle {
+        display: block;
+        display: none\9;
+    }
+
+    .custom-menu-bottom {
+        position: absolute;
+        width: 100%;
+        border-top: 1px solid #eee;
+        background-color: #808080\9;
+        z-index: 100;
+    }
+
+    .custom-menu-bottom .pure-menu-link {
+        opacity: 1;
+        -webkit-transform: translateX(0);
+        -moz-transform: translateX(0);
+        -ms-transform: translateX(0);
+        transform: translateX(0);
+        -webkit-transition: all 0.5s;
+        -moz-transition: all 0.5s;
+        -ms-transition: all 0.5s;
+        transition: all 0.5s;
+    }
+
+    .custom-menu-bottom.custom-menu-tucked .pure-menu-link {
+        -webkit-transform: translateX(-140px);
+        -moz-transform: translateX(-140px);
+        -ms-transform: translateX(-140px);
+        transform: translateX(-140px);
+        opacity: 0;
+        opacity: 1\9;
+    }
+
+    .pure-menu-horizontal.custom-menu-tucked {
+        z-index: -1;
+        top: 45px;
+        position: absolute;
+        overflow: hidden;
+    }
+
+}
+</style>
+<div class="custom-menu-wrapper">
+    <div class="pure-menu custom-menu custom-menu-top">
+        <a href="#" class="pure-menu-heading custom-menu-brand">Brand</a>
+        <a href="#" class="custom-menu-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a>
+    </div>
+    <div class="pure-menu pure-menu-horizontal pure-menu-scrollable custom-menu custom-menu-bottom custom-menu-tucked" id="tuckedMenu">
+        <div class="custom-menu-screen"></div>
+        <ul class="pure-menu-list">
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Blog</a></li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">GitHub</a></li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Apple</a></li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Google</a></li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Wang</a></li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Yahoo</a></li>
+            <li class="pure-menu-item"><a href="#" class="pure-menu-link">W3C</a></li>
+        </ul>
+    </div>
+</div>
+<script>
+(function (window, document) {
+document.getElementById('toggle').addEventListener('click', function (e) {
+    document.getElementById('tuckedMenu').classList.toggle('custom-menu-tucked');
+    document.getElementById('toggle').classList.toggle('x');
+});
+})(this, this.document);
+</script>
+<style>
+.main {
+    padding: 2em;
+    color: black;
+}
+</style>
+
+<div class="main">
+
+    <h1>Responsive Horizontal-to-Scrollable Menu</h1>
+
+    <p>This example shows how you can build upon Pure menu classes
+    such as pure-menu-horizontal
+    and pure-menu-scrollable. At wide window-widths we display a horizontal menu.
+    At smaller window-widths,
+    we switch to a scrollable horizontal menu with a toggle control. Older IE
+    clients won't get all the bells and whistles, but it should still be usable.
+    Remember that the JavaScript provided is plain vanilla JS so it won't work in
+    some browsers; you'll need to polyfill or adapt the code to your library of choice.</p>
+
+    <p>Code reproduced below:</p>
+
+<pre class="code" data-language="html"><code>&lt;style&gt;
+      .custom-menu-wrapper {
+          background-color: #808080;
+          margin-bottom: 2.5em;
+          white-space: nowrap;
+          position: relative;
+      }
+
+      .custom-menu {
+          display: inline-block;
+          width: auto;
+          vertical-align: middle;
+          -webkit-font-smoothing: antialiased;
+      }
+
+      .custom-menu .pure-menu-link,
+      .custom-menu .pure-menu-heading {
+          color: white;
+      }
+
+      .custom-menu .pure-menu-link:hover,
+      .custom-menu .pure-menu-heading:hover {
+          background-color: transparent;
+      }
+
+      .custom-menu-top {
+          position: relative;
+          padding-top: .5em;
+          padding-bottom: .5em;
+      }
+
+      .custom-menu-brand {
+          display: block;
+          text-align: center;
+          position: relative;
+      }
+
+      .custom-menu-toggle {
+          width: 44px;
+          height: 44px;
+          display: block;
+          position: absolute;
+          top: 3px;
+          right: 0;
+          display: none;
+      }
+
+      .custom-menu-toggle .bar {
+          background-color: white;
+          display: block;
+          width: 20px;
+          height: 2px;
+          border-radius: 100px;
+          position: absolute;
+          top: 22px;
+          right: 12px;
+          -webkit-transition: all 0.5s;
+          -moz-transition: all 0.5s;
+          -ms-transition: all 0.5s;
+          transition: all 0.5s;
+      }
+
+      .custom-menu-toggle .bar:first-child {
+          -webkit-transform: translateY(-6px);
+          -moz-transform: translateY(-6px);
+          -ms-transform: translateY(-6px);
+          transform: translateY(-6px);
+      }
+
+      .custom-menu-toggle.x .bar {
+          -webkit-transform: rotate(45deg);
+          -moz-transform: rotate(45deg);
+          -ms-transform: rotate(45deg);
+          transform: rotate(45deg);
+      }
+
+      .custom-menu-toggle.x .bar:first-child {
+          -webkit-transform: rotate(-45deg);
+          -moz-transform: rotate(-45deg);
+          -ms-transform: rotate(-45deg);
+          transform: rotate(-45deg);
+      }
+
+      .custom-menu-screen {
+          background-color: rgba(0, 0, 0, 0.5);
+          -webkit-transition: all 0.5s;
+          -moz-transition: all 0.5s;
+          -ms-transition: all 0.5s;
+          transition: all 0.5s;
+          height: 3em;
+          width: 70em;
+          position: absolute;
+          top: 0;
+          z-index: -1;
+      }
+
+      .custom-menu-tucked .custom-menu-screen {
+          -webkit-transform: translateY(-44px);
+          -moz-transform: translateY(-44px);
+          -ms-transform: translateY(-44px);
+          transform: translateY(-44px);
+      }
+
+      @media (max-width: 62em) {
+
+          .custom-menu {
+              display: block;
+          }
+
+          .custom-menu-toggle {
+              display: block;
+              display: none\9;
+          }
+
+          .custom-menu-bottom {
+              position: absolute;
+              width: 100%;
+              border-top: 1px solid #eee;
+              background-color: #808080\9;
+              z-index: 100;
+          }
+
+          .custom-menu-bottom .pure-menu-link {
+              opacity: 1;
+              -webkit-transform: translateX(0);
+              -moz-transform: translateX(0);
+              -ms-transform: translateX(0);
+              transform: translateX(0);
+              -webkit-transition: all 0.5s;
+              -moz-transition: all 0.5s;
+              -ms-transition: all 0.5s;
+              transition: all 0.5s;
+          }
+
+          .custom-menu-bottom.custom-menu-tucked .pure-menu-link {
+              -webkit-transform: translateX(-140px);
+              -moz-transform: translateX(-140px);
+              -ms-transform: translateX(-140px);
+              transform: translateX(-140px);
+              opacity: 0;
+              opacity: 1\9;
+          }
+
+          .pure-menu-horizontal.custom-menu-tucked {
+              z-index: -1;
+              top: 45px;
+              position: absolute;
+              overflow: hidden;
+          }
+
+      }
+      &lt;/style&gt;
+      &lt;div class&#x3D;&quot;custom-menu-wrapper&quot;&gt;
+          &lt;div class&#x3D;&quot;pure-menu custom-menu custom-menu-top&quot;&gt;
+              &lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-heading custom-menu-brand&quot;&gt;Brand&lt;/a&gt;
+              &lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;custom-menu-toggle&quot; id&#x3D;&quot;toggle&quot;&gt;&lt;s class&#x3D;&quot;bar&quot;&gt;&lt;/s&gt;&lt;s class&#x3D;&quot;bar&quot;&gt;&lt;/s&gt;&lt;/a&gt;
+          &lt;/div&gt;
+          &lt;div class&#x3D;&quot;pure-menu pure-menu-horizontal pure-menu-scrollable custom-menu custom-menu-bottom custom-menu-tucked&quot; id&#x3D;&quot;tuckedMenu&quot;&gt;
+              &lt;div class&#x3D;&quot;custom-menu-screen&quot;&gt;&lt;/div&gt;
+              &lt;ul class&#x3D;&quot;pure-menu-list&quot;&gt;
+                  &lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
+                  &lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
+                  &lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
+                  &lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;Blog&lt;/a&gt;&lt;/li&gt;
+                  &lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;GitHub&lt;/a&gt;&lt;/li&gt;
+                  &lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;Twitter&lt;/a&gt;&lt;/li&gt;
+                  &lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;Apple&lt;/a&gt;&lt;/li&gt;
+                  &lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;Google&lt;/a&gt;&lt;/li&gt;
+                  &lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;Wang&lt;/a&gt;&lt;/li&gt;
+                  &lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;Yahoo&lt;/a&gt;&lt;/li&gt;
+                  &lt;li class&#x3D;&quot;pure-menu-item&quot;&gt;&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;pure-menu-link&quot;&gt;W3C&lt;/a&gt;&lt;/li&gt;
+              &lt;/ul&gt;
+          &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;script&gt;
+      (function (window, document) {
+      document.getElementById(&#x27;toggle&#x27;).addEventListener(&#x27;click&#x27;, function (e) {
+          document.getElementById(&#x27;tuckedMenu&#x27;).classList.toggle(&#x27;custom-menu-tucked&#x27;);
+          document.getElementById(&#x27;toggle&#x27;).classList.toggle(&#x27;x&#x27;);
+      });
+      })(this, this.document);
+      &lt;/script&gt;</code></pre>
+</div>
+
+
+</body>
+</html>