diff --git a/.gitignore b/.gitignore
index 81aa5c7b..9daf5c7f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
 .DS_Store
 bower_components/
 node_modules/
+build/
 npm-debug.log
 deploy.json
 grasshopper.json
diff --git a/Gruntfile.js b/Gruntfile.js
new file mode 100644
index 00000000..5ac3a807
--- /dev/null
+++ b/Gruntfile.js
@@ -0,0 +1,112 @@
+'use strict';
+
+module.exports = function (grunt) {
+    grunt.initConfig({
+        clean: {
+            build: ['build/']
+        },
+
+        copy : {
+            pub: {
+                src    : 'public/**',
+                dest   : 'build/',
+                expand : true
+            },
+
+            bower: {
+                cwd   : 'bower_components/',
+                expand: true,
+                dest  : 'build/public/vendor/',
+                src   : ['rainbow/js/**']
+            }
+        },
+
+        grid_units: {
+            main: {
+                dest : 'build/public/css/main-grid.css',
+                options: {
+                    mediaQueries: {
+                        sm : 'screen and (min-width: 35.5em)', // 568px
+                        med: 'screen and (min-width: 48em)',   // 768px
+                        lrg: 'screen and (min-width: 58em)',   // 928px
+                        xl : 'screen and (min-width: 75em)'    // 1200px
+                    }
+                }
+            },
+
+            gallery: {
+                dest : 'build/public/css/layouts/gallery-grid.css',
+                options: {
+                    units: 6,
+                    mediaQueries: {
+                        med : 'screen and (min-width: 30em)',
+                        lrg : 'screen and (min-width: 48em)'
+                    }
+                }
+            }
+        },
+
+        stripmq: {
+            all: {
+                files: {
+                    'build/public/css/main-grid-old-ie.css':
+                        ['build/public/css/main-grid.css'],
+
+                    'build/public/css/main-old-ie.css':
+                        ['build/public/css/main.css'],
+
+
+                    // Layout Grids
+                    'build/public/css/layouts/gallery-grid-old-ie.css':
+                        ['build/public/css/layouts/gallery-grid.css'],
+
+                    //Layout CSS
+                    'build/public/css/layouts/blog-old-ie.css':
+                        ['build/public/css/layouts/blog.css'],
+
+                    'build/public/css/layouts/marketing-old-ie.css':
+                        ['build/public/css/layouts/marketing.css'],
+
+                    'build/public/css/layouts/pricing-old-ie.css':
+                        ['build/public/css/layouts/pricing.css'],
+
+                    'build/public/css/layouts/side-menu-old-ie.css':
+                        ['build/public/css/layouts/side-menu.css'],
+
+                    'build/public/css/layouts/gallery-old-ie.css':
+                        ['build/public/css/layouts/gallery.css'],
+
+                    'build/public/css/layouts/email-old-ie.css':
+                        ['build/public/css/layouts/email.css']
+                }
+            }
+        },
+
+        observe: {
+            bower: {
+                files: ['bower_components/**', '!bower_components/pure/**'],
+                tasks: ['copy:bower']
+            },
+
+            pub: {
+                files: 'public/**',
+                tasks: ['default']
+            }
+        }
+    });
+
+    // npm tasks.
+    grunt.loadNpmTasks('grunt-contrib-clean');
+    grunt.loadNpmTasks('grunt-contrib-copy');
+    grunt.loadNpmTasks('grunt-contrib-watch');
+    grunt.loadNpmTasks('grunt-stripmq');
+
+    // Local tasks.
+    grunt.loadTasks('lib/tasks/');
+
+    grunt.registerTask('default', ['clean', 'copy', 'grid_units', 'stripmq']);
+
+    // Makes the `watch` task run a build first.
+    grunt.renameTask('watch', 'observe');
+    grunt.registerTask('watch', ['default', 'observe']);
+};
diff --git a/app.js b/app.js
index de13f8be..bf4956bb 100644
--- a/app.js
+++ b/app.js
@@ -31,7 +31,7 @@ app.set('views', config.dirs.views);
 
 app.locals({
     site          : 'Pure',
-    copyright_year: '2013',
+    copyright_year: '2014',
 
     version    : config.version,
     yui_version: config.yui.version,
@@ -41,8 +41,9 @@ app.locals({
 
     min: config.isProduction ? '-min' : '',
 
-    ga     : config.isProduction && config.ga,
-    typekit: config.typekit
+    ga       : config.isProduction && config.ga,
+    typekit  : config.typekit,
+    html5shiv: config.html5shiv
 });
 
 app.expose(config.yui.config, 'YUI_config');
diff --git a/bower.json b/bower.json
index c9c1de2e..d88f719d 100644
--- a/bower.json
+++ b/bower.json
@@ -1,9 +1,9 @@
 {
-    "name"   : "pure-site",
-    "version": "1.8.0",
-    "private": true,
-
-    "dependencies": {
-        "pure": "latest"
-    }
+  "name": "pure-site",
+  "version": "1.8.0",
+  "private": true,
+  "dependencies": {
+    "pure": "latest",
+    "rainbow": "~1.1.9"
+  }
 }
diff --git a/config/index.js b/config/index.js
index c4a5ffe2..47b4e975 100644
--- a/config/index.js
+++ b/config/index.js
@@ -9,7 +9,7 @@ module.exports = Object.freeze({
     port: env.PORT || 5000,
 
     dirs: Object.freeze({
-        pub     : path.resolve('public/'),
+        pub     : path.resolve('build/public/'),
         views   : path.resolve('views/pages/'),
         layouts : path.resolve('views/layouts/'),
         partials: path.resolve('views/partials/')
@@ -17,8 +17,9 @@ module.exports = Object.freeze({
 
     version: require('../package').version,
 
-    pure   : require('./pure'),
-    yui    : require('./yui'),
-    ga     : 'UA-41480445-1',
-    typekit: 'gis6vng'
+    pure     : require('./pure'),
+    yui      : require('./yui'),
+    ga       : 'UA-41480445-1',
+    typekit  : 'gis6vng',
+    html5shiv: '3.7'
 });
diff --git a/config/pure.js b/config/pure.js
index 72d62333..2dbb92a2 100644
--- a/config/pure.js
+++ b/config/pure.js
@@ -1,9 +1,7 @@
 var fs   = require('fs'),
     path = require('path');
 
-var bowerrc      = path.join(process.cwd(), '.bowerrc'),
-    bower        = JSON.parse(fs.readFileSync(bowerrc, 'utf8')),
-    bowerPureDir = path.join(process.cwd(), bower.directory, 'pure');
+var bowerPureDir = path.resolve('bower_components', 'pure');
 
 exports.version = require(path.join(bowerPureDir, 'bower.json')).version;
 exports.modules = ['base', 'grids', 'forms', 'buttons', 'tables', 'menus'];
diff --git a/lib/helpers.js b/lib/helpers.js
index 7513b4ba..2e109fbc 100644
--- a/lib/helpers.js
+++ b/lib/helpers.js
@@ -199,14 +199,15 @@ function code(content, options) {
         content = null;
     }
 
-    var type, open, close;
+    var type, classes, open, close;
 
     // Determine if this helper is being used as an inline or block helper. When
     // `options.fn` is defined this helper was invoked as a block helper.
     if (options.fn) {
         type    = content || 'html';
+        classes = options.hash.wrap ? 'code code-wrap' : 'code';
         content = options.fn(this);
-        open    = '<pre class="snippet" data-language="' + type + '"><code>';
+        open    = '<pre class="' + classes + '" data-language="' + type + '"><code>';
         close   = '</code></pre>';
     } else {
         open  = '<code>';
@@ -285,17 +286,26 @@ function setSubTitle(subTitle) {
     this.subTitle = subTitle;
 }
 
-function fileSize(module, decimals) {
+function fileSize(module, decimals, options) {
+    if (typeof decimals === 'object') {
+        options  = decimals;
+        decimals = null;
+    }
+
     typeof decimals === 'number' || (decimals = 1);
-    var filesize = (this.pure.filesizes[module] / 1024);
+
+    var pure     = (options && options.hash.pure) || this.pure,
+        filesize = (pure.filesizes[module] / 1024);
+
     return filesize.toFixed(decimals) + 'KB';
 }
 
-function filePercent(module) {
-    var filesizes = this.pure.filesizes,
+function filePercent(module, options) {
+    var pure      = (options && options.hash.pure) || this.pure,
+        filesizes = pure.filesizes,
         total     = 0;
 
-    total = this.pure.modules.reduce(function (size, module) {
+    total = pure.modules.reduce(function (size, module) {
         return size + filesizes[module];
     }, total);
 
diff --git a/lib/tasks/grid-units.js b/lib/tasks/grid-units.js
new file mode 100644
index 00000000..3dbe9fdf
--- /dev/null
+++ b/lib/tasks/grid-units.js
@@ -0,0 +1,19 @@
+'use strict';
+
+var rework    = require('rework'),
+    pureGrids = require('rework-pure-grids');
+
+module.exports = function (grunt) {
+    grunt.registerMultiTask('grid_units', 'Generates grid units.', function () {
+        var options = this.options({
+            indent: '    '
+        });
+
+        this.files.forEach(function (fileGroup) {
+            var css = rework('').use(pureGrids.units(options.units, options));
+
+            grunt.file.write(fileGroup.dest, css.toString(options));
+            grunt.log.writeln('File "' + fileGroup.dest + '" created.');
+        });
+    });
+};
diff --git a/package.json b/package.json
index a85c77f8..01001f4d 100644
--- a/package.json
+++ b/package.json
@@ -1,52 +1,61 @@
 {
-    "name": "pure-site",
-    "description": "The Pure CSS website.",
-    "homepage": "http://purecss.io/",
-    "version": "1.8.2",
-    "private": true,
-    "repository": "git://github.com/yui/pure-site.git",
-    "contributors": [
-        "Eric Ferraiuolo <eferraiuolo@gmail.com> (http://ericf.me/)",
-        "Tilo Mitra <tilomitra@gmail.com> (http://www.tilomitra.com/)"
-    ],
-    "directories": {
-        "lib": "./lib",
-        "public": "./public",
-        "views": "./views"
+  "name": "pure-site",
+  "description": "The Pure CSS website.",
+  "homepage": "http://purecss.io/",
+  "version": "1.9.0",
+  "private": true,
+  "repository": "git://github.com/yui/pure-site.git",
+  "contributors": [
+    "Eric Ferraiuolo <eferraiuolo@gmail.com> (http://ericf.me/)",
+    "Tilo Mitra <tilomitra@gmail.com> (http://www.tilomitra.com/)"
+  ],
+  "directories": {
+    "lib": "./lib",
+    "public": "./public",
+    "views": "./views"
+  },
+  "main": "server.js",
+  "engines": {
+    "node": ">=0.8.x",
+    "npm": ">=1.1.2"
+  },
+  "dependencies": {
+    "combohandler": "~0.2.0",
+    "express": "3.x",
+    "express-annotations": "~0.1.0",
+    "express-params": "~0.0.3",
+    "express-map": "~0.1.0",
+    "express-slash": "~0.2.0",
+    "express-state": "~1.0.1",
+    "express3-handlebars": "~0.5.0",
+    "handlebars": "~1.1.2",
+    "glob": "~3.2.6",
+    "async": "~0.2.9",
+    "archiver": "~0.4.10",
+    "bower": "~1.2.7",
+    "css-parse": "~1.6.0",
+    "es6-promise": "~0.1.0",
+    "rework": "~0.18.3",
+    "rework-pure-grids": "~0.3.2"
+  },
+  "scripts": {
+    "install": "bower install && grunt"
+  },
+  "yahoo": {
+    "bugzilla": {
+      "product": "yui utilities",
+      "component": "Pure"
     },
-    "main": "server.js",
-    "engines": {
-        "node": ">=0.8.x",
-        "npm": ">=1.1.2"
-    },
-    "dependencies": {
-        "combohandler": "~0.2.0",
-        "express": "3.x",
-        "express-annotations": "~0.1.0",
-        "express-params": "~0.0.3",
-        "express-map": "~0.1.0",
-        "express-slash": "~0.2.0",
-        "express-state": "~1.0.1",
-        "express3-handlebars": "~0.5.0",
-        "handlebars": "~1.1.2",
-        "glob": "~3.2.6",
-        "async": "~0.2.9",
-        "archiver": "~0.4.10",
-        "bower": "~1.2.7",
-        "css-parse": "~1.6.0",
-        "es6-promise": "~0.1.0"
-    },
-    "scripts": {
-        "install": "bower install"
-    },
-    "yahoo": {
-        "bugzilla": {
-            "product": "yui utilities",
-            "component": "Pure"
-        },
-        "custodian": {
-            "email": "tilo@yahoo-inc.com",
-            "url": "http://purecss.io/"
-        }
+    "custodian": {
+      "email": "tilo@yahoo-inc.com",
+      "url": "http://purecss.io/"
     }
-}
\ No newline at end of file
+  },
+  "devDependencies": {
+    "grunt": "~0.4.2",
+    "grunt-stripmq": "0.0.3",
+    "grunt-contrib-clean": "~0.5.0",
+    "grunt-contrib-copy": "~0.5.0",
+    "grunt-contrib-watch": "~0.5.3"
+  }
+}
diff --git a/public/css/customize.css b/public/css/customize.css
new file mode 100644
index 00000000..bdadd8bb
--- /dev/null
+++ b/public/css/customize.css
@@ -0,0 +1,3 @@
+table {
+    width: 100%;
+}
diff --git a/public/css/grids.css b/public/css/grids.css
index 0fbee77f..63124303 100644
--- a/public/css/grids.css
+++ b/public/css/grids.css
@@ -1,7 +1,7 @@
-dl {
+/*dl {
     line-height: 1.6em;
     font-size: 1.125em;
-}
+}*/
 
 .grid-example {
     background: #333;
@@ -15,11 +15,11 @@ dl {
 
 .grids-unit {
     margin: 0.25em 0;
-    padding-left: 4em;
+    padding-left: 4.5em;
 }
 .grids-unit-width {
-    width: 3.5em;
-    margin-left: -4em;
+    width: 4em;
+    margin-left: -4.5em;
     padding-right: 0.5em;
     line-height: 2em;
     text-align: right;
diff --git a/public/css/home.css b/public/css/home.css
index f77fb88b..a432cb96 100644
--- a/public/css/home.css
+++ b/public/css/home.css
@@ -1,46 +1,43 @@
 .hero {
     text-align: center;
-    margin: 6em auto 3em;
 }
     .hero-titles {
         font-family: "omnes-pro", sans-serif;
-        padding: 0 2em;
+        padding: 0 1em;
+        margin: 2em auto;
+        max-width: 768px;
     }
-    .hero h1 {
-        font-size: 800%;
+    .hero-site {
+        font-size: 400%;
+        font-weight: 100;
         margin: 0;
-        padding: 0;
         color: #1f8dd6;
-        font-weight: 100;
     }
-    .hero h2 {
+    .hero-tagline {
+        font-size: 150%;
         font-weight: 100;
-        font-size: 260%;
-        margin: 0.02em 0 0.8em;
+        line-height: 1.5;
+        margin: 0 0 1em;
         color: #666;
     }
 
-.hero-cta pre {
-    padding: 1em;
-    font-size: 100%;
-    border-left: 0;
-    border-right: 0;
+.hero-cta .code {
+    margin-left: auto;
+    margin-right: auto;
 }
 
-a.pure-button-cta,
-a.pure-button-secondary {
-    font-size: 120%;
-    font-weight: bold;
-    margin: 0.25em 0;
+a.button-cta,
+a.button-secondary {
+    margin: 0.25em;
 }
 
-a.pure-button-cta {
+a.button-cta {
     background: #1f8dd6;
-    color: white;
+    color: #fff;
     border: 1px solid #1f8dd6;
 }
 
-a.pure-button-secondary {
+a.button-secondary {
     background: #fff;
     color: #666;
     border: 1px solid #ddd;
@@ -48,32 +45,50 @@ a.pure-button-secondary {
 
 .size-chart {
     width: 100%;
+    font-size: 87.5%;
+    line-height: 1.4;
+    margin-bottom: 2em;
 }
 
-    .size-chart-item {
-        -webkit-box-sizing: border-box;
-        -moz-box-sizing: border-box;
-        box-sizing: border-box;
+    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: #0e90d2;
     }
-        .size-chart-base span {
+        .size-chart-base .size-chart-size {
             color: rgb(103, 194, 240);
         }
 
     .size-chart-grids {
         background: rgb(128, 88, 165);
     }
-        .size-chart-grids span {
+        .size-chart-grids .size-chart-size {
             color: rgb(200, 131, 255);
         }
+
     .size-chart-forms {
         background: #5eb95e;
     }
 
-        .size-chart-forms span {
+        .size-chart-forms .size-chart-size {
             color: rgb(161, 240, 137);
         }
 
@@ -81,138 +96,171 @@ a.pure-button-secondary {
         background: #dd514c;
     }
 
-        .size-chart-buttons span {
+        .size-chart-buttons .size-chart-size {
             color: rgb(236, 164, 154);
         }
 
     .size-chart-menus {
         background: rgb(250, 210, 50);
     }
-        .size-chart-menus span {
+        .size-chart-menus .size-chart-size {
             color: rgb(255, 240, 134);
         }
+
     .size-chart-tables {
         background: rgb(243, 123, 29);
     }
-        .size-chart-tables span {
+        .size-chart-tables .size-chart-label {
+            margin-left: -0.5em;
+        }
+        .size-chart-tables .size-chart-size {
             color: rgb(255, 190, 129);
         }
 
-    a.size-chart-label {
-        display: block;
-        color: #fff;
-        padding: 0.5em;
-        text-decoration: none;
-        -webkit-box-sizing: border-box;
-        -moz-box-sizing: border-box;
-        box-sizing: border-box;
+.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;
     }
 
-    .size-chart-size {
-        display: block;
+    .marketing-header {
+        font-weight: 400;
     }
 
-.marketing-ribbon {
-    border-bottom: 1px solid #eee;
-    padding: 1em 0;
+    .marketing-diagram {
+        margin: 2em auto;
+    }
+
+.sample-buttons {
+    margin: 1em auto;
+    padding: 0 0.5em;
 }
 
-    .marketing-ribbon .content {
-        margin-bottom: 0;
+    .sample-button {
+        padding: 0.5em;
+        text-align: center;
     }
-    .marketing-ribbon h3 {
-        font-size: 1.47em;
-        font-weight: normal;
+    .sample-button .pure-button {
+        width: 100%;
     }
-    .marketing-ribbon p {
-        font-size: 1.125em;
-        line-height: 1.6em;
+
+    .button-a {
+        background: #e1f2fa;
+        color: #5992aa;
     }
 
-.sample-buttons .pure-button {
-    width: 30%;
-    margin: 0.2em;
-}
-.sample-buttons p {
-    margin: 0.5em;
-}
+    .button-b {
+        background: #fcebbd;
+        color: #af9540;
+    }
 
+    .button-c,
+    .button-d,
+    .button-e {
+        border-radius: 8px;
+    }
 
-.pure-button-a {
-    background: #e1f2fa;
-    color: #5992aa;
-}
+    .button-f,
+    .button-g,
+    .button-h {
+        border-radius: 20px;
+    }
 
-.pure-button-b {
-    background: #fcebbd;
-    color: #af9540;
-}
+    .button-c {
+        background: #333;
+        color: #fff;
+    }
+    .button-d {
+        background: #d3eda3;
+        color: #72962e;
+    }
 
-.pure-button-c,
-.pure-button-d,
-.pure-button-e {
-    border-radius: 8px;
-}
+    .button-e {
+        background: #f5ab9e;
+        color: #8c3a2b;
+    }
+    .button-f {
+        background: #ddaeff;
+        color: #8156a7;
+    }
 
-.pure-button-f,
-.pure-button-g,
-.pure-button-h {
-    border-radius: 20px;
-}
+    .button-g {
+        background: #f57b00;
+        color: #ffca95;
+    }
 
-.pure-button-c {
-    background: #333;
-    color: #fff;
-}
-.pure-button-d {
-    background: #d3eda3;
-    color: #72962e;
-}
+    .button-h {
+        background: #008ed4;
+        color: #fff;
+    }
+    .sample-button .button-h {
+        width: 50%; /* Updated to 80% at sm breakpoint */
+    }
 
-.pure-button-e {
-    background: #f5ab9e;
-    color: #8c3a2b;
-}
-.pure-button-f {
-    background: #ddaeff;
-    color: #8156a7;
+@media screen and (min-width: 30em) {
+    .size-chart-tables .size-chart-label {
+        margin-left: 0;
+    }
 }
 
-.pure-button-g {
-    background: #f57b00;
-    color: #ffca95;
-}
+@media screen and (min-width: 35.5em) {
+    .hero {
+        margin-bottom: 3em;
+    }
 
-.pure-button-h {
-    background: #008ed4;
-    color: #fff;
+    .sample-button .button-h {
+        width: 100%;
+    }
 }
 
+@media screen and (min-width: 48em) {
+    .hero-titles {
+        padding: 0 2em;
+    }
+    .hero-site {
+        font-size: 800%;
+    }
+    .hero-tagline {
+        font-size: 250%;
+    }
 
-@media (max-width: 767px) {
-    .hero {
-        margin: 2em 0 auto;
+    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;
     }
-        .hero-titles {
-            padding: 0 1em;
-        }
-        .hero h1 {
-            font-size: 250%;
-            font-weight: 300; /* slightly thicker to compensate for font-size */
-        }
-        .hero h2 {
-            font-size: 165%;
-        }
 
-    /* by default l-hbox becomes padding: 1.3em; at <= 767px. However, this makes the heading
-    too far away from the content, so adding this in here. */
-    h3.l-hbox,
-    p.l-hbox {
-        padding: 0 1.3em;
+    .marketing-header {
+        font-size: 150%;
     }
 
-    a.size-chart-label {
-        font-size: 0.75em;
-        padding: 0.6667em;
+    .l-wrap .sample-buttons {
+        padding: 0 0.5em;
     }
 }
diff --git a/public/css/layouts.css b/public/css/layouts.css
index 6635abcf..8153d634 100644
--- a/public/css/layouts.css
+++ b/public/css/layouts.css
@@ -1,16 +1,10 @@
 .layout-item {
-    margin: 1.3em 0;
-    padding: 1.3em 0;
+    margin-top: 2em;
+    padding-top: 2em;
     border-top: 1px solid #eee;
 }
-.layout-item img {
-    height: auto;
-}
-.layout-item-screenshot .l-hbox {
-    padding-left: 0;
-}
-.layout-item-content .l-hbox {
-    padding-right: 0;
+.layout-item-screenshot {
+    text-align: center;
 }
 .layout-item-head {
     margin-top: 0; /* so that the .layout-item-head lines up with the image */
@@ -48,12 +42,3 @@
     line-height: 1.75;
     display: block;
 }
-
-@media (max-width: 767px) {
-    .layout-item-screenshot .l-hbox {
-        padding-right: 0;
-    }
-    .layout-item-content .l-hbox {
-        padding-left: 0;
-    }
-}
diff --git a/public/css/layouts/blog.css b/public/css/layouts/blog.css
index 25e6149a..c1e3e854 100644
--- a/public/css/layouts/blog.css
+++ b/public/css/layouts/blog.css
@@ -4,34 +4,43 @@
     box-sizing: border-box;
 }
 
+body,
+.pure-g [class *= "pure-u"] {
+    font-family: "proxima-nova", sans-serif;
+}
+
 a {
     text-decoration: none;
-    color: rgb(142, 142, 214);
+    color: rgb(61, 146, 201);
 }
 a:hover,
 a:focus {
     text-decoration: underline;
 }
 
+h3 {
+    font-weight: 100;
+}
+
 /* LAYOUT CSS */
-#layout {
-    padding-left: 25%; /* "left col (nav + list)" width */
-    position: relative;
+.pure-img-responsive {
+    max-width: 100%;
+    height: auto;
 }
 
-.sidebar {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    width: 25%;
-    margin-left: -25%;
-    background: rgb(24, 33, 61);
-    color: #fff;
+#layout {
+    padding: 0;
 }
 
 .header {
-    margin: 50% 2em 0;
-    text-align: right;
+    text-align: center;
+    top: auto;
+    margin: 3em auto;
+}
+
+.sidebar {
+    background: rgb(61, 79, 93);
+    color: #fff;
 }
 
 .brand-title,
@@ -43,7 +52,7 @@ a:focus {
 }
 .brand-tagline {
     font-weight: 300;
-    color: rgb(142, 142, 214);
+    color: rgb(176, 202, 219);
 }
 
 .nav-list {
@@ -58,14 +67,16 @@ a:focus {
 }
 .nav-item a {
     background: transparent;
-    border: 3px solid rgb(103, 103, 180);
+    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: 3px solid rgb(142, 142, 214);
-    color: rgb(142, 142, 214);
+    border: 2px solid rgb(61, 146, 201);
     text-decoration: none;
 }
 
@@ -80,7 +91,7 @@ a:focus {
 }
 
 .content {
-    padding: 2em 3em 0;
+    padding: 2em 1em 0;
 }
 
 .post {
@@ -150,27 +161,20 @@ a:focus {
     background: none;
 }
 
-@media (max-width: 767px) {
-    .sidebar {
-        width: 100%;
-        position: relative;
-        margin: 0;
+@media (min-width: 48em) {
+    .content {
+        padding: 2em 3em 0;
+        margin-left: 25%;
     }
 
     .header {
-        text-align: center;
-        top: auto;
-        margin: 3em auto;
-        position: static;
+        margin: 80% 2em 0;
+        text-align: right;
     }
 
-    #layout {
-        padding: 0;
-    }
-}
-
-@media (max-width: 480px) {
-    .content {
-        padding: 2em 1em 0;
+    .sidebar {
+        position: fixed;
+        top: 0;
+        bottom: 0;
     }
 }
diff --git a/public/css/layouts/email.css b/public/css/layouts/email.css
index cd31f2b3..f3d63cb4 100644
--- a/public/css/layouts/email.css
+++ b/public/css/layouts/email.css
@@ -1,43 +1,38 @@
+/*
+ * -- 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;
 }
 
-/* LAYOUT CSS */
-#layout {
-    padding-left:500px; /* "left col (nav + list)" width */
-    position: relative;
-}
-
-#nav, #list {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    overflow: auto;
-}
-#nav {
-    margin-left:-500px; /* "left col (nav + list)" width */
-    width:150px;
-    background: rgb(37, 42, 58);
-    text-align: center;
-    padding: 2em 0;
+/*
+ * -- FONT-FAMILY STYLES --
+ * This is the font-family that I want to use for this page
+ */
+body,
+.pure-g [class *= "pure-u"] {
+    font-family: "proxima-nova", sans-serif;
 }
 
-#list {
-    margin-left: -350px;
-    width:350px;
-    border-right: 1px solid #ddd;
-}
 
-/* HELPER CLASSES */
+/*
+ * -- 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;
@@ -52,10 +47,52 @@ a {
     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;
+}
 
 
-/* Vertical Navigation Styles */
-#nav .pure-menu {
+/*
+ * -- NAV BAR STYLES --
+ * Styling the default .pure-menu to look a little more unique.
+ */
+#nav .pure-menu.pure-menu-open {
     background: transparent;
     border: none;
     text-align: left;
@@ -74,34 +111,33 @@ a {
         color: rgb(75, 113, 151);
     }
 
-    #nav .nav-menu-button {
-        display: none;
-    }
-
-    .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 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 */
@@ -131,7 +167,7 @@ a {
     background: #eee;
 }
 .email-item-unread {
-    border-left: 6px solid #02a3c6;
+    border-left: 6px solid #1b98f8;
 }
 
 /* Email Content Styles */
@@ -161,21 +197,56 @@ a {
             margin-bottom: 0.3em;
         }
 
+    .email-avatar {
+        width: 40px;
+        height: 40px;
+    }
+
 
-@media (max-width: 867px) {
+/*
+ * -- 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) {
 
-    #list,
-    #main {
-        width: 100%;
-    }
+    /* Move the layout over so we can fit the nav + list in on the left */
     #layout {
-        padding-left: -150px;
+        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-right: 0;
         border-bottom: 1px solid #ddd;
     }
+
     #main {
         position: fixed;
         top: 33%;
@@ -185,36 +256,29 @@ a {
         overflow: auto;
         width: auto; /* so that it's not 100% */
     }
+
 }
 
-@media (max-width: 480px) {
-    #layout, #nav, #list, #main {
+/*
+ * -- 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;
     }
-    #nav {
-        width: 100%;
-        height: 40px;
-        position: relative;
-    }
-    #nav .nav-menu-button {
-        display: block;
-        top: 0.5em;
-        right: 0.5em;
-        position: absolute;
-    }
-    #nav.active {
-        height: 80%;
-    }
-    .nav-inner {
-        display: none;
-    }
-    #nav.active .nav-inner {
-        display: block;
-    }
-    .email-avatar {
-        width: 40px;
-        height: 40px;
-    }
 }
+
diff --git a/public/css/layouts/gallery.css b/public/css/layouts/gallery.css
index 18d95d06..d56a1363 100644
--- a/public/css/layouts/gallery.css
+++ b/public/css/layouts/gallery.css
@@ -2,6 +2,11 @@ body {
     color: #666;
 }
 
+body,
+.pure-g [class *= "pure-u"] {
+    font-family: "proxima-nova", sans-serif;
+}
+
 h1,h2,h3,h4,h5,h6 {
     color: #111;
 }
@@ -19,12 +24,18 @@ h1,h2,h3,h4,h5,h6 {
     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;
-        width: 100%;
     }
 
     .photo-box aside {
@@ -56,19 +67,23 @@ h1,h2,h3,h4,h5,h6 {
         }
 
 .text-box {
-    background: rgb(28, 28, 37); /* bluish grey */
-    color: rgb(133, 154, 238); /* steel blue */
+    background: rgb(49, 49, 49); /* bluish grey */
+    color: rgb(255, 190, 94); /* steel blue */
 }
 
     .text-box-head {
         color: #fff;
-        border-bottom: 2px solid rgb(43, 43, 58);
         padding-bottom: 0.2em;
+        font-weight: 400;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        font-size: 24px;
     }
 
     .text-box-subhead {
         font-weight: normal;
-        font-size: 150%;
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
     }
 
 .form-box {
@@ -82,9 +97,15 @@ h1,h2,h3,h4,h5,h6 {
         color: white;
         vertical-align: top;
         font-size: 85%;
-        font-weight: bold;
-        text-shadow: 0px 1px 1px rgb(35, 111, 31);
+        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 {
@@ -95,16 +116,12 @@ h1,h2,h3,h4,h5,h6 {
     font-size: 80%;
 }
 
-@media (max-width: 767px) {
+@media (min-width: 30em) {
     .photo-box, .text-box {
-        text-align: center;
+        text-align: left;
     }
 
-        .photo-box img {
-            width: 100%;
-        }
-
-    .text-box {
-        height: auto;
+    .photo-box-thin {
+        height: 250px;
     }
 }
diff --git a/public/css/layouts/marketing.css b/public/css/layouts/marketing.css
index b83630b6..8e6196fa 100644
--- a/public/css/layouts/marketing.css
+++ b/public/css/layouts/marketing.css
@@ -4,84 +4,285 @@
     box-sizing: border-box;
 }
 
+/*
+ * -- BASE STYLES --
+ * Most of these are inherited from Base, but I want to change a few.
+ */
 body {
-    margin: 0 auto;
     line-height: 1.7em;
+    color: #7f8c8d;
+    font-size: 13px;
 }
 
+body,
+.pure-g [class *= "pure-u"] {
+    font-family: "proxima-nova", sans-serif;
+}
+
+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;
 }
 
-.header {
-    margin: 0 0;
+.l-box-lrg {
+    padding: 2em;
+    border-bottom: 1px solid rgba(0,0,0,0.1);
 }
 
-    .header .pure-menu {
-        padding: 0.5em;
-    }
+.is-center {
+    text-align: center;
+}
 
-        .header .pure-menu li a:hover,
-        .header .pure-menu li a:focus {
-            background: none;
-            border: none;
-            color: #aaa;
-        }
 
-body .primary-button {
-    background: #02a6eb;
-    color: #fff;
+
+/*
+ * -- 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.pure-menu-open {
+    background: #2d3e50;
+}
+.pure-menu.pure-menu-open.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 {
-    margin: 2em auto 0;
-    padding: 3em 0.5em;
-    background: #eee;
+    /* absolute center .splash within .splash-container */
+    width: 80%;
+    height: 50%;
+    overflow: auto;
+    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;
 }
-    .splash .splash-head {
-        font-size: 300%;
-        margin: 0em 0;
-        line-height: 1.2em;
-    }
-    .splash .splash-subhead {
-        color: #999;
-        font-weight: 300;
-        line-height: 1.4em;
-    }
-    .splash .primary-button {
-        font-size: 150%;
-    }
 
+/* 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;
 
-.content .content-subhead {
-    color: #999;
-    padding-bottom: 0.3em;
+}
+
+/* This is the class used for the main content headers (<h2>) */
+.content-head {
+    font-weight: 400;
     text-transform: uppercase;
-    margin: 0;
-    border-bottom: 2px solid #eee;
-    display: inline-block;
+    letter-spacing: 0.1em;
+    margin: 2em 0 1em;
 }
 
-.content .content-ribbon {
-    margin: 3em;
-    border-bottom: 1px solid #eee;
+/* This is a modifier class used when the content-head is inside a ribbon */
+.content-head-ribbon {
+    color: white;
 }
 
-.ribbon {
-    background: #eee;
-    text-align: center;
-    padding: 2em;
-    color: #999;
+/* This is the class used for the content sub-headers (<h3>) */
+.content-subhead {
+    color: #1f8dd6;
 }
-    .ribbon h2 {
-        display: inline;
-        font-weight: normal;
+    .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;
-    color: #666;
-    text-align: center;
-    padding: 1em;
-    font-size: 80%;
+}
+
+/*
+ * -- 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 want to give the content area some more padding */
+    .content {
+        padding: 1em;
+    }
+
+    /* 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%;
+    }
 }
diff --git a/public/css/layouts/pricing.css b/public/css/layouts/pricing.css
index 5a0bfe5f..54cfdc24 100644
--- a/public/css/layouts/pricing.css
+++ b/public/css/layouts/pricing.css
@@ -43,11 +43,14 @@ p {
  * 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;
-    height: 350px;
+    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;
@@ -57,7 +60,7 @@ p {
         display: table-cell;
         vertical-align: middle;
         margin-bottom: 0;
-        font-size: 4em;
+        font-size: 2em;
         color: white;
         font-weight: 500;
         text-shadow: 0 1px 1px black;
@@ -85,7 +88,7 @@ p {
  */
 .pricing-table {
     border: 1px solid #ddd;
-    margin: 0 0.5em;
+    margin: 0 0.5em 2em;
     padding: 0 0 3em;
 }
 
@@ -183,7 +186,7 @@ p {
 }
 
 .footer {
-    background: black;
+    background: #111;
     color: #888;
     text-align: center;
 }
@@ -198,13 +201,13 @@ p {
  * On tablets, we want to slightly adjust the size of the banner
  * text and add some vertical space between the various pricing tables
  */
-@media(max-width: 767px) {
+@media(min-width: 767px) {
 
     .banner-head {
-        font-size: 3em;
+        font-size: 4em;
     }
     .pricing-table {
-        margin-bottom: 2em;
+        margin-bottom: 0;
     }
 
 }
@@ -213,11 +216,11 @@ p {
  * -- PHONE MEDIA QUERIES --
  * On phones, we want to reduce the height and font-size of the banner further
  */
-@media (max-width: 480px) {
+@media (min-width: 480px) {
     .banner {
-        height: 200px;
+        height: 400px;
     }
     .banner-head {
-        font-size: 2em;
+        font-size: 3em;
     }
 }
diff --git a/public/css/layouts/side-menu.css b/public/css/layouts/side-menu.css
index f2d20ae1..8fe1b159 100644
--- a/public/css/layouts/side-menu.css
+++ b/public/css/layouts/side-menu.css
@@ -2,6 +2,11 @@ body {
     color: #777;
 }
 
+.pure-img-responsive {
+    max-width: 100%;
+    height: auto;
+}
+
 /*
 Add transition to containers so they can push in and out.
 */
@@ -19,10 +24,21 @@ Add transition to containers so they can push in and out.
 This is the parent `<div>` that contains the menu and the content area.
 */
 #layout {
-    padding-left: 150px; /* left col width "#menu" */
-    left: 0;
+    position: relative;
+    padding-left: 0;
 }
+    #layout.active {
+        position: relative;
+        left: 150px;
+    }
+        #layout.active #menu {
+            left: 150px;
+            width: 150px;
+        }
 
+        #layout.active .menu-link {
+            left: 150px;
+        }
 /*
 The content `<div>` is where all your content goes.
 */
@@ -59,24 +75,24 @@ The content `<div>` is where all your content goes.
     color: #888;
 }
 
+
+
 /*
 The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
 appears on the left side of the page.
-
-By using the combination of `position: fixed; top: 0; bottom:0;`, we can make
-the menu have 100% height and be fixed on the page as the rest of it scrolls.
 */
+
 #menu {
-    margin-left: -150px; /* this should be "#menu" width */
+    margin-left: -150px; /* "#menu" width */
     width: 150px;
     position: fixed;
     top: 0;
-    left: 150px; /* this should be "#menu" width */
+    left: 0;
     bottom: 0;
-    z-index: 1; /* so the menu or its navicon stays above all content */
+    z-index: 1000; /* so the menu or its navicon stays above all content */
     background: #191818;
     overflow-y: auto;
-    -webkit-overflow-scroll: touch; /* for smooth scrolling on mobile */
+    -webkit-overflow-scrolling: touch;
 }
     /*
     All anchors inside the menu should be styled like this.
@@ -146,15 +162,17 @@ how it works:
 small screens.
 */
 .menu-link {
-    display: none; /* show this only on small screens */
+    position: fixed;
+    display: block; /* show this only on small screens */
     top: 0;
-    left: 150px; /* `#menu`'s width */
+    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.2em 1.6em;
+    padding: 2.1em 1.6em;
 }
 
     .menu-link:hover,
@@ -190,38 +208,28 @@ small screens.
 /* -- Responsive Styles (Media Queries) ------------------------------------- */
 
 /*
-Hides the menu at `767px`, but modify this based on your app's needs.
+Hides the menu at `48em`, but modify this based on your app's needs.
 */
-@media (max-width: 767px) {
+@media (min-width: 48em) {
 
-    .header {
-        text-align: left;
+    .header,
+    .content {
+        padding-left: 2em;
+        padding-right: 2em;
     }
 
-    /*
-    Navigation Push styles.
-    */
     #layout {
-        position: relative;
-        padding-left: 0;
+        padding-left: 150px; /* left col width "#menu" */
+        left: 0;
     }
-        #layout.active {
-            position: relative;
-            left: 150px;
-        }
-            #layout.active #menu {
-                left: 150px;
-                width: 150px;
-            }
-
     #menu {
-        left: 0;
+        left: 150px;
     }
 
     .menu-link {
         position: fixed;
-        left: 0;
-        display: block; /* show the button on small screens */
+        left: 150px;
+        display: none;
     }
 
     #layout.active .menu-link {
diff --git a/public/css/main.css b/public/css/main.css
index 0411174c..9ea7f994 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -1,32 +1,26 @@
+* {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
 body {
+    min-width: 320px;
     color: #777;
+    line-height: 1.6;
 }
 
 body,
-.pure-g [class *= "pure-u"],
-.pure-g-r [class *= "pure-u"] {
+.pure-g [class *= "pure-u"] {
     font-family: "proxima-nova", sans-serif;
 }
 
 
-/* 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;
-}
-
-
 /* --------------------------
  * Element Styles
  * --------------------------
 */
 
-
 h1, h2, h3, h4, h5, h6 {
     font-weight: bold;
     color: rgb(75, 75, 75);
@@ -54,32 +48,48 @@ dd {
     margin: 0 0 10px 0;
 }
 
+aside {
+    background: #1f8dd6; /* same color as selected state on site menu */
+    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 {
-    padding-left: 150px; /* left col width "#menu" */
-    left: 0;
+    position: relative;
+    padding-left: 0;
 }
-
+    #layout.active {
+        position: relative;
+        left: 160px;
+    }
+        #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: 1.3em;
+    padding: 1em;
 }
 
-.l-vbox {
-    padding: 1.3em 0;
+.l-wrap {
+    margin-left: auto;
+    margin-right: auto;
 }
-
-.l-hbox {
-    padding: 0 1.3em;
-}
-
-.l-centered {
-    text-align: center;
+.content .l-wrap {
+    margin-left: -1em;
+    margin-right: -1em;
 }
 
 
@@ -87,35 +97,27 @@ dd {
  * Header Module Styles
  * --------------------------
 */
+
 .header {
-     min-height: 80px;
-     margin: 0;
-     color: #333;
-     padding: 1em 2em;
+     font-family: "omnes-pro", sans-serif;
+     max-width: 768px;
+     margin: 0 auto;
+     padding: 1em;
      text-align: center;
      border-bottom: 1px solid #eee;
      background: #fff;
  }
     .header h1 {
-        font-family: "omnes-pro", sans-serif;
-        margin: 0.2em 0;
-        font-size: 3em;
-        font-weight: 300;
+        font-size: 300%;
+        font-weight: 100;
+        margin: 0;
     }
      .header h2 {
-        font-weight: 300;
+        font-size: 125%;
+        font-weight: 100;
+        line-height: 1.5;
         margin: 0;
-        color: #ccc;
-    }
-
-aside {
-    background: #1f8dd6; /* same color as selected state on site menu */
-    padding: 0.3em 1em;
-    border-radius: 3px;
-    color: #fff;
-}
-    aside a, aside a:visited {
-        color: rgb(169, 226, 255);
+        color: #666;
     }
 
 
@@ -126,38 +128,29 @@ aside {
 
 /* The content div is placed as a wrapper around all the docs */
 .content {
-    margin: 0 auto;
-    padding: 0 2em;
-    max-width: 800px;
-    margin-bottom: 50px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 1em;
+    padding-right: 1em;
+    max-width: 768px;
 }
-    .content p {
-        line-height: 1.6em;
-        font-size: 1.125em;
-    }
 
     .content .content-subhead {
-        margin: 50px 0 20px 0;
+        margin: 2em 0 1em 0;
         font-weight: 300;
         color: #888;
         position: relative;
     }
 
     .content .content-spaced {
-        line-height: 1.8em;
-    }
-
-    /* A code snippet that has been syntax highlighted */
-    .content .snippet {
-        margin: 1.3em 0 1em;
-        padding: 1.3em;
+        line-height: 1.8;
     }
 
     .content .content-quote {
         font-family: "Georgia", serif;
         color: #666;
         font-style: italic;
-        line-height: 1.8em;
+        line-height: 1.8;
         border-left: 5px solid #ddd;
         padding-left: 1.5em;
     }
@@ -179,56 +172,120 @@ aside {
         }
     }
 
+
+/* --------------------------
+ * Code Styles
+ * --------------------------
+*/
+
+pre,
+code {
+    font-family: Consolas, 'Liberation Mono', 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;
+    padding: 1em;
+    border: 1px solid #eee;
+    border-left-width: 0;
+    border-right-width: 0;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+}
+.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;
+}
+
+
 /* --------------------------
  * Footer Module Styles
  * --------------------------
 */
-.legal {
+
+.footer {
     font-size: 87.5%;
     border-top: 1px solid #eee;
-    padding: 0.5em 1.1429em;
+    margin-top: 3.4286em;
+    padding: 1.1429em;
     background: rgb(250, 250, 250);
-    line-height: 1.6em;
+}
+
+.legal {
+    line-height: 1.6;
+    text-align: center;
+    margin: 0 auto;
 }
 
     .legal-license {
-        margin: 0;
-    }
-    .legal-copyright,
-    .legal-links {
-        text-align: right;
-        margin: 0;
+        margin-top: 0;
     }
     .legal-links {
         list-style: none;
         padding: 0;
+        margin-bottom: 0;
     }
-    .legal-logo {
-        text-align: center;
+    .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: -150px; /* "#menu" width */
-    width: 150px;
+    margin-left: -160px; /* "#menu" width */
+    width: 160px;
     position: fixed;
     top: 0;
-    left: 150px;
+    left: 0;
     bottom: 0;
     z-index: 1000; /* so the menu or its navicon stays above all content */
     background: #191818;
     overflow-y: auto;
-    -webkit-overflow-scroll: touch;
+    -webkit-overflow-scrolling: touch;
 }
     #menu a {
         color: #999;
         border: none;
         white-space: normal;
-        padding: 0.6em 0 0.6em 0.6em;
+        padding: 0.625em 1em;
     }
 
     #menu .pure-menu-open {
@@ -252,16 +309,17 @@ aside {
         }
 
     .menu-link {
-        display: none; /* show this only on small screens */
+        position: fixed;
+        display: block; /* show this only on small screens */
         top: 0;
-        left: 150px; /* "#menu width" */
+        left: 0; /* "#menu width" */
         background: #000;
         background: rgba(0,0,0,0.7);
-        font-size: 10px; /* change this value to increase/decrease button size */
+        font-size: 11px; /* change this value to increase/decrease button size */
         z-index: 10;
-        width: 2em;
-        height: auto;
-        padding: 2.1em 1.6em;
+        width: 4em;
+        height: 4em;
+        padding: 1em;
     }
 
         .menu-link:hover,
@@ -272,6 +330,7 @@ aside {
         .menu-link span {
             position: relative;
             display: block;
+            margin-top: 0.9em;
         }
 
         .menu-link span,
@@ -290,12 +349,12 @@ aside {
             .menu-link span:before,
             .menu-link span:after {
                 position: absolute;
-                margin-top: -.6em;
+                top: -.55em;
                 content: " ";
             }
 
             .menu-link span:after {
-                margin-top: .6em;
+                top: .55em;
             }
 
         .menu-link.active span {
@@ -311,16 +370,20 @@ aside {
             }
 
             .menu-link.active span:after {
-                -webkit-transform: rotate(-45deg) translate(.45em, -.35em);
-                   -moz-transform: rotate(-45deg) translate(.45em, -.35em);
-                    -ms-transform: rotate(-45deg) translate(.45em, -.35em);
-                     -o-transform: rotate(-45deg) translate(.45em, -.35em);
-                        transform: rotate(-45deg) translate(.45em, -.35em);
+                -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: 110%;
+        font-size: 125%;
+        font-weight: 300;
+        letter-spacing: 0.1em;
         color: #fff;
+        margin-top: 0;
+        padding: 0.5em 0.8em;
     }
     #menu .pure-menu-heading:hover,
     #menu .pure-menu-heading:focus {
@@ -347,16 +410,15 @@ aside {
  * ---------------------
 */
 
-/* example code blocks */
-.example-snippet {
-    margin: 2em 0;
-    font-size: 85%;
+.pure-img-responsive {
+    max-width: 100%;
+    height: auto;
 }
 
-/* green call to action button class */
-.notice {
-    background-color: #61B842;
-    color: white;
+.pure-paginator .pure-button {
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
 }
 
 .pure-button {
@@ -366,69 +428,91 @@ a.pure-button-primary {
     color: white;
 }
 
+/* green call to action button class */
+.notice {
+    background-color: #61B842;
+    color: white;
+}
+
 .muted {
     color: #ccc;
 }
 
+
 /* --------------------------
  * Responsive Styles
  * --------------------------
 */
 
-@media (max-width: 870px) {
-
-    /* Navigation Push Styles */
-    #layout {
-        position: relative;
-        padding-left: 0;
-    }
-        #layout.active {
-            position: relative;
-            left: 150px;
-        }
-            #layout.active #menu {
-                left: 150px;
-                width: 150px;
-            }
+@media screen and (min-width: 35.5em) {
 
-    #menu {
-        left: 0;
+    .legal-license {
+        text-align: left;
+        margin: 0;
     }
-
-    .menu-link {
-        position: fixed;
-        left: 0;
-        display: block;
+    .legal-copyright,
+    .legal-links,
+    .legal-links li {
+        text-align: right;
+        margin: 0;
     }
 
-    #layout.active .menu-link {
-        left: 150px;
-    }
 }
 
-@media (max-width: 767px) {
+@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 {
-        font-size: 87.5%;
+        padding-left: 2em;
+        padding-right: 2em;
     }
 
-    .header,
-    .content,
-    .legal {
-        padding-left: 1.1429em;
-        padding-right: 1.1429em;
+    .header h1 {
+        font-size: 350%;
+    }
+    .header h2 {
+        font-size: 150%;
     }
 
-    .legal-license,
-    .legal-copyright,
-    .legal-links,
-    .legal-links li {
-        text-align: center;
+    .content p {
+        font-size: 1.125em;
     }
 
-    /* normalize paddings on small screens*/
-    .l-hbox {
-        padding: 1.3em;
+    .code {
+        margin-left: auto;
+        margin-right: auto;
+        border-left-width: 1px;
+        border-right-width: 1px;
+    }
+
+}
+
+@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;
+    }
+
 }
diff --git a/public/css/rainbow/baby-blue.css b/public/css/rainbow/baby-blue.css
index 1d4cc3e1..76c4f173 100644
--- a/public/css/rainbow/baby-blue.css
+++ b/public/css/rainbow/baby-blue.css
@@ -4,63 +4,50 @@
  * @author tilomitra
  */
 
-pre {
-    word-wrap: break-word;
-    padding: 6px 10;
-    line-height: 1.3em;
-    margin-bottom: 20;
-    border: 1px solid #eee;
-}
-
-code {
-    border: none;
-    margin: 0 2px;
-    font-size: 0.8em;
-    padding: 0.4em 0.6em;
-    white-space: nowrap;
-}
-
-pre code {
-    padding: 0;
-    margin: 0;
-    font-size: 0.95em;
-    white-space: pre-wrap;
-}
-
-pre, code {
-    font-family: Consolas, 'Liberation Mono', Courier, monospace;
-    color: #333;
-    background: rgb(250, 250, 250);
-}
-
-
 pre .comment {
     color: #999;
 }
 
-
-pre .tag, pre .tag-name, pre .support.tag-name {
+pre .tag,
+pre .tag-name,
+pre .support.tag-name {
     color: rgb(85, 85, 85);
 }
 
-pre .keyword, pre .css-property, pre .vendor-prefix, pre .sass, pre .class, pre .id, pre .css-value, pre .entity.function, pre .storage.function {
+pre .keyword,
+pre .css-property,
+pre .vendor-prefix,
+pre .sass,
+pre .class,
+pre .id,
+pre .css-value,
+pre .entity.function,
+pre .storage.function {
     font-weight: bold;
 }
 
-pre .css-property, pre .css-value, pre .vendor-prefix, pre .support.namespace {
+pre .css-property,
+pre .css-value,
+pre .vendor-prefix,
+pre .support.namespace {
     color: #333;
 }
 
-pre .constant.numeric, pre .keyword.unit, pre .hex-color {
+pre .constant.numeric,
+pre .keyword.unit,
+pre .hex-color {
     font-weight: normal;
     color: #099;
 }
 
-pre .attribute, pre .variable, pre .support {
+pre .attribute,
+pre .variable,
+pre .support {
     color:  #757575; /* skinbuilder block-page-text-normal with #1f8dd6 as primary */
 }
 
-pre .string, pre .support.value  {
+pre .string,
+pre .support.value  {
     font-weight: normal;
     color: #3b8bba; /* skinbuilder block-mine-text-low with #1f8dd6 as primary */
 }
diff --git a/public/img/common/file-icons.png b/public/img/common/file-icons.png
new file mode 100644
index 00000000..58fdd60c
Binary files /dev/null and b/public/img/common/file-icons.png differ
diff --git a/public/img/layouts/blog@2x.jpg b/public/img/layouts/blog@2x.jpg
index 7f8bbd19..8311f75f 100644
Binary files a/public/img/layouts/blog@2x.jpg and b/public/img/layouts/blog@2x.jpg differ
diff --git a/public/img/layouts/email@2x.jpg b/public/img/layouts/email@2x.jpg
index e60ee22d..97a4bf24 100644
Binary files a/public/img/layouts/email@2x.jpg and b/public/img/layouts/email@2x.jpg differ
diff --git a/public/img/layouts/gallery@2x.jpg b/public/img/layouts/gallery@2x.jpg
index 05cf785a..3a9df1d1 100644
Binary files a/public/img/layouts/gallery@2x.jpg and b/public/img/layouts/gallery@2x.jpg differ
diff --git a/public/img/layouts/marketing@2x.jpg b/public/img/layouts/marketing@2x.jpg
index beaa5340..9950e77b 100644
Binary files a/public/img/layouts/marketing@2x.jpg and b/public/img/layouts/marketing@2x.jpg differ
diff --git a/public/img/logo-footer.png b/public/img/logo-footer.png
deleted file mode 100644
index 106059c6..00000000
Binary files a/public/img/logo-footer.png and /dev/null differ
diff --git a/public/vendor/rainbow/LICENSE b/public/vendor/rainbow/LICENSE
deleted file mode 100644
index 430d42bb..00000000
--- a/public/vendor/rainbow/LICENSE
+++ /dev/null
@@ -1,177 +0,0 @@
-
-                              Apache License
-                        Version 2.0, January 2004
-                     http://www.apache.org/licenses/
-
-TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-1. Definitions.
-
-   "License" shall mean the terms and conditions for use, reproduction,
-   and distribution as defined by Sections 1 through 9 of this document.
-
-   "Licensor" shall mean the copyright owner or entity authorized by
-   the copyright owner that is granting the License.
-
-   "Legal Entity" shall mean the union of the acting entity and all
-   other entities that control, are controlled by, or are under common
-   control with that entity. For the purposes of this definition,
-   "control" means (i) the power, direct or indirect, to cause the
-   direction or management of such entity, whether by contract or
-   otherwise, or (ii) ownership of fifty percent (50%) or more of the
-   outstanding shares, or (iii) beneficial ownership of such entity.
-
-   "You" (or "Your") shall mean an individual or Legal Entity
-   exercising permissions granted by this License.
-
-   "Source" form shall mean the preferred form for making modifications,
-   including but not limited to software source code, documentation
-   source, and configuration files.
-
-   "Object" form shall mean any form resulting from mechanical
-   transformation or translation of a Source form, including but
-   not limited to compiled object code, generated documentation,
-   and conversions to other media types.
-
-   "Work" shall mean the work of authorship, whether in Source or
-   Object form, made available under the License, as indicated by a
-   copyright notice that is included in or attached to the work
-   (an example is provided in the Appendix below).
-
-   "Derivative Works" shall mean any work, whether in Source or Object
-   form, that is based on (or derived from) the Work and for which the
-   editorial revisions, annotations, elaborations, or other modifications
-   represent, as a whole, an original work of authorship. For the purposes
-   of this License, Derivative Works shall not include works that remain
-   separable from, or merely link (or bind by name) to the interfaces of,
-   the Work and Derivative Works thereof.
-
-   "Contribution" shall mean any work of authorship, including
-   the original version of the Work and any modifications or additions
-   to that Work or Derivative Works thereof, that is intentionally
-   submitted to Licensor for inclusion in the Work by the copyright owner
-   or by an individual or Legal Entity authorized to submit on behalf of
-   the copyright owner. For the purposes of this definition, "submitted"
-   means any form of electronic, verbal, or written communication sent
-   to the Licensor or its representatives, including but not limited to
-   communication on electronic mailing lists, source code control systems,
-   and issue tracking systems that are managed by, or on behalf of, the
-   Licensor for the purpose of discussing and improving the Work, but
-   excluding communication that is conspicuously marked or otherwise
-   designated in writing by the copyright owner as "Not a Contribution."
-
-   "Contributor" shall mean Licensor and any individual or Legal Entity
-   on behalf of whom a Contribution has been received by Licensor and
-   subsequently incorporated within the Work.
-
-2. Grant of Copyright License. Subject to the terms and conditions of
-   this License, each Contributor hereby grants to You a perpetual,
-   worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-   copyright license to reproduce, prepare Derivative Works of,
-   publicly display, publicly perform, sublicense, and distribute the
-   Work and such Derivative Works in Source or Object form.
-
-3. Grant of Patent License. Subject to the terms and conditions of
-   this License, each Contributor hereby grants to You a perpetual,
-   worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-   (except as stated in this section) patent license to make, have made,
-   use, offer to sell, sell, import, and otherwise transfer the Work,
-   where such license applies only to those patent claims licensable
-   by such Contributor that are necessarily infringed by their
-   Contribution(s) alone or by combination of their Contribution(s)
-   with the Work to which such Contribution(s) was submitted. If You
-   institute patent litigation against any entity (including a
-   cross-claim or counterclaim in a lawsuit) alleging that the Work
-   or a Contribution incorporated within the Work constitutes direct
-   or contributory patent infringement, then any patent licenses
-   granted to You under this License for that Work shall terminate
-   as of the date such litigation is filed.
-
-4. Redistribution. You may reproduce and distribute copies of the
-   Work or Derivative Works thereof in any medium, with or without
-   modifications, and in Source or Object form, provided that You
-   meet the following conditions:
-
-   (a) You must give any other recipients of the Work or
-       Derivative Works a copy of this License; and
-
-   (b) You must cause any modified files to carry prominent notices
-       stating that You changed the files; and
-
-   (c) You must retain, in the Source form of any Derivative Works
-       that You distribute, all copyright, patent, trademark, and
-       attribution notices from the Source form of the Work,
-       excluding those notices that do not pertain to any part of
-       the Derivative Works; and
-
-   (d) If the Work includes a "NOTICE" text file as part of its
-       distribution, then any Derivative Works that You distribute must
-       include a readable copy of the attribution notices contained
-       within such NOTICE file, excluding those notices that do not
-       pertain to any part of the Derivative Works, in at least one
-       of the following places: within a NOTICE text file distributed
-       as part of the Derivative Works; within the Source form or
-       documentation, if provided along with the Derivative Works; or,
-       within a display generated by the Derivative Works, if and
-       wherever such third-party notices normally appear. The contents
-       of the NOTICE file are for informational purposes only and
-       do not modify the License. You may add Your own attribution
-       notices within Derivative Works that You distribute, alongside
-       or as an addendum to the NOTICE text from the Work, provided
-       that such additional attribution notices cannot be construed
-       as modifying the License.
-
-   You may add Your own copyright statement to Your modifications and
-   may provide additional or different license terms and conditions
-   for use, reproduction, or distribution of Your modifications, or
-   for any such Derivative Works as a whole, provided Your use,
-   reproduction, and distribution of the Work otherwise complies with
-   the conditions stated in this License.
-
-5. Submission of Contributions. Unless You explicitly state otherwise,
-   any Contribution intentionally submitted for inclusion in the Work
-   by You to the Licensor shall be under the terms and conditions of
-   this License, without any additional terms or conditions.
-   Notwithstanding the above, nothing herein shall supersede or modify
-   the terms of any separate license agreement you may have executed
-   with Licensor regarding such Contributions.
-
-6. Trademarks. This License does not grant permission to use the trade
-   names, trademarks, service marks, or product names of the Licensor,
-   except as required for reasonable and customary use in describing the
-   origin of the Work and reproducing the content of the NOTICE file.
-
-7. Disclaimer of Warranty. Unless required by applicable law or
-   agreed to in writing, Licensor provides the Work (and each
-   Contributor provides its Contributions) on an "AS IS" BASIS,
-   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-   implied, including, without limitation, any warranties or conditions
-   of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-   PARTICULAR PURPOSE. You are solely responsible for determining the
-   appropriateness of using or redistributing the Work and assume any
-   risks associated with Your exercise of permissions under this License.
-
-8. Limitation of Liability. In no event and under no legal theory,
-   whether in tort (including negligence), contract, or otherwise,
-   unless required by applicable law (such as deliberate and grossly
-   negligent acts) or agreed to in writing, shall any Contributor be
-   liable to You for damages, including any direct, indirect, special,
-   incidental, or consequential damages of any character arising as a
-   result of this License or out of the use or inability to use the
-   Work (including but not limited to damages for loss of goodwill,
-   work stoppage, computer failure or malfunction, or any and all
-   other commercial damages or losses), even if such Contributor
-   has been advised of the possibility of such damages.
-
-9. Accepting Warranty or Additional Liability. While redistributing
-   the Work or Derivative Works thereof, You may choose to offer,
-   and charge a fee for, acceptance of support, warranty, indemnity,
-   or other liability obligations and/or rights consistent with this
-   License. However, in accepting such obligations, You may act only
-   on Your own behalf and on Your sole responsibility, not on behalf
-   of any other Contributor, and only if You agree to indemnify,
-   defend, and hold each Contributor harmless for any liability
-   incurred by, or claims asserted against, such Contributor by reason
-   of your accepting any such warranty or additional liability.
-
-END OF TERMS AND CONDITIONS
diff --git a/public/vendor/rainbow/rainbow-min.js b/public/vendor/rainbow/rainbow-min.js
deleted file mode 100644
index 33d9e790..00000000
--- a/public/vendor/rainbow/rainbow-min.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/* Rainbow v1.1.8 rainbowco.de | included languages: generic, javascript, html, css */
-window.Rainbow=function(){function q(a){var b,c=a.getAttribute&&a.getAttribute("data-language")||0;if(!c){a=a.attributes;for(b=0;b<a.length;++b)if("data-language"===a[b].nodeName)return a[b].nodeValue}return c}function B(a){var b=q(a)||q(a.parentNode);if(!b){var c=/\blang(?:uage)?-(\w+)/;(a=a.className.match(c)||a.parentNode.className.match(c))&&(b=a[1])}return b}function C(a,b){for(var c in e[d]){c=parseInt(c,10);if(a==c&&b==e[d][c]?0:a<=c&&b>=e[d][c])delete e[d][c],delete j[d][c];if(a>=c&&a<e[d][c]||
-b>c&&b<e[d][c])return!0}return!1}function r(a,b){return'<span class="'+a.replace(/\./g," ")+(l?" "+l:"")+'">'+b+"</span>"}function s(a,b,c,h){var f=a.exec(c);if(f){++t;!b.name&&"string"==typeof b.matches[0]&&(b.name=b.matches[0],delete b.matches[0]);var k=f[0],i=f.index,u=f[0].length+i,g=function(){function f(){s(a,b,c,h)}t%100>0?f():setTimeout(f,0)};if(C(i,u))g();else{var m=v(b.matches),l=function(a,c,h){if(a>=c.length)h(k);else{var d=f[c[a]];if(d){var e=b.matches[c[a]],i=e.language,g=e.name&&e.matches?
-e.matches:e,j=function(b,d,e){var i;i=0;var g;for(g=1;g<c[a];++g)f[g]&&(i=i+f[g].length);d=e?r(e,d):d;k=k.substr(0,i)+k.substr(i).replace(b,d);l(++a,c,h)};i?n(d,i,function(a){j(d,a)}):typeof e==="string"?j(d,d,e):w(d,g.length?g:[g],function(a){j(d,a,e.matches?e.name:0)})}else l(++a,c,h)}};l(0,m,function(a){b.name&&(a=r(b.name,a));if(!j[d]){j[d]={};e[d]={}}j[d][i]={replace:f[0],"with":a};e[d][i]=u;g()})}}else h()}function v(a){var b=[],c;for(c in a)a.hasOwnProperty(c)&&b.push(c);return b.sort(function(a,
-b){return b-a})}function w(a,b,c){function h(b,k){k<b.length?s(b[k].pattern,b[k],a,function(){h(b,++k)}):D(a,function(a){delete j[d];delete e[d];--d;c(a)})}++d;h(b,0)}function D(a,b){function c(a,b,h,e){if(h<b.length){++x;var g=b[h],l=j[d][g],a=a.substr(0,g)+a.substr(g).replace(l.replace,l["with"]),g=function(){c(a,b,++h,e)};0<x%250?g():setTimeout(g,0)}else e(a)}var h=v(j[d]);c(a,h,0,b)}function n(a,b,c){var d=m[b]||[],f=m[y]||[],b=z[b]?d:d.concat(f);w(a.replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/&(?![\w\#]+;)/g,
-"&amp;"),b,c)}function o(a,b,c){if(b<a.length){var d=a[b],f=B(d);return!(-1<(" "+d.className+" ").indexOf(" rainbow "))&&f?(f=f.toLowerCase(),d.className+=d.className?" rainbow":"rainbow",n(d.innerHTML,f,function(k){d.innerHTML=k;j={};e={};p&&p(d,f);setTimeout(function(){o(a,++b,c)},0)})):o(a,++b,c)}c&&c()}function A(a,b){var a=a&&"function"==typeof a.getElementsByTagName?a:document,c=a.getElementsByTagName("pre"),d=a.getElementsByTagName("code"),f,e=[];for(f=0;f<d.length;++f)e.push(d[f]);for(f=0;f<
-c.length;++f)c[f].getElementsByTagName("code").length||e.push(c[f]);o(e,0,b)}var j={},e={},m={},z={},d=0,y=0,t=0,x=0,l,p;return{extend:function(a,b,c){1==arguments.length&&(b=a,a=y);z[a]=c;m[a]=b.concat(m[a]||[])},b:function(a){p=a},a:function(a){l=a},color:function(a,b,c){if("string"==typeof a)return n(a,b,c);if("function"==typeof a)return A(0,a);A(a,b)}}}();window.addEventListener?window.addEventListener("load",Rainbow.color,!1):window.attachEvent("onload",Rainbow.color);Rainbow.onHighlight=Rainbow.b;
-Rainbow.addClass=Rainbow.a;Rainbow.extend([{matches:{1:{name:"keyword.operator",pattern:/\=/g},2:{name:"string",matches:{name:"constant.character.escape",pattern:/\\('|"){1}/g}}},pattern:/(\(|\s|\[|\=|:)(('|")([^\\\1]|\\.)*?(\3))/gm},{name:"comment",pattern:/\/\*[\s\S]*?\*\/|(\/\/|\#)[\s\S]*?$/gm},{name:"constant.numeric",pattern:/\b(\d+(\.\d+)?(e(\+|\-)?\d+)?(f|d)?|0x[\da-f]+)\b/gi},{matches:{1:"keyword"},pattern:/\b(and|array|as|bool(ean)?|c(atch|har|lass|onst)|d(ef|elete|o(uble)?)|e(cho|lse(if)?|xit|xtends|xcept)|f(inally|loat|or(each)?|unction)|global|if|import|int(eger)?|long|new|object|or|pr(int|ivate|otected)|public|return|self|st(ring|ruct|atic)|switch|th(en|is|row)|try|(un)?signed|var|void|while)(?=\(|\b)/gi},
-{name:"constant.language",pattern:/true|false|null/g},{name:"keyword.operator",pattern:/\+|\!|\-|&(gt|lt|amp);|\||\*|\=/g},{matches:{1:"function.call"},pattern:/(\w+?)(?=\()/g},{matches:{1:"storage.function",2:"entity.name.function"},pattern:/(function)\s(.*?)(?=\()/g}]);Rainbow.extend("javascript",[{name:"selector",pattern:/(\s|^)\$(?=\.|\()/g},{name:"support",pattern:/\b(window|document)\b/g},{matches:{1:"support.property"},pattern:/\.(length|node(Name|Value))\b/g},{matches:{1:"support.function"},pattern:/(setTimeout|setInterval)(?=\()/g},{matches:{1:"support.method"},pattern:/\.(getAttribute|push|getElementById|getElementsByClassName|log|setTimeout|setInterval)(?=\()/g},{matches:{1:"support.tag.script",2:[{name:"string",pattern:/('|")(.*?)(\1)/g},{name:"entity.tag.script",
-pattern:/(\w+)/g}],3:"support.tag.script"},pattern:/(&lt;\/?)(script.*?)(&gt;)/g},{name:"string.regexp",matches:{1:"string.regexp.open",2:{name:"constant.regexp.escape",pattern:/\\(.){1}/g},3:"string.regexp.close",4:"string.regexp.modifier"},pattern:/(\/)(?!\*)(.+)(\/)([igm]{0,3})/g},{matches:{1:"storage",3:"entity.function"},pattern:/(var)?(\s|^)(.*)(?=\s?=\s?function\()/g},{matches:{1:"keyword",2:"entity.function"},pattern:/(new)\s+(.*)(?=\()/g},{name:"entity.function",pattern:/(\w+)(?=:\s{0,}function)/g}]);Rainbow.extend("html",[{name:"source.php.embedded",matches:{2:{language:"php"}},pattern:/&lt;\?=?(?!xml)(php)?([\s\S]*?)(\?&gt;)/gm},{name:"source.css.embedded",matches:{"0":{language:"css"}},pattern:/&lt;style(.*?)&gt;([\s\S]*?)&lt;\/style&gt;/gm},{name:"source.js.embedded",matches:{"0":{language:"javascript"}},pattern:/&lt;script(?! src)(.*?)&gt;([\s\S]*?)&lt;\/script&gt;/gm},{name:"comment.html",pattern:/&lt;\!--[\S\s]*?--&gt;/g},{matches:{1:"support.tag.open",2:"support.tag.close"},pattern:/(&lt;)|(\/?\??&gt;)/g},
-{name:"support.tag",matches:{1:"support.tag",2:"support.tag.special",3:"support.tag-name"},pattern:/(&lt;\??)(\/|\!?)(\w+)/g},{matches:{1:"support.attribute"},pattern:/([a-z-]+)(?=\=)/gi},{matches:{1:"support.operator",2:"string.quote",3:"string.value",4:"string.quote"},pattern:/(=)('|")(.*?)(\2)/g},{matches:{1:"support.operator",2:"support.value"},pattern:/(=)([a-zA-Z\-0-9]*)\b/g},{matches:{1:"support.attribute"},pattern:/\s(\w+)(?=\s|&gt;)(?![\s\S]*&lt;)/g}],!0);Rainbow.extend("css",[{name:"comment",pattern:/\/\*[\s\S]*?\*\//gm},{name:"constant.hex-color",pattern:/#([a-f0-9]{3}|[a-f0-9]{6})(?=;|\s)/gi},{matches:{1:"constant.numeric",2:"keyword.unit"},pattern:/(\d+)(px|em|cm|s|%)?/g},{name:"string",pattern:/('|")(.*?)\1/g},{name:"support.css-property",matches:{1:"support.vendor-prefix"},pattern:/(-o-|-moz-|-webkit-|-ms-)?[\w-]+(?=\s?:)(?!.*\{)/g},{matches:{1:[{name:"entity.name.sass",pattern:/&amp;/g},{name:"direct-descendant",pattern:/&gt;/g},{name:"entity.name.class",
-pattern:/\.[\w\-_]+/g},{name:"entity.name.id",pattern:/\#[\w\-_]+/g},{name:"entity.name.pseudo",pattern:/:[\w\-_]+/g},{name:"entity.name.tag",pattern:/\w+/g}]},pattern:/([\w\ ,:\.\#\&\;\-_]+)(?=.*\{)/g},{matches:{2:"support.vendor-prefix",3:"support.css-value"},pattern:/(:|,)\s?(-o-|-moz-|-webkit-|-ms-)?([a-zA-Z-]*)(?=\b)(?!.*\{)/g},{matches:{1:"support.tag.style",2:[{name:"string",pattern:/('|")(.*?)(\1)/g},{name:"entity.tag.style",pattern:/(\w+)/g}],3:"support.tag.style"},pattern:/(&lt;\/?)(style.*?)(&gt;)/g}],
-!0);
diff --git a/views/layouts/blank.handlebars b/views/layouts/blank.handlebars
index cb9abe90..ceb65058 100644
--- a/views/layouts/blank.handlebars
+++ b/views/layouts/blank.handlebars
@@ -4,6 +4,7 @@
     {{> meta}}
     {{> title}}
     {{> styles}}
+    {{> html5shiv}}
     {{> typekit}}
     {{> analytics}}
 </head>
diff --git a/views/layouts/main.handlebars b/views/layouts/main.handlebars
index c2ef45a7..3138c073 100644
--- a/views/layouts/main.handlebars
+++ b/views/layouts/main.handlebars
@@ -3,30 +3,36 @@
 <head>
     {{> meta}}
     {{> title}}
-
-    {{addLocalCSS "/css/main.css" prepend=true}}
+    {{addLocalCSS "/css/main.css" prepend=true hasOldIE=true}}
+    {{addLocalCSS "/css/main-grid.css" prepend=true hasOldIE=true}}
     {{addLocalCSS "/css/rainbow/baby-blue.css"}}
     {{> styles}}
 
+    {{> html5shiv}}
     {{> typekit}}
     {{> analytics}}
 </head>
 <body>
 
-    <div class="pure-g-r" id="layout">
+    <div id="layout">
         {{> menu}}
 
-        <div class="pure-u-1" id="main">
+        <div id="main">
 
             {{{body}}}
 
-            {{> legal}}
-
+            <div class="footer">
+                {{> legal}}
+            </div>
         </div>
     </div>
 
     {{addLocalJS "/js/ui.js"}}
-    {{addLocalJS "/vendor/rainbow/rainbow-min.js"}}
+    {{addLocalJS "/vendor/rainbow/js/rainbow.min.js"}}
+    {{addLocalJS "/vendor/rainbow/js/language/generic.js"}}
+    {{addLocalJS "/vendor/rainbow/js/language/html.js"}}
+    {{addLocalJS "/vendor/rainbow/js/language/css.js"}}
+    {{addLocalJS "/vendor/rainbow/js/language/javascript.js"}}
 
   {{#localJS}}
     <script src="{{{.}}}"></script>
diff --git a/views/pages/base.handlebars b/views/pages/base.handlebars
index cf258ade..d319a9d8 100644
--- a/views/pages/base.handlebars
+++ b/views/pages/base.handlebars
@@ -10,7 +10,7 @@
         All modules in Pure build on top of <a href="http://necolas.github.com/normalize.css/">Normalize.css</a>. It's our foundational layer to maintain some degree of cross-browser consistency. We use Normalize v1.x because it supports older versions of Internet Explorer. We like Normalize so much that we put it on our CDN. You can pull in Normalize.css by adding this {{code "<link>"}} element on your page:
     </p>
 
-    {{#code}}
+    {{#code wrap=true}}
         <link rel="stylesheet" href="http://yui.yahooapis.com/pure/{{pure.version}}/base-min.css">
     {{/code}}
 
diff --git a/views/pages/customize.handlebars b/views/pages/customize.handlebars
index bce9d4e2..d50cece0 100644
--- a/views/pages/customize.handlebars
+++ b/views/pages/customize.handlebars
@@ -2,6 +2,8 @@
 {{setSubTitle  "Choose the modules that you need."}}
 {{setActiveNav "customize"}}
 
+{{addLocalCSS "/css/customize.css"}}
+
 {{> header}}
 
 <div class="content">
@@ -79,7 +81,7 @@
         You can also pull in the modules individually. The Yahoo! CDN supports combo handling, so you can combo your requests and get a single CSS file back. Here's an example of a combo URL that only includes CSS for <a href="{{pathTo 'base'}}">Base</a>, <a href="{{pathTo 'grids'}}">Grids</a>, and <a href="{{pathTo 'forms'}}">Forms</a>:
     </p>
 
-{{#code}}
+{{#code wrap=true}}
 <link rel="stylesheet" href="http://yui.yahooapis.com/combo?pure/{{pure.version}}/base-min.css&pure/{{pure.version}}/grids-min.css&pure/{{pure.version}}/forms-min.css">
 {{/code}}
 
diff --git a/views/pages/grids.handlebars b/views/pages/grids.handlebars
index 6bcbfd9f..c18a02da 100644
--- a/views/pages/grids.handlebars
+++ b/views/pages/grids.handlebars
@@ -202,7 +202,7 @@
         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 "<link>"}} element in your {{code "<head>"}}.
     </p>
 
-  {{#code}}
+  {{#code wrap=true}}
     <link rel="stylesheet" href="http://yui.yahooapis.com/pure/{{pure.version}}/grids-min.css">
   {{/code}}
 
diff --git a/views/pages/home.handlebars b/views/pages/home.handlebars
index 67f818d4..79f1538c 100644
--- a/views/pages/home.handlebars
+++ b/views/pages/home.handlebars
@@ -6,153 +6,139 @@
 
 <div class="hero">
     <div class="hero-titles">
-        <h1>{{title}}</h1>
-        <h2>{{subTitle}}</h2>
+        <h1 class="hero-site">{{title}}</h1>
+        <h2 class="hero-tagline">{{subTitle}}</h2>
     </div>
 
     <div class="hero-cta">
-      {{#code}}
+      {{#code wrap=true}}
         <link rel="stylesheet" href="http://yui.yahooapis.com/pure/{{pure.version}}/pure-min.css">
       {{/code}}
 
         <p>
-            <a class="pure-button pure-button-cta" href="{{pathTo 'customize'}}">Get Started</a>
-            <a class="pure-button pure-button-secondary" href="https://github.com/yui/pure/">View on GitHub</a>
+            <a class="button-cta pure-button" href="{{pathTo 'customize'}}">Get Started</a>
+            <a class="button-secondary pure-button" href="https://github.com/yui/pure/">View on GitHub</a>
         </p>
     </div>
 </div>
 
-<div class="marketing-ribbon">
-    <div class="size-chart l-vbox pure-g">
-        <div class="size-chart-item size-chart-base pure-u" style="width: {{filePercent 'base'}};">
-            <a class="size-chart-label" href="{{pathTo 'base'}}">
-                Base <span class="size-chart-size">{{fileSize "base"}}</span>
-            </a>
-        </div>
-        <div class="size-chart-item size-chart-grids pure-u" style="width: {{filePercent 'grids'}};">
-            <a class="size-chart-label" href="{{pathTo 'grids'}}">
-                Grids <span class="size-chart-size">{{fileSize "grids"}}</span>
-            </a>
-        </div>
-        <div class="size-chart-item size-chart-forms pure-u" style="width: {{filePercent 'forms'}};">
-            <a class="size-chart-label" href="{{pathTo 'forms'}}">
-                Forms <span class="size-chart-size">{{fileSize "forms"}}</span>
-            </a>
-        </div>
-        <div class="size-chart-item size-chart-buttons pure-u" style="width: {{filePercent 'buttons'}};">
-            <a class="size-chart-label" href="{{pathTo 'buttons'}}">
-                Buttons <span class="size-chart-size">{{fileSize "buttons"}}</span>
-            </a>
-        </div>
-        <div class="size-chart-item size-chart-tables pure-u" style="width: {{filePercent 'tables'}};">
-            <a class="size-chart-label" href="{{pathTo 'tables'}}">
-                Tables <span class="size-chart-size">{{fileSize "tables"}}</span>
-            </a>
-        </div>
-        <div class="size-chart-item size-chart-menus pure-u" style="width: {{filePercent 'menus'}};">
-            <a class="size-chart-label" href="{{pathTo 'menus'}}">
-                Menus <span class="size-chart-size">{{fileSize "menus"}}</span>
+<div class="marketing">
+    <div class="size-chart pure-g">
+      {{#each pure.modules}}
+        <div class="size-chart-{{this}} pure-u" style="width: {{filePercent this pure=../pure}};">
+            <a class="size-chart-item" href="{{pathTo this}}">
+                <span class="size-chart-label">
+                    <span class="size-chart-mod">{{this}}</span>
+                    <span class="size-chart-size">{{fileSize this pure=../pure}}</span>
+                </span>
             </a>
         </div>
+      {{/each}}
     </div>
 
     <div class="content">
-        <div class="l-box">
-            <h3>CSS with a minimal footprint.</h3>
-            <p>
-                Pure is ridiculously tiny. The entire set of modules clocks in at <b>{{fileSize "pure"}}* minified and gzipped</b>, without forgoing responsive styles, design, or ease of use. 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="font-size:small;">
-                * We can add correctly :) the numbers above are individual module sizes; when grouped together gzipping compresses them even more.
-            </p>
-        </div>
+        <h3 class="marketing-header">CSS with a minimal footprint.</h3>
+        <p>
+            Pure is ridiculously tiny. The entire set of modules clocks in at <b>{{fileSize "pure"}}* 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="font-size:smaller;">
+            * We can add correctly :) the numbers above are individual module sizes; when grouped together gzipping compresses them even more.
+        </p>
     </div>
 </div>
 
-<div class="pure-g-r marketing-ribbon">
-    <div class="pure-u-1-3">
-        <div class="l-box">
-            <h3>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 class="marketing l-wrap pure-g">
+    <div class="content pure-u-1 pure-u-sm-1-2 pure-u-xl-1-3">
+        <h3 class="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 class="pure-u-1-3">
-        <div class="l-box">
-            <h3>Made with mobile in mind.</h3>
-            <p>
-                Pure is responsive out of the box, so elements look great on all screen sizes. Customize your styles with the <a href="http://yui.github.io/skinbuilder/?mode=pure">Skin Builder</a> to make your style your own.
-            </p>
-        </div>
+    <div class="content pure-u-1 pure-u-sm-1-2 pure-u-xl-1-3">
+        <h3 class="marketing-header">Made with mobile in mind.</h3>
+        <p>
+            Pure is responsive out of the box, so elements look great on all screen sizes. Customize your styles with the <a href="http://yui.github.io/skinbuilder/?mode=pure">Skin Builder</a> to make your style your own.
+        </p>
     </div>
 
-    <div class="pure-u-1-3">
-        <div class="l-box">
-            <h3>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 class="content pure-u-1 pure-u-lrg-3-4 pure-u-xl-1-3">
+        <h3 class="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 class="pure-g-r marketing-ribbon">
-    <div class="pure-u-1-2">
-        <div class="l-box">
-            <a href="{{pathTo 'layouts'}}">
-                <img src="img/layout-icon.jpg" alt="Diagram of a sample layout.">
-            </a>
-        </div>
+<div class="marketing l-wrap pure-g">
+    <div class="marketing-diagram content pure-u-1 pure-u-sm-2-3 pure-u-med-1-2">
+        <a href="{{pathTo 'layouts'}}">
+            <img src="img/layout-icon.jpg" class="pure-img-responsive" alt="Diagram of a sample layout.">
+        </a>
     </div>
 
-    <div class="pure-u-1-2">
-        <div class="l-hbox">
-            <h3>Create responsive layouts.</h3>
-            <p>
-                By using <a href="{{pathTo 'grids'}}">Grids</a>, <a href="{{pathTo '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="{{pathTo 'layouts'}}">layouts</a> and start your next web project with a rock-solid foundation.
-            </p>
+    <div class="content pure-u-1 pure-u-med-1-2">
+        <h3 class="marketing-header">Create responsive layouts.</h3>
+        <p>
+            By using <a href="{{pathTo 'grids'}}">Grids</a>, <a href="{{pathTo '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="{{pathTo 'layouts'}}">layouts</a> and start your next web project with a rock-solid foundation.
+        </p>
 
-            <p>
-                <a href="{{pathTo 'layouts'}}" class="pure-button">View Layouts</a>
-            </p>
-        </div>
+        <p>
+            <a href="{{pathTo 'layouts'}}" class="pure-button">View Layouts</a>
+        </p>
     </div>
 </div>
 
-<div class="pure-g-r marketing-ribbon">
-    <div class="pure-u-1-2">
-        <div class="l-hbox">
-            <h3>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>
-                <a href="{{pathTo 'extend'}}" class="pure-button">Extend Pure</a>
-            </p>
-        </div>
+<div class="marketing marketing-customize l-wrap pure-g">
+    <div class="content pure-u-1 pure-u-med-1-2">
+        <h3 class="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>
+            <a href="{{pathTo 'extend'}}" class="pure-button">Extend Pure</a>
+        </p>
     </div>
-    <div class="pure-u-1-2">
-        <div class="l-box sample-buttons">
-            <p>
-                <button class="pure-button">Grey</button>
-                <button class="pure-button pure-button-a">Blue</button>
-                <button class="pure-button pure-button-b">Yellow</button>
-            </p>
-            <p>
-                <button class="pure-button pure-button-c">Black</button>
-                <button class="pure-button pure-button-d">Green</button>
-                <button class="pure-button pure-button-e">Red</button>
-            </p>
-            <p>
-                <button class="pure-button pure-button-f">Purple</button>
-                <button class="pure-button pure-button-g">Orange</button>
-                <button class="pure-button pure-button-h">Indigo</button>
-            </p>
+
+    <div class="sample-buttons content pure-u-1 pure-u-med-1-2">
+        <div class="pure-g">
+            <span class="sample-button pure-u-1-2 pure-u-sm-1-3">
+                <button class="pure-button">Default</button>
+            </span>
+
+            <span class="sample-button pure-u-1-2 pure-u-sm-1-3">
+                <button class="button-a pure-button">Blue</button>
+            </span>
+
+            <span class="sample-button pure-u-1-2 pure-u-sm-1-3">
+                <button class="button-b pure-button">Yellow</button>
+            </span>
+
+            <span class="sample-button pure-u-1-2 pure-u-sm-1-3">
+                <button class="button-c pure-button">Black</button>
+            </span>
+
+            <span class="sample-button pure-u-1-2 pure-u-sm-1-3">
+                <button class="button-d pure-button">Green</button>
+            </span>
+
+            <span class="sample-button pure-u-1-2 pure-u-sm-1-3">
+                <button class="button-e pure-button">Red</button>
+            </span>
+
+            <span class="sample-button pure-u-1-2 pure-u-sm-1-3">
+                <button class="button-f pure-button">Purple</button>
+            </span>
+
+            <span class="sample-button pure-u-1-2 pure-u-sm-1-3">
+                <button class="button-g pure-button">Orange</button>
+            </span>
+
+            <span class="sample-button pure-u-1 pure-u-sm-1-3">
+                <button class="button-h pure-button">Indigo</button>
+            </span>
         </div>
     </div>
 </div>
diff --git a/views/pages/layouts/examples/blog.handlebars b/views/pages/layouts/examples/blog.handlebars
index 0807ffb3..d433c9e8 100644
--- a/views/pages/layouts/examples/blog.handlebars
+++ b/views/pages/layouts/examples/blog.handlebars
@@ -1,11 +1,12 @@
 {{setTitle    "Blog"}}
 {{setSubTitle "A layout example that shows off a blog page with a list of posts."}}
 {{setTags     "base" "grids" "buttons" "menus"}}
-{{addLocalCSS "/css/layouts/blog.css"}}
+{{addLocalCSS "/css/main-grid.css" hasOldIE=true}}
+{{addLocalCSS "/css/layouts/blog.css" hasOldIE=true}}
 
-<div class="pure-g-r" id="layout">
-    <div class="sidebar pure-u">
-        <header class="header">
+<div id="layout" class="pure-g">
+    <div class="sidebar pure-u-1 pure-u-med-1-4">
+        <div class="header">
             <hgroup>
                 <h1 class="brand-title">A Sample Blog</h1>
                 <h2 class="brand-tagline">Creating a blog layout using Pure</h2>
@@ -21,11 +22,11 @@
                     </li>
                 </ul>
             </nav>
-        </header>
+        </div>
     </div>
 
-    <div class="pure-u-1">
-        <div class="content">
+    <div class="content pure-u-1 pure-u-med-3-4">
+        <div>
             <!-- A wrapper for all the blog posts -->
             <div class="posts">
                 <h1 class="content-subhead">Pinned Post</h1>
@@ -92,10 +93,11 @@
                     </header>
 
                     <div class="post-description">
-                        <div class="post-images pure-g-r">
-                            <div class="pure-u-1-2">
+                        <div class="post-images pure-g">
+                            <div class="pure-u-1 pure-u-med-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>
 
@@ -104,9 +106,10 @@
                                 </div>
                             </div>
 
-                            <div class="pure-u-1-2">
+                            <div class="pure-u-1 pure-u-med-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>
 
@@ -140,7 +143,7 @@
                 </section>
             </div>
 
-            <footer class="footer">
+            <div class="footer">
                 <div class="pure-menu pure-menu-horizontal pure-menu-open">
                     <ul>
                         <li><a href="http://purecss.io/">About</a></li>
@@ -148,7 +151,7 @@
                         <li><a href="http://github.com/yui/pure/">Github</a></li>
                     </ul>
                 </div>
-            </footer>
+            </div>
         </div>
     </div>
 </div>
diff --git a/views/pages/layouts/examples/email.handlebars b/views/pages/layouts/examples/email.handlebars
index fddf31a5..7453911c 100644
--- a/views/pages/layouts/examples/email.handlebars
+++ b/views/pages/layouts/examples/email.handlebars
@@ -1,9 +1,9 @@
 {{setTitle    "Email"}}
 {{setSubTitle "A layout example that shows off a responsive email layout."}}
 {{setTags     "base" "grids" "buttons" "menus"}}
-{{addLocalCSS "/css/layouts/email.css"}}
+{{addLocalCSS "/css/layouts/email.css" hasOldIE=true}}
 
-<div class="pure-g-r content" id="layout">
+<div class="pure-g content" id="layout">
     <div class="pure-u" id="nav">
         <a href="#" class="nav-menu-button">Menu</a>
 
diff --git a/views/pages/layouts/examples/gallery.handlebars b/views/pages/layouts/examples/gallery.handlebars
index bb4513c4..94a1ffd2 100644
--- a/views/pages/layouts/examples/gallery.handlebars
+++ b/views/pages/layouts/examples/gallery.handlebars
@@ -1,7 +1,8 @@
 {{setTitle    "Photo Gallery"}}
 {{setSubTitle "A layout example that shows off a responsive photo gallery."}}
 {{setTags     "base" "grids" "forms" "buttons" "menus"}}
-{{addLocalCSS "/css/layouts/gallery.css"}}
+{{addLocalCSS "/css/layouts/gallery-grid.css" hasOldIE=true}}
+{{addLocalCSS "/css/layouts/gallery.css" hasOldIE=true}}
 
 <div>
     <div class="header">
@@ -16,94 +17,112 @@
         </div>
     </div>
 
-    <div class="pure-g-r">
-        <div class="pure-u-1-3 photo-box">
-            <a href="http://www.flickr.com/photos/95572727@N00/4070581709/">
-                <img src="http://farm3.staticflickr.com/2447/4070581709_1204f25e3b.jpg"
-                     alt="Photo of a Bamboo forest in Kyoto.">
+    <div class="pure-g">
+        <div class="photo-box pure-u-1 pure-u-med-1-3 pure-u-lrg-1-4">
+            <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">
-                The Bamboo Forest, Kyoto
-                <span>
-                    by <a href="http://www.flickr.com/photos/95572727@N00/4070581709/">Stuck in Customs</a> / <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/">cc</a>
-                </span>
+                <span>by <a href="http://www.dillonmcintosh.tumblr.com/">Dillon McIntosh</a></span>
             </aside>
         </div>
 
-        <div class="pure-u-2-3 text-box">
+        <div class="text-box pure-u-1 pure-u-med-2-3 pure-u-lrg-3-4">
             <div class="l-box">
                 <h1 class="text-box-head">Photos from around the world</h1>
-                <p class="text-box-subhead">A collection of beautiful Flickr photos.</p>
+                <p class="text-box-subhead">A collection of beautiful photos gathered from Unsplash.com.</p>
             </div>
         </div>
 
-        <div class="pure-u-1-3 photo-box">
-            <a href="http://www.flickr.com/photos/ecstaticist/4015614533/">
-                <img src="http://farm3.staticflickr.com/2785/4015614533_3e04ac2c7d.jpg"
-                     alt="Photo of Dahlia taken using an HDR technique.">
+        <div class="photo-box pure-u-1 pure-u-med-1-2 pure-u-lrg-1-3">
+            <a href="http://ngkhanhlinh.dunked.com/">
+                <img src="http://31.media.tumblr.com/aa1779a718c2844969f23c4f5dec86b1/tumblr_mvyxhonf601st5lhmo1_1280.jpg"
+                     alt="Meadow">
+            </a>
+
+            <aside class="photo-box-caption">
+                <span>
+                    by <a href="http://ngkhanhlinh.dunked.com/">Linh Nguyen</a>
+                </span>
+            </aside>
+        </div>
+
+        <div class="photo-box pure-u-1 pure-u-med-1-2 pure-u-lrg-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-med-1-2 pure-u-lrg-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">
-                HDR Dahlia
                 <span>
-                    by <a href="http://www.flickr.com/photos/ecstaticist/4015614533/">ecstaticist</a> / <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/">cc</a>
+                    by <a href="http://www.flickr.com/photos/rulasibai/">Rula Sibai</a>
                 </span>
             </aside>
         </div>
 
-        <div class="pure-u-1-3 photo-box">
-            <a href="http://www.flickr.com/photos/blmiers2/6159637428/">
-                <img src="http://farm7.staticflickr.com/6151/6159637428_6bffb5bce1.jpg"
-                     alt="Photo of a misty morning sunrise in Alaska.">
+        <div class="photo-box pure-u-1 pure-u-med-1-2 pure-u-lrg-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">
-                Misty Morning Sunrise, Alaska
                 <span>
-                    by <a href="http://www.flickr.com/photos/blmiers2/6159637428/">blmiers2</a> / <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/">cc</a>
+                    by <a href="http://www.flickr.com/photos/charliefoster/">Charlie Foster</a>
                 </span>
             </aside>
         </div>
 
-        <div class="pure-u-1-3 photo-box">
-            <a href="http://www.flickr.com/photos/blmiers2/6167391543/">
-                <img src="http://farm7.staticflickr.com/6171/6167391543_395a7cabfd.jpg"
-                     alt="Photo of a mountain in Alaska's Denali.">
+        <div class="photo-box photo-box-thin pure-u-1 pure-u-lrg-2-3">
+            <a href="http://ngkhanhlinh.dunked.com/">
+                <img src="http://24.media.tumblr.com/c35afcc83e18ea7875160f64c039f471/tumblr_mwhdohfePJ1st5lhmo1_1280.jpg"
+                     alt="Balloons">
             </a>
 
             <aside class="photo-box-caption">
-                Mountain, Alaska's Denali
                 <span>
-                    by <a href="http://www.flickr.com/photos/blmiers2/6159637428/">blmiers2</a> / <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/">cc</a>
+                    by <a href="http://ngkhanhlinh.dunked.com/">Linh Nguyen</a>
                 </span>
             </aside>
         </div>
 
-        <div class="pure-u-2-3 photo-box">
-            <a href="http://www.flickr.com/photos/jjjohn/2120309884/">
-                <img src="http://farm3.staticflickr.com/2109/2120309884_de48fdb9fe.jpg"
-                     alt="Photo of Earth's sky.">
+        <div class="photo-box photo-box-thin pure-u-1 pure-u-med-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">
-                Fire, Air, Earth and Water
                 <span>
-                    by <a href="http://www.flickr.com/photos/jjjohn/2120309884/">jjjohn</a> / <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/">cc</a>
+                    by <a href="http://twitter.com/iBoZR">Thanun Buranapong</a>
                 </span>
             </aside>
         </div>
 
-        <div class="pure-u-1-3 photo-box">
-            <a href="http://www.flickr.com/photos/betta_design/2086852016/">
-                <img src="http://farm3.staticflickr.com/2388/2086852016_5a58dd1881.jpg"
-                     alt="Photo of the Taj Mahal at sunset.">
+        <div class="photo-box pure-u-1 pure-u-med-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">
-                Taj Mahal at sunset
                 <span>
-                    by <a href="http://www.flickr.com/photos/betta_design/2086852016/">betta_design</a> / <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/">cc</a>
+                    by <a href="http://www.goodfreephotos.com/">Yinan Chen</a>
                 </span>
             </aside>
         </div>
diff --git a/views/pages/layouts/examples/marketing.handlebars b/views/pages/layouts/examples/marketing.handlebars
index baf90c9e..d92361db 100644
--- a/views/pages/layouts/examples/marketing.handlebars
+++ b/views/pages/layouts/examples/marketing.handlebars
@@ -1,138 +1,145 @@
 {{setTitle    "Landing Page"}}
 {{setSubTitle "A layout example that shows off a responsive product landing page."}}
-{{setTags     "base" "grids" "buttons" "menus"}}
-{{addLocalCSS "/css/layouts/marketing.css"}}
-
-<div class="content">
-    <div class="header">
-        <div class="pure-menu pure-menu-open pure-menu-fixed pure-menu-horizontal">
-            <a class="pure-menu-heading" href="">Your Site</a>
-
-            <ul>
-                <li class="pure-menu-selected"><a href="#">Home</a></li>
-                <li><a href="#">Tour</a></li>
-                <li><a href="#">API</a></li>
-                <li><a href="#">Blog</a></li>
-                <li><a href="#">About</a></li>
-            </ul>
-        </div>
+{{setTags     "base" "grids" "buttons" "menus" "forms"}}
+{{addLocalCSS "/css/main-grid.css" hasOldIE=true}}
+{{addLocalCSS "/css/layouts/marketing.css" hasOldIE=true}}
+{{addRemoteCSS "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"}}
+
+<div class="header">
+    <div class="home-menu pure-menu pure-menu-open pure-menu-horizontal pure-menu-fixed">
+        <a class="pure-menu-heading" href="">Your Site</a>
+
+        <ul>
+            <li class="pure-menu-selected"><a href="#">Home</a></li>
+            <li><a href="#">Tour</a></li>
+            <li><a href="#">Sign Up</a></li>
+        </ul>
     </div>
+</div>
 
+<div class="splash-container">
     <div class="splash">
-        <div class="pure-g-r">
-            <div class="pure-u-1-3">
-                <div class="l-box splash-image">
-                    <img src="http://placehold.it/500x350"
-                         alt="Placeholder image for example.">
-                </div>
+        <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-med-1-2 pure-u-lrg-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-med-1-2 pure-u-lrg-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-med-1-2 pure-u-lrg-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-med-1-2 pure-u-lrg-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="pure-u-2-3">
-                <div class="l-box splash-text">
-                    <h1 class="splash-head">
-                        Some big bold text.
-                    </h1>
+    <div class="ribbon l-box-lrg pure-g">
+        <div class="l-box-lrg is-center pure-u-1 pure-u-med-1-2 pure-u-lrg-2-5">
+            {{addLocalImg "/img/common/file-icons.png"
+                class="pure-img-responsive"
+                alt="File Icons"
+                width="300"}}
+        </div>
+        <div class="pure-u-1 pure-u-med-1-2 pure-u-lrg-3-5">
 
-                    <h2 class="splash-subhead">
-                        The HTML and CSS for this layout show how you can make a modern, responsive landing page for your next product. Browse through the source to see how we use menus and responsive grids to create this layout. Shrink your browser width and watch the layout transform and play nice with small screens.
-                    </h2>
+            <h2 class="content-head content-head-ribbon">Laboris nisi ut aliquip.</h2>
 
-                    <p>
-                        <a href="#" class="pure-button primary-button">Get Started</a>
-                    </p>
-                </div>
-            </div>
+            <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">
-        <div class="pure-g-r content-ribbon">
-            <div class="pure-u-2-3">
-                <div class="l-box">
-                    <h4 class="content-subhead">Some small text</h4>
-
-                    <h3>Lorem ipsum dolor sit amet.</h3>
-                    <p>
-                        Pellentesque hendrerit lobortis ornare. Fusce luctus imperdiet consequat. Nullam quis nunc quis ligula luctus vestibulum non quis libero. Suspendisse tristique nisl ut velit facilisis sit amet lobortis nulla pharetra.
-                    </p>
-                </div>
-            </div>
-
-            <div class="pure-u-1-3">
-                <div class="l-box">
-                    <img src="http://placehold.it/400x250"
-                         alt="Placeholder image for example.">
-                </div>
-            </div>
-        </div>
+        <h2 class="content-head is-center">Dolore magna aliqua. Uis aute irure.</h2>
 
-        <div class="pure-g-r content-ribbon">
-            <div class="pure-u-1-3">
-                <div class="l-box">
-                    <img src="http://placehold.it/400x250"
-                         alt="Placeholder image for example.">
-                </div>
-            </div>
+        <div class="pure-g">
+            <div class="l-box-lrg pure-u-1 pure-u-med-2-5">
+                <form class="pure-form pure-form-stacked">
+                    <fieldset>
 
-            <div class="pure-u-2-3">
-                <div class="l-box">
-                    <h4 class="content-subhead">Some more small text</h4>
+                        <label for="email">Your Name</label>
+                        <input id="email" type="text" placeholder="Your Name">
 
-                    <h3>Etiam iaculis iaculis lobortis.</h3>
-                    <p>
-                        Phasellus eget enim eu lectus faucibus vestibulum. Suspendisse sodales pellentesque elementum. Morbi fermentum dui sit amet libero tincidunt rutrum. Nam sodales consequat metus sed accumsan.
-                    </p>
-                </div>
-            </div>
-        </div>
 
-        <div class="pure-g-r">
-            <div class="pure-u-1-4">
-                <div class="l-box">
-                    <h3>Subheading</h3>
-                    <p>
-                        Donec suscipit, risus vel venenatis ornare, nibh massa ultrices diam, a elementum metus felis sit amet eros. Phasellus pellentesque euismod massa sed pellentesque.
-                    </p>
-                </div>
-            </div>
+                        <label for="email">Your Email</label>
+                        <input id="email" type="email" placeholder="Your Email">
 
-            <div class="pure-u-1-4">
-                <div class="l-box">
-                    <h3>Subheading</h3>
-                    <p>
-                        Donec suscipit, risus vel venenatis ornare, nibh massa ultrices diam, a elementum metus felis sit amet eros. Phasellus pellentesque euismod massa sed pellentesque.
-                    </p>
-                </div>
-            </div>
+                        <label for="password">Your Password</label>
+                        <input id="password" type="password" placeholder="Your Password">
 
-            <div class="pure-u-1-4">
-                <div class="l-box">
-                    <h3>Subheading</h3>
-                    <p>
-                        Donec suscipit, risus vel venenatis ornare, nibh massa ultrices diam, a elementum metus felis sit amet eros. Phasellus pellentesque euismod massa sed pellentesque.
-                    </p>
-                </div>
+                        <button type="submit" class="pure-button">Sign Up</button>
+                    </fieldset>
+                </form>
             </div>
 
-            <div class="pure-u-1-4">
-                <div class="l-box">
-                    <h3>Subheading</h3>
-                    <p>
-                        Donec suscipit, risus vel venenatis ornare, nibh massa ultrices diam, a elementum metus felis sit amet eros. Phasellus pellentesque euismod massa sed pellentesque.
-                    </p>
-                </div>
+            <div class="l-box-lrg pure-u-1 pure-u-med-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 class="l-box ribbon">
-            <h2>Get started now.</h2>
-            <a href="#" class="pure-button primary-button">Sign up</a>
-        </div>
     </div>
 
-    <div class="footer">
+    <div class="footer l-box is-center">
         View the source of this layout to learn more. Made with love by the YUI Team.
     </div>
+
 </div>
 
 <script src="http://yui.yahooapis.com/{{yui_version}}/build/yui/yui{{min}}.js"></script>
diff --git a/views/pages/layouts/examples/pricing.handlebars b/views/pages/layouts/examples/pricing.handlebars
index 079575e9..7aedd430 100644
--- a/views/pages/layouts/examples/pricing.handlebars
+++ b/views/pages/layouts/examples/pricing.handlebars
@@ -1,9 +1,10 @@
 {{setTitle    "Pricing Table"}}
 {{setSubTitle "A layout example that shows off a responsive pricing table."}}
 {{setTags     "base" "grids" "buttons" "menus"}}
-{{addLocalCSS "/css/layouts/pricing.css"}}
+{{addLocalCSS "/css/main-grid.css" hasOldIE=true}}
+{{addLocalCSS "/css/layouts/pricing.css" hasOldIE=true}}
 
-<div class="pure-menu pure-menu-open pure-menu-horizontal pure-menu-fixed">
+<div class="pure-menu pure-menu-open pure-menu-horizontal">
     <a href="#" class="pure-menu-heading">Your Logo</a>
     <ul>
         <li><a href="#">Home</a></li>
@@ -20,8 +21,8 @@
 </div>
 
 <div class="l-content">
-    <div class="pricing-tables pure-g-r">
-        <div class="pure-u-1-3">
+    <div class="pricing-tables pure-g">
+        <div class="pure-u-1 pure-u-med-1-3">
             <div class="pricing-table pricing-table-free">
                 <div class="pricing-table-header">
                     <h2>Personal</h2>
@@ -44,7 +45,7 @@
             </div>
         </div>
 
-        <div class="pure-u-1-3">
+        <div class="pure-u-1 pure-u-med-1-3">
             <div class="pricing-table pricing-table-biz pricing-table-selected">
                 <div class="pricing-table-header">
                     <h2>Small Business</h2>
@@ -67,7 +68,7 @@
             </div>
         </div>
 
-        <div class="pure-u-1-3">
+        <div class="pure-u-1 pure-u-med-1-3">
             <div class="pricing-table pricing-table-enterprise">
                 <div class="pricing-table-header">
                     <h2>Enterprise</h2>
@@ -91,8 +92,8 @@
         </div>
     </div> <!-- end pricing-tables -->
 
-    <div class="information pure-g-r">
-        <div class="pure-u-1-2">
+    <div class="information pure-g">
+        <div class="pure-u-1 pure-u-med-1-2">
             <div class="l-box">
                 <h3 class="information-head">Get started today</h3>
                 <p>
@@ -101,7 +102,7 @@
             </div>
         </div>
 
-        <div class="pure-u-1-2">
+        <div class="pure-u-1 pure-u-med-1-2">
             <div class="l-box">
                 <h3 class="information-head">Pay monthly or annually</h3>
                 <p>
@@ -111,7 +112,7 @@
             </div>
         </div>
 
-        <div class="pure-u-1-2">
+        <div class="pure-u-1 pure-u-med-1-2">
             <div class="l-box">
                 <h3 class="information-head">24/7 customer support</h3>
                 <p>
@@ -120,7 +121,7 @@
             </div>
         </div>
 
-        <div class="pure-u-1-2">
+        <div class="pure-u-1 pure-u-med-1-2">
             <div class="l-box">
                 <h3 class="information-head">Cancel your plan anytime</h3>
                 <p>
@@ -132,8 +133,8 @@
     </div> <!-- end information -->
 </div> <!-- end l-content -->
 
-<div class="footer">
-    <p class="l-box">
+<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>
diff --git a/views/pages/layouts/examples/side-menu.handlebars b/views/pages/layouts/examples/side-menu.handlebars
index 93c5537f..c325cf10 100644
--- a/views/pages/layouts/examples/side-menu.handlebars
+++ b/views/pages/layouts/examples/side-menu.handlebars
@@ -1,7 +1,7 @@
 {{setTitle    "Side Menu"}}
 {{setSubTitle "A layout example with a side menu that hides on mobile, just like the Pure website."}}
 {{setTags     "base" "grids" "menus"}}
-{{addLocalCSS "/css/layouts/side-menu.css"}}
+{{addLocalCSS "/css/layouts/side-menu.css" hasOldIE=true}}
 
 <div id="layout">
     <!-- Menu toggle -->
@@ -55,18 +55,18 @@
                 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-r">
+            <div class="pure-g">
                 <div class="pure-u-1-4">
-                    <img src="http://farm3.staticflickr.com/2875/9069037713_1752f5daeb.jpg" alt="Peyto Lake">
+                    <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 src="http://farm3.staticflickr.com/2813/9069585985_80da8db54f.jpg" alt="Train">
+                    <img class="pure-img-responsive" src="http://farm3.staticflickr.com/2813/9069585985_80da8db54f.jpg" alt="Train">
                 </div>
                 <div class="pure-u-1-4">
-                    <img src="http://farm6.staticflickr.com/5456/9121446012_c1640e42d0.jpg" alt="T-Shirt Store">
+                    <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 src="http://farm8.staticflickr.com/7357/9086701425_fda3024927.jpg" alt="Mountain">
+                    <img class="pure-img-responsive" src="http://farm8.staticflickr.com/7357/9086701425_fda3024927.jpg" alt="Mountain">
                 </div>
             </div>
 
diff --git a/views/pages/layouts/index.handlebars b/views/pages/layouts/index.handlebars
index 96f41383..e13ea46d 100644
--- a/views/pages/layouts/index.handlebars
+++ b/views/pages/layouts/index.handlebars
@@ -20,40 +20,36 @@
     </aside>
 
   {{#each layouts}}
-    <div class="layout-item pure-g-r">
-        <div class="layout-item-screenshot pure-u-1-2">
-            <div class="l-hbox">
-                <a href="{{pathTo 'layout' layout=name}}">
-                    <img src="/img/layouts/{{name}}@2x.jpg" class="bordered" width="400" height="214"
-                         alt="Screenshot of {{label}} example layout.">
-                </a>
-            </div>
+    <div class="layout-item l-wrap pure-g">
+        <div class="layout-item-screenshot content pure-u-1 pure-u-sm-1-2">
+            <a href="{{pathTo 'layout' layout=name}}">
+                <img src="/img/layouts/{{name}}@2x.jpg" class="pure-img-responsive" width="400" height="214"
+                     alt="Screenshot of {{label}} example layout.">
+            </a>
         </div>
 
-        <div class="layout-item-content pure-u-1-2">
-            <div class="l-hbox">
-                <h3 class="layout-item-head">{{label}}</h3>
-                <p>{{description}}</p>
-
-              {{#if tags}}
-                <ul class="layout-item-modules pure-g">
-                  {{#each tags}}
-                    <li class="layout-item-module layout-item-module-{{.}} pure-u">
-                        <a href="{{pathTo .}}">{{.}}</a>
-                    </li>
-                  {{/each}}
-                </ul>
-              {{/if}}
-
-                <p>
-                    <a href="{{pathTo 'layout' layout=name}}"
-                       class="pure-button pure-button-primary">View</a>
-
-                    <a href="{{pathTo 'layout-download' layout=name}}" download
-                       onclick="return Pure.trackLayoutDownload.call(this, '{{name}}');"
-                       class="pure-button">Download</a>
-                </p>
-            </div>
+        <div class="layout-item-content content pure-u-1 pure-u-sm-1-2">
+            <h3 class="layout-item-head">{{label}}</h3>
+            <p>{{description}}</p>
+
+          {{#if tags}}
+            <ul class="layout-item-modules pure-g">
+              {{#each tags}}
+                <li class="layout-item-module layout-item-module-{{.}} pure-u">
+                    <a href="{{pathTo .}}">{{.}}</a>
+                </li>
+              {{/each}}
+            </ul>
+          {{/if}}
+
+            <p>
+                <a href="{{pathTo 'layout' layout=name}}"
+                   class="pure-button pure-button-primary">View</a>
+
+                <a href="{{pathTo 'layout-download' layout=name}}" download
+                   onclick="return Pure.trackLayoutDownload.call(this, '{{name}}');"
+                   class="pure-button">Download</a>
+            </p>
         </div>
     </div>
   {{/each}}
diff --git a/views/partials/base/headings.handlebars b/views/partials/base/headings.handlebars
index edab8f20..8fc41d2f 100644
--- a/views/partials/base/headings.handlebars
+++ b/views/partials/base/headings.handlebars
@@ -1,14 +1,6 @@
-<table class="pure-table pure-table-bordered">
-    <tbody>
-        <tr>
-            <td><h1>Heading 1</h1></td>
-            <td><h2>Heading 2</h2></td>
-            <td><h3>Heading 3</h3></td>
-        </tr>
-        <tr>
-            <td><h4>Heading 4</h4></td>
-            <td><h5>Heading 5</h5></td>
-            <td><h6>Heading 6</h6></td>
-        </tr>
-    </tbody>
-</table>
+<h1>Heading 1</h1>
+<h2>Heading 2</h2>
+<h3>Heading 3</h3>
+<h4>Heading 4</h4>
+<h5>Heading 5</h5>
+<h6>Heading 6</h6>
diff --git a/views/partials/base/inline.handlebars b/views/partials/base/inline.handlebars
index 7cf35ee2..3185d33a 100644
--- a/views/partials/base/inline.handlebars
+++ b/views/partials/base/inline.handlebars
@@ -1,35 +1,31 @@
-<div class="pure-g-r">
-    <div class="pure-u-1-2">
-        <div class="l-box">
-            <p>
-                <cite>cite element</cite> example<br>
-                The <code>code element</code> example<br>
-                The <del>del element</del> example<br>
-                The <dfn>dfn element</dfn> and <dfn title="Title text">dfn element with title</dfn> examples<br>
-                The <em>em element</em> example<br>
-                The <i>i element</i> example<br>
-                The img element <img src="http://lorempixel.com/24/24" alt=""> example<br>
-                The <ins>ins element</ins> example<br>
-                The <kbd>kbd element</kbd> example<br>
-                The <mark>mark element</mark> example
-            </p>
-        </div>
+<div class="l-wrap pure-g">
+    <div class="content pure-u-1 pure-u-sm-1-2">
+        <p>
+            <cite>cite element</cite> example<br>
+            The <code>code element</code> example<br>
+            The <del>del element</del> example<br>
+            The <dfn>dfn element</dfn> and <dfn title="Title text">dfn element with title</dfn> examples<br>
+            The <em>em element</em> example<br>
+            The <i>i element</i> example<br>
+            The img element <img src="http://lorempixel.com/24/24" alt=""> example<br>
+            The <ins>ins element</ins> example<br>
+            The <kbd>kbd element</kbd> example<br>
+            The <mark>mark element</mark> example
+        </p>
     </div>
 
-    <div class="pure-u-1-2">
-        <div class="l-box">
-            <p>
-                The <q>q element <q>inside</q> a q element</q> example<br>
-                The <s>s element</s> example<br>
-                The <samp>samp element</samp> example<br>
-                The <small>small element</small> example<br>
-                The <span>span element</span> example<br>
-                The <strong>strong element</strong> example<br>
-                The <sub>sub element</sub> example<br>
-                The <sup>sup element</sup> example<br>
-                The <u>u element</u> example<br>
-                The <var>var element</var> example
-            </p>
-        </div>
+    <div class="content pure-u-1 pure-u-sm-1-2">
+        <p>
+            The <q>q element <q>inside</q> a q element</q> example<br>
+            The <s>s element</s> example<br>
+            The <samp>samp element</samp> example<br>
+            The <small>small element</small> example<br>
+            The <span>span element</span> example<br>
+            The <strong>strong element</strong> example<br>
+            The <sub>sub element</sub> example<br>
+            The <sup>sup element</sup> example<br>
+            The <u>u element</u> example<br>
+            The <var>var element</var> example
+        </p>
     </div>
 </div>
diff --git a/views/partials/base/lists.handlebars b/views/partials/base/lists.handlebars
index 177d6f23..cb4bb3f1 100644
--- a/views/partials/base/lists.handlebars
+++ b/views/partials/base/lists.handlebars
@@ -1,5 +1,5 @@
-<div class="pure-g-r">
-    <div class="pure-u-1-3">
+<div class="pure-g">
+    <div class="pure-u-1 pure-u-med-1-3">
         <h4>Unordered List</h4>
 
         <ul>
@@ -22,7 +22,7 @@
         </ul>
     </div>
 
-    <div class="pure-u-1-3">
+    <div class="pure-u-1 pure-u-med-1-3">
         <h3>Ordered List</h3>
 
         <ol>
@@ -45,7 +45,7 @@
         </ol>
     </div>
 
-    <div class="pure-u-1-3">
+    <div class="pure-u-1 pure-u-med-1-3">
         <h3>Definition Lists</h3>
 
         <dl>
diff --git a/views/partials/forms/multi.handlebars b/views/partials/forms/multi.handlebars
index 5cd29acb..9d76d9bf 100644
--- a/views/partials/forms/multi.handlebars
+++ b/views/partials/forms/multi.handlebars
@@ -2,28 +2,28 @@
     <fieldset>
         <legend>Legend</legend>
 
-        <div class="pure-g-r">
-            <div class="pure-u-1-3">
+        <div class="pure-g">
+            <div class="pure-u-1 pure-u-med-1-3">
                 <label for="{{id 'first-name'}}">First Name</label>
                 <input id="{{id 'first-name'}}" type="text">
             </div>
 
-            <div class="pure-u-1-3">
+            <div class="pure-u-1 pure-u-med-1-3">
                 <label for="{{id 'last-name'}}">Last Name</label>
                 <input id="{{id 'last-name'}}" type="text">
             </div>
 
-            <div class="pure-u-1-3">
+            <div class="pure-u-1 pure-u-med-1-3">
                 <label for="{{id 'email'}}">E-Mail</label>
                 <input id="{{id 'email'}}" type="email" required>
             </div>
 
-            <div class="pure-u-1-3">
+            <div class="pure-u-1 pure-u-med-1-3">
                 <label for="{{id 'city'}}">City</label>
                 <input id="{{id 'city'}}" type="text">
             </div>
 
-            <div class="pure-u-1-3">
+            <div class="pure-u-1 pure-u-med-1-3">
                 <label for="{{id 'state'}}">State</label>
                 <select id="{{id 'state'}}" class="pure-input-1-2">
                     <option>AL</option>
diff --git a/views/partials/grids/four-col.handlebars b/views/partials/grids/four-col.handlebars
index f18e4415..a89070dd 100644
--- a/views/partials/grids/four-col.handlebars
+++ b/views/partials/grids/four-col.handlebars
@@ -35,7 +35,7 @@
         </div>
     </div>
 
-    <div class="pure-u-1 l-centered">
+    <div class="pure-u-1">
         <img src="http://24.media.tumblr.com/31f24c22894d6d46a7b6f4b0687db9cd/tumblr_mnh0uemhCk1st5lhmo1_1280.jpg"
              alt="Sample image of a meeting for a responsive image example.">
     </div>
diff --git a/views/partials/html5shiv.handlebars b/views/partials/html5shiv.handlebars
new file mode 100644
index 00000000..6db9974f
--- /dev/null
+++ b/views/partials/html5shiv.handlebars
@@ -0,0 +1,5 @@
+{{#if html5shiv}}
+<!--[if lt IE 9]>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/{{html5shiv}}/html5shiv.js"></script>
+<![endif]-->
+{{/if}}
diff --git a/views/partials/legal.handlebars b/views/partials/legal.handlebars
index 474339a1..c0c4921b 100644
--- a/views/partials/legal.handlebars
+++ b/views/partials/legal.handlebars
@@ -1,32 +1,19 @@
-<div class="legal pure-g-r">
-    <div class="pure-u-2-5">
-        <div class="l-box">
-            <p class="legal-license">
-                This site is built with &lt;3 using Pure v{{pure.version}}<br>
-                All code on this site is licensed under the <a href="http://yuilibrary.com/license/">BSD License</a> unless stated otherwise.
-            </p>
-        </div>
+<div class="legal pure-g">
+    <div class="pure-u-1 pure-u-sm-1-2">
+        <p class="legal-license">
+            This site is built with &lt;3 using Pure v{{pure.version}}<br>
+            All code on this site is licensed under the <a href="https://github.com/yui/pure-site/blob/master/LICENSE.md">Yahoo BSD License</a> unless stated.
+        </p>
     </div>
 
-    <div class="pure-u-1-5">
-        <div class="l-box legal-logo">
-            <a href="http://yuilibrary.com/">
-                <img src="/img/logo-footer.png" height="30" width="65"
-                     alt="YUI logo">
-            </a>
-        </div>
-    </div>
-
-    <div class="pure-u-2-5">
-        <div class="l-box">
-            <ul class="legal-links">
-                <li><a href="https://github.com/yui/pure/">GitHub Project</a></li>
-                <li><a href="http://yuilibrary.com/security/">Security Contact Info</a></li>
-            </ul>
+    <div class="pure-u-1 pure-u-sm-1-2">
+        <ul class="legal-links">
+            <li><a href="https://github.com/yui/pure/">GitHub Project</a></li>
+            <li><a href="http://yuilibrary.com/security/">Security Contact Info</a></li>
+        </ul>
 
-            <p class="legal-copyright">
-                &copy; {{copyright_year}} Yahoo! Inc. All rights reserved.
-            </p>
-        </div>
+        <p class="legal-copyright">
+            &copy; {{copyright_year}} Yahoo! Inc. All rights reserved.
+        </p>
     </div>
 </div>
diff --git a/views/partials/menu.handlebars b/views/partials/menu.handlebars
index 8fc2fe4f..70990350 100644
--- a/views/partials/menu.handlebars
+++ b/views/partials/menu.handlebars
@@ -2,7 +2,7 @@
     <span></span>
 </a>
 
-<div class="pure-u" id="menu">
+<div id="menu">
     <div class="pure-menu pure-menu-open">
         <a class="pure-menu-heading" href="{{pathTo 'home'}}">Pure</a>