diff --git a/.bowerrc b/.bowerrc
deleted file mode 100644
index 51f45f9..0000000
--- a/.bowerrc
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "directory" : "lib"
-}
diff --git a/.editorconfig b/.editorconfig
index 9099689..7051c25 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -9,3 +9,6 @@ indent_size = 2
 end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index a31d7ef..f7ff5a0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,13 +1,12 @@
 .divshot-cache
-lib/*
-node_modules
 npm-debug.log
 .DS_Store
 .sass-cache
 */.DS_Store
-app/lib/*
-app/styles/components.css
-app/styles/components.css.map
-app/styles/main.css
-app/styles/main.css.map
 app/feed.json
+node_modules
+dist
+test/temp
+bower_components
+.tmp
+test/bower_components/
\ No newline at end of file
diff --git a/README.md b/README.md
old mode 100644
new mode 100755
index 0232ba6..94fd779
--- a/README.md
+++ b/README.md
@@ -3,4 +3,270 @@ thewebplatform.today
 
 [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/thewebplatform/thewebplatform.today?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
-Polymer Web App for The Web Platform Podcast 
+Polymer Web App for The Web Platform Podcast.
+
+
+## Polymer Starter Kit
+
+> A starting point for building web applications with Polymer 1.0
+
+### Included out of the box:
+
+* [Polymer](http://polymer-project.org), [Paper](https://elements.polymer-project.org/browse?package=paper-elements) and [Iron](https://elements.polymer-project.org/browse?package=iron-elements) elements
+* [Material Design](http://www.google.com/design/spec/material-design/introduction.html) layout 
+* Routing with [Page.js](https://visionmedia.github.io/page.js/)
+* Unit testing with Web Component Tester
+* Offline-first setup through [Platinum](https://elements.polymer-project.org/browse?package=platinum-elements) Service Worker elements
+* End-to-end Build Tooling (including [Vulcanize](https://github.com/Polymer/vulcanize))
+
+## Getting Started
+
+To take advantage of Polymer Starter Kit you need to:
+
+1. Get a copy of the code.
+2. Install the dependencies if you don't already have them.
+3. Modify the application to your liking.
+4. Deploy your production code.
+
+### Get the code
+
+[Download](https://github.com/polymerelements/polymer-starter-kit/releases/latest) and extract Polymer Starter Kit to where you want to work.
+
+The standard version of Polymer Starter Kit comes with tools that are very handy when developing a Polymer app. If you'd like to get started without installing any new tools, see Polymer Starter Kit Light in the [Releases](https://github.com/polymerelements/polymer-starter-kit/releases/latest) page.
+
+### Install dependencies
+
+#### Quick-start (for experienced users)
+
+With Node.js installed, run the following one liner from the root of your Polymer Starter Kit download:
+
+```sh
+npm install -g gulp bower && npm install && bower install
+```
+
+#### Prerequisites (for everyone)
+
+The full starter kit requires the following major dependencies:
+
+- Node.js, used to run JavaScript tools from the command line.
+- npm, the node package manager, installed with Node.js and used to install Node.js packages.
+- gulp, a Node.js-based build tool.
+- bower, a Node.js-based package manager used to install front-end packages (like Polymer).
+
+**To install dependencies:**
+
+1)  Check your Node.js version.
+
+```sh
+node --version
+```
+
+The version should be at or above 0.12.x. 
+
+2)  If you don't have Node.js installed, or you have a lower version, go to [nodejs.org](https://nodejs.org) and click on the big green Install button. 
+
+3)  Install `gulp` and `bower` globally.
+
+```sh
+npm install -g gulp bower
+```
+
+This lets you run `gulp` and `bower` from the command line.
+
+4)  Install the starter kit's local `npm` and `bower` dependencies.
+
+```sh
+cd polymer-starter-kit && npm install && bower install
+```
+
+This installs the element sets (Paper, Iron, Platinum) and tools the starter kit requires to build and serve apps.
+
+### Development workflow
+
+#### Serve / watch
+
+```sh
+gulp serve
+```
+
+This outputs an IP address you can use to locally test and another that can be used on devices connected to your network.
+
+#### Run tests
+
+```sh
+gulp test:local
+```
+
+This runs the unit tests defined in the `app/test` directory through [web-component-tester](https://github.com/Polymer/web-component-tester).
+
+#### Build & Vulcanize
+
+```sh
+gulp
+```
+
+Build and optimize the current project, ready for deployment. This includes linting as well as vulcanization, image, script, stylesheet and HTML optimization and minification.
+
+## Application Theming
+
+Polymer 1.0 introduces a shim for CSS custom properties. We take advantage of this in `app/styles/app-theme.html` to provide theming for your application. You can also find our presets for Material Design breakpoints in this file.
+
+[Read more](https://www.polymer-project.org/1.0/docs/devguide/styling.html) about CSS custom properties.
+
+## Unit Testing
+
+Web apps built with Polymer Starter Kit come configured with support for [Web Component Tester](https://github.com/Polymer/web-component-tester) - Polymer's preferred tool for authoring and running unit tests. This makes testing your element based applications a pleasant experience.
+
+[Read more](https://github.com/Polymer/web-component-tester#html-suites) about using Web Component tester.
+
+## Dependency Management
+
+Polymer uses [Bower](http://bower.io) for package management. This makes it easy to keep your elements up to date and versioned. For tooling, we use npm to manage Node.js-based dependencies.
+
+## Service Worker
+
+Polymer Starter Kit offers an offline-first experience thanks to Service Worker and the [Platinum Service Worker elements](https://github.com/PolymerElements/platinum-sw). New to Service Worker? Read the following [introduction](http://www.html5rocks.com/en/tutorials/service-worker/introduction/) to understand how it works.
+
+Our default offline setup should work well for relatively simple applications. For more complex apps, we recommend learning how Service Worker works so that you can make the most of the Platinum Service Worker element abstractions. 
+
+#### Filing bugs in the right place
+
+If you experience an issue with Service Worker support in your application, check the origin of the issue and use the appropriate issue tracker:
+
+* [sw-toolbox](https://github.com/GoogleChrome/sw-toolbox/issues)
+* [platinum-sw](https://github.com/PolymerElements/platinum-sw/issues)
+* [platinum-push-notifications-manager](https://github.com/PolymerElements/push-notification-manager/)
+* For all other issues, feel free to file them [here](https://github.com/polymerelements/polymer-starter-kit/issues).
+
+#### I get an error message about "Only secure origins are allowed"
+
+Service Workers are only available to "secure origins" (HTTPS sites, basically) in line with a policy to prefer secure origins for powerful new features. However http://localhost is also considered a secure origin, so if you can, developing on localhost is an easy way to avoid this error. For production, your site will need to support HTTPS. 
+
+#### How do I debug Service Worker?
+
+If you need to debug the event listener wire-up use `chrome://serviceworker-internals`.
+
+#### What are those buttons on chrome://serviceworker-internals?
+
+This page shows your registered workers and provides some basic operations.
+
+* Unregister: Unregisters the worker.
+* Start: Starts the worker. This would happen automatically when you navigate to a page in the worker's scope.
+* Stop: Stops the worker.
+* Sync: Dispatches a 'sync' event to the worker. If you don't handle this event, nothing will happen.
+* Push: Dispatches a 'push' event to the worker. If you don't handle this event, nothing will happen.
+* Inspect: Opens the worker in the Inspector.
+
+#### Development flow 
+
+In order to guarantee that the latest version of your Service Worker script is being used, follow these instructions:
+
+* After you made changes to your service worker script, close all but one of the tabs pointing to your web application
+* Hit shift-reload to bypass the service worker as to ensure that the remaining tab isn't under the control of a service worker
+* Hit reload to let the newer version of the Service Worker control the page.
+
+If you find anything to still be stale, you can also try navigating to `chrome:serviceworker-internals` (in Chrome), finding the relevant Service Worker entry for your application and clicking 'Unregister' before refreshing your app. This will (of course) only clear it from the local development machine. If you have already deployed to production then further work will be necessary to remove it from your user's machines.
+
+#### Not yet ready for Service Worker support?
+
+If for any reason you decide that Service Worker support isn't for you, you can disable it from your Polymer Starter Kit project using these 3 steps:
+
+* Remove 'precache' from the list in the 'default' gulp task ([gulpfile.js](https://github.com/PolymerElements/polymer-starter-kit/blob/master/gulpfile.js)) 
+* Remove the two Platinum Service Worker elements (platinum-sw/..) in [app/elements/elements.html](https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/elements/elements.html)
+* Remove references to the platinum-sw elements from your application [index](https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/index.html). 
+
+You will also want to navigate to `chrome://serviceworker-internals` and unregister any Service Workers registered by Polymer Starter Kit for your app just in case there's a copy of it cached. 
+
+## Yeoman support
+
+[generator-polymer](https://github.com/yeoman/generator-polymer/releases) now includes support for Polymer Starter Kit out of the box.
+
+## Frequently Asked Questions
+
+> Where do I customise my application theme?
+
+Theming can be achieved using [CSS Custom properties](https://www.polymer-project.org/1.0/docs/devguide/styling.html#xscope-styling-details) via [app/styles/app-theme.html](https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/styles/app-theme.html).
+You can also use `app/styles/main.css` for pure CSS stylesheets (e.g for global styles), however note that Custom properties will not work there under the shim.
+
+A [Polycast](https://www.youtube.com/watch?v=omASiF85JzI) is also available that walks through theming using Polymer 1.0.
+
+> Where do I configure routes in my application?
+
+This can be done via [`app/elements/routing.html`](https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/elements/routing.html). We use Page.js for routing and new routes
+can be defined in this import. We then toggle which `<iron-pages>` page to display based on the [selected](https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/index.html#L105) route.
+
+> Why are we using Page.js rather than a declarative router like `<more-routing>`?
+
+`<more-routing>` (in our opinion) is good, but lacks imperative hooks for getting full control
+over the routing in your application. This is one place where a pure JS router shines. We may 
+at some point switch back to a declarative router when our hook requirements are tackled. That
+said, it should be trivial to switch to `<more-routing>` or another declarative router in your
+own local setup.
+
+> Where can I find the application layouts from your Google I/O 2015 talk?
+
+App layouts live in a separate repository called [app-layout-templates](https://github.com/PolymerElements/app-layout-templates).
+You can select a template and copy over the relevant parts you would like to reuse to Polymer Starter Kit. 
+
+You will probably need to change paths to where your Iron and Paper dependencies can be found to get everything working.
+This can be done by adding them to the [`elements.html`](https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/elements/elements.html) import.
+
+> Something has failed during installation. How do I fix this?
+
+Our most commonly reported issue is around system permissions for installing Node.js dependencies. 
+We recommend following the [fixing npm permissions](https://github.com/sindresorhus/guides/blob/master/npm-global-without-sudo.md)
+guide to address any messages around administrator permissions being required. If you use `sudo`
+to work around these issues, this guide may also be useful for avoiding that.
+
+If you run into an exception that mentions five optional dependencies failing (or an `EEXIST` error), you 
+may have run into an npm [bug](https://github.com/npm/npm/issues/6309). We recommend updating to npm 2.11.0+ 
+to work around this. You can do this by opening a Command Prompt/terminal and running `npm install npm@2.11.0 -g`. If you are on Windows, 
+Node.js (and npm) may have been installed into `C:\Program Files\`. Updating npm by running `npm install npm@2.11.0 -g` will install npm
+into `%AppData%\npm`, but your system will still use the npm version. You can avoid this by deleting your older npm from `C:\Program Files\nodejs`
+as described [here](https://github.com/npm/npm/issues/6309#issuecomment-67549380).
+
+If the issue is to do with a failure somewhere else, you might find that due to a network issue
+a dependency failed to correctly install. We recommend running `npm cache clean` and deleting the `node_modules` directory followed by 
+`npm install` to see if this corrects the problem. If not, please check the [issue tracker](https://github.com/PolymerElements/polymer-starter-kit/issues) in case
+there is a workaround or fix already posted.
+
+
+> I'm having trouble getting Vulcanize to fully build my project on Windows. Help?
+
+Some Windows users have run into trouble with the `elements.vulcanized.html` file in their `dist` folder
+not being correctly vulcanized. This can happen if your project is in a folder with a name containing a 
+space. You can work around this issue by ensuring your path doesn't contain one.
+
+There is also an [in-flight](https://github.com/PolymerElements/polymer-starter-kit/issues/62#issuecomment-108974016) issue
+where some are finding they need to disable the `inlineCss` option in our configuration for Vulcanize
+to correctly build. We are still investigating this, however for the time-being use the workaround if 
+you find your builds getting stuck here.
+
+
+> How do I add new JavaScript files to Starter Kit so they're picked up by the build process?
+
+At the bottom of `app/index.html`, you will find a build block that can be used to include additional
+scripts for your app. Build blocks are just normal script tags that are wrapped in a HTML 
+comment that indicates where to concatenate and minify their final contents to.
+
+Below, we've added in `script2.js` and `script3.js` to this block. The line 
+`<!-- build:js scripts/app.js -->` specifies that these scripts will be squashed into `scripts/app.js`
+during a build.
+
+```html
+<!-- build:js scripts/app.js -->
+<script src="scripts/app.js"></script>
+<script src="scripts/script2.js"></script>
+<script src="scripts/script3.js"></script>
+<!-- endbuild-->
+```
+
+> I'm finding the installation/tooling here overwhelming. What should I do?
+
+Don't worry! We've got your covered. Polymer Starter Kit tries to offer everything you need to build and optimize your apps for production, which is why we include the tooling we do. We realise however that our tooling setup may not be for everyone.
+
+If you find that you just want the simplest setup possible, we recommend using Polymer Starter Kit light, which is available from the [Releases](https://github.com/PolymerElements/polymer-starter-kit/releases) page. This takes next to no time to setup.
+
+## Contributing
+
+Polymer Starter Kit is a new project and is an ongoing effort by the Web Component community. We welcome your bug reports, PRs for improvements, docs and anything you think would improve the experience for other Polymer developers.
diff --git a/app/apple-touch-icon-precomposed.png b/app/apple-touch-icon-precomposed.png
deleted file mode 100755
index 76c482b..0000000
Binary files a/app/apple-touch-icon-precomposed.png and /dev/null differ
diff --git a/app/basic.html b/app/basic.html
deleted file mode 100755
index 0a0539d..0000000
--- a/app/basic.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<!doctype html>
-<html lang="">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="description" content="">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title></title>
-
-    <!-- Add to homescreen for Chrome on Android -->
-    <meta name="mobile-web-app-capable" content="yes">
-    <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
-
-    <!-- Add to homescreen for Safari on iOS -->
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
-    <meta name="apple-mobile-web-app-title" content="Web Starter Kit">
-    <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
-
-    <!-- Tile icon for Win8 (144x144 + tile color) -->
-    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
-    <meta name="msapplication-TileColor" content="#3372DF">
-
-    <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
-    <!--
-    <link rel="canonical" href="http://www.example.com/">
-    -->
-
-  </head>
-  <body>
-    <!-- Add your site or app content here -->
-
-    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
-    <script>
-      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-      ga('create', 'UA-XXXXX-X', 'auto');
-      ga('send', 'pageview');
-    </script>
-    <!-- Built with love using Web Starter Kit -->
-  </body>
-</html>
diff --git a/app/elements/elements.html b/app/elements/elements.html
new file mode 100755
index 0000000..780a8a1
--- /dev/null
+++ b/app/elements/elements.html
@@ -0,0 +1,38 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<!-- Iron elements -->
+<link rel="import" href="../bower_components/iron-flex-layout/classes/iron-flex-layout.html">
+<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
+<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
+<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
+
+<!-- Paper elements -->
+<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html">
+<link rel="import" href="../bower_components/paper-header-panel/paper-header-panel.html">
+<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../bower_components/paper-item/paper-item.html">
+<link rel="import" href="../bower_components/paper-material/paper-material.html">
+<link rel="import" href="../bower_components/paper-menu/paper-menu.html">
+<link rel="import" href="../bower_components/paper-styles/paper-styles-classes.html">
+<link rel="import" href="../bower_components/paper-toast/paper-toast.html">
+<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">
+
+<!-- Platinum elements -->
+<link rel="import" href="../bower_components/platinum-sw/platinum-sw-cache.html">
+<link rel="import" href="../bower_components/platinum-sw/platinum-sw-register.html">
+
+<!-- Add your elements here -->
+<link rel="import" href="../styles/app-theme.html">
+<link rel="import" href="my-greeting/my-greeting.html">
+<link rel="import" href="my-list/my-list.html">
+
+<!-- Configure your routes here -->
+<link rel="import" href="routing.html">
diff --git a/app/elements/my-greeting/my-greeting.html b/app/elements/my-greeting/my-greeting.html
new file mode 100755
index 0000000..ac131a7
--- /dev/null
+++ b/app/elements/my-greeting/my-greeting.html
@@ -0,0 +1,44 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<dom-module id="my-greeting">
+  <style>
+    :host {
+      display: block;
+    }
+
+    @media (max-width: 600px) {
+      h1.paper-font-display1 {
+        font-size: 24px;
+      }
+    }
+  </style>
+  <template>
+    <h1 class="paper-font-display1"><span>{{greeting}}</span></h1>
+    <span class="paper-font-body2">Update text to change the greeting.</span>
+    <!-- Listens for "input" event and sets greeting to <input>.value -->
+    <input class="paper-font-body2" value="{{greeting::input}}">
+  </template>
+</dom-module>
+<script>
+  (function() {
+    Polymer({
+      is: 'my-greeting',
+
+      properties: {
+        greeting: {
+          type: String,
+          value: 'Welcome!',
+          notify: true
+        }
+      }
+    });
+  })();
+</script>
diff --git a/app/elements/my-list/my-list.html b/app/elements/my-list/my-list.html
new file mode 100755
index 0000000..a4b5082
--- /dev/null
+++ b/app/elements/my-list/my-list.html
@@ -0,0 +1,47 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<dom-module id="my-list">
+  <style>
+    :host {
+      display: block;
+    }
+  </style>
+  <template>
+    <ul>
+      <template is="dom-repeat" items="{{items}}">
+        <li><span class="paper-font-body1">{{item}}</span></li>
+      </template>
+    </ul>
+  </template>
+</dom-module>
+<script>
+  (function () {
+    Polymer({
+      is: 'my-list',
+      properties: {
+        items: {
+          type: Array,
+          notify: true,
+        }
+      },
+      ready: function() {
+        this.items = [
+          'Responsive Web App boilerplate',
+          'Iron Elements and Paper Elements',
+          'End-to-end Build Tooling (including Vulcanize)',
+          'Unit testing with Web Component Tester',
+          'Routing with Page.js',
+          'Offline support with the Platinum Service Worker Elements'
+        ];
+      }
+    });
+  })();
+</script>
diff --git a/app/elements/routing.html b/app/elements/routing.html
new file mode 100755
index 0000000..2f7d01c
--- /dev/null
+++ b/app/elements/routing.html
@@ -0,0 +1,41 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<script src="../../bower_components/page/page.js"></script>
+<script>
+  window.addEventListener('WebComponentsReady', function() {
+
+    // We use Page.js for routing. This is a Micro
+    // client-side router inspired by the Express router
+    // More info: https://visionmedia.github.io/page.js/
+    page('/', function () {
+      app.route = 'home';
+    });
+
+    page('/users', function () {
+      app.route = 'users';
+    });
+
+    page('/users/:name', function (data) {
+      app.route = 'user-info';
+      app.params = data.params;
+    });
+
+    page('/contact', function () {
+      app.route = 'contact';
+    });
+
+    // add #! before urls
+    page({
+      hashbang: true
+    });
+
+  });
+</script>
diff --git a/app/error.html b/app/error.html
deleted file mode 100644
index 8d40ce9..0000000
--- a/app/error.html
+++ /dev/null
@@ -1,96 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset=utf-8 />
-  <title>Page Not Found</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-  <link rel="shortcut icon" href="favicon.ico">
-  <style>
-    html {
-      height: 100%;
-    }
-
-    body {
-      width: 100%;
-      height: 100%;
-      font-family: "Helvetica Neue", Helvetica, Open Sans, Arial, sans-serif;
-      background: #fff url('//assets.divshot.io/superstatic/background.jpg') top center no-repeat;
-      background-size: 100% auto;
-      margin: 0;
-      overflow: hidden;
-    }
-
-    @media (max-width: 400px) {
-      body {
-        background-size: 520%;
-      }
-    }
-
-    #message-wrapper {
-      position: relative;
-      width: 100%;
-      height: 100%;
-    }
-
-    #message {
-      position: relative;
-      top: 50%;
-      -webkit-transform: translateY(-50%);
-      -moz-transform: translateY(-50%);
-      transform: translateY(-50%);
-      max-width: 500px;
-      text-align: center;
-      margin: 0 auto;
-      padding: 1.5em;
-    }
-
-    #message h1 {
-      color: #333;
-      font-size: 3em;
-      line-height: 1.2em;
-      font-weight: bold;
-      margin: 0 0 0.2em;
-    }
-
-    #message h2 {
-      color: #333;
-      font-size: 1.6em;
-      line-height: 1.5em;
-      font-weight: bold;
-      margin: 1em 0 0.2em;
-    }
-    #message p {
-      margin: 0;
-      color: #777;
-      line-height: 1.5em;
-    }
-
-    #message #footer {
-      font-size: 11px;
-      text-align: center;
-      margin-top: 1.5em;
-      opacity: 0.5;
-    }
-
-    #message #footer a {
-      color: #999;
-    }
-
-    .glyph {
-      margin: 3.2em 0 0 0;
-    }
-  </style>
-</head>
-<body>
-  <div id="message-wrapper">
-    <div id="message">
-      <h1>404 Not Found</h1>
-      <p>Sorry, we were unable to locate anything at this address.</p>
-      <h2>Should there be something here?</h2>
-      <p><a href="mailto:support@divshot.com">Get Help via Email</a> or <a href="http://docs.divshot.com/guides/common-deploy-issues">Common Deploy Issues Documentation</a></p>
-      <p id="footer">This page was served by <a href="https://github.com/divshot/superstatic" target="_blank">superstatic</a>.</p>
-      <img class="glyph" width="26" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NIDwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApIC0tPg0gPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NIDxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINIHZpZXdCb3g9IjAgMCAxNTIuNDkzIDEzNSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTUyLjQ5MyAxMzUiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0gPGcgaWQ9IkxvZ29fRGFyayI+DSA8ZyBpZD0iR2x5cGgiPg0gPC9nPg0gPGcgaWQ9IkRpdnNob3RfVGV4dCI+DSA8L2c+DSA8L2c+DSA8ZyBpZD0iTG9nb19MaWdodCI+DSA8ZyBpZD0iT3V0bGluZSI+DSA8L2c+DSA8ZyBpZD0iTGF5ZXJfNyIgb3BhY2l0eT0iMC42Ij4NIDwvZz4NIDxnIGlkPSJEaXZzaG90X1RleHRfNV8iPg0gPC9nPg0gPC9nPg0gPGcgaWQ9IkxvZ29fT3V0bGluZV9EYXJrIj4NIDxnIGlkPSJMYXllcl80NF9jb3B5Ij4NIDwvZz4NIDxnIGlkPSJEaXZzaG90X1RleHRfMV8iPg0gPC9nPg0gPC9nPg0gPGcgaWQ9IkxvZ29fT3V0bGluZV9MaWdodCI+DSA8ZyBpZD0iT3V0bGluZV8yXyI+DSA8L2c+DSA8ZyBpZD0iRGl2c2hvdF9UZXh0XzJfIj4NIDwvZz4NIDwvZz4NIDxnIGlkPSJMb2dvX1RleHRfTGlnaHQiPg0gPGcgaWQ9IkRpdnNob3RfVGV4dF82XyI+DSA8L2c+DSA8L2c+DSA8ZyBpZD0iTG9nb19UZXh0X0RhcmsiPg0gPGcgaWQ9IkRpdnNob3RfVGV4dF83XyI+DSA8L2c+DSA8L2c+DSA8ZyBpZD0iR2x5cGhfUXVhZHJhbnQiPg0gPGcgaWQ9IkxpZ2h0X0dyYWRpZW50Ij4NIDwvZz4NIDxnIGlkPSJEYXJrX0dyYWRpZW50Ij4NIDxnIGlkPSJMYXllcl81MCI+DSA8L2c+DSA8L2c+DSA8ZyBpZD0iRGFya19PdXRsaW5lIj4NIDwvZz4NIDxnIGlkPSJMaWdodF9PdXRsaW5lIj4NIDwvZz4NIDwvZz4NIDxnIGlkPSJMb2dvX1ZlcnRpY2FsX0RhcmsiPg0gPGcgaWQ9IkRpdnNob3RfVGV4dF84XyI+DSA8L2c+DSA8ZyBpZD0iR2x5cGhfM18iPg0gPC9nPg0gPC9nPg0gPGcgaWQ9IkxvZ29fVmVydGljYWxfTGlnaHQiPg0gPGcgaWQ9IkRpdnNob3RfVGV4dF8zXyI+DSA8L2c+DSA8ZyBpZD0iR2x5cGhfMV8iPg0gPC9nPg0gPC9nPg0gPGcgaWQ9IkJyYW5kX0NvbG9ycyI+DSA8ZyBpZD0iV2hpdGUiPg0gPC9nPg0gPGcgaWQ9IkRhcmtfR3JleSI+DSA8L2c+DSA8ZyBpZD0iQmxhY2siPg0gPC9nPg0gPGcgaWQ9IkdvbGQiPg0gPC9nPg0gPC9nPg0gPGcgaWQ9IkdseXBoX0RhcmsiPg0gPGcgaWQ9IkxheWVyXzUxIj4NIDwvZz4NIDwvZz4NIDxnIGlkPSJHbHlwaF9MaWdodCI+DSA8L2c+DSA8ZyBpZD0iR2x5cGhfRGFya19PdXRsaW5lIj4NIDwvZz4NIDxnIGlkPSJHbHlwaF9MaWdodF9PdXRsaW5lIj4NIDxwYXRoIGZpbGw9IiMzMzMzMzMiIGQ9Ik0xMDIuMDQ0LDAuNDAyTDEwMS43NDQsMGgtNTIuMDFMMCw2OC4wMDVMNDkuNzM5LDEzNWg1Mmw1MC4zLTY2LjM5NmwwLjQ1NC0wLjU5OUwxMDIuMDQ0LDAuNDAyeiBNNTAuNzUsMg0gaDQ4LjU1N0w4NS42NywyMkg2MC40NDVMMjYuNjAzLDY3SDMuMjEyTDUwLjc1LDJ6IE04NS4zOTQsMTEySDYxLjIzM2wxNS44MTEtMjEuMjRMOTMuNzM2LDY5aDIzLjM3NUw4NS4zOTQsMTEyeiBNNjEuMDc0LDI0LjQ5MQ0gTDc1LjAxNSw0NC4xNkw1Ny45OTgsNjguMDIxbDE2Ljk5MSwyMi4xNUw1OS42MSwxMTAuODMyTDI4LjQ4NCw2Ny44MjVMNjEuMDc0LDI0LjQ5MXogTTc2LjI0Miw4OC41Mkw2MC40ODYsNjcuOTc5bDE1Ljc1Ni0yMi4wOTQNIGwxNS43NTYsMjIuMDk0TDc2LjI0Miw4OC41MnogTTkzLjc1OCw2N0w3Ni45MjYsNDMuMzk4TDYzLjE3NiwyNGgyMi4yMTlsMzEuOTgxLDQzSDkzLjc1OHogTTMuMjMsNjloMjMuNjM3bDMyLjU2Niw0NWgyNi42NTENIGwxMy41NzIsMTlINTAuNzQ1TDMuMjMsNjl6IE0xMDEuNDQ5LDEzMi4wN2wtMTMuOTYtMTkuNTQzbDMyLjk4Mi00NC43MTZMODcuMjgzLDIzLjE4NWwxMy45NzMtMjAuNDk0bDQ4LjczNSw2NS4zMDQNIEwxMDEuNDQ5LDEzMi4wN3oiLz4NIDxwb2x5Z29uIGZpbGw9IiMzMzMzMzMiIHBvaW50cz0iNjAuOTQ0LDIzIDI3LjI0Miw2OCA1OSwxMTIgNzYsOTAgNTkuMjQyLDY4IDc2LjI0Miw0NC4xNjIgIi8+DSA8cG9seWdvbiBmaWxsPSIjMzMzMzMzIiBwb2ludHM9Ijg2LjI0MiwyMi41IDExOS4yMjcsNjggODUuODk5LDExMyAxMDEuMjQyLDEzMy41IDE1MS4yNDIsNjggMTAxLjI0MiwxICIvPg0gPC9nPg0gPGcgaWQ9IkxvZ29fVmVydGljYWxfT3V0bGluZV9EYXJrIj4NIDxnIGlkPSJEaXZzaG90X1RleHRfNF8iPg0gPC9nPg0gPGcgaWQ9IkxheWVyXzQ4Ij4NIDwvZz4NIDwvZz4NIDxnIGlkPSJEaXZzaG90X1ZlcnRpY2FsX091dGxpbmVfTGlnaHQiPg0gPGcgaWQ9IkRpdnNob3RfVGV4dF85XyI+DSA8L2c+DSA8ZyBpZD0iR2x5cGhfMl8iPg0gPC9nPg0gPC9nPg0gPC9zdmc+DQ==">
-    </div>
-  </div>
-</body>
-</html>
diff --git a/app/favicon.ico b/app/favicon.ico
index 6132543..4887394 100755
Binary files a/app/favicon.ico and b/app/favicon.ico differ
diff --git a/app/fonts/RobotoCondensed-Bold.eot b/app/fonts/RobotoCondensed-Bold.eot
deleted file mode 100755
index 01748f7..0000000
Binary files a/app/fonts/RobotoCondensed-Bold.eot and /dev/null differ
diff --git a/app/fonts/RobotoCondensed-Bold.ttf b/app/fonts/RobotoCondensed-Bold.ttf
deleted file mode 100755
index 48dd635..0000000
Binary files a/app/fonts/RobotoCondensed-Bold.ttf and /dev/null differ
diff --git a/app/fonts/RobotoCondensed-Bold.woff b/app/fonts/RobotoCondensed-Bold.woff
deleted file mode 100755
index fbe14e8..0000000
Binary files a/app/fonts/RobotoCondensed-Bold.woff and /dev/null differ
diff --git a/app/fonts/RobotoCondensed-BoldItalic.eot b/app/fonts/RobotoCondensed-BoldItalic.eot
deleted file mode 100755
index e1746ff..0000000
Binary files a/app/fonts/RobotoCondensed-BoldItalic.eot and /dev/null differ
diff --git a/app/fonts/RobotoCondensed-BoldItalic.ttf b/app/fonts/RobotoCondensed-BoldItalic.ttf
deleted file mode 100755
index ad72864..0000000
Binary files a/app/fonts/RobotoCondensed-BoldItalic.ttf and /dev/null differ
diff --git a/app/fonts/RobotoCondensed-BoldItalic.woff b/app/fonts/RobotoCondensed-BoldItalic.woff
deleted file mode 100755
index 158ec8d..0000000
Binary files a/app/fonts/RobotoCondensed-BoldItalic.woff and /dev/null differ
diff --git a/app/fonts/RobotoCondensed-Italic.eot b/app/fonts/RobotoCondensed-Italic.eot
deleted file mode 100755
index 75b9b56..0000000
Binary files a/app/fonts/RobotoCondensed-Italic.eot and /dev/null differ
diff --git a/app/fonts/RobotoCondensed-Italic.ttf b/app/fonts/RobotoCondensed-Italic.ttf
deleted file mode 100755
index a232513..0000000
Binary files a/app/fonts/RobotoCondensed-Italic.ttf and /dev/null differ
diff --git a/app/fonts/RobotoCondensed-Italic.woff b/app/fonts/RobotoCondensed-Italic.woff
deleted file mode 100755
index 4411da9..0000000
Binary files a/app/fonts/RobotoCondensed-Italic.woff and /dev/null differ
diff --git a/app/fonts/RobotoCondensed-Light.eot b/app/fonts/RobotoCondensed-Light.eot
deleted file mode 100755
index 4779a6a..0000000
Binary files a/app/fonts/RobotoCondensed-Light.eot and /dev/null differ
diff --git a/app/fonts/RobotoCondensed-Light.ttf b/app/fonts/RobotoCondensed-Light.ttf
deleted file mode 100755
index a6e368d..0000000
Binary files a/app/fonts/RobotoCondensed-Light.ttf and /dev/null differ
diff --git a/app/fonts/RobotoCondensed-Light.woff b/app/fonts/RobotoCondensed-Light.woff
deleted file mode 100755
index dc6faf6..0000000
Binary files a/app/fonts/RobotoCondensed-Light.woff and /dev/null differ
diff --git a/app/fonts/RobotoCondensed-LightItalic.eot b/app/fonts/RobotoCondensed-LightItalic.eot
deleted file mode 100755
index 9b8bf79..0000000
Binary files a/app/fonts/RobotoCondensed-LightItalic.eot and /dev/null differ
diff --git a/app/fonts/RobotoCondensed-LightItalic.ttf b/app/fonts/RobotoCondensed-LightItalic.ttf
deleted file mode 100755
index 5b2b6ae..0000000
Binary files a/app/fonts/RobotoCondensed-LightItalic.ttf and /dev/null differ
diff --git a/app/fonts/RobotoCondensed-LightItalic.woff b/app/fonts/RobotoCondensed-LightItalic.woff
deleted file mode 100755
index d218654..0000000
Binary files a/app/fonts/RobotoCondensed-LightItalic.woff and /dev/null differ
diff --git a/app/fonts/RobotoCondensed-Regular.eot b/app/fonts/RobotoCondensed-Regular.eot
deleted file mode 100755
index 5495d43..0000000
Binary files a/app/fonts/RobotoCondensed-Regular.eot and /dev/null differ
diff --git a/app/fonts/RobotoCondensed-Regular.ttf b/app/fonts/RobotoCondensed-Regular.ttf
deleted file mode 100755
index 65bf32a..0000000
Binary files a/app/fonts/RobotoCondensed-Regular.ttf and /dev/null differ
diff --git a/app/fonts/RobotoCondensed-Regular.woff b/app/fonts/RobotoCondensed-Regular.woff
deleted file mode 100755
index 8f80878..0000000
Binary files a/app/fonts/RobotoCondensed-Regular.woff and /dev/null differ
diff --git a/app/humans.txt b/app/humans.txt
deleted file mode 100755
index 0481f94..0000000
--- a/app/humans.txt
+++ /dev/null
@@ -1,14 +0,0 @@
-# humanstxt.org/
-# The humans responsible & technology colophon
-
-# TEAM
-
-  <name> -- <role> -- <twitter>
-
-# THANKS
-
-  <name>
-
-# TECHNOLOGY COLOPHON
-
-  HTML5, CSS3
diff --git a/app/images/hamburger.svg b/app/images/hamburger.svg
deleted file mode 100755
index cb62b73..0000000
--- a/app/images/hamburger.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="z" fill="none"/><path d="M2 6h20v3H2zm0 5h20v3H2zm0 5h20v3H2z"/></svg>
\ No newline at end of file
diff --git a/app/images/icons/icons-hinted.ttf b/app/images/icons/icons-hinted.ttf
deleted file mode 100755
index e69de29..0000000
diff --git a/app/images/icons/icons.eot b/app/images/icons/icons.eot
deleted file mode 100755
index ee360b9..0000000
Binary files a/app/images/icons/icons.eot and /dev/null differ
diff --git a/app/images/icons/icons.svg b/app/images/icons/icons.svg
deleted file mode 100755
index 21008a2..0000000
--- a/app/images/icons/icons.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"><defs><font horiz-adv-x="512"><font-face font-family="icons" font-weight="500" units-per-em="512" panose-1="2 0 6 3 0 0 0 0 0 0" ascent="448" descent="-64" bbox="-0.0208333 -64 512 448" underline-thickness="25" underline-position="-52" unicode-range="U+E001-E018"/><glyph glyph-name=".notdef" horiz-adv-x="187" d="M17 0v341h136V0H17zm17 17h102v307H34V17z"/><glyph glyph-name=".null" horiz-adv-x="0"/><glyph glyph-name="nonmarkingreturn" horiz-adv-x="170"/><glyph glyph-name="uniE001" unicode="" d="M0-64v512h512V-64H0z"/><glyph glyph-name="uniE002" unicode="" d="M512 448V294L256 90 0 294v154l256-205z"/><glyph glyph-name="uniE003" unicode="" horiz-adv-x="306" d="M0 448h104l202-257L104-64H0l201 255z"/><glyph glyph-name="uniE004" unicode="" horiz-adv-x="307" d="M159 192L307-64H148L0 192l148 256h159z"/><glyph glyph-name="uniE005" unicode="" horiz-adv-x="307" d="M0 448h159l148-256L159-64H0l148 256z"/><glyph glyph-name="uniE006" unicode="" d="M256 294L0 90v153l256 205 256-205V90z"/><glyph glyph-name="uniE007" unicode="" d="M452 448l60-60L60-64 0-4zm-392 0L512-4l-60-60L0 388z"/><glyph glyph-name="uniE008" unicode="" d="M512 160l-77-32q-4-12-7-18l32-76-45-45-77 31q-12-6-18-8l-32-76h-64l-32 76q-15 5-19 7L98-12 53 33l30 76q-6 12-8 19L0 160v64l75 32q2 7 8 19l-31 75 45 45 76-30q4 2 19 7l32 76h64l32-76q12-4 18-7l76 31 45-45-31-77q6-12 8-18l76-32v-64zM256 80q46 0 78.5 32.5T367 192t-32.5 79.5T256 304t-79-33-33-79 33-79 79-33z"/><glyph glyph-name="uniE009" unicode="" d="M0 192l256 256 256-256L256-64z"/><glyph glyph-name="uniE00A" unicode="" horiz-adv-x="116" d="M116 111H0v337h116V111zm0-175H0v93h116v-93z"/><glyph glyph-name="uniE00B" unicode="" d="M219 6H106L0 192l106 186h113L114 192zm74 372h113l106-186L406 6H293l105 186z"/><glyph glyph-name="uniE00C" unicode="" horiz-adv-x="392" d="M205 80h-57L124-64H54L78 80H0v65h89l15 92H26v65h89l24 146h69l-23-146h56l24 146h70l-24-146h81v-65h-91l-16-92h81V80h-91L251-64h-70zm-46 65h56l16 92h-57z"/><glyph glyph-name="uniE00D" unicode="" d="M0-23l116 291L349-23H0zm236 178l160 217L512-23H349zm-96 194q0 58 58 58t58-58-58-58-58 58z"/><glyph glyph-name="uniE00E" unicode="" horiz-adv-x="442" d="M0 448h442V-64H0v512zM419-41v466H23V-41h396zM58 308v47h326v-47H58zm0-104v46h326v-46H58zm0-105v46h279V99H58z"/><glyph glyph-name="uniE00F" unicode="" d="M0 372v76h512v-76H0zm0-152v76h512v-76H0zM0 69v76h512V69H0z"/><glyph glyph-name="uniE010" unicode="" d="M0 227h512v-70H0v70z"/><glyph glyph-name="uniE011" unicode="" d="M36 156L0 192l123 122 36-36zm87-86L0 192l36 36 123-122zm353 158l36-36L389 70l-36 36zm-87 86l123-122-36-36-123 122zM33 204v-24h411v24H33z"/><glyph glyph-name="uniE012" unicode="" d="M221 37q0 35 35 35t35-35-35-35-35 35zm181 221q-67 76-169 76-89 0-156-62-66-62-71-152H0v6q0 106 75 181t181 75q110 0 185-80zM237 42l26-23 221 246-26 24zm207 147l43 47q25-51 25-110v-2q0-2-.5-5t-.5-7l-53 20q-3 27-14 57z"/><glyph glyph-name="uniE013" unicode="" d="M221 448h70V-64h-70v512zM0 227h512v-70H0v70z"/><glyph glyph-name="uniE014" unicode="" horiz-adv-x="344" d="M100 76q0 48 17 73 18 26 61 56 24 16 37 36t13 49q0 28-16 46-15 17-44 17-22 0-38-14t-16-42H1l-1 2q-1 71 46 108 53 41 122 41 76 0 129-46 47-41 47-112 0-42-26-79-24-34-65-56-22-14-30-33-7-15-7-46H100zM209-64H105v81h104v-81z"/><glyph glyph-name="uniE015" unicode="" horiz-adv-x="372" d="M372 448L172-64H0l201 512h171z"/><glyph glyph-name="uniE016" unicode="" d="M182 162L0 214l36 108 177-75-13 201h119l-15-205 172 73 36-109-183-52L450 3l-95-67-103 168L151-58 55 6z"/><glyph glyph-name="uniE017" unicode="" d="M0 92l50 104L351 51 301-53zm512 294L301-53 196-3l212 439z"/><glyph glyph-name="uniE018" unicode="" d="M314 192q0-24-17-41t-41-17-41 17-17 41 17 41 41 17 41-17 17-41zm-58 128q-53 0-90.5-37.5T128 192t37.5-90.5T256 64t90.5 37.5T384 192t-37.5 90.5T256 320zm0 23q63 0 107-44t44-107-44-107-107-44-107 44-44 107 44 107 107 44zm0 93q-101 0-172.5-71.5T12 192 83.5 19.5 256-52t172.5 71.5T500 192t-71.5 172.5T256 436zm0 12q106 0 181-75t75-181-75-181-181-75T75 11 0 192t75 181 181 75z"/></font></defs></svg>
\ No newline at end of file
diff --git a/app/images/icons/icons.ttf b/app/images/icons/icons.ttf
deleted file mode 100755
index 5c9b6b9..0000000
Binary files a/app/images/icons/icons.ttf and /dev/null differ
diff --git a/app/images/icons/icons.woff b/app/images/icons/icons.woff
deleted file mode 100755
index 77e1d5d..0000000
Binary files a/app/images/icons/icons.woff and /dev/null differ
diff --git a/app/images/icons/icons.woff2 b/app/images/icons/icons.woff2
deleted file mode 100755
index 0ed2d70..0000000
Binary files a/app/images/icons/icons.woff2 and /dev/null differ
diff --git a/app/images/icons/placeholder--medium.png b/app/images/icons/placeholder--medium.png
deleted file mode 100755
index 6a18409..0000000
Binary files a/app/images/icons/placeholder--medium.png and /dev/null differ
diff --git a/app/images/icons/placeholder--small.png b/app/images/icons/placeholder--small.png
deleted file mode 100755
index 0c0e308..0000000
Binary files a/app/images/icons/placeholder--small.png and /dev/null differ
diff --git a/app/images/icons/placeholder--wide.png b/app/images/icons/placeholder--wide.png
deleted file mode 100755
index 95f83b0..0000000
Binary files a/app/images/icons/placeholder--wide.png and /dev/null differ
diff --git a/app/images/touch/apple-touch-icon.png b/app/images/touch/apple-touch-icon.png
new file mode 100755
index 0000000..bacf318
Binary files /dev/null and b/app/images/touch/apple-touch-icon.png differ
diff --git a/app/images/touch/chrome-touch-icon-192x192.png b/app/images/touch/chrome-touch-icon-192x192.png
index f6ba515..6a5e101 100755
Binary files a/app/images/touch/chrome-touch-icon-192x192.png and b/app/images/touch/chrome-touch-icon-192x192.png differ
diff --git a/app/images/touch/icon-128x128.png b/app/images/touch/icon-128x128.png
index a5c7842..4364903 100755
Binary files a/app/images/touch/icon-128x128.png and b/app/images/touch/icon-128x128.png differ
diff --git a/app/images/touch/ms-icon-144x144.png b/app/images/touch/ms-icon-144x144.png
new file mode 100755
index 0000000..cb9f44c
Binary files /dev/null and b/app/images/touch/ms-icon-144x144.png differ
diff --git a/app/images/touch/ms-touch-icon-144x144-precomposed.png b/app/images/touch/ms-touch-icon-144x144-precomposed.png
index d7edfab..cb9f44c 100755
Binary files a/app/images/touch/ms-touch-icon-144x144-precomposed.png and b/app/images/touch/ms-touch-icon-144x144-precomposed.png differ
diff --git a/app/index.html b/app/index.html
index c29a0e3..b642a1b 100755
--- a/app/index.html
+++ b/app/index.html
@@ -1,53 +1,195 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
 <!doctype html>
 <html lang="">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="description" content="The Web Platform Podcast Website">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>The Web Platform POdcast</title>
-
-    <!-- Add to homescreen for Chrome on Android -->
-    <meta name="mobile-web-app-capable" content="yes">
-    <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
-
-    <!-- Add to homescreen for Safari on iOS -->
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
-    <meta name="apple-mobile-web-app-title" content="The Web Platform Podcast">
-    <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
-
-    <!-- Tile icon for Win8 (144x144 + tile color) -->
-    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
-    <meta name="msapplication-TileColor" content="#3372DF">
-
-    <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
-    <!--
-    <link rel="canonical" href="http://www.example.com/">
-    -->
-    <script src="lib/webcomponentsjs/webcomponents.js"></script>
-    <link rel="import" href="lib/polymer/polymer.html">
-
-    <!-- Page styles -->
-    <link rel="stylesheet" href="styles/main.css">
-  </head>
-  <body>
-    <header class="app-bar">
-    </header>
-    <nav></nav>
-    <main>
-    </main>
-
-    <!-- script src="scripts/main.js"></script-->
-
-    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
-    <!--script>
-      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-      ga('create', 'UA-XXXXX-X', 'auto');
-      ga('send', 'pageview');
-    </script-->
-  </body>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="description" content="">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="generator" content="Polymer Starter Kit" />
+  <title>Polymer Starter Kit</title>
+  <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
+
+  <!-- Chrome for Android theme color -->
+  <meta name="theme-color" content="#303F9F">
+
+  <!-- Web Application Manifest -->
+  <link rel="manifest" href="manifest.json">
+
+  <!-- Tile color for Win8 -->
+  <meta name="msapplication-TileColor" content="#3372DF">
+
+  <!-- Add to homescreen for Chrome on Android -->
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="application-name" content="Polymer Starter Kit">
+  <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
+
+  <!-- Add to homescreen for Safari on iOS -->
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="apple-mobile-web-app-title" content="Polymer Starter Kit">
+  <link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">
+
+  <!-- Tile icon for Win8 (144x144) -->
+  <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
+
+  <!-- build:css styles/main.css -->
+  <link rel="stylesheet" href="styles/main.css">
+  <!-- endbuild-->
+
+  <!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js -->
+  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
+  <!-- endbuild -->
+
+  <!-- will be replaced with elements/elements.vulcanized.html -->
+  <link rel="import" href="elements/elements.html">
+  <!-- endreplace-->
+</head>
+
+<body unresolved class="fullbleed layout vertical">
+  <span id="browser-sync-binding"></span>
+  <template is="dom-bind" id="app">
+
+    <paper-drawer-panel id="paperDrawerPanel">
+      <div drawer>
+
+        <!-- Drawer Toolbar -->
+        <paper-toolbar id="drawerToolbar">
+          <span class="paper-font-title">Menu</span>
+        </paper-toolbar>
+
+        <!-- Drawer Content -->
+          <paper-menu class="list" attr-for-selected="data-route" selected="{{route}}" on-iron-select="onMenuSelect">
+              <a data-route="home" href="/">
+                <iron-icon icon="home"></iron-icon>
+                <span>Home</span>
+              </a>
+
+              <a data-route="users" href="/users">
+                <iron-icon icon="info"></iron-icon>
+                <span>Users</span>
+              </a>
+
+              <a data-route="contact" href="/contact">
+                <iron-icon icon="mail"></iron-icon>
+                <span>Contact</span>
+              </a>
+          </paper-menu>
+      </div>
+      <paper-header-panel main mode="waterfall-tall">
+
+        <!-- Main Toolbar -->
+        <paper-toolbar id="mainToolbar">
+          <paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
+          <span class="flex"></span>
+
+          <!-- Toolbar icons -->
+          <paper-icon-button icon="refresh"></paper-icon-button>
+          <paper-icon-button icon="search"></paper-icon-button>
+
+          <!-- Application name -->
+          <div class="middle paper-font-display2 app-name">Polymer Starter Kit</div>
+
+          <!-- Application sub title -->
+          <div class="bottom title"></div>
+
+        </paper-toolbar>
+
+        <!-- Main Content -->
+        <div class="content">
+          <iron-pages attr-for-selected="data-route" selected="{{route}}">
+
+            <section data-route="home">
+              <paper-material elevation="1">
+                <my-greeting></my-greeting>
+
+                <p class="paper-font-subhead">You now have:</p>
+                <my-list></my-list>
+
+                <p class="paper-font-body2">Looking for more Web App layouts? Check out our <a href="https://github.com/PolymerElements/app-layout-templates">layouts</a> collection. You can also <a href="http://polymerelements.github.io/app-layout-templates/">preview</a> them live.</p>
+              </paper-material>
+              <paper-material elevation="1">
+                <p class="paper-font-body2">This is another card.</p>
+              </paper-material>
+
+              <paper-material elevation="1" class="paper-font-body2">
+                <h1 id="license">License</h1>
+                <p>Everything in this repo is BSD style license unless otherwise specified.</p>
+                <p>Copyright (c) 2015 The Polymer Authors. All rights reserved.</p>
+                <p>Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:</p>
+                <ul>
+                <li>Redistributions of source code must retain the above copyright
+                notice, this list of conditions and the following disclaimer.</li>
+                <li>Redistributions in binary form must reproduce the above
+                copyright notice, this list of conditions and the following disclaimer
+                in the documentation and/or other materials provided with the
+                distribution.</li>
+                <li>Neither the name of Google Inc. nor the names of its
+                contributors may be used to endorse or promote products derived from
+                this software without specific prior written permission.</li>
+                </ul>
+                <p>THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS &quot;AS IS&quot; AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.</p>
+              </paper-material>
+
+            </section>
+
+            <section data-route="users">
+              <paper-material elevation="1">
+                <h2 class="paper-font-display2">Users</h2>
+                <p>This is the users section</p>
+                <a href="/users/Rob">Rob</a>
+              </paper-material>
+            </section>
+
+            <section data-route="user-info">
+              <paper-material elevation="1">
+                <h2 class="paper-font-display2">
+                User:<span>{{params.name}}</span>
+                </h2>
+                <div>This is <span>{{params.name}}</span>'s section</div>
+              </paper-material>
+            </section>
+
+            <section data-route="contact">
+              <paper-material elevation="1">
+                <h2 class="paper-font-display2">Contact</h2>
+                <p>This is the contact section</p>
+              </paper-material>
+            </section>
+
+          </iron-pages>
+        </div>
+      </paper-header-panel>
+    </paper-drawer-panel>
+
+    <paper-toast id="caching-complete"
+                 duration="6000"
+                 text="Caching complete! This app will work offline.">
+    </paper-toast>
+
+    <platinum-sw-register auto-register
+                          clients-claim
+                          skip-waiting
+                          on-service-worker-installed="displayInstalledToast">
+      <platinum-sw-cache default-cache-strategy="networkFirst"
+                         precache-file="precache.json">
+      </platinum-sw-cache>
+    </platinum-sw-register>
+
+  </template>
+
+  <!-- build:js scripts/app.js -->
+  <script src="scripts/app.js"></script>
+  <!-- endbuild-->
+</body>
+
 </html>
diff --git a/app/manifest.json b/app/manifest.json
new file mode 100755
index 0000000..349050b
--- /dev/null
+++ b/app/manifest.json
@@ -0,0 +1,19 @@
+{
+  "name": "Polymer Starter Kit",
+  "short_name": "Polymer Starter Kit",
+  "icons": [{
+        "src": "images/touch/icon-128x128.png",
+        "sizes": "128x128"
+      }, {
+        "src": "images/touch/apple-touch-icon.png",
+        "sizes": "152x152"
+      }, {
+        "src": "images/touch/ms-touch-icon-144x144-precomposed.png",
+        "sizes": "144x144"
+      }, {
+        "src": "images/touch/chrome-touch-icon-192x192.png",
+        "sizes": "192x192"
+      }],
+  "start_url": "/#!/",
+  "display": "standalone"
+}
diff --git a/app/manifest.webapp b/app/manifest.webapp
deleted file mode 100755
index c55aec4..0000000
--- a/app/manifest.webapp
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  "version": "1.0.0",
-  "name": "Web Starter Kit",
-  "launch_path": "/index.html",
-  "description": "A front-end template that helps you build fast, modern mobile web apps.",
-  "icons": {
-    "128": "/images/touch/icon-128x128.png"
-  },
-  "developer": {
-    "name": "",
-    "url": ""
-  },
-  "installs_allowed_from": [
-    "*"
-  ],
-  "default_locale": "en",
-  "permissions": {
-  },
-  "locales": {
-    "en": {
-      "name": "Web Starter Kit",
-      "description": "A front-end template that helps you build fast, modern mobile web apps."
-    }
-  }
-}
\ No newline at end of file
diff --git a/app/precache.json b/app/precache.json
new file mode 100755
index 0000000..fe51488
--- /dev/null
+++ b/app/precache.json
@@ -0,0 +1 @@
+[]
diff --git a/app/robots.txt b/app/robots.txt
index d0e5f1b..4d521f9 100755
--- a/app/robots.txt
+++ b/app/robots.txt
@@ -1,5 +1,4 @@
-# www.robotstxt.org/
+# robotstxt.org
 
-# Allow crawling of all content
 User-agent: *
 Disallow:
diff --git a/app/scripts/app.js b/app/scripts/app.js
new file mode 100755
index 0000000..72bfca1
--- /dev/null
+++ b/app/scripts/app.js
@@ -0,0 +1,41 @@
+/*
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+
+(function(document) {
+  'use strict';
+
+  // Grab a reference to our auto-binding template
+  // and give it some initial binding values
+  // Learn more about auto-binding templates at http://goo.gl/Dx1u2g
+  var app = document.querySelector('#app');
+
+  app.displayInstalledToast = function() {
+    document.querySelector('#caching-complete').show();
+  };
+
+  // Listen for template bound event to know when bindings
+  // have resolved and content has been stamped to the page
+  app.addEventListener('dom-change', function() {
+    console.log('Our app is ready to rock!');
+  });
+
+  // See https://github.com/Polymer/polymer/issues/1381
+  window.addEventListener('WebComponentsReady', function() {
+    // imports are loaded and elements have been registered
+  });
+
+  // Close drawer after menu item is selected if drawerPanel is narrow
+  app.onMenuSelect = function() {
+    var drawerPanel = document.querySelector('#paperDrawerPanel');
+    if (drawerPanel.narrow) {
+      drawerPanel.closeDrawer();
+    }
+  };
+
+})(document);
diff --git a/app/styleguide.html b/app/styleguide.html
deleted file mode 100755
index bb769e8..0000000
--- a/app/styleguide.html
+++ /dev/null
@@ -1,1263 +0,0 @@
-<!doctype html>
-<html lang="en" class="no-js no-touch" itemscope itemtype="http://schema.org/Article">
-  <head>
-    <meta charset="utf-8" >
-    <meta name="description" content="Visual style guide used by this site.">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1">
-    <meta itemprop="name" content="Visual Style Guide — Web Starter Kit">
-    <meta itemprop="description" content="Visual style guide used by this site.">
-
-    <link rel="stylesheet" href="styles/components.css">
-
-    <title>Visual Style Guide — Web Starter Kit</title>
-    <style>
-      .auto-gen-code-snippet {
-        display: none;
-      }
-      .auto-gen-code-visible {
-        display: block;
-      }
-    </style>
-  </head>
-  <body class="page--styleguide">
-
-    <div class="container">
-      <h1>Web <strong>Starter Kit</strong></h1>
-    </div>
-
-    <div class="summary-header">
-      <div class="container">
-        <h2 class="summary-header__title">Visual Style Guide</h2>
-        <ol class="summary-header__anchor-list  list-links">
-          <li class="summary-header__anchors-item"><a href="#typography">Typography</a></li>
-          <li class="summary-header__anchors-item"><a href="#buttons">Buttons</a></li>
-          <li class="summary-header__anchors-item"><a href="#lists">Lists</a></li>
-          <li class="summary-header__anchors-item"><a href="#links">Links</a></li>
-          <li class="summary-header__anchors-item"><a href="#icons">Icons</a></li>
-          <li class="summary-header__anchors-item"><a href="#breadcrumbs">Breadcrumbs</a></li>
-          <li class="summary-header__anchors-item"><a href="#table">Table</a></li>
-          <li class="summary-header__anchors-item"><a href="#grid">Grid</a></li>
-          <li class="summary-header__anchors-item"><a href="#colors">Colors</a></li>
-          <li class="summary-header__anchors-item"><a href="#highlights">Highlights</a></li>
-          <li class="summary-header__anchors-item"><a href="#editorial-header">Editorial header</a></li>
-          <li class="summary-header__anchors-item"><a href="#article-section">Article section</a></li>
-          <li class="summary-header__anchors-item"><a href="#guides-section">Guides section</a></li>
-          <li class="summary-header__anchors-item"><a href="#page-header">Page header</a></li>
-          <li class="summary-header__anchors-item"><a href="#quote">Quote</a></li>
-          <li class="summary-header__anchors-item"><a href="#guides-intro">Featured icons</a></li>
-          <li class="summary-header__anchors-item"><a href="#featured-spotlight">Featured spotlight</a></li>
-          <li class="summary-header__anchors-item"><a href="#featured-list">Featured list</a></li>
-          <li class="summary-header__anchors-item"><a href="#next-lessons">Featured block</a></li>
-          <li class="summary-header__anchors-item"><a href="#article-navigation">Article navigation</a></li>
-        </ol>
-      </div>
-    </div>
-
-    <div class="container">
-      <button id="snippet-toggle" class="button--primary">Toggle Code Snippets</button>
-    </div>
-
-    <div class="container">
-      <!-- Typography Start -->
-      <a name="typography"></a>
-      <section class="styleguide__typography">
-        <h2 class="subsection-title"><strong class="subsection-number">#01</strong> Typography</h2>
-        <div class="code-sample">
-          <p class="small">Lorem ipsum dolor sit amet.</p>
-        </div>
-
-        <div class="code-sample">
-          <p class="base">Lorem ipsum dolor sit amet.</p>
-        </div>
-
-        <div class="code-sample">
-          <p class="medium">Lorem ipsum dolor sit amet.</p>
-        </div>
-
-        <div class="code-sample">
-          <p class="large">Lorem ipsum dolor sit amet.</p>
-        </div>
-
-        <div class="code-sample">
-          <p class="xlarge">Lorem ipsum dolor sit amet.</p>
-        </div>
-
-        <div class="code-sample">
-          <p class="xxlarge">Lorem ipsum dolor sit amet.</p>
-        </div>
-
-        <div class="code-sample">
-          <p class="huge">Lorem ipsum dolor sit amet.</p>
-        </div>
-      </section>
-      <!-- Typography End-->
-
-      <!-- Buttons Start -->
-      <a name="buttons"></a>
-      <section class="styleguide__buttons">
-        <h2 class="subsection-title"><strong class="subsection-number">#02</strong> Buttons</h2>
-
-        <div>
-          <h4>Primary</h4>
-          <div class="code-sample">
-            <a href="#ignore-click" class="button--primary">Use our tool</a>
-          </div>
-        </div>
-
-        <div>
-          <h4>Secondary</h4>
-          <div>
-            <div class="code-sample">
-              <a href="#ignore-click" class="button--secondary">Use our tool</a>
-            </div>
-          </div>
-
-          <div class="code-sample">
-            <div class="styleguide__inverted-block">
-              <a href="#ignore-click" class="button--secondary-variation">Use our tool</a>
-            </div>
-          </div>
-        </div>
-      </section>
-      <!-- Buttons End -->
-
-      <!-- Lists Start -->
-      <a name="lists"></a>
-      <section class="styleguide__lists">
-        <h2 class="subsection-title"><strong class="subsection-number">#03</strong> Lists</h2>
-
-        <h3>Default lists</h3>
-
-        <h4>ul</h4>
-        <div class="code-sample">
-          <ul>
-            <li>Lorem ipsum dolor sit amet.</li>
-            <li>Dicta optio cumque dolore hic ea facilis</li>
-            <li>Minus, possimus, veniam, incidunt eligendi</li>
-          </ul>
-        </div>
-
-        <h4>ol</h4>
-        <div class="code-sample">
-          <ol>
-            <li>Lorem ipsum dolor sit amet</li>
-            <li>Dicta optio cumque dolore hic ea facilis</li>
-            <li>Minus, possimus, veniam, incidunt eligendi</li>
-          </ol>
-        </div>
-
-        <h3>Default lists of links</h3>
-
-        <h4>ul</h4>
-        <div class="code-sample">
-          <ul class="list-links">
-            <li class="list__item"><a href="#ignore-click">Lorem ipsum dolor sit amet</a></li>
-            <li class="list__item"><a href="#ignore-click">Dicta optio cumque dolore hic ea facilis</a></li>
-            <li class="list__item"><a href="#ignore-click">Minus, possimus, veniam, incidunt eligendi</a></li>
-          </ul>
-        </div>
-
-        <div class="code-sample">
-          <ul class="list-links list-links--primary">
-            <li class="list__item"><a href="#ignore-click">Lorem ipsum dolor sit amet</a></li>
-            <li class="list__item"><a href="#ignore-click">Dicta optio cumque dolore hic ea facilis</a></li>
-            <li class="list__item"><a href="#ignore-click">Minus, possimus, veniam, incidunt eligendi</a></li>
-          </ul>
-        </div>
-
-        <h4>ol</h4>
-        <div class="code-sample">
-          <ol class="list-links">
-            <li><a href="#ignore-click">Lorem ipsum dolor sit amet</a></li>
-            <li class="current"><a href="#ignore-click">Dicta optio cumque dolore hic ea facilis</a></li>
-            <li><a href="#ignore-click">Minus, possimus, veniam, incidunt eligendi</a></li>
-          </ol>
-        </div>
-
-        <div class="code-sample">
-          <ol class="list-anchor">
-            <li><a href="#ignore-click">Lorem ipsum dolor sit amet</a></li>
-            <li><a href="#ignore-click">Dicta optio cumque dolore hic ea facilis</a></li>
-            <li><a href="#ignore-click">Minus, possimus, veniam, incidunt eligendi</a></li>
-          </ol>
-        </div>
-
-        <div class="code-sample">
-          <ol class="list-anchor list-small">
-            <li><a href="#ignore-click">Lorem ipsum dolor sit amet</a></li>
-            <li><a href="#ignore-click">Dicta optio cumque dolore hic ea facilis</a></li>
-            <li><a href="#ignore-click">Minus, possimus, veniam, incidunt eligendi</a></li>
-          </ol>
-        </div>
-
-        <div class="code-sample">
-          <ol class="list-links list-links--secondary">
-            <li><a href="#ignore-click">Layout basics</a></li>
-            <li><a href="#ignore-click">Basics layouts</a></li>
-            <li><a href="#ignore-click">Layout patterns</a></li>
-          </ol>
-        </div>
-
-        <div class="code-sample">
-          <ol class="list-links list-links--secondary list-small">
-            <li><a href="#ignore-click">Layout basics</a></li>
-            <li><a href="#ignore-click">Basics layouts</a></li>
-            <li><a href="#ignore-click">Layout patterns</a></li>
-          </ol>
-        </div>
-      </section>
-      <!-- Lists End -->
-
-      <!-- Links Start -->
-      <a name="links"></a>
-      <section class="styleguide__links">
-        <h2 class="subsection-title"><strong class="subsection-number">#04</strong> Links</h2>
-
-        <div>
-          <h4>Primary</h4>
-          <div class="code-sample">
-            <a href="#ignore-click" class="cta--primary">Use our tool</a>
-          </div>
-        </div>
-
-        <div>
-          <h4>Secondary</h4>
-          <div class="code-sample">
-            <a href="#ignore-click" class="cta--secondary">Use our tool</a>
-          </div>
-        </div>
-
-        <div class="code-sample">
-          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#ignore-click" class="cta">use our tool</a> Fugiat, quam alias voluptatem tempora minus dolor facere cumque necessitatibus placeat velit aliquid ab dolore beatae. Neque ipsam in a illum repellendus?</p>
-        </div>
-      </section>
-      <!-- Links End -->
-
-      <!-- Icons Start -->
-      <a name="icons"></a>
-      <section class="styleguide__icons">
-        <h2 class="styleguide__icons"><strong class="subsection-number">#05</strong> Icons</h2>
-
-        <div class="clear">
-          <div class="g--third">
-            <p><div class="code-sample"><i class="icon icon-minus"></i></div></p>
-          </div>
-          <div class="g--third">
-            <p><div class="code-sample"><i class="icon icon-plus"></i></div></p>
-          </div>
-          <div class="g--third g--last">
-            <p><div class="code-sample"><i class="icon icon-star"></i></div></p>
-          </div>
-
-          <div class="g--third">
-            <p><div class="code-sample"><i class="icon icon-chevron-right"></i></div></p>
-          </div>
-          <div class="g--third">
-            <p><div class="code-sample"><i class="icon icon-chevron-left"></i></div></p>
-          </div>
-          <div class="g--third g--last">
-            <p><div class="code-sample"><i class="icon icon-chevron-up"></i></div></p>
-          </div>
-
-          <div class="g--third">
-            <p><div class="code-sample"><i class="icon icon-chevron-down"></i></div></p>
-          </div>
-          <div class="g--third">
-            <p><div class="code-sample"><i class="icon icon-slash"></i></div></p>
-          </div>
-          <div class="g--third g--last">
-            <p><div class="code-sample"><i class="icon icon-google-dev"></i></div></p>
-          </div>
-
-          <div class="g--third">
-            <p><div class="code-sample"><i class="icon icon-lessons"></i></div></p>
-          </div>
-          <div class="g--third">
-            <p><div class="code-sample"><i class="icon icon-multi-device-layouts"></i></div></p>
-          </div>
-          <div class="g--third g--last">
-            <p><div class="code-sample"><i class="icon icon-user-input"></i></div></p>
-          </div>
-
-          <div class="g--third">
-            <p><div class="code-sample"><i class="icon icon-introduction-to-media"></i></div></p>
-          </div>
-          <div class="g--third">
-            <p><div class="code-sample"><i class="icon icon-performance"></i></div></p>
-          </div>
-          <div class="g--third g--last">
-            <p><div class="code-sample"><i class="icon icon-bullet"></i></div></p>
-          </div>
-
-          <div class="g--third">
-            <p><div class="code-sample"><i class="icon icon-chevron-large"></i></div></p>
-          </div>
-          <div class="g--third">
-            <p><div class="code-sample"><i class="icon icon-close"></i></div></p>
-          </div>
-          <div class="g--third g--last">
-            <p><div class="code-sample"><i class="icon icon-cog"></i></div></p>
-          </div>
-
-          <div class="g--third">
-            <p><div class="code-sample"><i class="icon icon-diamond"></i></div></p>
-          </div>
-          <div class="g--third">
-            <p><div class="code-sample"><i class="icon icon-exclamation"></i></div></p>
-          </div>
-          <div class="g--third g--last">
-            <p><div class="code-sample"><i class="icon icon-hash"></i></div></p>
-          </div>
-
-          <div class="g--third">
-            <p><div class="code-sample"><i class="icon icon-menu"></i></div></p>
-          </div>
-          <div class="g--third">
-            <p><div class="code-sample"><i class="icon icon-question"></i></div></p>
-          </div>
-          <div class="g--third g--last">
-            <p><div class="code-sample"><i class="icon icon-tick"></i></div></p>
-          </div>
-        </div>
-
-        <h4>Icon Circles</h4>
-
-        <div class="clear">
-
-          <div class="g--half">
-            <p>
-              <div class="code-sample">
-                <span class="icon-circle"><i class="icon icon-lessons"></i></span>
-              </div>
-            </p>
-          </div>
-          <div class="g--half g--last">
-            <p>
-              <div class="code-sample">
-                <span class="icon-circle"><i class="icon icon-lessons"></i></span>
-              </div>
-            </p>
-          </div>
-
-        </div>
-
-        <h4>Icon Circles - Themed</h4>
-
-        <div class="clear">
-
-          <div class="g--half">
-            <div class="code-sample">
-              <p class="theme--multi-device-layouts">
-                <span class="icon-circle themed--background"><i class="icon icon-multi-device-layouts"></i></span>
-              </p>
-            </div>
-          </div>
-          <div class="g--half g--last">
-            <div class="code-sample">
-              <p class="theme--user-input">
-                <span class="icon-circle themed--background"><i class="icon icon-user-input"></i></span>
-              </p>
-            </div>
-          </div>
-
-          <div class="g--half">
-            <div class="code-sample">
-              <p class="theme--introduction-to-media">
-                <span class="icon-circle themed--background"><i class="icon icon-introduction-to-media"></i></span>
-              </p>
-            </div>
-          </div>
-          <div class="g--half g--last">
-            <div class="code-sample">
-              <p class="theme--performance">
-                <span class="icon-circle themed--background"><i class="icon icon-performance"></i></span>
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <h4>Icon Circles - Large</h4>
-
-        <div class="clear">
-
-          <div class="g--half">
-            <div class="code-sample">
-              <p class="theme--multi-device-layouts">
-                <span class="icon-circle--large themed--background"><i class="icon icon-multi-device-layouts"></i></span>
-              </p>
-            </div>
-          </div>
-          <div class="g--half g--last">
-            <div class="code-sample">
-              <p class="theme--user-input">
-                <span class="icon-circle--large themed--background"><i class="icon icon-user-input"></i></span>
-              </p>
-            </div>
-          </div>
-
-          <div class="g--half">
-            <div class="code-sample">
-              <p class="theme--introduction-to-media">
-                <span class="icon-circle--large themed--background"><i class="icon icon-introduction-to-media"></i></span>
-              </p>
-            </div>
-          </div>
-          <div class="g--half g--last">
-            <div class="code-sample">
-              <p class="theme--performance">
-                <span class="icon-circle--large themed--background"><i class="icon icon-performance"></i></span>
-              </p>
-            </div>
-          </div>
-
-        </div>
-
-      </section>
-      <!-- Icons End -->
-
-      <!-- Breadcrumbs Start -->
-      <a name="breadcrumbs"></a>
-      <section class="styleguide__breadcrumb">
-        <h2 class="subsection-title"><strong class="subsection-number">#06</strong> Breadcrumbs</h2>
-
-        <div class="code-sample">
-          <nav class="breadcrumbs">
-            <p><a href="#ignore-click" class="breadcrumbs__link">Link 1</a> / <a href="#ignore-click" class="breadcrumbs__link">Link 2</a> / <a href="#ignore-click" class="breadcrumbs__link">Link 3</a> / <a href="#ignore-click" class="breadcrumbs__link">Link 4</a> </p>
-          </nav>
-        </div>
-
-      </section>
-      <!-- Breadcrumbs End -->
-
-      <!-- Tables Start -->
-      <a name="table"></a>
-      <section class="styleguide__table">
-        <h2 class="subsection-title"><strong class="subsection-number">#07</strong> Table</h2>
-
-        <div class="code-sample">
-          <table class="table-4">
-            <colgroup>
-              <col span="1">
-              <col span="1">
-              <col span="1">
-              <col span="1">
-            </colgroup>
-            <thead>
-              <tr>
-                <th>Element</th>
-                <th>Availability</th>
-                <th>Description</th>
-                <th>Description</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td data-th="element"><code>src</code></td>
-                <td data-th="availability">All browsers</td>
-                <td data-th="description">Gives the address (URL) of the video.</td>
-                <td data-th="description">Gives the address (URL) of the video.</td>
-              </tr>
-              <tr>
-                <td data-th="element"><code>poster</code></td>
-                <td data-th="availability">All browsers</td>
-                <td data-th="description">Gives the address (URL) of an image file that the browser can show as soon as the video element loads, before playback begins.</td>
-                <td data-th="description">Gives the address (URL) of an image file that the browser can show as soon as the video element loads, before playback begins.</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-        <div class="code-sample">
-          <table class="table-3">
-            <colgroup>
-              <col span="1">
-              <col span="1">
-              <col span="1">
-            </colgroup>
-            <thead>
-              <tr>
-                <th>Element</th>
-                <th>Availability</th>
-                <th>Description</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td data-th="element"><code>src</code></td>
-                <td data-th="availability">All browsers</td>
-                <td data-th="description">Gives the address (URL) of the video.</td>
-              </tr>
-              <tr>
-                <td data-th="element"><code>poster</code></td>
-                <td data-th="availability">All browsers</td>
-                <td data-th="description">Gives the address (URL) of an image file that the browser can show as soon as the video element loads, before playback begins.</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-        <div class="code-sample">
-          <table class="table-2">
-            <colgroup>
-              <col span="1">
-              <col span="1">
-            </colgroup>
-            <thead>
-              <tr>
-                <th>Element</th>
-                <th>Availability</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td data-th="element"><code>src</code></td>
-                <td data-th="availability">Rules applied for any browser width over the value defined in the query.</td>
-              </tr>
-              <tr>
-                <td data-th="element"><code>poster</code></td>
-                <td data-th="availability">Rules applied for any browser width over the value defined in the query.</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-        <p>
-          <b>Note:</b> <code>markdown</code> isn't recognized in tables, therefore any code
-          blocks should be wrapped in &lt;code&gt; tags.
-        </p>
-
-      </section>
-      <!-- Tables End -->
-
-      <!-- Grid Start -->
-      <a name="grid"></a>
-      <section class="styleguide__grid">
-        <h2 class="subsection-title"><strong class="subsection-number">#08</strong> Grid</h2>
-
-        <div class="clear demo">
-          <div class="code-sample">
-            <div class="g-medium--half g-wide--1"></div>
-            <div class="g-medium--half g-medium--last g-wide--1"></div>
-            <div class="g-medium--half g-wide--1"></div>
-            <div class="g-medium--half g-medium--last g-wide--1 g-wide--last"></div>
-          </div>
-        </div>
-
-        <div class="clear demo">
-          <div class="code-sample">
-            <div class="g-wide--1 g-medium--half"></div>
-            <div class="g-wide--3 g-wide--last g-medium--half g--last"></div>
-          </div>
-        </div>
-
-        <div class="clear demo">
-          <div class="code-sample">
-            <div class="g-wide--3 g-medium--half"></div>
-            <div class="g-wide--1 g-wide--last g-medium--half g--last"></div>
-          </div>
-        </div>
-
-        <div class="clear demo">
-          <div class="code-sample">
-            <div class="g-medium--full g-wide--full"></div>
-          </div>
-        </div>
-
-        <div class="clear demo">
-          <div class="code-sample">
-            <div class="g-medium--2 g-medium--last g-wide--3"></div>
-          </div>
-        </div>
-
-        <div class="clear demo">
-          <div class="code-sample">
-            <div class="g-medium--1 g-medium--last g-wide--2"></div>
-          </div>
-        </div>
-
-        <div class="clear demo">
-          <div class="code-sample">
-            <div class="g-medium--1 g-medium--last g-wide--1"></div>
-          </div>
-        </div>
-
-        <div class="clear demo">
-          <div class="code-sample">
-            <div class="g-medium--1 g-medium--push-2 g-medium--last g-wide--1 g-wide--push-3 g-wide--last"></div>
-          </div>
-        </div>
-
-        <div class="clear demo">
-          <div class="code-sample">
-            <div class="g-medium--1 g-medium--push-2 g-medium--last g-wide--2 g-wide--push-2 g-wide--last"></div>
-          </div>
-        </div>
-
-        <div class="clear demo">
-          <div class="code-sample">
-            <div class="g-medium--2 g-medium--push-1 g-medium--last g-wide--3 g-wide--push-1 g-wide--last"></div>
-          </div>
-        </div>
-
-        <h4>Consistent grid classes</h4>
-
-        <div class="clear demo">
-          <div class="code-sample">
-            <div class="g--third"></div>
-            <div class="g--third"></div>
-            <div class="g--third g--last"></div>
-          </div>
-        </div>
-
-        <div class="clear demo">
-          <div class="code-sample">
-            <div class="g--half"></div>
-            <div class="g--half g--last"></div>
-          </div>
-        </div>
-
-        <div class="clear demo">
-          <div class="code-sample">
-            <div class="g--half g--centered"></div>
-            <div class="g--third g--centered"></div>
-          </div>
-        </div>
-
-      </section>
-      <!-- Grid End -->
-
-      <!-- Colors Start -->
-      <a name="colors"></a>
-      <section class="styleguide__colors">
-        <h2 class="subsection-title"><strong class="subsection-number">#09</strong> Colours</h2>
-
-        <h3>Blacks</h3>
-        <div class="code-sample">
-          <ul class="styleguide__color-list list--reset clear">
-            <li class="color--gray-background g--half">gray-background</li>
-            <li class="color--gray-keyline g--half g--last">gray-keyline</li>
-            <li class="color--gray g--half">gray</li>
-            <li class="color--gray-dark g--half g--last">gray-dark</li>
-          </ul>
-        </div>
-
-        <h3>Themes</h3>
-        <div class="code-sample">
-          <ul class="styleguide__color-list list--reset clear">
-            <li class="color--layouts g--half">layouts</li>
-            <li class="color--layouts-secondary g--half g--last">layouts secondary</li>
-            <li class="color--user g--half">user</li>
-            <li class="color--user-secondary g--half g--last">user secondary</li>
-            <li class="color--media g--half">media</li>
-            <li class="color--media-secondary g--half g--last">media secondary</li>
-            <li class="color--performance g--half">performance</li>
-            <li class="color--performance-secondary g--half g--last">performance secondary</li>
-          </ul>
-        </div>
-
-        <h3>Google</h3>
-        <div class="code-sample">
-          <ul class="styleguide__color-list list--reset clear">
-            <li class="color--blue g--half">blue</li>
-            <li class="color--blue-secondary g--half g--last">blue secondary</li>
-            <li class="color--green g--half">green</li>
-            <li class="color--green-secondary g--half g--last">green secondary</li>
-            <li class="color--red g--half">red</li>
-            <li class="color--red-secondary g--half g--last">red secondary</li>
-            <li class="color--yellow g--half">yellow</li>
-            <li class="color--yellow-secondary g--half g--last">yellow secondary</li>
-          </ul>
-        </div>
-
-        <h3>Helpers</h3>
-        <div class="code-sample">
-          <ul class="styleguide__color-list list--reset clear">
-            <li class="color--text g--half">text</li>
-            <li class="color--highlight g--half g--last">highlight</li>
-            <li class="color--warning g--half">warning</li>
-            <li class="color--danger g--half g--last">danger</li>
-            <li class="color--muted g--half">muted</li>
-            <li class="color--remember g--half g--last">remember</li>
-            <li class="color--learning g--half">learning</li>
-          </ul>
-        </div>
-      </section>
-      <!-- Colors End -->
-    </div> <!-- // closing container -->
-
-    <!-- Highlights Start -->
-    <div class="container">
-      <a name="highlights"></a>
-      <h2 class="subsection-title"><strong class="subsection-number">#10</strong> Highlights</h2>
-    </div>
-
-    <section class="styleguide__highlights">
-
-      <div class="code-sample">
-        <div class="highlight-module  highlight-module--right   highlight-module--remember">
-          <div class="highlight-module__container  icon-exclamation ">
-            <div class="highlight-module__content   g-wide--push-1 g-wide--pull-1  g-medium--pull-1   ">
-              <p class="highlight-module__title"> Remember</p>
-              <p class="highlight-module__text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="code-sample">
-        <div class="highlight-module  highlight-module--left   highlight-module--learning  ">
-          <div class="highlight-module__container  icon-star ">
-            <div class="highlight-module__content   g-wide--push-1 g-wide--pull-1  g-medium--push-1   ">
-              <p class="highlight-module__title"> Key Takeaways</p>
-              <p class="highlight-module__text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="code-sample">
-        <div class="highlight-module  highlight-module--right   highlight-module--remember  ">
-          <div class="highlight-module__container  icon-exclamation ">
-            <div class="highlight-module__content   g-wide--push-1 g-wide--pull-1  g-medium--pull-1   ">
-              <p class="highlight-module__title"> Remember</p>
-              <ul class="highlight-module__list">
-                <li>Lorem ipsum dolor sit amet</li>
-                <li>Fugit itaque sapiente earum quo expedita</li>
-                <li>labore aliquam cupiditate veritatis nihil</li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="code-sample">
-        <div class="highlight-module  highlight-module--left   highlight-module--remember  ">
-          <div class="highlight-module__container  icon-exclamation ">
-            <div class="highlight-module__content   g-wide--push-1 g-wide--pull-1  g-medium--push-1   ">
-              <p class="highlight-module__title"> Remember</p>
-              <p class="highlight-module__text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-    </section>
-
-    <div class="container">
-      <h3>Code Samples</h3>
-    </div>
-    <div class="code-sample">
-      <div class="highlight-module highlight-module--code highlight-module--right">
-        <div class="highlight-module__container">
-          <code class='html'><div class="highlight"><pre>    <span class="cp">&lt;!DOCTYPE html&gt;</span>
-        <span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">&quot;en&quot;</span><span class="nt">&gt;</span>
-          <span class="nt">&lt;head&gt;</span>
-                <span class="nt">&lt;title&gt;</span>Article Example: sample example<span class="nt">&lt;/title&gt;</span>
-          <span class="nt">&lt;/head&gt;</span>
-          <span class="nt">&lt;body&gt;</span>
-            <span class="nt">&lt;div</span> <span class="na">role=</span><span class="s">&quot;main&quot;</span><span class="nt">&gt;</span>
-              Hello, world.
-            <span class="nt">&lt;/div&gt;</span>
-            <span class="nt">&lt;/body&gt;</span>
-        <span class="nt">&lt;/html&gt;</span>
-    </pre></div></code>
-        </div>
-      </div>
-    </div>
-
-    <div class="container">
-      <div class="code-sample">
-        <pre><code class='html'>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;</code></pre>
-      </div>
-    </div>
-
-    <div class="code-sample">
-      <div class="highlight-module  highlight-module--left   highlight-module--learning   highlight-module--inline ">
-        <div class="highlight-module__container  icon-star ">
-          <div class="highlight-module__content   g-wide--pull-1  ">
-            <p class="highlight-module__title"> Key Takeaways</p>
-
-              <ul class="highlight-module__list">
-                <li>Lorem ipsum dolor sit amet</li>
-                <li>Fugit itaque sapiente earum quo expedita</li>
-                <li>labore aliquam cupiditate veritatis nihil</li>
-              </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="code-sample">
-      <div class="highlight-module  highlight-module--right   highlight-module--remember   highlight-module--inline ">
-        <div class="highlight-module__container  icon-exclamation ">
-          <div class="highlight-module__content   g-wide--pull-1  ">
-            <p class="highlight-module__title"> Remember</p>
-
-              <ul class="highlight-module__list">
-                <li>Lorem ipsum dolor sit amet</li>
-                <li>Fugit itaque sapiente earum quo expedita</li>
-                <li>labore aliquam cupiditate veritatis nihil</li>
-              </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- Highlights End -->
-
-    <!-- Editorial Header Start-->
-    <div class="container">
-      <a name="editorial-header"></a>
-      <h2 class="subsection-title"><strong class="subsection-number">#11</strong> Editorial header</h2>
-    </div>
-
-    <div class="code-sample">
-      <section class="styleguide__editorial-header">
-
-        <div class="editorial-header">
-          <div class="container">
-            <nav class="breadcrumbs">
-              <p> / <a href="#ignore-click" class="breadcrumbs__link">The Essentials</a> / <a href="#ignore-click" class="breadcrumbs__link"> Multi-screen layouts</a></p>
-            </nav>
-
-            <h1 class="tag editorial-header__title">Layout Basics</h1>
-            <h2 class="editorial-header__subtitle">What is the viewport?</h2>
-            <p class="editorial-header__excerpt g-wide--pull-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae varius augue, eu varius dolor. Sed vitae varius augue, eu varius dolor. </p>
-            <p class="g-wide--pull-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae varius augue, eu varius dolor. Donec augue diam, scelerisque eget lectus in, posuere aliquet mi. Pellentesque suscipit nisl gravida sem tincidunt, id blandit turpis commodo.</p>
-
-            <div class="toc">
-              <p class="toc__title">In this lesson</p>
-              <ol class="toc__list list-anchor" id="toc">
-                <li><a href="#ignore-click">Lorem ipsum dolor sit amet</a></li>
-                <li class="current"><a href="#ignore-click">Dicta optio cumque dolore hic ea facilis</a></li>
-                <li><a href="#ignore-click">Minus, possimus, veniam, incidunt eligendi</a></li>
-                <li><a href="#ignore-click">Lorem ipsum dolor sit amet</a></li>
-                <li><a href="#ignore-click">Dicta optio cumque dolore hic ea facilis</a></li>
-                <li><a href="#ignore-click">Minus, possimus, veniam, incidunt eligendi</a></li>
-              </ol>
-            </div>
-
-          </div>
-        </div>
-
-      </section>
-    </div>
-
-    <div class="container">
-      <a name="article-section"></a>
-      <h2 class="subsection-title"><strong class="subsection-number">#12</strong> Article section</h2>
-    </div>
-
-    <div class="code-sample">
-      <section class="styleguide__articles-section">
-        <div class="articles-section">
-          <div class="container">
-            <p class="articles-count">4 guides</p>
-            <ol class="articles-list">
-              <li class="articles-list__item">
-                <h3 class="xlarge"><a href="#ignore-click">Layout basics</a></h3>
-                <p class="g-wide--push-1 g-wide--pull-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, distinctio blanditiis quos porro harum nemo.</p>
-                <a href="#ignore-click" class="cta--primary">See all lessons</a>
-              </li>
-              <li class="articles-list__item">
-                <h3 class="xlarge"><a href="#ignore-click">Basic layouts</a></h3>
-                <p class="g-wide--push-1 g-wide--pull-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, distinctio blanditiis quos porro harum nemo.</p>
-                <a href="#ignore-click" class="cta--primary">See all lessons</a>
-              </li>
-              <li class="articles-list__item">
-                <h3 class="xlarge"><a href="#ignore-click">Layout patterns</a></h3>
-                <p class="g-wide--push-1 g-wide--pull-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, distinctio blanditiis quos porro harum nemo.</p>
-                <a href="#ignore-click" class="cta--primary">See all lessons</a>
-              </li>
-              <li class="articles-list__item">
-                <h3 class="xlarge"><a href="#ignore-click">UI Elements</a></h3>
-                <p class="g-wide--push-1 g-wide--pull-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, distinctio blanditiis quos porro harum nemo.</p>
-                <a href="#ignore-click" class="cta--primary">See all lessons</a>
-              </li>
-            </ol>
-          </div>
-        </div>
-      </section>
-    </div>
-
-    <div class="container">
-      <a name="guides-section"></a>
-      <h2 class="subsection-title"><strong class="subsection-number">#13</strong> Guides section</h2>
-    </div>
-
-    <div class="code-sample">
-      <section class="styleguide__guides-section">
-        <div class="guides-section">
-          <header class="container">
-            <h2 class="xxlarge">Documentation</h2>
-            <p>Follow these guides and build web content users can access on any device they choose.</p>
-          </header>
-          <ul class="guides-list container-medium">
-            <li class="guides-list__item g--half theme--multi-device-layouts ">
-            <div class="primary-content">
-              <h3 class="xlarge"><a href="#ignore-click" title="Go to Multi-Device Layouts" class="themed">Multi-Device Layouts</a></h3>
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, velit, illum iure id in saepe laborum. Doloribus, eaque, assumenda inventore eos iusto tenetur error dolorem suscipit molestiae natus ullam aliquam?</p>
-            </div>
-            <div class="secondary-content">
-              <span class="icon-circle themed--background"><i class="icon icon-lessons"></i></span>
-              <ol class="list-links list-links--secondary">
-                <li><a href="#ignore-click" title="Read the lesson Responsive Web Design Fundamentals">Responsive Web Design Fundamentals</a></li>
-                <li><a href="#ignore-click" title="Read the lesson Responsive Web Design Patterns">Responsive Web Design Patterns</a></li>
-                <li><a href="#ignore-click" title="Read the lesson Navigation and Action Patterns">Navigation and Action Patterns</a></li>
-              </ol>
-            </div>
-            </li>
-            <li class="guides-list__item g--half theme--introduction-to-media g--last">
-            <div class="primary-content">
-              <h3 class="xlarge"><a href="#ignore-click" title="Go to Images, Audio and Video" class="themed">Images, Audio and Video</a></h3>
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, fugit ea maiores omnis ad iste autem sed reiciendis amet quam deleniti sapiente laboriosam voluptate pariatur veniam quod beatae sunt architecto?</p>
-            </div>
-            <div class="secondary-content">
-              <span class="icon-circle themed--background"><i class="icon icon-lessons"></i></span>
-              <ol class="list-links list-links--secondary">
-                <li><a href="#ignore-click" title="Read the lesson Images">Images</a></li>
-                <li><a href="#ignore-click" title="Read the lesson Video">Video</a></li>
-                <li><a href="#ignore-click" title="Read the lesson Audio">Audio</a></li>
-              </ol>
-            </div>
-            </li>
-            <li class="guides-list__item g--half theme--user-input ">
-            <div class="primary-content">
-              <h3 class="xlarge"><a href="#ignore-click" title="Go to Forms and User Input" class="themed">Forms and User Input</a></h3>
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, adipisci, aspernatur. Velit, consequatur, temporibus, neque minus obcaecati dolor officia architecto voluptatem et pariatur quo vitae saepe laborum ratione eum. Soluta.</p>
-            </div>
-            <div class="secondary-content">
-              <span class="icon-circle themed--background"><i class="icon icon-lessons"></i></span>
-              <ol class="list-links list-links--secondary">
-                <li><a href="#ignore-click" title="Read the lesson Create Amazing Forms">Create Amazing Forms</a></li>
-                <li><a href="#ignore-click" title="Read the lesson Add Touch to Your Site">Add Touch to Your Site</a></li>
-              </ol>
-            </div>
-            </li>
-            <li class="guides-list__item g--half theme--performance g--last">
-            <div class="primary-content">
-              <h3 class="xlarge"><a href="#ignore-click" title="Go to Optimizing Performance" class="themed">Optimizing Performance</a></h3>
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, ratione officia officiis natus illum quos cumque quis! Optio, dolore, eligendi ea culpa quod esse atque architecto reprehenderit at tempora itaque!</p>
-            </div>
-            <div class="secondary-content">
-              <span class="icon-circle themed--background"><i class="icon icon-lessons"></i></span>
-              <ol class="list-links list-links--secondary">
-                <li><a href="#ignore-click" title="Read the lesson Critical Rendering Path">Critical Rendering Path</a></li>
-                <li><a href="#ignore-click" title="Read the lesson Optimizing Content Efficiency">Optimizing Content Efficiency</a></li>
-              </ol>
-            </div>
-            </li>
-          </ul>
-        </div>
-      </section>
-    </div>
-
-    <div class="container">
-      <a name="page-header"></a>
-      <h2 class="subsection-title"><strong class="subsection-number">#14</strong> Page header</h2>
-    </div>
-
-    <div class="code-sample">
-      <section class="styleguide__page-header">
-        <div class="page-header">
-          <div class="container">
-            <nav class="breadcrumbs">
-              <p> / <a href="#ignore-click" class="breadcrumbs__link"> The Essentials</a></p>
-            </nav>
-            <h3 class="xxlarge text-divider">Multi-screen layouts</h3>
-            <p class="page-header__excerpt g-wide--push-1 g-wide--pull-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, optio, ad, voluptates repudiandae at excepturi error delectus explicabo nulla eum provident quibusdam ipsum sapiente culpa sequi quia unde fuga id.</p>
-          </div>
-        </div>
-      </section>
-    </div>
-
-    <div class="container">
-      <a name="quote"></a>
-      <h2 class="subsection-title"><strong class="subsection-number">#15</strong> Quote</h2>
-    </div>
-
-    <div class="code-sample">
-      <section class="styleguide__quote">
-        <div class="quote">
-          <div class="container">
-            <blockquote class="quote__content g-wide--push-1 g-wide--pull-1 g-medium--push-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, illum, at quis vero nam minus incidunt consequatur reprehenderit aliquid blanditiis fugiat nihil dolor tempora distinctio ipsum quisquam debitis excepturi magni.
-            <p>Name / Details</p>
-            </blockquote>
-          </div>
-        </div>
-      </section>
-    </div>
-
-    <div class="container">
-      <a name="guides-intro"></a>
-      <h2 class="subsection-title"><strong class="subsection-number">#16</strong> Featured icons</h2>
-    </div>
-
-    <div class="code-sample">
-      <section class="styleguide__centered-list">
-        <div class="container">
-          <ul class="list-guides-intro list-centered list--reset clear">
-            <li class="g-medium--half g-wide--1 theme--multi-device-layouts  ">
-              <a href="#ignore-click" class="themed">
-                <span class="icon-circle--large themed--background"><i class="icon icon-multi-device-layouts"></i></span>
-                <h3 class="large text-divider">Multi-Device Layouts</h3>
-              </a>
-              <p>Create flexible, not fixed, layouts.</p>
-            </li>
-            <li class="g-medium--half g-wide--1 theme--introduction-to-media g-medium--last ">
-              <a href="#ignore-click" class="themed">
-                <span class="icon-circle--large themed--background"><i class="icon icon-introduction-to-media"></i></span>
-                <h3 class="large text-divider">Images, Audio and Video</h3>
-              </a>
-              <p>Only use media that loads fast and scales.</p>
-            </li>
-            <li class="g-medium--half g-wide--1 theme--user-input  ">
-              <a href="#ignore-click" class="themed">
-                <span class="icon-circle--large themed--background"><i class="icon icon-user-input"></i></span>
-                <h3 class="large text-divider">Forms and User Input</h3>
-              </a>
-              <p>Touch, tap, click, and submit.</p>
-            </li>
-            <li class="g-medium--half g-wide--1 theme--performance g-medium--last  g-wide--last ">
-              <a href="#ignore-click" class="themed">
-                <span class="icon-circle--large themed--background"><i class="icon icon-performance"></i></span>
-                <h3 class="large text-divider">Optimizing Performance</h3>
-              </a>
-              <p>Performance is a feature.</p>
-            </li>
-          </ul>
-        </div>
-      </section>
-    </div>
-
-    <div class="container">
-      <a name="featured-spotlight"></a>
-      <h2 class="subsection-title"><strong class="subsection-number">#17</strong> Featured spotlight</h2>
-    </div>
-
-    <a name="feature-spotlight"></a>
-    <div class="code-sample">
-      <section class="styleguide__feature-spotlight">
-        <div class="featured-spotlight">
-          <div class="container-medium">
-            <div class="featured-spotlight__container g--pull-half">
-              <div class="featured-spotlight__img">
-                <img src="images/icons/placeholder--wide.png" alt="wide image placeholder example">
-              </div>
-
-              <div class="container-small">
-                <h3 class="xxlarge">Featured spotlight</h3>
-                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed vitae varius augue, eu varius dolor.</p>
-                <a href="#ignore-click" class="cta--primary">View Google</a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-    </div>
-
-    <div class="container">
-      <a name="featured-list"></a>
-      <h2 class="subsection-title"><strong class="subsection-number">#18</strong> Featured list</h2>
-    </div>
-
-    <div class="code-sample">
-      <section class="styleguide__featured-section">
-        <div class="featured-section">
-          <div class="container-medium">
-            <ul class="featured-list">
-              <li class="featured-list__item clear">
-                <div class="container-small">
-                  <div class="featured-list__content g--half">
-                    <h3>Case study</h3>
-                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, incidunt harum aut quae eaque sequi sunt molestiae tenetur vitae.</p>
-                    <a href="#ignore-click" class="cta--primary">View Google</a>
-                  </div>
-                  <div class="featured-list__img-wrapper g--half g--last">
-                    <div class="featured-list__img">
-                      <img src="images/icons/placeholder--small.png" alt="small image placeholder example">
-                    </div>
-                  </div>
-                </div>
-              </li>
-              <li class="featured-list__item clear">
-                <div class="container-small">
-                  <div class="featured-list__content g--half">
-                    <h3>Case study</h3>
-                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, incidunt harum aut quae eaque sequi sunt molestiae tenetur vitae.</p>
-                    <a href="#ignore-click" class="cta--primary">View Google</a>
-                  </div>
-                  <div class="featured-list__img-wrapper g--half g--last">
-                    <div class="featured-list__img">
-                      <img src="images/icons/placeholder--small.png" alt="small image placeholder example">
-                    </div>
-                  </div>
-                </div>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </section>
-    </div>
-
-    <div class="container">
-      <a name="next-lessons"></a>
-      <h2 class="subsection-title"><strong class="subsection-number">#19</strong> Featured block</h2>
-    </div>
-
-    <div class="code-sample">
-      <section class="styleguide__next-lessons">
-        <div class="next-lessons container-medium" data-current-lesson="03">
-          <h3><i class="icon icon-lessons"></i> Next Lessons</h3>
-          <ol class="list-lessons list-links">
-            <li><a href="#ignore-click">Lesson title one</a></li>
-            <li class="current"><a href="#ignore-click">Lesson title two <i class="icon icon-tick"></i></a></li>
-            <li><a href="#ignore-click">Lesson title three</a></li>
-            <li><a href="#ignore-click">Lesson title four</a></li>
-            <li><a href="#ignore-click">Lesson title five</a></li>
-          </ol>
-        </div>
-      </section>
-    </div>
-
-    <div class="container">
-      <a name="article-navigation"></a>
-      <h2 class="subsection-title"><strong class="subsection-number">#20</strong> Article navigation</h2>
-    </div>
-
-    <div class="code-sample">
-      <section class="styleguide__article-nav">
-        <div class="container-medium">
-          <nav class="article-nav">
-            <a href="#ignore-click" class="article-nav-link article-nav-link--prev">
-              <p class="article-nav-count">02</p>
-              <p>A need for responsive pages</p>
-            </a>
-            <a href="#ignore-click" class="article-nav-link article-nav-link--next">
-              <p class="article-nav-count">04</p>
-              <p>Create images for multiple resolutions</p>
-            </a>
-          </nav>
-        </div>
-      </section>
-    </div>
-
-    <footer id="gc-footer">
-      <div class="container">
-        <p><a href="#">Back to top</a></p>
-      </div>
-    </footer>
-
-    <script>
-      (function () {
-        'use strict';
-
-        var snippetToggle = document.querySelector('#snippet-toggle');
-        var snippets;
-
-        snippetToggle.addEventListener('click', function () {
-          if (snippets) {
-            for (var i = 0; i < snippets.length; i++) {
-              snippets[i].classList.toggle('auto-gen-code-visible');
-            }
-          }
-        });
-
-        window.onload = function () {
-          createCodeSamples();
-          snippets = document.querySelectorAll('.auto-gen-code-snippet');
-        };
-
-        function createCodeSamples() {
-          var codeWrappers = document.querySelectorAll('.code-sample');
-
-          for (var i = 0; i < codeWrappers.length; i++) {
-            var codeWrapper = codeWrappers[i];
-            var clonedNodes = getClonedNonTextNodes(codeWrapper);
-
-            beautifyNodes(clonedNodes);
-
-            var preElement = document.createElement('pre');
-            var codeElement = document.createElement('code');
-
-            for (var j = 0; j < clonedNodes.length; j++) {
-              codeElement.appendChild(document.createTextNode(clonedNodes[j].outerHTML));
-
-              if (j + 1 < clonedNodes.length) {
-                codeElement.appendChild(document.createTextNode('\n'));
-              }
-            }
-
-            preElement.appendChild(codeElement);
-            preElement.classList.add('auto-gen-code-snippet');
-            preElement.classList.add('container');
-
-            var clearDiv = document.createElement('div');
-            clearDiv.classList.add('clear');
-
-            var parent = codeWrapper.parentNode;
-
-            if (codeWrapper.nextSibling) {
-              parent.insertBefore(preElement, codeWrapper.nextSibling);
-            } else {
-              parent.appendChild(preElement);
-            }
-
-            parent.insertBefore(clearDiv, preElement);
-          }
-        }
-
-        function getClonedNonTextNodes(element) {
-          var nonTextNodes = [];
-          var childNodes = element.childNodes;
-
-          for (var i = 0; i < childNodes.length; i++) {
-            var childElement = childNodes[i];
-
-            if (childElement.nodeType !== 3) {
-              // Found a valid child element
-              nonTextNodes.push(childElement.cloneNode(true));
-            }
-          }
-
-          return nonTextNodes;
-        }
-
-        function beautifyNodes(elements) {
-          for (var i = 0; i < elements.length; i++) {
-            beautifyNode(elements[i], 0);
-          }
-        }
-
-        function beautifyNode(element, depth) {
-          var childNodes = element.childNodes;
-          var singleIndent = '    ';
-          var currentDepthSpacing = '';
-
-          for (var i = 0; i < depth; i++) {
-            currentDepthSpacing += singleIndent;
-          }
-
-          var nextDepthSpacing = currentDepthSpacing + singleIndent;
-
-          for (var j = 0; j < childNodes.length; j++) {
-            var childElement = childNodes[j];
-
-            if (childElement.nodeType === 3) {
-              // found a text node
-              if (childElement.nodeValue.indexOf('\n') >= 0) {
-                if (j + 1 < childNodes.length) {
-                  childElement.nodeValue = '\n' + nextDepthSpacing;
-                } else {
-                  childElement.nodeValue = '\n' + currentDepthSpacing;
-                }
-              }
-            } else {
-              beautifyNode(childElement, depth + 1);
-            }
-          }
-        }
-      })();
-    </script>
-  </body>
-</html>
diff --git a/app/styles/_h5bp.scss b/app/styles/_h5bp.scss
deleted file mode 100755
index aab30b6..0000000
--- a/app/styles/_h5bp.scss
+++ /dev/null
@@ -1,207 +0,0 @@
-/*
- * HTML5 Boilerplate
- *
- * What follows is the result of much research on cross-browser styling.
- * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
- * Kroc Camen, and the H5BP dev community and team.
- */
-
-/* ==========================================================================
-   Base styles: opinionated defaults
-   ========================================================================== */
-
-html,
-button,
-input,
-select,
-textarea {
-  color: #222;
-}
-
-body {
-  font-size: 1em;
-  line-height: 1.4;
-}
-
-a {
-  color: #00e;
-}
-
-a:visited {
-  color: #551a8b;
-}
-
-a:hover {
-  color: #06e;
-}
-
-/*
- * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
- */
-
-img {
-  vertical-align: middle;
-}
-
-/*
- * Remove default fieldset styles.
- */
-
-fieldset {
-  border: 0;
-  margin: 0;
-  padding: 0;
-}
-
-/*
- * Allow only vertical resizing of textareas.
- */
-
-textarea {
-  resize: vertical;
-}
-
-/* ==========================================================================
-   Author's custom styles
-   ========================================================================== */
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-/* ==========================================================================
-   Helper classes
-   ========================================================================== */
-
-/* Prevent callout */
-
-.nocallout {
-  -webkit-touch-callout: none;
-}
-
-.pressed {
-  background-color: rgba(0, 0, 0, 0.7);
-}
-
-/* A hack for HTML5 contenteditable attribute on mobile */
-
-textarea[contenteditable] {
-  -webkit-appearance: none;
-}
-
-/* A workaround for S60 3.x and 5.0 devices which do not animated gif images if
-   they have been set as display: none */
-
-.gifhidden {
-  position: absolute;
-  left: -100%;
-}
-
-/*
- * Image replacement
- */
-
-.ir {
-  background-color: transparent;
-  background-repeat: no-repeat;
-  border: 0;
-  direction: ltr;
-  display: block;
-  overflow: hidden;
-  text-align: left;
-  text-indent: -999em;
-}
-
-.ir br {
-  display: none;
-}
-
-/*
- * Hide from both screenreaders and browsers: h5bp.com/u
- */
-
-.hidden {
-  display: none !important;
-  visibility: hidden;
-}
-
-/*
- * Hide only visually, but have it available for screenreaders: h5bp.com/v
- */
-
-.visuallyhidden {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-/*
- * Extends the .visuallyhidden class to allow the element to be focusable
- * when navigated to via the keyboard: h5bp.com/p
- */
-
-.visuallyhidden.focusable:active,
-.visuallyhidden.focusable:focus {
-  clip: auto;
-  height: auto;
-  margin: 0;
-  overflow: visible;
-  position: static;
-  width: auto;
-}
-
-/*
- * Hide visually and from screenreaders, but maintain layout
- */
-
-.invisible {
-  visibility: hidden;
-}
-
-/**
- * Clearfix helper
- * Used to contain floats: h5bp.com/q
- */
-
-.clearfix::before,
-.clearfix::after {
-  content: "";
-  display: table;
-}
-
-.clearfix::after {
-  clear: both;
-}
-
-/* ==========================================================================
-   EXAMPLE Media Queries for Responsive Design.
-   Theses examples override the primary ('mobile first') styles.
-   Modify as content requires.
-   ========================================================================== */
-
-@media only screen and (min-width: 800px) {
-  /* Style adjustments for viewports that meet the condition */
-}
-
-@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
-     only screen and (min-resolution: 144dpi) {
-  /* Style adjustments for viewports that meet the condition */
-}
diff --git a/app/styles/app-theme.html b/app/styles/app-theme.html
new file mode 100755
index 0000000..e5a676f
--- /dev/null
+++ b/app/styles/app-theme.html
@@ -0,0 +1,207 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<style is="custom-style">
+
+  /*
+   Polymer includes a shim for CSS Custom Properties that we can use for application theming.
+   Below, you'll find the default palette for the Polymer Starter Kit layout. Feel free to play
+   with changing the colors used or generate your own palette of colours at MaterialPalette.com.
+
+   See https://www.polymer-project.org/1.0/docs/devguide/styling.html#xscope-styling-details
+   for further information on custom CSS properties.
+   */
+
+  /* Application theme */
+
+  :root {
+    --dark-primary-color: #303F9F;
+    --default-primary-color: #3F51B5;
+    --light-primary-color: #C5CAE9;
+    --text-primary-color: #ffffff; /*text/icons*/
+    --accent-color: #FF4081;
+    --primary-background-color: #c5cae9;
+    --primary-text-color: #212121;
+    --secondary-text-color: #727272;
+    --disabled-text-color: #bdbdbd;
+    --divider-color: #B6B6B6;
+
+    /* Components */
+
+    /* paper-drawer-panel */
+    --drawer-menu-color: #ffffff;
+    --drawer-border-color: 1px solid #ccc;
+    --drawer-toolbar-border-color: 1px solid rgba(0, 0, 0, 0.22);
+
+    /* paper-menu */
+    --paper-menu-background-color: #fff;
+    --menu-link-color: #111111;
+  }
+
+  /* General styles */
+
+  #drawerToolbar {
+    color: var(--secondary-text-color);
+    background-color: var(--drawer-menu-color);
+    border-bottom: var(--drawer-toolbar-border-color);
+    height: 64px;
+  }
+
+  paper-material {
+    border-radius: 2px;
+    height: 100%;
+    padding: 16px 0 16px 0;
+    width: calc(98.66% - 16px);
+    margin: 16px auto;
+    background: white;
+  }
+
+  paper-menu iron-icon {
+    margin-right: 33px;
+    opacity: 0.54;
+  }
+
+  .paper-menu > .iron-selected {
+    color: var(--default-primary-color);
+  }
+
+  paper-menu a {
+    text-decoration: none;
+    color: var(--menu-link-color);
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -ms-flex-direction: row;
+    -webkit-flex-direction: row;
+    flex-direction: row;
+    -ms-flex-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+    font-family: 'Roboto', 'Noto', sans-serif;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 24px;
+    min-height: 48px;
+    padding: 0 16px;
+  }
+
+  #mainToolbar .middle {
+    margin-left: 48px;
+  }
+
+  #mainToolbar.has-shadow .middle {
+    font-size: 20px;
+    padding-bottom: 0;
+    margin-left: 48px;
+  }
+
+  /* Height of the scroll area */
+  .content {
+    height: 900px;
+  }
+
+  /* Breakpoints */
+
+  /* Small */
+  @media (max-width: 600px) {
+
+    paper-material {
+      --menu-container-display: none;
+      width: calc(97.33% - 32px);
+      padding-left: 16px;
+      padding-right: 16px;
+    }
+
+    .paper-font-display1 {
+      font-size: 12px;
+    }
+
+    .app-name {
+      font-size: 26px;
+    }
+
+    #drawer .paper-toolbar {
+      margin-left: 16px;
+    }
+
+    #overlay {
+      min-width: 360px;
+    }
+
+    .bg {
+      background: white;
+    }
+
+  }
+
+  /* Tablet+ */
+  @media (min-width: 601px) {
+
+    paper-material {
+      width: calc(98% - 46px);
+      margin-bottom: 32px;
+      padding-left: 30px;
+      padding-right: 30px;
+    }
+
+    #drawer.paper-drawer-panel > [drawer] {
+      border-right: 1px solid rgba(0, 0, 0, 0.14);
+    }
+
+    iron-pages {
+      padding: 48px 62px;
+    }
+
+  }
+
+  /* Material Design Adaptive Breakpoints */
+  /*
+    Below you'll find CSS media queries based on the breakpoint guidance
+    published by the Material Design team. You can choose to use, customise
+    or remove these breakpoints based on your needs.
+
+    http://www.google.com/design/spec/layout/adaptive-ui.html#adaptive-ui-breakpoints
+   */
+
+  /* mobile-small */
+  @media all and (min-width: 0) and (max-width: 360px) and (orientation: portrait) { }
+  /* mobile-large */
+  @media all and (min-width: 361px) and (orientation: portrait) { }
+  /* mobile-small-landscape */
+  @media all and (min-width: 0) and (max-width: 480px) and (orientation: landscape) { }
+  /* mobile-large-landscape */
+  @media all and (min-width: 481px) and (orientation: landscape) { }
+  /* tablet-small-landscape */
+  @media all and (min-width: 600px) and (max-width: 960px) and (orientation: landscape) { }
+  /* tablet-large-landscape */
+  @media all and (min-width: 961px) and (orientation: landscape) { }
+  /* tablet-small */
+  @media all and (min-width: 600px) and (orientation: portrait) { }
+  /* tablet-large */
+  @media all and (min-width: 601px) and (max-width: 840px) and (orientation : portrait) { }
+  /* desktop-x-small-landscape */
+  @media all and (min-width: 0) and (max-width: 480px) and (orientation: landscape) { }
+  /* desktop-x-small */
+  @media all and (min-width: 0) and (max-width: 480px) and (max-aspect-ratio: 4/3) { }
+  /* desktop-small-landscape */
+  @media all and (min-width: 481px) and (max-width: 840px) and (orientation: landscape) { }
+  /* desktop-small */
+  @media all and (min-width: 481px) and (max-width: 840px) and (max-aspect-ratio: 4/3) { }
+  /* desktop-medium-landscape */
+  @media all and (min-width: 841px) and (max-width: 1280px) and (orientation: landscape) { }
+  /* desktop-medium */
+  @media all and (min-width: 841px) and (max-width: 1280px) and (max-aspect-ratio: 4/3) { }
+  /* desktop-large */
+  @media all and (min-width: 1281px) and (max-width: 1600px) { }
+  /* desktop-xlarge */
+  @media all and (min-width: 1601px) and (max-width: 1920px) { }
+</style>
diff --git a/app/styles/components/_components/_articles-list.scss b/app/styles/components/_components/_articles-list.scss
deleted file mode 100755
index 431efa0..0000000
--- a/app/styles/components/_components/_articles-list.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
-*
-* Articles list
-*
-**/
-
-.articles-list {
-  padding-left: 0;
-}
-
-.articles-list__item {
-
-  padding-bottom: $lineHeight * 2;
-
-  &:last-child {
-    padding-bottom: $lineHeight * 2 + 1;
-  }
-
-  padding-left: 0;
-
-  &::before {
-    content: "";
-    display: block;
-    width: 40%;
-    height: 1px;
-    box-shadow: inset 0 1px 0 0 $colorGrayKeyline;
-    margin-right: 0;
-    margin-left: 30%;
-  }
-
-  h3 {
-    a:hover {
-      text-decoration: none;
-    }
-  }
-
-  p {
-    margin-top: $lineHeight;
-    margin-bottom: $lineHeight;
-  }
-
-  &:first-child {
-    padding-top: 0;
-
-    @include medium {
-      padding-top: $lineHeight - 2;
-    }
-
-    &::before {
-      display: none;
-    }
-  }
-
-}
-
diff --git a/app/styles/components/_components/_breadcrumb.scss b/app/styles/components/_components/_breadcrumb.scss
deleted file mode 100755
index 5a8c7db..0000000
--- a/app/styles/components/_components/_breadcrumb.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
-*
-* Breadcrumb
-*
-**/
-
-.breadcrumbs {
-  display: none;
-  @include medium {
-    display: block;
-  }
-
-  position: relative;
-  z-index: 1;
-}
-
-.breadcrumbs p {
-  @include type--small;
-  padding-top: $lineHeight;
-}
-
-.breadcrumbs__link {
-  @include type--small;
-  color: black;
-  font-weight: 400;
-  padding-top: 0;
-
-  @include medium {
-    padding-top: 0;
-  }
-}
diff --git a/app/styles/components/_components/_button.scss b/app/styles/components/_components/_button.scss
deleted file mode 100755
index 349566d..0000000
--- a/app/styles/components/_components/_button.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
-*
-* Button
-*
-**/
-
-.button {
-  display: inline-block;
-  padding: (($lineHeight / 2) - 1) 32px;
-  margin-bottom: $lineHeight / 2;
-  margin-top: $lineHeight / 2;
-  min-height: $lineHeight;
-
-  text-align: center;
-
-  font-family: $fontHighlight;
-  font-weight: 600;
-  text-decoration: none;
-
-  outline: 0;
-
-  transition: none;
-
-  &:hover {
-    background: #4d4d4d;
-    color: #ffffff;
-    border: 1px solid #4d4d4d;
-    text-decoration: none;
-  }
-}
-
-// Mixin to create buttons
-@mixin style-button($color, $textColor, $isInverted: false) {
-
-  background: $color;
-  color: $textColor;
-  border: 1px solid darken($color, 10%);
-
-  @if $isInverted { border-color: transparent;}
-}
-
-
-.button--primary {
-  @extend .button;
-  @include style-button(#4285f4, #ffffff);
-}
-
-.button--secondary {
-  @extend .button;
-  @include style-button(#ffffff, $colorBlue);
-}
-
-.button--secondary-variation {
-  @extend .button;
-  @include style-button(#ffffff, $colorBlue, true);
-}
diff --git a/app/styles/components/_components/_column-list.scss b/app/styles/components/_components/_column-list.scss
deleted file mode 100755
index 1e8fb9a..0000000
--- a/app/styles/components/_components/_column-list.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
-*
-* Column list
-*
-**/
-
-.columns-list-wrapper {
-  @include wide {
-    margin-right: $mediumColWidth;
-  }
-
-}
-
-.list--columns {
-  border-bottom: 1px solid #ccc;
-  padding-bottom: $lineHeight - 1;
-  margin-bottom: 1px;
-
-  @include medium {
-    column-count: 2;
-    column-rule: 0 none transparent;
-    column-gap: 0;
-  }
-
-  & li,
-  & .columns-list-item {
-    @include type--small;
-    padding: 0;
-  }
-
-  & a {
-    display:  block;
-    position: relative;
-    padding-left: 39px;
-
-    &::before {
-      line-height: 26px;
-    }
-  }
-
-}
-
diff --git a/app/styles/components/_components/_grid.scss b/app/styles/components/_components/_grid.scss
deleted file mode 100755
index fa30c68..0000000
--- a/app/styles/components/_components/_grid.scss
+++ /dev/null
@@ -1,144 +0,0 @@
-/**
-*
-* Grid
-*
-**/
-
-
-@include medium-only {
-  // Generating grid classes for medium view
-  @for $i from 1 through $mediumColCount {
-    .g-medium--#{$i} {
-      @include rule--col(medium);
-      width: ($mediumColWidth*$i) + ($mediumGutterWidth*($i + -1));
-      @if $i == $mediumColCount { margin-right: 0; }
-    }
-
-    @if $i < $mediumColCount {
-      .g-medium--push-#{$i} {
-        margin-left: ($mediumColWidth*$i) + ($mediumGutterWidth*$i);
-      }
-      .g-medium--pull-#{$i} {
-        margin-right: ($mediumColWidth*$i) + ($mediumGutterWidth*$i);
-      }
-    }
-  }
-
-  .g-medium--full {
-    @include rule--col(medium);
-    margin-right: 0;
-    width: 100%;
-  }
-
-  .g--third {
-    @include rule--col(medium);
-    width: $mediumColWidth;
-  }
-
-  .g--half,
-  .g-medium--half {
-    @include rule--col(medium);
-    width: 50% - $mediumGutterWidth/2;
-  }
-
-  .g-medium--last { margin-right: 0; }
-  .g-medium--last + .g-medium--half { clear: left; }
-
-  .g--pull-half { margin-right: 50% + $mediumGutterWidth/2; }
-}
-
-
-@include wide {
-  // Generating grid classes for wide view
-  @for $i from 1 through $wideColCount {
-    .g-wide--#{$i} {
-      @include rule--col(wide);
-      width: ($wideColWidth*$i) + ($wideGutterWidth*($i + -1));
-      @if $i == $wideColCount { margin-right: 0; }
-    }
-
-    @if $i < $wideColCount {
-      .g-wide--push-#{$i} {
-        margin-left: ($wideColWidth*$i) + ($wideGutterWidth*$i);
-      }
-      .g-wide--pull-#{$i} {
-        margin-right: ($wideColWidth*$i) + ($wideGutterWidth*$i);
-      }
-    }
-  }
-
-  .g-wide--last { margin-right: 0; }
-
-  .g-wide--full {
-    @include rule--col(wide);
-    margin-right: 0;
-    width: 100%;
-  }
-
-  .g--third {
-    @include rule--col(wide);
-    width: 30.8%;
-  }
-
-  .g--half,
-  .g-wide--half {
-    @include rule--col(wide);
-    width: 50% - $wideGutterWidth/2;
-  }
-
-  .g--pull-half { margin-right: 50% + $wideGutterWidth/2; }
-}
-
-
-// This is a global 'last' class
-// to be used with global grid classes, such as 'half' or 'third'
-// Example usage:
-//  <div class="third"></div>
-//  <div class="third"></div>
-//  <div class="third last"></div>
-.g--last { margin-right: 0; }
-
-
-// This is a global 'centered' class
-.g--centered {
-  float: none; // reset float to none so we can center it
-  margin-left: auto;
-  margin-right: auto;
-}
-
-// This is a grid overlay
-// Its purpose is to show users our grid system
-// It becomes visible when a class 'debug' is added to the body
-.grid-overlay {
-
-  display: none;
-  pointer-events: none;
-
-  // Only show when parents (body) has debug class
-  .debug & {
-    @include container(true);
-
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 100%;
-    display: block;
-
-    [class*="g-"] {
-      height: 100%;
-      background-color: rgba(lighten(#000, 35%), .2);
-    }
-
-    @include medium-only {
-      .g-wide--last {
-        display: none;
-      }
-    }
-
-    @include small-only {
-      display: none;
-    }
-  }
-}
diff --git a/app/styles/components/_components/_guides-list.scss b/app/styles/components/_components/_guides-list.scss
deleted file mode 100755
index b7a18b9..0000000
--- a/app/styles/components/_components/_guides-list.scss
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
-*
-* Guides List
-*
-**/
-
-
-.guides-list {
-  overflow: hidden;
-
-  @include medium {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-
-    padding-top: $lineHeight*2;
-  }
-}
-
-.guides-list__item {
-  padding: 0;
-  background: #ffffff;
-  margin-top: $lineHeight;
-  margin-bottom: 0;
-
-  @include medium {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-  }
-
-  h3 {
-    margin: 0 32px;
-  }
-
-  p {
-    margin: $lineHeight 32px 0;
-  }
-
-  .primary-content {
-    @include medium {
-      flex: 1;
-    }
-  }
-
-  .secondary-content {
-    position: relative;
-    // background: #f5f5f5;
-    margin-top: ($lineHeight*2) - 1;
-    border-top: 1px solid $colorGrayKeyline;
-
-    @include medium {
-      width: 100%; // needed due to parent being flex
-    }
-
-    .icon-circle {
-      position: absolute;
-      top: -$lineHeight - 2;
-      left: 50%;
-      margin-left: -21px;
-      border: 2px solid #ffffff;
-
-      & i {
-        font-size: 23px;
-      }
-    }
-  }
-
-  ol {
-    margin: $lineHeight 0 0;
-    padding: $lineHeight*2 0 $lineHeight*2;
-    margin-top: 0;
-  }
-
-  &::before {
-    display: none;
-  }
-}
diff --git a/app/styles/components/_components/_icon-circle.scss b/app/styles/components/_components/_icon-circle.scss
deleted file mode 100755
index ee5ba5d..0000000
--- a/app/styles/components/_components/_icon-circle.scss
+++ /dev/null
@@ -1,110 +0,0 @@
-/**
-*
-* Icon Circle
-*
-**/
-
-.icon-circle,
-.icon-circle--large {
-  height: 0;
-  width: 0;
-  background: $colorGray;
-  display: block;
-  position: relative;
-  border-radius: 100%;
-  font-size: 0;
-  padding: 22px; // Breaks baseline grid
-  margin: 4px auto; // Adds margin top/bottom to fix baseline grid ;)
-
-  i,
-  span {
-    position: absolute;
-    line-height: 0px;
-    top: 50%;
-    width: 100%;
-    left: 0;
-    text-align: center;
-    color: #ffffff;
-    font-size: $fontLarge;
-  }
-
-  span {
-    font-family: $fontHighlight;
-    font-size: $fontLarge;
-    font-weight: 700;
-
-    @include medium {
-      font-size: $fontXLarge;
-    }
-  }
-}
-
-.icon-circle--large {
-  margin-top: 0;
-  margin-bottom: 0;
-  padding: $lineHeight;
-  position: relative;
-
-  i {
-    font-size: $fontLarge;
-
-    @include medium {
-      font-size: $fontXLarge;
-    }
-  }
-
-  @include medium {
-    padding: ($lineHeight + $lineHeight/2) - 2;
-    border: 2px solid #ffffff;
-
-    a & {
-      padding: ($lineHeight + $lineHeight/2) - 1;
-
-      box-shadow: inset 0px 0px 0px 1px rgba(#ffffff, .42);
-      border: 1px solid;
-
-      // demo transition
-      transition: all 100ms linear;
-      transform: translateZ(0); // kick in hardware acceleration
-    }
-
-    .no-touch a:hover & {
-      box-shadow: inset 0px 0px 0px 1px #ffffff;
-      transform: scale(1.1);
-    }
-  }
-
-}
-
-.icon-circle--nav {
-  height: 0;
-  width: 0;
-  background: $colorGray;
-  display: block;
-  position: relative;
-  border-radius: 100%;
-  font-size: 0;
-  padding: $lineHeight/2;
-  margin: 0 auto;
-
-  @include medium {
-    padding: 22px; // Breaks baseline grid
-    margin-top: 4px; // Adds margin top/bottom to fix baseline grid ;)
-    margin-bottom: 4px; // Adds margin top/bottom to fix baseline grid ;)
-  }
-
-  i {
-    position: absolute;
-    line-height: 1px;
-    top: 50%;
-    width: 100%;
-    left: 0;
-    text-align: center;
-    color: #ffffff;
-    font-size: $fontBase;
-
-    @include medium {
-      font-size: $fontLarge;
-    }
-  }
-}
diff --git a/app/styles/components/_components/_icons.scss b/app/styles/components/_components/_icons.scss
deleted file mode 100755
index ebc077e..0000000
--- a/app/styles/components/_components/_icons.scss
+++ /dev/null
@@ -1,147 +0,0 @@
-@font-face {
-  font-family: icons;
-  src: url(../images/icons/icons.eot);
-  src: url(../images/icons/icons.eot?#iefix) format('embedded-opentype'),
-    url(../images/icons/icons.woff2) format('woff2'),
-    url(../images/icons/icons.woff) format('woff'),
-    url(../images/icons/icons.ttf) format('truetype'),
-    url(../images/icons/icons.svg?#icons) format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
-
-.icon {
-  font-family: 'icons';
-  display: inline-block;
-  vertical-align: top;
-  line-height: 1;
-  font-weight: normal;
-  font-style: normal;
-  speak: none;
-  text-decoration: inherit;
-  text-transform: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-// Icons
-$icon-bullet: '\e001';
-.icon-bullet::before {
-  content:"\e001";
-}
-
-$icon-chevron-down: '\e002';
-.icon-chevron-down::before {
-  content: '\e002';
-}
-
-$icon-chevron-large: '\e003';
-.icon-chevron-large::before {
-  content: '\e003';
-}
-
-$icon-chevron-left: '\e004';
-.icon-chevron-left::before {
-  content: '\e004';
-}
-
-$icon-chevron-right: '\e005';
-.icon-chevron-right::before {
-  content: '\e005';
-}
-
-$icon-chevron-up: '\e006';
-.icon-chevron-up::before {
-  content: '\e006';
-}
-
-$icon-close: '\e007';
-.icon-close::before {
-  content: '\e007';
-}
-
-$icon-cog: '\e008';
-.icon-cog::before {
-  content: '\e008';
-}
-
-$icon-diamond: '\e009';
-.icon-diamond::before {
-  content: '\e009';
-}
-
-$icon-exclamation: '\e00a';
-.icon-exclamation::before {
-  content: '\e00a';
-}
-
-$icon-google-dev: '\e00b';
-.icon-google-dev::before {
-  content: '\e00b';
-}
-
-$icon-hash: '\e00c';
-.icon-hash::before {
-  content: '\e00c';
-}
-
-$icon-introduction-to-media: '\e00d';
-.icon-introduction-to-media::before {
-  content: '\e00d';
-}
-
-$icon-lessons: '\e00e';
-.icon-lessons::before {
-  content: '\e00e';
-}
-
-$icon-menu: '\e00f';
-.icon-menu::before {
-  content: '\e00f';
-}
-
-$icon-minus: '\e010';
-.icon-minus::before {
-  content: '\e010';
-}
-
-$icon-multi-device-layouts: '\e011';
-.icon-multi-device-layouts::before {
-  content: '\e011';
-}
-
-$icon-performance: '\e012';
-.icon-performance::before {
-  content: '\e012';
-}
-
-$icon-plus: '\e013';
-.icon-plus::before {
-  content: '\e013';
-}
-
-$icon-question: '\e014';
-.icon-question::before {
-  content: '\e014';
-}
-
-$icon-slash: '\e015';
-.icon-slash::before {
-  content: '\e015';
-}
-
-$icon-star: '\e016';
-.icon-star::before {
-  content: '\e016';
-}
-
-$icon-tick: '\e017';
-.icon-tick::before {
-  content: '\e017';
-}
-
-$icon-user-input: '\e018';
-.icon-user-input::before {
-  content: '\e018';
-}
diff --git a/app/styles/components/_components/_link.scss b/app/styles/components/_components/_link.scss
deleted file mode 100755
index a9a11ba..0000000
--- a/app/styles/components/_components/_link.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
-*
-* Link
-*
-**/
-
-a {
-  color: $colorBlue;
-}
-
-a:hover {
-  text-decoration: none;
-}
-
-.cta--primary {
-  @include style-cta($colorBlue, $icon-chevron-right);
-}
-
-.cta--secondary {
-  @include style-cta($colorBlue);
-}
diff --git a/app/styles/components/_components/_list.scss b/app/styles/components/_components/_list.scss
deleted file mode 100755
index 01a53d6..0000000
--- a/app/styles/components/_components/_list.scss
+++ /dev/null
@@ -1,336 +0,0 @@
-/**
-*
-* List
-*
-**/
-
-ul,
-ol {
-  list-style: none;
-  margin: 0;
-
-  @include small-only {
-    padding-left: 0;
-  }
-}
-
-ul li {
-  position: relative;
-  padding-left: 16px;
-  @include bullet-type("", icon-bullet);
-
-  &::before {
-    font-size: 4px;
-  }
-}
-
-ol {
-  counter-reset: list;
-  > li {
-    @include numbered-list;
-    position: relative;
-    padding-left: 32px;
-
-    // This selected every adjacent <li>
-    // from the 10th and overrides the
-    // content property of each
-    &:nth-child(10n) ~ li::before,
-    &:nth-child(10n)::before {
-      content: counter(list);
-    }
-
-  }
-}
-
-ul ol,
-ol ul {
-  padding-top: 0;
-}
-
-
-/*==========  LIST LINKS  ==========*/
-
-ul.list-links {
-  li::before {
-    display: none;
-  }
-  a {
-    @include bullet-type("", icon-bullet);
-
-    &::before {
-      font-size: 4px;
-    }
-
-    font-weight: 400;
-  }
-
-  &.list-links--primary {
-    a {
-      @include bullet-type("", icon-chevron-right);
-      font-weight: 400;
-      font-family: $fontHighlight;
-      line-height: 1; // fixes baseline grid alignment
-      text-decoration: none;
-    }
-  }
-}
-
-ol.list-links {
-  li {
-    &::before {
-      display: none;
-    }
-
-    a {
-      display: inline-block;
-      @include numbered-list;
-      font-weight: 300;
-    }
-
-    &:nth-child(10n) ~ li a::before,
-    &:nth-child(10n) a::before {
-      content: counter(list);
-    }
-  }
-
-  &.list-links--secondary {
-    a::before {
-      display: none;
-    }
-  }
-}
-
-.list-links--secondary {
-  @include type--base;
-  padding-left: 0;
-
-  li {
-    padding-left: 0;
-  }
-}
-
-/*==========  ANCHOR LIST  ==========*/
-
-.list-anchor {
-  padding-left: 0;
-
-  li {
-    @include type--base;
-    padding-top: 0;
-    padding-left: 0;
-
-    &::before {
-      display: none
-    }
-
-  }
-
-  a {
-    @include bullet-type("", icon-bullet);
-    line-height: 1; // fixes baseline grid alignment
-    display: inline-block;
-    padding-left: 16px;
-
-    &::before {
-      font-size: 4px;
-    }
-  }
-}
-
-/*==========  SMALL LIST  ==========*/
-
-.list-small {
-
-  li {
-    @include medium {
-      @include type--small;
-      padding-top: 0;
-    }
-  }
-}
-
-/*==========  CENTERED LIST  ==========*/
-
-.list-centered {
-  text-align: center;
-  padding-left: 0;
-}
-
-/*==========  FEATURED LIST  ==========*/
-
-.featured-list {
-  padding-top: $lineHeight * 3;
-  padding-bottom: $lineHeight * 3;
-}
-
-.featured-list__item {
-  background: #ffffff;
-  padding-left: 0;
-  padding-top: $lineHeight;
-  padding-bottom: $lineHeight;
-
-  @include medium {
-    min-height: $lineHeight * 13;
-    padding: $lineHeight * 2 32px;
-  }
-
-  margin-top: $lineHeight;
-
-  &:first-child {
-    margin-top: 0;
-  }
-
-  p {
-    margin-bottom: $lineHeight;
-  }
-}
-
-.featured-list__img-wrapper {
-  display: none;
-  position: relative;
-  padding-top: $lineHeight;
-  margin: 0 -5%;
-
-  @include medium {
-    display: block;
-    padding-top: 0;
-    margin: 0;
-  }
-}
-
-.featured-list__img {
-  @include medium {
-    padding-top: 60.8%;
-    padding-bottom: 0;
-    height: 0;
-    overflow: hidden;
-    position: absolute;
-    width: 100%;
-
-  }
-
-  img {
-    display: block;
-    margin: 0 auto;
-    max-width: 100%;
-
-    @include medium {
-      margin: 0;
-      position: absolute;
-      top: 0;
-      height: 100%;
-      width: 100%;
-      left: 0;
-    }
-  }
-}
-
-/*==========  RELATED GUIDES LIST  ==========*/
-.related-guides-list {
-  font-family: $fontHighlight;
-  padding-top: 0;
-  padding-left: 0;
-
-  @include medium {
-    padding-top: $lineHeight
-  }
-
-  @include wide {
-    padding-top: 0
-  }
-
-  p {
-    padding-top: 0;
-  }
-
-  .tag {
-    padding-top: 0;
-  }
-
-  li {
-    padding-top: $lineHeight;
-    padding-bottom: $lineHeight - 1;
-    border-bottom: 1px solid $colorGrayKeyline;
-
-    &:last-child {
-      border-color: transparent;
-    }
-
-    @include medium {
-      padding-top: 0;
-      padding-bottom: 0;
-      border-color: transparent;
-    }
-  }
-}
-
-/*==========  LIST RESET  ==========*/
-
-.list--reset {
-  padding-left: 0;
-
-  li {
-    padding-left: 0;
-  }
-
-  &.list-links a::before,
-  & li::before {
-    display: none !important; // Fine to use !important when we are forcing an override
-  }
-}
-
-
-/*==========  LESSONS  ==========*/
-.list-lessons {
-  padding-left: 0;
-
-  & a {
-    color: #ffffff;
-  }
-
-  & .current {
-    &,
-    a {
-      text-decoration: none;
-      cursor: default;
-    }
-
-    & .icon {
-      font-size: $fontSmall;
-      display: inline-block;
-      background: rgba(#000000, .2);
-      border-radius: 100%;
-      width: 26px;
-      line-height: 26px;
-      text-align: center;
-      margin-left: 7px;
-    }
-  }
-
-}
-
-
-/*==========  GUIDES INTO - used on homepage  ==========*/
-.list-guides-intro {
-  margin-bottom: $lineHeight*2;
-
-  @include small-only {
-    padding-top: $lineHeight*2;
-  }
-
-  li {
-    border-bottom: 1px solid $colorGrayKeyline;
-    padding-bottom: ($lineHeight*2) - 1;
-    margin-bottom: ($lineHeight*2);
-
-    @include medium {
-      border-color: transparent;
-      padding-bottom: 0;
-    }
-
-    &:last-child {
-      border-bottom: transparent;
-      margin-bottom: 0;
-    }
-  }
-}
diff --git a/app/styles/components/_components/_media.scss b/app/styles/components/_components/_media.scss
deleted file mode 100755
index 3d4e7ba..0000000
--- a/app/styles/components/_components/_media.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
-*
-* Media - imgs/videos
-*
-**/
-
-img,
-video,
-object {
-  max-width: 100%;
-}
-
-img {
-
-  .content & {
-    margin-top: $lineHeight;
-    margin-bottom: $lineHeight;
-  }
-}
diff --git a/app/styles/components/_components/_subsection-title.scss b/app/styles/components/_components/_subsection-title.scss
deleted file mode 100755
index 0d0b786..0000000
--- a/app/styles/components/_components/_subsection-title.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
-*
-* subsection__title
-*
-**/
-
-.subsection-title {
-  color: $colorGrayDark;
-  margin-top: $lineHeight * 2;
-}
-
-.subsection-number {
-  @include type--base;
-  padding-top: 0;
-  display: block;
-}
diff --git a/app/styles/components/_components/_table.scss b/app/styles/components/_components/_table.scss
deleted file mode 100755
index dd48974..0000000
--- a/app/styles/components/_components/_table.scss
+++ /dev/null
@@ -1,158 +0,0 @@
-/**
-*
-* Table
-*
-**/
-
-table {
-  margin-top: $lineHeight;
-  width: 100%;
-
-  thead {
-    background: $colorBlue;
-    color: #ffffff;
-  }
-
-  th {
-    text-align: center;
-    display: none;
-    font-family: $fontHighlight;
-    @include type--medium;
-  }
-
-  tr {
-    @include medium {
-      border-bottom: 1px solid #ffffff;
-    }
-  }
-
-  tbody {
-    background: $colorGrayBackground;
-  }
-
-  td {
-    display: block;
-    padding-top: $lineHeight/2;
-    padding-bottom: $lineHeight/2;
-
-    // This is to re-plicate the table-headers for mobile
-    &::before {
-      content: attr(data-th) " :";
-      display: inline-block;
-      color: #ffffff;
-      background: $colorBlue;
-      border-right: 2px solid #ffffff;
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      width: 100px;
-      max-height: 100%;
-      font-family: $fontHighlight;
-      font-size: 16px;
-      font-weight: 400;
-      padding-left: $lineHeight/2;
-      padding-top: $lineHeight/2;
-
-      @include medium {
-        display: none;
-      }
-    }
-  }
-
-  th,
-  td {
-    position: relative;
-    padding-left: 140px;
-
-    @include medium {
-      display: table-cell;
-    }
-  }
-
-  th {
-    @include medium {
-      padding: $lineHeight;
-      padding-top: 13px;
-      padding-bottom: $lineHeight/2 - 1;
-    }
-  }
-
-  td {
-    @include medium {
-      padding: $lineHeight;
-      padding-bottom: $lineHeight - 1;
-    }
-  }
-}
-
-td:last-child::after {
-  content: "";
-  display: block;
-  background: #ffffff;
-  height: 1px;
-  left: 0;
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  @include medium {
-    display: none;
-  }
-}
-
-.table-2 {
-  col {
-    width: $mediumContainer / 2;
-    @include wide {
-      width: $wideContainer / 2;
-    }
-  }
-
-  th,
-  td {
-    @include medium {
-      &:first-child {
-        border-right: 2px solid #ffffff;
-      }
-    }
-  }
-}
-
-.table-3 {
-  col {
-    width: $mediumContainer / 3;
-    @include wide {
-      width: $wideContainer / 3;
-    }
-  }
-
-  th,
-  td {
-    @include medium {
-      &:nth-child(2) {
-        border-left: 2px solid #ffffff;
-        border-right: 2px solid #ffffff;
-      }
-    }
-  }
-}
-
-.table-4 {
-  col {
-    width: $mediumContainer / 4;
-    @include wide {
-      width: $wideContainer / 4;
-    }
-  }
-
-  th,
-  td {
-    @include medium {
-      &:nth-child(2),
-      &:nth-child(3) {
-        border-left: 2px solid #ffffff;
-        border-right: 2px solid #ffffff;
-      }
-    }
-  }
-}
diff --git a/app/styles/components/_components/_typography.scss b/app/styles/components/_components/_typography.scss
deleted file mode 100755
index 0a6c6e4..0000000
--- a/app/styles/components/_components/_typography.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
-*
-* Typography
-*
-**/
-
-// Just normalizing text
-// Recommend using padding instead of margin
-h1, h2, h3, h4, h5, p {
-  margin: 0;
-}
-
-// Definitions
-.small,
-small {
-  @include type--small;
-}
-
-.base,
-p,
-ul,
-ol {
-  @include type--base;
-}
-
-.medium,
-h4 {
-  @include type--medium;
-}
-
-.large,
-h3 {
-  @include type--large;
-}
-.xlarge,
-h2 {
-  @include type--xlarge;
-}
-
-.xxlarge,
-h1 {
-  @include type--xxlarge;
-}
-
-.huge {
-  @include type--huge;
-}
-
-
-li > p {
-  padding-top: 0;
-}
diff --git a/app/styles/components/_global.scss b/app/styles/components/_global.scss
deleted file mode 100755
index f7bc86b..0000000
--- a/app/styles/components/_global.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
-*
-* Global
-*
-**/
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-html,
-body,
-button {
-  -moz-osx-font-smoothing: antialiased;
-  -webkit-font-smoothing: antialiased;
-  font-smoothing: antialiased;
-}
-
-body {
-  font-family: $fontDefault;
-  font-size: $fontBase;
-  line-height: 1.6250em; /* 26px */
-  font-weight: 300; // to thicken it a bit, we need to remove font-smoothing
-  color: $colorText;
-
-  @include baseline-grid();
-}
-
-pre {
-  background: $colorGrayBackground;
-  padding: 13px;
-}
-
-.main-container {
-  @include container(true);
-}
-
-.container {
-  @include container(true);
-}
-
-.container-medium {
-  @include medium {
-    @include container(true);
-  }
-}
-
-.container-small {
-  @include small-only {
-    @include container(true);
-  }
-}
-
-.content {
-  @include wide {
-    margin-right: 25.9%; // took this from the grid output - using @extend inside media-query is deprecated, need to figure out a better way to do this.
-
-    & pre {
-      margin-right: -25.9%;
-    }
-  }
-}
diff --git a/app/styles/components/_helper.scss b/app/styles/components/_helper.scss
deleted file mode 100755
index 166ce38..0000000
--- a/app/styles/components/_helper.scss
+++ /dev/null
@@ -1,122 +0,0 @@
-/**
-*
-* Helper
-*
-**/
-
-
-.clear {
-  &::before,
-  &::after {
-    content: '';
-    display: table;
-  }
-  &::after {
-    clear: both;
-  }
-}
-
-
-/*==========  COLORS  ==========*/
-
-.color--blue { color: $colorBlue; }
-.color--red { color: $colorRed; }
-.color--green { color: $colorGreen; }
-.color--yellow { color: $colorYellow; }
-.color--blue-secondary { color: $colorBlueSecondary; }
-.color--red-secondary { color: $colorRedSecondary; }
-.color--green-secondary { color: $colorGreenSecondary; }
-.color--yellow-secondary { color: $colorYellowSecondary; }
-
-.color--gray-background { color: $colorGrayBackground; }
-.color--gray-keyline { color: $colorGrayKeyline; }
-.color--gray { color: $colorGray; }
-.color--gray-dark { color: $colorGrayDark; }
-
-.color--text { color: $colorText; }
-.color--highlight { color: $colorHighlight; }
-.color--warning { color: $colorWarning; }
-.color--danger { color: $colorDanger; }
-.color--muted { color: $colorMuted; }
-
-.color--remember { color: $colorRemember; }
-.color--learning { color: $colorLearning; }
-
-.color--layouts { color: $colorLayouts; }
-.color--user { color: $colorUser; }
-.color--media { color: $colorMedia; }
-.color--performance { color: $colorPerformance; }
-.color--layouts-secondary { color: $colorLayoutsSecondary; }
-.color--user-secondary { color: $colorUserSecondary; }
-.color--media-secondary { color: $colorMediaSecondary; }
-.color--performance-secondary { color: $colorPerformanceSecondary; }
-
-
-
-/*==========  TEXT DIVIDER  ==========*/
-
-.text-divider {
-  position: relative;
-  margin-bottom: $lineHeight;
-
-  &::after {
-    content: '';
-    display: block;
-    position: absolute;
-    width: 40%;
-    height: 1px;
-    box-shadow: 0 1px 0 0 $colorGrayKeyline;
-    left: 30%;
-    bottom: -$lineHeight/2;
-  }
-
-  &.xlarge {
-    margin-bottom: $lineHeight*2;
-
-    &::after {
-      bottom: -($lineHeight*2)/2;
-    }
-  }
-
-  &.xxlarge {
-    margin-bottom: $lineHeight*3;
-
-    &::after {
-      bottom: -($lineHeight*3)/2;
-    }
-  }
-
-  &.huge {
-    margin-bottom: $lineHeight*3;
-
-    &::after {
-      bottom: -($lineHeight*3)/2;
-    }
-  }
-}
-
-
-/*==========  GENERIC  ==========*/
-.centered {
-  text-align: center;
-}
-
-
-/*==========  TAG  ==========*/
-.tag {
-  @include type--small;
-  font-family: $fontHighlight;
-  text-transform: uppercase;
-  font-weight: 700;
-  display: inline-block;
-  text-decoration: none;
-
-  &:hover {
-    color: $colorGrayDark;
-  }
-
-  &::before {
-    content: '# ';
-    display: inline-block;
-  }
-}
diff --git a/app/styles/components/_modules/_article-nav.scss b/app/styles/components/_modules/_article-nav.scss
deleted file mode 100755
index 80b29af..0000000
--- a/app/styles/components/_modules/_article-nav.scss
+++ /dev/null
@@ -1,88 +0,0 @@
-/**
-*
-* Article nav
-*
-**/
-
-.article-nav {
-  overflow: hidden;
-  position: relative;
-
-  &::before {
-    content: '';
-    border-left: 2px solid $colorGrayKeyline;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 50%;
-  }
-}
-
-.article-nav-link {
-  padding: $lineHeight 32px;
-  float: left;
-  width: 50%;
-  position: relative;
-
-  &::before{
-    position: absolute;
-    top: 21px;
-    font-family: $fontHighlight;
-    font-size: $fontMedium;
-    font-weight: 400;
-
-    @include medium {
-      top: 25px;
-      font-size: $fontLarge;
-      display: block;
-      padding: 13px 10px;
-      color: #ffffff;
-      background: $colorBlue;
-    }
-  }
-}
-
-.article-nav p {
-  padding: 0;
-  margin: 0;
-}
-
-.article-nav-link--prev {
-  text-align: right;
-  // border-right-width: 1px;
-
-  &::before {
-    font-family: $fontIcon;
-    @extend .icon-chevron-left::before;
-    left: 32px;
-  }
-
-  p {
-    @include medium {
-      padding-left: 52px;
-    }
-  }
-}
-
-.article-nav-link--next {
-  // border-left-width: 1px;
-
-  &::before {
-    font-family: $fontIcon;
-    @extend .icon-chevron-right::before;
-    right: 32px;
-  }
-
-  p {
-    @include medium {
-      padding-right: 52px;
-    }
-  }
-}
-
-.article-nav-count {
-  @include type--large;
-  font-weight: 700;
-  @include medium {font-weight: 400;}
-}
-
diff --git a/app/styles/components/_modules/_articles-section.scss b/app/styles/components/_modules/_articles-section.scss
deleted file mode 100755
index c914546..0000000
--- a/app/styles/components/_modules/_articles-section.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
-*
-* Articles section
-*
-**/
-
-.articles-section {
-  background: $colorGrayBackground;
-  text-align: center;
-  padding: $lineHeight 0 $lineHeight*4;
-}
-
-.articles-count {
-  color: $colorBlue;
-  font-family: $fontHighlight;
-  font-weight: 400;
-}
-
-.article-section__icon {
-  top: -($lineHeight);
-
-  @include medium {
-    top: -($lineHeight + $lineHeight/2);
-  }
-}
diff --git a/app/styles/components/_modules/_did-you-know.scss b/app/styles/components/_modules/_did-you-know.scss
deleted file mode 100755
index 17d86a0..0000000
--- a/app/styles/components/_modules/_did-you-know.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
-*
-* Text module
-*
-**/
-
-.did-you-know {
-
-  ol {
-    @include medium {
-      padding-top: 0 !important;
-    }
-  }
-
-  .cta--primary {
-    margin-top: $lineHeight;
-    font-weight: 500;
-  }
-
-  &>.g--half {
-    position: relative;
-    padding-left: 0;
-    @include medium {padding-left: 32px}
-  }
-}
-
-.did-you-know__symbol {
-  padding-bottom: $lineHeight*12;
-  @include medium {padding-bottom: $lineHeight}
-
-  &::after {
-    content: $icon-question;
-    color: $colorBlue;
-    font-family: $fontIcon;
-    font-size: 300px;
-    top: 150px;
-    left: 30%;
-    position: relative;
-    display: block;
-    width: 0;
-
-    @include medium {
-      position: absolute;
-      font-size: 400px;
-      top: 200px;
-      left: 110%;
-    }
-
-    @include wide {
-      position: absolute;
-      font-size: 400px;
-      top: 200px;
-      left: 124%;
-    }
-  }
-}
diff --git a/app/styles/components/_modules/_editorial-header.scss b/app/styles/components/_modules/_editorial-header.scss
deleted file mode 100755
index e574a25..0000000
--- a/app/styles/components/_modules/_editorial-header.scss
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
-*
-* Editorial Header
-*
-**/
-
-.editorial-header {
-  overflow: hidden;
-
-  .breadcrumbs {
-    color: $colorBlue;
-
-    a {
-      color: $colorBlue;
-    }
-  }
-
-  .container {
-
-    @include medium {
-      position: relative;
-
-      // Pseudo elements to add the background characters
-      &::before {
-        content: $icon-chevron-large;
-        font-family: $fontIcon;
-        font-size: 1000px;
-        line-height: 0;
-        display: block;
-        position: absolute;
-        top: 0;
-        right: 100%;
-        color: $colorGrayBackground;
-        margin: 168px -35px 0 0;
-      }
-    }
-  }
-
-}
-
-.editorial-header__excerpt {
-  @include type--medium(true);
-  font-family: $fontHighlight;
-}
-
-.editorial-header .tag{
-  padding-top: $lineHeight*2;
-}
-
-.editorial-header__subtitle {
-  @include type--xxlarge;
-  padding-top: 0;
-  @include medium {
-    padding-top: 0;
-    padding-bottom: $lineHeight;
-  }
-  color: $colorBlue;
-}
-
-.editorial-header__toc {
-  margin-top: $lineHeight;
-
-  ol {
-    padding-top: 0;
-
-    @include medium {
-      padding-top: 0;
-    }
-  }
-}
-
-.editorial-header__toc-title {
-  font-family: $fontHighlight;
-  border-bottom: 1px solid $colorGrayKeyline;
-  margin-bottom: 13px;
-  padding-bottom: 13px !important;
-  color: $colorBlue;
-}
diff --git a/app/styles/components/_modules/_featured-section.scss b/app/styles/components/_modules/_featured-section.scss
deleted file mode 100755
index 7fa0964..0000000
--- a/app/styles/components/_modules/_featured-section.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
-*
-* Editorial Header
-*
-**/
-
-.featured-section {
-  background: $colorGrayBackground;
-}
diff --git a/app/styles/components/_modules/_featured-spotlight.scss b/app/styles/components/_modules/_featured-spotlight.scss
deleted file mode 100755
index 4411e05..0000000
--- a/app/styles/components/_modules/_featured-spotlight.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
-*
-* Editorial Header
-*
-**/
-
-.featured-spotlight {
-  background: $colorGrayDark;
-  color: #ffffff;
-  overflow: hidden;
-  padding-bottom: $lineHeight * 3 - 1;
-  margin-top: $lineHeight * 2;
-
-  p {
-    padding-bottom: $lineHeight;
-  }
-
-  .cta--primary {
-    color: #ffffff;
-
-    &:hover {
-      color: #ffffff;
-    }
-  }
-}
-
-.featured-spotlight__container {
-  position: relative;
-}
-
-.featured-spotlight__img {
-  @include small-only {
-    padding-top: 58.4%;
-    padding-bottom: 0;
-    height: 0;
-    overflow: hidden;
-    position: relative;
-    width: 100%;
-  }
-
-  img {
-    margin: 0 auto;
-    display: block;
-    width: 100%;
-
-    position: absolute;
-    left: 0;
-    top: 0;
-    margin: 0;
-
-    @include medium {
-      width: auto;
-      max-width: none;
-      left: 100% + $mediumGutterWidth * 2;
-    }
-
-    @include wide {
-      left: 100% + $wideGutterWidth * 2;
-    }
-  }
-}
diff --git a/app/styles/components/_modules/_guides-section.scss b/app/styles/components/_modules/_guides-section.scss
deleted file mode 100755
index 013738f..0000000
--- a/app/styles/components/_modules/_guides-section.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.guides-section {
-  background: $colorGrayBackground;
-  text-align: center;
-  padding: $lineHeight 0 $lineHeight * 4;
-}
diff --git a/app/styles/components/_modules/_highlight.scss b/app/styles/components/_modules/_highlight.scss
deleted file mode 100755
index 47cc8ed..0000000
--- a/app/styles/components/_modules/_highlight.scss
+++ /dev/null
@@ -1,269 +0,0 @@
-/**
-*
-* Highlight
-*
-**/
-
-.highlight-module {
-  overflow: hidden;
-  margin-top: $lineHeight * 2;
-  margin-bottom: $lineHeight;
-  position: relative;
-
-  &::after {
-    background: $colorGrayBackground;
-    content: '';
-    height: 100%;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    z-index: 0;
-    width: 100%;
-    right: 0;
-    left: 0;
-  }
-
-  ul,
-  ol {
-    padding-left: 0;
-  }
-}
-
-.highlight-module__container {
-  @include container;
-  padding-bottom: $lineHeight * 3;
-  z-index: 1;
-  @include highlight-symbol();
-
-  @include medium {
-    padding-bottom: $lineHeight * 2;
-  }
-
-  @include wide {
-    min-height: $lineHeight * 8;
-  }
-}
-
-.highlight-module__title {
-  @include type--huge;
-  padding-top: $lineHeight;
-
-  @include wide {
-    @include type--xxlarge;
-  }
-}
-
-.highlight-module__cta {
-  display: block;
-}
-
-
-/*==========  LEARNING  ==========*/
-.highlight-module--learning {
-  color: #ffffff;
-
-  &::after {
-    background-color: $colorLearning;
-  }
-
-  a {
-    color: #ffffff;
-    text-decoration: underline;
-  }
-}
-
-
-/*==========  REMEMBER  ==========*/
-.highlight-module--remember {
-  color: #ffffff;
-
-  &::after {
-    background-color: $colorRemember;
-  }
-
-  a {
-    color: #ffffff;
-    text-decoration: underline;
-  }
-}
-
-
-/*==========  CODE  ==========*/
-.highlight-module--code {
-  overflow: visible;
-  margin-bottom: $lineHeight * 2;
-
-  pre {
-    margin: 0;
-    padding-top: $lineHeight;
-    font-size: $fontBase - 2;
-    line-height: $lineHeight;
-    padding-bottom: 0;
-    padding-left: 0;
-    padding-right: 0;
-
-    span {
-      margin: 0;
-      padding: 0;
-      display: inline-block;
-    }
-  }
-
-  code {
-    margin: 0;
-    padding: 0;
-    word-spacing: -2px;
-    display: block;
-  }
-
-  .highlight-module__container {
-    padding-bottom: 0;
-  }
-
-  .highlight-module__cta {
-    position: absolute;
-    bottom: -$lineHeight;
-  }
-
-}
-
-
-/*==========  LEFT  ==========*/
-.highlight-module--left {
-  &::after {
-    @include wide {
-      width: 80%;
-      right: 20%;
-    }
-  }
-}
-
-
-/*==========  RIGHT  ==========*/
-.highlight-module--right {
-  &::after {
-    @include wide {
-      width: 80%;
-      left: 20%;
-    }
-  }
-
-  &.highlight-module--code {
-    &::after {
-      @include wide {
-        width: 100%;
-        left: 0;
-      }
-    }
-  }
-}
-
-/*==========  INLINE  ==========*/
-.highlight-module--inline {
-  color: $colorText;
-  overflow: visible;
-  margin: $lineHeight 0 0;
-
-  & .highlight-module__container {
-    padding-bottom: 0;
-
-    &::before {
-      display: none;
-    }
-  }
-
-  & .highlight-module__content {
-    border-color: $colorGrayKeyline;
-    border-style: solid;
-    border-width: 1px;
-    border-left-width: 0;
-    border-right-width: 0;
-    margin-bottom: -2px; // Offsetting 2px to considerate border top/bottom - baseline rules.
-    padding:  0 0 $lineHeight;
-  }
-
-  & .highlight-module__title {
-    @include type--large;
-  }
-
-  &.highlight-module--remember {
-    & .highlight-module__title,
-    & li::before {
-      color: $colorRemember;
-    }
-  }
-
-  &.highlight-module--learning {
-    & .highlight-module__title,
-    & li::before {
-      color: $colorLearning;
-    }
-  }
-
-  &::after {
-    display: none !important;
-  }
-}
-
-/*==========  COLORS  ==========*/
-
-div.highlight > pre > code, code .highlight  { background: transparent; }
-div.highlight > pre > code .c, code .highlight .c { color: #999988; font-style: italic } /* Comment */
-div.highlight > pre > code .err, code .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
-div.highlight > pre > code .k, code .highlight .k { } /* Keyword */
-div.highlight > pre > code .o, code .highlight .o { } /* Operator */
-div.highlight > pre > code .cm, code .highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
-div.highlight > pre > code .cp, code .highlight .cp { color: $colorGray; } /* Comment.Preproc */
-div.highlight > pre > code .c1, code .highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
-div.highlight > pre > code .cs, code .highlight .cs { color: $colorGray; font-style: italic } /* Comment.Special */
-div.highlight > pre > code .gs, code .highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
-div.highlight > pre > code .gd .x, code .highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
-div.highlight > pre > code .ge, code .highlight .ge { font-style: italic } /* Generic.Emph */
-div.highlight > pre > code .gr, code .highlight .gr { color: #aa0000 } /* Generic.Error */
-div.highlight > pre > code .gh, code .highlight .gh { color: $colorGray } /* Generic.Heading */
-div.highlight > pre > code .gi, code .highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
-div.highlight > pre > code .gi .x, code .highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
-div.highlight > pre > code .go, code .highlight .go { color: #888888 } /* Generic.Output */
-div.highlight > pre > code .gp, code .highlight .gp { color: #555555 } /* Generic.Prompt */
-div.highlight > pre > code .gs, code .highlight .gs { } /* Generic.Strong */
-div.highlight > pre > code .gu, code .highlight .gu { color: #aaaaaa } /* Generic.Subheading */
-div.highlight > pre > code .gt, code .highlight .gt { color: #aa0000 } /* Generic.Traceback */
-div.highlight > pre > code .kc, code .highlight .kc { } /* Keyword.Constant */
-div.highlight > pre > code .kd, code .highlight .kd { } /* Keyword.Declaration */
-div.highlight > pre > code .kp, code .highlight .kp { } /* Keyword.Pseudo */
-div.highlight > pre > code .kr, code .highlight .kr { } /* Keyword.Reserved */
-div.highlight > pre > code .kt, code .highlight .kt { color: #445588; } /* Keyword.Type */
-div.highlight > pre > code .m, code .highlight .m { color: #009999 } /* Literal.Number */
-div.highlight > pre > code .s, code .highlight .s { color: $colorLearning } /* Literal.String */
-div.highlight > pre > code .na, code .highlight .na { color: #008080 } /* Name.Attribute */
-div.highlight > pre > code .nb, code .highlight .nb { color: #0086B3 } /* Name.Builtin */
-div.highlight > pre > code .nc, code .highlight .nc { color: #445588; } /* Name.Class */
-div.highlight > pre > code .no, code .highlight .no { color: #008080 } /* Name.Constant */
-div.highlight > pre > code .ni, code .highlight .ni { color: #800080 } /* Name.Entity */
-div.highlight > pre > code .ne, code .highlight .ne { color: #990000; } /* Name.Exception */
-div.highlight > pre > code .nf, code .highlight .nf { color: #990000; } /* Name.Function */
-div.highlight > pre > code .nn, code .highlight .nn { color: #555555 } /* Name.Namespace */
-div.highlight > pre > code .nt, code .highlight .nt { color: $colorRemember } /* Name.Tag */
-div.highlight > pre > code .nv, code .highlight .nv { color: #008080 } /* Name.Variable */
-div.highlight > pre > code .ow, code .highlight .ow { } /* Operator.Word */
-div.highlight > pre > code .w, code .highlight .w { color: #bbbbbb } /* Text.Whitespace */
-div.highlight > pre > code .mf, code .highlight .mf { color: #009999 } /* Literal.Number.Float */
-div.highlight > pre > code .mh, code .highlight .mh { color: #009999 } /* Literal.Number.Hex */
-div.highlight > pre > code .mi, code .highlight .mi { color: #009999 } /* Literal.Number.Integer */
-div.highlight > pre > code .mo, code .highlight .mo { color: #009999 } /* Literal.Number.Oct */
-div.highlight > pre > code .sb, code .highlight .sb { color: $colorLearning } /* Literal.String.Backtick */
-div.highlight > pre > code .sc, code .highlight .sc { color: $colorLearning } /* Literal.String.Char */
-div.highlight > pre > code .sd, code .highlight .sd { color: $colorLearning } /* Literal.String.Doc */
-div.highlight > pre > code .s2, code .highlight .s2 { color: $colorLearning } /* Literal.String.Double */
-div.highlight > pre > code .se, code .highlight .se { color: $colorLearning } /* Literal.String.Escape */
-div.highlight > pre > code .sh, code .highlight .sh { color: $colorLearning } /* Literal.String.Heredoc */
-div.highlight > pre > code .si, code .highlight .si { color: $colorLearning } /* Literal.String.Interpol */
-div.highlight > pre > code .sx, code .highlight .sx { color: $colorLearning } /* Literal.String.Other */
-div.highlight > pre > code .sr, code .highlight .sr { color: #009926 } /* Literal.String.Regex */
-div.highlight > pre > code .s1, code .highlight .s1 { color: $colorLearning } /* Literal.String.Single */
-div.highlight > pre > code .ss, code .highlight .ss { color: #990073 } /* Literal.String.Symbol */
-div.highlight > pre > code .bp, code .highlight .bp { color: $colorGray } /* Name.Builtin.Pseudo */
-div.highlight > pre > code .vc, code .highlight .vc { color: #008080 } /* Name.Variable.Class */
-div.highlight > pre > code .vg, code .highlight .vg { color: #008080 } /* Name.Variable.Global */
-div.highlight > pre > code .vi, code .highlight .vi { color: #008080 } /* Name.Variable.Instance */
-div.highlight > pre > code .il, code .highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
diff --git a/app/styles/components/_modules/_in-this-guide.scss b/app/styles/components/_modules/_in-this-guide.scss
deleted file mode 100755
index 5ac4dfc..0000000
--- a/app/styles/components/_modules/_in-this-guide.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
-*
-* In this guide
-*
-**/
-
-.in-this-guide {
-  margin-top: - $lineHeight * 3;
-}
-
-.in-this-guide__title {
-  @include type--medium(true);
-  font-family: $fontHighlight;
-  margin-bottom: $lineHeight;
-}
diff --git a/app/styles/components/_modules/_next-lessons.scss b/app/styles/components/_modules/_next-lessons.scss
deleted file mode 100755
index b3299da..0000000
--- a/app/styles/components/_modules/_next-lessons.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-/**
-*
-* Next Lessons
-*
-**/
-
-.next-lessons {
-  background: $colorGrayDark;
-  padding: $lineHeight $lineHeight $lineHeight * 2;
-  margin-top: $lineHeight;
-  color: #ffffff;
-  position: relative;
-
-  h3 {
-    i {
-      @include medium {
-        display: none;
-      }
-    }
-  }
-
-  &::before,
-  &::after {
-    color: rgba(255, 255, 255, 0.5);
-    position: absolute;
-    display: none;
-
-    @include medium {
-      display: inline-block;
-    }
-  }
-
-  &::before {
-    @include medium {
-      content: attr(data-current-lesson);
-
-      font-family: $fontHighlight;
-      font-size: $fontBase;
-      font-weight: 400;
-      line-height: 1;
-
-      background: $colorGrayDark;
-      display: inline-block;
-      padding: 5px 7px;
-
-      right: 127px;
-      top: 143px;
-
-      z-index: 1;
-      color: rgba(255, 255, 255, 0.5);
-    }
-
-    @include wide {
-      font-size: $fontMedium;
-      padding-left: 15px;
-      padding-right: 15px;
-      top: 126px;
-      right: 230px;
-    }
-
-  }
-
-  &::after {
-    @include medium {
-      content: $icon-lessons;
-      font-family: $fontIcon;
-      font-size: 150px;
-
-      right: 40px;
-      top: 185px;
-    }
-
-    @include wide {
-      font-size: 210px;
-      right: 120px;
-    }
-
-  }
-}
diff --git a/app/styles/components/_modules/_page-header.scss b/app/styles/components/_modules/_page-header.scss
deleted file mode 100755
index ac7e24e..0000000
--- a/app/styles/components/_modules/_page-header.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
-*
-* Page header
-*
-**/
-
-.page-header {
-  text-align: center;
-
-  .breadcrumbs {
-    text-align: left;
-    color: $colorBlue;
-
-    a {
-      color: $colorBlue;
-    }
-  }
-
-  h3 {
-    color: $colorGrayDark;
-    padding-top: $lineHeight * 2;
-  }
-}
-
-.page-header__excerpt {
-  position: relative;
-  padding-top: 0;
-
-  &:last-child {
-    padding-bottom: $lineHeight * 3;
-  }
-}
diff --git a/app/styles/components/_modules/_quote.scss b/app/styles/components/_modules/_quote.scss
deleted file mode 100755
index 01ca8cc..0000000
--- a/app/styles/components/_modules/_quote.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
-*
-* Quote
-*
-**/
-
-.quote__content {
-  position: relative;
-  font-family: $fontHighlight;
-  @include type--medium;
-  padding-top: $lineHeight * 4;
-  padding-left: $lineHeight;
-
-  @include medium {
-    padding-top: $lineHeight * 2;
-    padding-left: 0;
-  }
-
-  p {
-    border-top: 1px solid $colorGrayKeyline;
-    text-align: right;
-    font-weight: 500;
-    margin-top: $lineHeight/2 - 1;
-    padding-top: $lineHeight/2;
-  }
-
-  &::before {
-    content: open-quote;
-    display: block;
-    position: absolute;
-    font-family: $fontHighlight;
-    font-weight: 700;
-    color: $colorGrayBackground;
-    top: 90px;
-    left: $lineHeight;
-    font-size: 260px;
-
-    @include medium {
-      top: 225px;
-      left: -210px;
-      font-size: 540px;
-    }
-  }
-}
diff --git a/app/styles/components/_modules/_related-guides.scss b/app/styles/components/_modules/_related-guides.scss
deleted file mode 100755
index c7890c1..0000000
--- a/app/styles/components/_modules/_related-guides.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
-*
-* Related items
-*
-**/
-
-.related-guides {
-  margin-top: $lineHeight*3;
-  padding-bottom: ($lineHeight*2) - 2;
-  border-top: 2px solid $colorGrayKeyline;
-  padding-top: ($lineHeight*2) - 2;
-}
-
-.related-guides__list {
-  .list-links {
-    padding-top: 0;
-  }
-
-  a {
-    display: block;
-  }
-}
-
-.related-guides__title {
-  @include type--xlarge;
-  padding-top: 0;
-
-  @include medium {
-    padding-top: 0;
-  }
-}
-
-.related-guides__main-link {
-  text-transform: uppercase;
-
-  &::before {
-    content: '#';
-    display: inline-block;
-    padding-right: 2px;
-  }
-}
diff --git a/app/styles/components/_modules/_related-items.scss b/app/styles/components/_modules/_related-items.scss
deleted file mode 100755
index ad021b4..0000000
--- a/app/styles/components/_modules/_related-items.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
-*
-* Related items
-*
-**/
-
-.related-items {
-  background-color: $colorGrayDark;
-  color: #ffffff;
-  padding-bottom: $lineHeight * 2;
-  margin-top: $lineHeight * 2;
-
-  .list-links {
-    a {
-      color: #ffffff;
-    }
-  }
-
-}
diff --git a/app/styles/components/_modules/_summary-header.scss b/app/styles/components/_modules/_summary-header.scss
deleted file mode 100755
index 8605833..0000000
--- a/app/styles/components/_modules/_summary-header.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
-*
-* Editorial Header
-*
-**/
-
-.summary-header {
-  background-color: $colorBlue;
-  padding-bottom: $lineHeight * 3;
-  color: #ffffff;
-  margin-bottom: $lineHeight;
-  box-shadow: inset 0 2px 0 0 #fff;
-
-  .breadcrumbs__link {
-    color: #ffffff;
-  }
-
-}
-
-.summary-header__anchor-list {
-  margin-top: $lineHeight * 2;
-}
-
-
-.summary-header__anchors-item {
-  & a {
-    color: #ffffff;
-  }
-}
diff --git a/app/styles/components/_modules/_toc.scss b/app/styles/components/_modules/_toc.scss
deleted file mode 100755
index 2d9235f..0000000
--- a/app/styles/components/_modules/_toc.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
-*
-* Table of contents
-*
-**/
-
-.toc__title {
-  @include type--medium;
-  font-family: $fontHighlight;
-  padding-bottom: $lineHeight/2;
-  margin-bottom: ($lineHeight/2) - 1;
-  border-bottom: 1px solid $colorGrayKeyline;
-
-  @include medium {
-    padding-bottom: $lineHeight/2;
-    margin-bottom: $lineHeight/2;
-  }
-}
-
-.toc__list {
-  padding-top: 0;
-
-  border-bottom: 1px solid $colorGrayKeyline;
-  padding-bottom: ($lineHeight/2) - 1;
-  margin-bottom: $lineHeight/2;
-
-  a {
-    display: block;
-  }
-}
-
-.toc__sublist {
-  padding-top: 0;
-}
diff --git a/app/styles/components/_normalize.scss b/app/styles/components/_normalize.scss
deleted file mode 100755
index 307edc0..0000000
--- a/app/styles/components/_normalize.scss
+++ /dev/null
@@ -1,405 +0,0 @@
-/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
-
-/**
- * 1. Set default font family to sans-serif.
- * 2. Prevent iOS text size adjust after orientation change, without disabling
- *    user zoom.
- */
-
-html {
-  font-family: sans-serif; /* 1 */
-  -ms-text-size-adjust: 100%; /* 2 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-}
-
-/**
- * Remove default margin.
- */
-
-body {
-  margin: 0;
-}
-
-/* HTML5 display definitions
-   ========================================================================== */
-
-/**
- * Correct `block` display not defined for any HTML5 element in IE 8/9.
- * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
- * Correct `block` display not defined for `main` in IE 11.
- */
-
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-main,
-nav,
-section,
-summary {
-  display: block;
-}
-
-/**
- * 1. Correct `inline-block` display not defined in IE 8/9.
- * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
- */
-
-audio,
-canvas,
-progress,
-video {
-  display: inline-block; /* 1 */
-  vertical-align: baseline; /* 2 */
-}
-
-/**
- * Prevent modern browsers from displaying `audio` without controls.
- * Remove excess height in iOS 5 devices.
- */
-
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-
-/**
- * Address `[hidden]` styling not present in IE 8/9/10.
- * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
- */
-
-[hidden],
-template {
-  display: none;
-}
-
-/* Links
-   ========================================================================== */
-
-/**
- * Remove the gray background color from active links in IE 10.
- */
-
-a {
-  background: transparent;
-}
-
-/**
- * Improve readability when focused and also mouse hovered in all browsers.
- */
-
-a:active,
-a:hover {
-  outline: 0;
-}
-
-/* Text-level semantics
-   ========================================================================== */
-
-/**
- * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
- */
-
-abbr[title] {
-  border-bottom: 1px dotted;
-}
-
-/**
- * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
- */
-
-b,
-strong {
-  font-weight: bold;
-}
-
-/**
- * Address styling not present in Safari and Chrome.
- */
-
-dfn {
-  font-style: italic;
-}
-
-
-/**
- * Address styling not present in IE 8/9.
- */
-
-mark {
-  background: #ff0;
-  color: #000;
-}
-
-
-/**
- * Prevent `sub` and `sup` affecting `line-height` in all browsers.
- */
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sup {
-  top: -0.5em;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-/* Embedded content
-   ========================================================================== */
-
-/**
- * Remove border when inside `a` element in IE 8/9/10.
- */
-
-img {
-  border: 0;
-}
-
-/**
- * Correct overflow not hidden in IE 9/10/11.
- */
-
-svg:not(:root) {
-  overflow: hidden;
-}
-
-/* Grouping content
-   ========================================================================== */
-
-/**
- * Remove margin
- */
-
-figure {
-  margin: 0;
-}
-
-/**
- * Address differences between Firefox and other browsers.
- */
-
-hr {
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
-  height: 0;
-}
-
-/**
- * Contain overflow in all browsers.
- */
-
-pre {
-  overflow: auto;
-}
-
-/**
- * Address odd `em`-unit font size rendering in all browsers.
- */
-
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-
-/* Forms
-   ========================================================================== */
-
-/**
- * Known limitation: by default, Chrome and Safari on OS X allow very limited
- * styling of `select`, unless a `border` property is set.
- */
-
-/**
- * 1. Correct color not being inherited.
- *    Known issue: affects color of disabled elements.
- * 2. Correct font properties not being inherited.
- * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
- */
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  color: inherit; /* 1 */
-  font: inherit; /* 2 */
-  margin: 0; /* 3 */
-}
-
-/**
- * Address `overflow` set to `hidden` in IE 8/9/10/11.
- */
-
-button {
-  overflow: visible;
-}
-
-/**
- * Address inconsistent `text-transform` inheritance for `button` and `select`.
- * All other form control elements do not inherit `text-transform` values.
- * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
- * Correct `select` style inheritance in Firefox.
- */
-
-button,
-select {
-  text-transform: none;
-}
-
-/**
- * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
- *    and `video` controls.
- * 2. Correct inability to style clickable `input` types in iOS.
- * 3. Improve usability and consistency of cursor style between image-type
- *    `input` and others.
- */
-
-button,
-html input[type="button"], /* 1 */
-input[type="reset"],
-input[type="submit"] {
-  -webkit-appearance: button; /* 2 */
-  cursor: pointer; /* 3 */
-}
-
-/**
- * Re-set default cursor for disabled elements.
- */
-
-button[disabled],
-html input[disabled] {
-  cursor: default;
-}
-
-/**
- * Remove inner padding and border in Firefox 4+.
- */
-
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-  border: 0;
-  padding: 0;
-}
-
-/**
- * Address Firefox 4+ setting `line-height` on `input` using `!important` in
- * the UA stylesheet.
- */
-
-input {
-  line-height: normal;
-}
-
-/**
- * It's recommended that you don't attempt to style these elements.
- * Firefox's implementation doesn't respect box-sizing, padding, or width.
- *
- * 1. Address box sizing set to `content-box` in IE 8/9/10.
- * 2. Remove excess padding in IE 8/9/10.
- */
-
-input[type="checkbox"],
-input[type="radio"] {
-  box-sizing: border-box; /* 1 */
-  padding: 0; /* 2 */
-}
-
-/**
- * Fix the cursor style for Chrome's increment/decrement buttons. For certain
- * `font-size` values of the `input`, it causes the cursor style of the
- * decrement button to change from `default` to `text`.
- */
-
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/**
- * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
- * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
- *    (include `-moz` to future-proof).
- */
-
-input[type="search"] {
-  -webkit-appearance: textfield; /* 1 */
-  -moz-box-sizing: content-box;
-  -webkit-box-sizing: content-box; /* 2 */
-  box-sizing: content-box;
-}
-
-/**
- * Remove inner padding and search cancel button in Safari and Chrome on OS X.
- * Safari (but not Chrome) clips the cancel button when the search input has
- * padding (and `textfield` appearance).
- */
-
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/**
- * 1. Correct `color` not being inherited in IE 8/9/10/11.
- * 2. Remove padding so people aren't caught out if they zero out fieldsets.
- */
-
-legend {
-  border: 0; /* 1 */
-  padding: 0; /* 2 */
-}
-
-/**
- * Remove default vertical scrollbar in IE 8/9/10/11.
- */
-
-textarea {
-  overflow: auto;
-}
-
-/**
- * Don't inherit the `font-weight` (applied by a rule above).
- * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
- */
-
-optgroup {
-  font-weight: bold;
-}
-
-/* Tables
-   ========================================================================== */
-
-/**
- * Remove most spacing between table cells.
- */
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-td,
-th {
-  padding: 0;
-}
-
-
-/* Blockquote
-   ========================================================================== */
-blockquote {
-  margin: 0;
-}
diff --git a/app/styles/components/_pages/_page-resources.scss b/app/styles/components/_pages/_page-resources.scss
deleted file mode 100755
index 0ef4a87..0000000
--- a/app/styles/components/_pages/_page-resources.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
-*
-* Resources page
-*
-**/
-
-.page--resources {
-  & .article-section__icon,
-  & .articles-count,
-  & .guides-list__item .secondary-content {
-    display: none;
-  }
-
-  & .primary-content {
-    padding-top: $lineHeight;
-    padding-bottom: $lineHeight*2;
-
-    p {
-      margin-top: 0;
-    }
-  }
-
-}
diff --git a/app/styles/components/_pages/_styleguide.scss b/app/styles/components/_pages/_styleguide.scss
deleted file mode 100755
index a58550d..0000000
--- a/app/styles/components/_pages/_styleguide.scss
+++ /dev/null
@@ -1,82 +0,0 @@
-/**
-*
-* Styleguide
-*
-**/
-
-.page--styleguide {
-
-  .styleguide__module-title {
-    margin-bottom: $lineHeight;
-  }
-
-  section {
-    margin-bottom: $lineHeight*2;
-    border-bottom: 1px solid #ccc;
-    padding-bottom: $lineHeight*3 - 1;
-
-  }
-
-  .styleguide__color-list {
-    text-align: center;
-
-    li {
-      border-bottom: $lineHeight*2 solid;
-      margin-bottom: $lineHeight;
-      position: relative;
-    }
-  }
-
-  .styleguide__breadcrumb .breadcrumbs {
-    display: block;
-  }
-
-  .styleguide__lists {
-    ul,
-    ol {
-      margin-bottom: $lineHeight;
-    }
-  }
-
-  .styleguide__inverted-block {
-    background: #e8e8e8;
-    padding: 0 13px;
-  }
-
-  .styleguide__theme-block {
-    background: $colorLayouts;
-    padding: 0 13px;
-  }
-
-}
-
-.demo {
-  margin-bottom: $lineHeight;
-  margin-top: $lineHeight;
-}
-
-.demo {
-  [class*="g-"] {
-    background-color: $colorGrayLight;
-    position: relative;
-    margin-bottom: $lineHeight;
-    min-height: $lineHeight*6;
-
-    &::before,
-    &::after {
-      @include type--small;
-      display: block;
-      margin: 0 10px;
-    }
-
-    &::before {
-      content: 'HTML classes: ';
-      font-weight: 700;
-    }
-
-    &::after {
-      content: attr(class);
-      word-spacing: 15px;
-    }
-  }
-}
diff --git a/app/styles/components/_palette.scss b/app/styles/components/_palette.scss
deleted file mode 100755
index 8b63d30..0000000
--- a/app/styles/components/_palette.scss
+++ /dev/null
@@ -1,336 +0,0 @@
-/**
-*
-* Material design color palettes.
-* @see http://www.google.com/design/spec/style/color.html
-*
-**/
-
-/* ==========  Blacks  ========== */
-
-$colorBlack: #000;
-$colorTransparent: rgba(255,255,255,0);
-$colorGrayDark: rgba($colorBlack, .87);
-$colorGray: rgba($colorBlack, .54);
-$colorGrayLight: rgba($colorBlack, .26);
-$colorGrayLighter: rgba($colorBlack, .12);
-
-/* ==========  Color Palettes  ========== */
-
-$paletteRed: #fde0dc #f9bdbb #f69988 #f36c60 #e84e40 #e51c23 #dd191d
-           #d01716 #c41411 #b0120a #ff7997 #ff5177 #ff2d6f #e00032;
-
-$palettePink:   #fce4ec #f8bbd0 #f48fb1 #f06292 #ec407a #e91e63 #d81b60
-              #c2185b #ad1457 #880e4f #ff80ab #ff4081 #f50057 #c51162;
-
-$palettePurple: #f3e5f5 #e1bee7 #ce93d8 #ba68c8 #ab47bc #9c27b0 #8e24aa
-              #7b1fa2 #6a1b9a #4a148c #ea80fc #e040fb #d500f9 #aa00ff;
-
-$paletteDeepPurple: #673ab7 #ede7f6 #d1c4e9 #b39ddb #9575cd #7e57c2 #673ab7
-                  #5e35b1 #512da8 #4527a0 #311b92 #b388ff #7c4dff #651fff
-                  #6200ea;
-
-$paletteIndigo: #e8eaf6 #c5cae9 #9fa8da #7986cb #5c6bc0 #3f51b5 #3949ab
-              #303f9f #283593 #1a237e #8c9eff #536dfe #3d5afe #304ffe;
-
-$paletteBlue: #e7e9fd #d0d9ff #afbfff #91a7ff #738ffe #5677fc #4e6cef
-            #455ede #3b50ce #2a36b1 #a6baff #6889ff #4d73ff #4d69ff;
-
-$paletteLightBlue: #e1f5fe #b3e5fc #81d4fa #4fc3f7 #29b6f6 #03a9f4 #039be5
-                 #0288d1 #0277bd #01579b #80d8ff #40c4ff #00b0ff #0091ea;
-
-$paletteCyan: #e0f7fa #b2ebf2 #80deea #4dd0e1 #26c6da #00bcd4 #00acc1
-            #0097a7 #00838f #006064 #84ffff #18ffff #00e5ff #00b8d4;
-
-$paletteTeal: #e0f2f1 #b2dfdb #80cbc4 #4db6ac #26a69a #009688 #00897b
-            #00796b #00695c #004d40 #a7ffeb #64ffda #1de9b6 #00bfa5;
-
-$paletteGreen: #d0f8ce #a3e9a4 #72d572 #42bd41 #2baf2b #259b24 #0a8f08
-             #0a7e07 #056f00 #0d5302 #a2f78d #5af158 #14e715 #12c700;
-
-$paletteLightGreen: #f1f8e9 #dcedc8 #c5e1a5 #aed581 #9ccc65 #8bc34a #7cb342
-                  #689f38 #558b2f #33691e #ccff90 #b2ff59 #76ff03 #64dd17;
-
-$paletteLime: #f9fbe7 #f0f4c3 #e6ee9c #dce775 #d4e157 #cddc39 #c0ca33
-            #afb42b #9e9d24 #827717 #f4ff81 #eeff41 #c6ff00 #aeea00;
-
-$paletteYellow: #fffde7 #fff9c4 #fff59d #fff176 #ffee58 #ffeb3b #fdd835
-              #fbc02d #f9a825 #f57f17 #ffff8d #ffff00 #ffea00 #ffd600;
-
-$paletteAmber: #fff8e1 #ffecb3 #ffe082 #ffd54f #ffca28 #ffc107 #ffb300
-             #ffa000 #ff8f00 #ff6f00 #ffe57f #ffd740 #ffc400 #ffab00;
-
-$paletteOrange: #fff3e0 #ffe0b2 #ffcc80 #ffb74d #ffa726 #ff9800 #fb8c00
-              #f57c00 #ef6c00 #e65100 #ffd180 #ffab40 #ff9100 #ff6d00;
-
-$paletteDeepOrange: #fbe9e7 #ffccbc #ffab91 #ff8a65 #ff7043 #ff5722 #f4511e
-                  #e64a19 #d84315 #bf360c #ff9e80 #ff6e40 #ff3d00 #dd2c00;
-
-$paletteBrown: #efebe9 #d7ccc8 #bcaaa4 #a1887f #8d6e63
-             #795548 #6d4c41 #5d4037 #4e342e #3e2723;
-
-$paletteBlueGrey: #eceff1 #cfd8dc #b0bec5 #90a4ae #78909c
-                #607d8b #546e7a #455a64 #37474f #263238;
-
-/* ==========  Color definitions  ========== */
-
-$colorRed50:   nth($paletteRed, 1);
-$colorRed100:  nth($paletteRed, 2);
-$colorRed200:  nth($paletteRed, 3);
-$colorRed300:  nth($paletteRed, 4);
-$colorRed400:  nth($paletteRed, 5);
-$colorRed500:  nth($paletteRed, 6);
-$colorRed600:  nth($paletteRed, 7);
-$colorRed700:  nth($paletteRed, 8);
-$colorRed800:  nth($paletteRed, 9);
-$colorRed900:  nth($paletteRed, 10);
-$colorRedA100: nth($paletteRed, 11);
-$colorRedA200: nth($paletteRed, 12);
-$colorRedA400: nth($paletteRed, 13);
-$colorRedA700: nth($paletteRed, 14);
-
-$colorPink50:   nth($palettePink, 1);
-$colorPink100:  nth($palettePink, 2);
-$colorPink200:  nth($palettePink, 3);
-$colorPink300:  nth($palettePink, 4);
-$colorPink400:  nth($palettePink, 5);
-$colorPink500:  nth($palettePink, 6);
-$colorPink600:  nth($palettePink, 7);
-$colorPink700:  nth($palettePink, 8);
-$colorPink800:  nth($palettePink, 9);
-$colorPink900:  nth($palettePink, 10);
-$colorPinkA100: nth($palettePink, 11);
-$colorPinkA200: nth($palettePink, 12);
-$colorPinkA400: nth($palettePink, 13);
-$colorPinkA700: nth($palettePink, 14);
-
-$colorPurple50:   nth($palettePurple, 1);
-$colorPurple100:  nth($palettePurple, 2);
-$colorPurple200:  nth($palettePurple, 3);
-$colorPurple300:  nth($palettePurple, 4);
-$colorPurple400:  nth($palettePurple, 5);
-$colorPurple500:  nth($palettePurple, 6);
-$colorPurple600:  nth($palettePurple, 7);
-$colorPurple700:  nth($palettePurple, 8);
-$colorPurple800:  nth($palettePurple, 9);
-$colorPurple900:  nth($palettePurple, 10);
-$colorPurpleA100: nth($palettePurple, 11);
-$colorPurpleA200: nth($palettePurple, 12);
-$colorPurpleA400: nth($palettePurple, 13);
-$colorPurpleA700: nth($palettePurple, 14);
-
-$colorDeepPurple50:   nth($paletteDeepPurple, 1);
-$colorDeepPurple100:  nth($paletteDeepPurple, 2);
-$colorDeepPurple200:  nth($paletteDeepPurple, 3);
-$colorDeepPurple300:  nth($paletteDeepPurple, 4);
-$colorDeepPurple400:  nth($paletteDeepPurple, 5);
-$colorDeepPurple500:  nth($paletteDeepPurple, 6);
-$colorDeepPurple600:  nth($paletteDeepPurple, 7);
-$colorDeepPurple700:  nth($paletteDeepPurple, 8);
-$colorDeepPurple800:  nth($paletteDeepPurple, 9);
-$colorDeepPurple900:  nth($paletteDeepPurple, 10);
-$colorDeepPurpleA100: nth($paletteDeepPurple, 11);
-$colorDeepPurpleA200: nth($paletteDeepPurple, 12);
-$colorDeepPurpleA400: nth($paletteDeepPurple, 13);
-$colorDeepPurpleA700: nth($paletteDeepPurple, 14);
-
-$colorIndigo50:   nth($paletteIndigo, 1);
-$colorIndigo100:  nth($paletteIndigo, 2);
-$colorIndigo200:  nth($paletteIndigo, 3);
-$colorIndigo300:  nth($paletteIndigo, 4);
-$colorIndigo400:  nth($paletteIndigo, 5);
-$colorIndigo500:  nth($paletteIndigo, 6);
-$colorIndigo600:  nth($paletteIndigo, 7);
-$colorIndigo700:  nth($paletteIndigo, 8);
-$colorIndigo800:  nth($paletteIndigo, 9);
-$colorIndigo900:  nth($paletteIndigo, 10);
-$colorIndigoA100: nth($paletteIndigo, 11);
-$colorIndigoA200: nth($paletteIndigo, 12);
-$colorIndigoA400: nth($paletteIndigo, 13);
-$colorIndigoA700: nth($paletteIndigo, 14);
-
-$colorBlue50:   nth($paletteBlue, 1);
-$colorBlue100:  nth($paletteBlue, 2);
-$colorBlue200:  nth($paletteBlue, 3);
-$colorBlue300:  nth($paletteBlue, 4);
-$colorBlue400:  nth($paletteBlue, 5);
-$colorBlue500:  nth($paletteBlue, 6);
-$colorBlue600:  nth($paletteBlue, 7);
-$colorBlue700:  nth($paletteBlue, 8);
-$colorBlue800:  nth($paletteBlue, 9);
-$colorBlue900:  nth($paletteBlue, 10);
-$colorBlueA100: nth($paletteBlue, 11);
-$colorBlueA200: nth($paletteBlue, 12);
-$colorBlueA400: nth($paletteBlue, 13);
-$colorBlueA700: nth($paletteBlue, 14);
-
-$colorLightBlue50:   nth($paletteLightBlue, 1);
-$colorLightBlue100:  nth($paletteLightBlue, 2);
-$colorLightBlue200:  nth($paletteLightBlue, 3);
-$colorLightBlue300:  nth($paletteLightBlue, 4);
-$colorLightBlue400:  nth($paletteLightBlue, 5);
-$colorLightBlue500:  nth($paletteLightBlue, 6);
-$colorLightBlue600:  nth($paletteLightBlue, 7);
-$colorLightBlue700:  nth($paletteLightBlue, 8);
-$colorLightBlue800:  nth($paletteLightBlue, 9);
-$colorLightBlue900:  nth($paletteLightBlue, 10);
-$colorLightBlueA100: nth($paletteLightBlue, 11);
-$colorLightBlueA200: nth($paletteLightBlue, 12);
-$colorLightBlueA400: nth($paletteLightBlue, 13);
-$colorLightBlueA700: nth($paletteLightBlue, 14);
-
-$colorCyan50:   nth($paletteCyan, 1);
-$colorCyan100:  nth($paletteCyan, 2);
-$colorCyan200:  nth($paletteCyan, 3);
-$colorCyan300:  nth($paletteCyan, 4);
-$colorCyan400:  nth($paletteCyan, 5);
-$colorCyan500:  nth($paletteCyan, 6);
-$colorCyan600:  nth($paletteCyan, 7);
-$colorCyan700:  nth($paletteCyan, 8);
-$colorCyan800:  nth($paletteCyan, 9);
-$colorCyan900:  nth($paletteCyan, 10);
-$colorCyanA100: nth($paletteCyan, 11);
-$colorCyanA200: nth($paletteCyan, 12);
-$colorCyanA400: nth($paletteCyan, 13);
-$colorCyanA700: nth($paletteCyan, 14);
-
-$colorTeal50:   nth($paletteTeal, 1);
-$colorTeal100:  nth($paletteTeal, 2);
-$colorTeal200:  nth($paletteTeal, 3);
-$colorTeal300:  nth($paletteTeal, 4);
-$colorTeal400:  nth($paletteTeal, 5);
-$colorTeal500:  nth($paletteTeal, 6);
-$colorTeal600:  nth($paletteTeal, 7);
-$colorTeal700:  nth($paletteTeal, 8);
-$colorTeal800:  nth($paletteTeal, 9);
-$colorTeal900:  nth($paletteTeal, 10);
-$colorTealA100: nth($paletteTeal, 11);
-$colorTealA200: nth($paletteTeal, 12);
-$colorTealA400: nth($paletteTeal, 13);
-$colorTealA700: nth($paletteTeal, 14);
-
-$colorGreen50:   nth($paletteGreen, 1);
-$colorGreen100:  nth($paletteGreen, 2);
-$colorGreen200:  nth($paletteGreen, 3);
-$colorGreen300:  nth($paletteGreen, 4);
-$colorGreen400:  nth($paletteGreen, 5);
-$colorGreen500:  nth($paletteGreen, 6);
-$colorGreen600:  nth($paletteGreen, 7);
-$colorGreen700:  nth($paletteGreen, 8);
-$colorGreen800:  nth($paletteGreen, 9);
-$colorGreen900:  nth($paletteGreen, 10);
-$colorGreenA100: nth($paletteGreen, 11);
-$colorGreenA200: nth($paletteGreen, 12);
-$colorGreenA400: nth($paletteGreen, 13);
-$colorGreenA700: nth($paletteGreen, 14);
-
-$colorLightGreen50:   nth($paletteLightGreen, 1);
-$colorLightGreen100:  nth($paletteLightGreen, 2);
-$colorLightGreen200:  nth($paletteLightGreen, 3);
-$colorLightGreen300:  nth($paletteLightGreen, 4);
-$colorLightGreen400:  nth($paletteLightGreen, 5);
-$colorLightGreen500:  nth($paletteLightGreen, 6);
-$colorLightGreen600:  nth($paletteLightGreen, 7);
-$colorLightGreen700:  nth($paletteLightGreen, 8);
-$colorLightGreen800:  nth($paletteLightGreen, 9);
-$colorLightGreen900:  nth($paletteLightGreen, 10);
-$colorLightGreenA100: nth($paletteLightGreen, 11);
-$colorLightGreenA200: nth($paletteLightGreen, 12);
-$colorLightGreenA400: nth($paletteLightGreen, 13);
-$colorLightGreenA700: nth($paletteLightGreen, 14);
-
-$colorLime50:   nth($paletteLime, 1);
-$colorLime100:  nth($paletteLime, 2);
-$colorLime200:  nth($paletteLime, 3);
-$colorLime300:  nth($paletteLime, 4);
-$colorLime400:  nth($paletteLime, 5);
-$colorLime500:  nth($paletteLime, 6);
-$colorLime600:  nth($paletteLime, 7);
-$colorLime700:  nth($paletteLime, 8);
-$colorLime800:  nth($paletteLime, 9);
-$colorLime900:  nth($paletteLime, 10);
-$colorLimeA100: nth($paletteLime, 11);
-$colorLimeA200: nth($paletteLime, 12);
-$colorLimeA400: nth($paletteLime, 13);
-$colorLimeA700: nth($paletteLime, 14);
-
-$colorYellow50:   nth($paletteYellow, 1);
-$colorYellow100:  nth($paletteYellow, 2);
-$colorYellow200:  nth($paletteYellow, 3);
-$colorYellow300:  nth($paletteYellow, 4);
-$colorYellow400:  nth($paletteYellow, 5);
-$colorYellow500:  nth($paletteYellow, 6);
-$colorYellow600:  nth($paletteYellow, 7);
-$colorYellow700:  nth($paletteYellow, 8);
-$colorYellow800:  nth($paletteYellow, 9);
-$colorYellow900:  nth($paletteYellow, 10);
-$colorYellowA100: nth($paletteYellow, 11);
-$colorYellowA200: nth($paletteYellow, 12);
-$colorYellowA400: nth($paletteYellow, 13);
-$colorYellowA700: nth($paletteYellow, 14);
-
-$colorAmber50:   nth($paletteAmber, 1);
-$colorAmber100:  nth($paletteAmber, 2);
-$colorAmber200:  nth($paletteAmber, 3);
-$colorAmber300:  nth($paletteAmber, 4);
-$colorAmber400:  nth($paletteAmber, 5);
-$colorAmber500:  nth($paletteAmber, 6);
-$colorAmber600:  nth($paletteAmber, 7);
-$colorAmber700:  nth($paletteAmber, 8);
-$colorAmber800:  nth($paletteAmber, 9);
-$colorAmber900:  nth($paletteAmber, 10);
-$colorAmberA100: nth($paletteAmber, 11);
-$colorAmberA200: nth($paletteAmber, 12);
-$colorAmberA400: nth($paletteAmber, 13);
-$colorAmberA700: nth($paletteAmber, 14);
-
-$colorOrange50:   nth($paletteOrange, 1);
-$colorOrange100:  nth($paletteOrange, 2);
-$colorOrange200:  nth($paletteOrange, 3);
-$colorOrange300:  nth($paletteOrange, 4);
-$colorOrange400:  nth($paletteOrange, 5);
-$colorOrange500:  nth($paletteOrange, 6);
-$colorOrange600:  nth($paletteOrange, 7);
-$colorOrange700:  nth($paletteOrange, 8);
-$colorOrange800:  nth($paletteOrange, 9);
-$colorOrange900:  nth($paletteOrange, 10);
-$colorOrangeA100: nth($paletteOrange, 11);
-$colorOrangeA200: nth($paletteOrange, 12);
-$colorOrangeA400: nth($paletteOrange, 13);
-$colorOrangeA700: nth($paletteOrange, 14);
-
-$colorDeepOrange50:   nth($paletteDeepOrange, 1);
-$colorDeepOrange100:  nth($paletteDeepOrange, 2);
-$colorDeepOrange200:  nth($paletteDeepOrange, 3);
-$colorDeepOrange300:  nth($paletteDeepOrange, 4);
-$colorDeepOrange400:  nth($paletteDeepOrange, 5);
-$colorDeepOrange500:  nth($paletteDeepOrange, 6);
-$colorDeepOrange600:  nth($paletteDeepOrange, 7);
-$colorDeepOrange700:  nth($paletteDeepOrange, 8);
-$colorDeepOrange800:  nth($paletteDeepOrange, 9);
-$colorDeepOrange900:  nth($paletteDeepOrange, 10);
-$colorDeepOrangeA100: nth($paletteDeepOrange, 11);
-$colorDeepOrangeA200: nth($paletteDeepOrange, 12);
-$colorDeepOrangeA400: nth($paletteDeepOrange, 13);
-$colorDeepOrangeA700: nth($paletteDeepOrange, 14);
-
-$colorBrown50:   nth($paletteBrown, 1);
-$colorBrown100:  nth($paletteBrown, 2);
-$colorBrown200:  nth($paletteBrown, 3);
-$colorBrown300:  nth($paletteBrown, 4);
-$colorBrown400:  nth($paletteBrown, 5);
-$colorBrown500:  nth($paletteBrown, 6);
-$colorBrown600:  nth($paletteBrown, 7);
-$colorBrown700:  nth($paletteBrown, 8);
-$colorBrown800:  nth($paletteBrown, 9);
-$colorBrown900:  nth($paletteBrown, 10);
-
-$colorBlueGrey50:   nth($paletteBlueGrey, 1);
-$colorBlueGrey100:  nth($paletteBlueGrey, 2);
-$colorBlueGrey200:  nth($paletteBlueGrey, 3);
-$colorBlueGrey300:  nth($paletteBlueGrey, 4);
-$colorBlueGrey400:  nth($paletteBlueGrey, 5);
-$colorBlueGrey500:  nth($paletteBlueGrey, 6);
-$colorBlueGrey600:  nth($paletteBlueGrey, 7);
-$colorBlueGrey700:  nth($paletteBlueGrey, 8);
-$colorBlueGrey800:  nth($paletteBlueGrey, 9);
-$colorBlueGrey900:  nth($paletteBlueGrey, 10);
diff --git a/app/styles/components/_themed.scss b/app/styles/components/_themed.scss
deleted file mode 100755
index 48647c6..0000000
--- a/app/styles/components/_themed.scss
+++ /dev/null
@@ -1,112 +0,0 @@
-/**
-*
-* Themed styles
-*
-**/
-
-.themed {
-
-  .theme--multi-device-layouts & { color: $colorLayouts; }
-
-  .theme--introduction-to-media & { color: $colorMedia; }
-
-  .theme--user-input & { color: $colorUser; }
-
-  .theme--performance & { color: $colorPerformance; }
-
-}
-
-.themed--background {
-
-  .theme--multi-device-layouts &,
-  .theme--multi-device-layouts &.next-lessons::before { background-color: $colorLayouts; }
-
-  .theme--introduction-to-media &,
-  .theme--introduction-to-media &.next-lessons::before { background-color: $colorMedia; }
-
-  .theme--user-input &,
-  .theme--user-input &.next-lessons::before { background-color: $colorUser; }
-
-  .theme--performance &,
-  .theme--performance &.next-lessons::before { background-color: $colorPerformance; }
-
-}
-
-.themed--hover {
-
-  .theme--multi-device-layouts &:hover { color: $colorLayouts; }
-
-  .theme--introduction-to-media &:hover { color: $colorMedia; }
-
-  .theme--user-input &:hover { color: $colorUser; }
-
-  .theme--performance &:hover { color: $colorPerformance; }
-
-}
-
-.themed--hover-secondary {
-
-  .theme--multi-device-layouts &:hover { color: $colorLayoutsSecondary; }
-
-  .theme--introduction-to-media &:hover { color: $colorMediaSecondary; }
-
-  .theme--user-input &:hover { color: $colorUserSecondary; }
-
-  .theme--performance &:hover { color: $colorPerformanceSecondary; }
-
-}
-
-
-// Wrapped content in .article-container so we can
-// encapsulate what needs to be themed without overriding
-// anything outside of this container.
-.article-container h1,
-.article-container h2 {
-
-  .article--multi-device-layouts & { color: $colorLayouts; }
-
-  .article--introduction-to-media & { color: $colorMedia; }
-
-  .article--user-input & { color: $colorUser; }
-
-  .article--performance & { color: $colorPerformance; }
-}
-
-
-// Let's make sure this is at the end so we can override
-// previous rules. Specicifity rules.
-.themed--hover {
-
-  .nav-theme--multi-device-layouts &:hover { color: $colorLayouts; }
-
-  .nav-theme--introduction-to-media &:hover { color: $colorMedia; }
-
-  .nav-theme--user-input &:hover { color: $colorUser; }
-
-  .nav-theme--performance &:hover { color: $colorPerformance; }
-
-}
-
-.themed {
-
-  .nav-theme--multi-device-layouts & { color: $colorLayouts; }
-
-  .nav-theme--introduction-to-media & { color: $colorMedia; }
-
-  .nav-theme--user-input & { color: $colorUser; }
-
-  .nav-theme--performance & { color: $colorPerformance; }
-
-}
-
-.themed--background {
-
-  .nav-theme--multi-device-layouts & { background-color: $colorLayouts; }
-
-  .nav-theme--introduction-to-media & { background-color: $colorMedia; }
-
-  .nav-theme--user-input & { background-color: $colorUser; }
-
-  .nav-theme--performance & { background-color: $colorPerformance; }
-
-}
diff --git a/app/styles/components/_utils.scss b/app/styles/components/_utils.scss
deleted file mode 100755
index 35e6630..0000000
--- a/app/styles/components/_utils.scss
+++ /dev/null
@@ -1,417 +0,0 @@
-/**
-*
-* Utils
-*
-**/
-
-/*==========  VARIABLES  ==========*/
-
-  // Defining breakpoints
-  $medium: 620px !default;
-  $wide: 800px !default;
-  $huge: 1600px !default;
-  $mediumContainer: 688px !default;
-  $wideContainer: 864px !default;
-
-  // Defining grid sizes
-  $mediumColCount: 3 !default;
-  $mediumColWidth: 30.3% !default;
-  $mediumGutterWidth: 4.5% !default;
-  $wideColCount: 4 !default;
-  $wideColWidth: 22.2% !default;
-  $wideGutterWidth: 3.7% !default;
-
-  // Defining colors
-  $colorBlue: #3372df !default;
-  $colorBlueSecondary: lighten($colorBlue, 30%) !default;
-  $colorGreen: #0f9d58 !default;
-  $colorGreenSecondary: lighten($colorGreen, 30%) !default;
-  $colorRed: #cb4437 !default;
-  $colorRedSecondary: lighten($colorRed, 30%) !default;
-  $colorYellow: #f4b400 !default;
-  $colorYellowSecondary: lighten($colorYellow, 20%) !default;
-
-  $colorRemember: #09829a !default;
-  $colorLearning: #da2e75 !default;
-
-  $colorGrayBackground: #f0f0f0 !default;
-  $colorGrayKeyline: #e0e0e0 !default;
-  $colorGray: #737373 !default;
-  $colorGrayLight: #eeeeee !default;
-  $colorGrayDark: #404040 !default;
-
-  $colorText: $colorGrayDark !default;
-  $colorHighlight: $colorBlue !default;
-  $colorWarning: $colorYellowSecondary !default;
-  $colorMuted: $colorGray !default;
-  $colorDanger: $colorRed !default;
-
-  $colorLayouts: #297ea9 !default;
-  $colorLayoutsSecondary: lighten($colorLayouts, 30%) !default;
-  $colorUser: #2c8566 !default;
-  $colorUserSecondary: lighten($colorUser, 30%) !default;
-  $colorMedia: #cf423a !default;
-  $colorMediaSecondary: lighten($colorMedia, 30%) !default;
-  $colorPerformance: #7b5294 !default;
-  $colorPerformanceSecondary: lighten($colorPerformance, 30%) !default;
-
-  // Defining font family
-  $fontDefault: Helvetica, Arial, sans-serif !default;
-  $fontHighlight: 'Roboto Condensed', Helvetica, sans-serif !default;
-  $fontIcon: 'icons' !default;
-
-  // Defining font sizes
-  $fontSmall: 13px !default;
-  $fontBase: 16px  !default;
-  $fontMedium: 20px !default;
-  $fontLarge: 26px !default;
-  $fontXLarge: 42px !default;
-  $fontXXLarge: 68px !default;
-  $fontHuge: 110px !default;
-
-  // Defining baseline line height
-  $lineHeight: 26px !default;
-
-  // Defining animation easings
-  $animationEasing: cubic-bezier(0.455, 0.030, 0.515, 0.955) !default;
-
-  // Defining sidebar stuff
-  $sidebarWidth: 280px !default;
-
-
-/*==========  FUNCTIONS  ==========*/
-
-  @function leading($size, $context: $lineHeight) {
-    @return  $context / $size + em;
-  }
-
-
-/*==========  MIXINS  ==========*/
-
-  @mixin media-query($media-query) {
-    @if $media-query == small {
-      @media only screen and (max-width: $medium - 1) { @content; }
-    }
-
-    @if $media-query == medium {
-      @media only screen and (min-width: $medium) { @content; }
-    }
-
-    @if $media-query == medium-only {
-      @media only screen and (min-width: $medium) and (max-width: $wide - 1) { @content; }
-    }
-
-    @if $media-query == wide {
-      @media only screen and (min-width: $wide) { @content; }
-    }
-
-    @if $media-query == huge {
-      @media only screen and (min-width: $huge) { @content; }
-    }
-  }
-
-  // Just some helpers...
-  @mixin small-only { @include media-query(small) { @content }; }
-  @mixin medium { @include media-query(medium) { @content }; }
-  @mixin medium-only { @include media-query(medium-only) { @content }; }
-  @mixin wide { @include media-query(wide) { @content }; }
-  @mixin huge { @include media-query(huge) { @content }; }
-
-  // Mixin to constrain elements
-  @mixin container($isRelative: false) {
-    box-sizing: content-box;
-
-    @if $isRelative {
-      position: relative;
-    }
-
-    padding-left: 5%;
-    padding-right: 5%;
-    margin-left: auto;
-    margin-right: auto;
-
-
-    @include medium {
-      padding-left: 4.8%;
-      padding-right: 4.8%;
-      max-width: $mediumContainer;
-    }
-
-    @include wide {
-      padding-left: 4.4%;
-      padding-right: 4.4%;
-      max-width: $wideContainer;
-    }
-  }
-
-
-
-  // Mixin to show a baseline grid
-  // only visible when body has 'debug' class
-  @mixin baseline-grid() {
-    position: relative;
-
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      width: 100%;
-      z-index: 9;
-
-      display: none;
-      background-image: linear-gradient(to bottom, rgba(0,0,0,0.15) 95%,rgba(0,0,0,0.15) 100%);
-
-      background-size: 100% 26px;
-    }
-
-    &.debug::after {
-      display: block;
-      pointer-events: none;
-    }
-  }
-
-  // Mixins simply to store CSS rules
-  @mixin rule--small {
-    font-size: $fontSmall;
-    line-height: 2.0000em; /* 26px */
-    padding-top: 2.0000em;
-    padding-bottom: 0;
-  }
-
-  @mixin rule--base {
-    font-size: $fontBase;
-    line-height: 1.6250em; /* 26px */
-    padding-top: 1.6250em;
-    padding-bottom: 0;
-  }
-
-  @mixin rule--medium {
-    font-size: $fontMedium;
-    font-weight: 300;
-    line-height: 1.3000em; /* 26px */
-    padding-top: 1.3000em;
-    padding-bottom: 0;
-  }
-
-  @mixin rule--large {
-    font-family: $fontHighlight;
-    font-size: $fontLarge;
-    font-weight: 300;
-    line-height: 1.0000em; /* 26px */
-    padding-top: 1.0000em;
-    padding-bottom: 0;
-  }
-
-  @mixin rule--xlarge {
-    font-family: $fontHighlight;
-    font-size: $fontXLarge;
-    font-weight: 300;
-    line-height: 1.2381em; /* 52px */
-    padding-top: 0.6190em;
-    padding-bottom: 0;
-  }
-
-  @mixin rule--xxlarge {
-    font-family: $fontHighlight;
-    font-size: $fontXXLarge;
-    font-weight: 300;
-    line-height: 1.1471em; /* 78px */
-    padding-top: 0.3824em;
-    padding-bottom: 0;
-  }
-
-  @mixin rule--huge {
-    font-family: $fontHighlight;
-    font-size: $fontHuge;
-    font-weight: 300;
-    line-height: 1.19em; /* 130px */
-    padding-top: 0.2364em;
-    padding-bottom: 0;
-  }
-
-
-
-  // Mixins to determine which rule to use at which breakpoint
-  @mixin type--small($isFromMixin: false) {
-    @include rule--small;
-  }
-
-  @mixin type--base($isFromMixin: false) {
-    @include rule--base;
-  }
-
-  @mixin type--medium($isFromMixin: false) {
-    @if $isFromMixin == false {
-      @include type--base(true);
-      @include wide {
-        @include rule--medium;
-      }
-    }
-    @else {
-      @include rule--medium;
-    }
-  }
-
-  @mixin type--large($isFromMixin: false) {
-    @if $isFromMixin == false {
-      @include type--medium(true);
-      @include wide {
-        @include rule--large;
-      }
-    }
-    @else {
-      @include rule--large;
-    }
-  }
-
-  @mixin type--xlarge($isFromMixin: false) {
-    @if $isFromMixin == false {
-      @include type--large(true);
-      @include wide {
-        @include rule--xlarge;
-      }
-    }
-    @else {
-      @include rule--xlarge;
-    }
-  }
-
-  @mixin type--xxlarge($isFromMixin: false) {
-    @if $isFromMixin == false {
-      @include type--xlarge(true);
-      @include wide {
-        @include rule--xxlarge;
-      }
-    }
-    @else {
-      @include rule--xxlarge;
-    }
-  }
-
-  @mixin type--huge($isFromMixin: false) {
-    @if $isFromMixin == false {
-      @include type--xxlarge(true);
-      @include wide {
-        @include rule--huge;
-      }
-    }
-    @else {
-      @include rule--huge;
-    }
-  }
-
-
-  // LISTS
-  @mixin bullet-type($bullet, $icon: false) {
-    &::before {
-      @if $icon {
-        font-family: $fontIcon;
-        @extend .#{$icon}::before;
-        font-size: $fontSmall;
-      }
-      @else {
-        content: $bullet;
-        font-family: $fontHighlight;
-      }
-
-      display: block;
-      font-weight: 400;
-      position: absolute;
-      top: 0;
-      left: 0;
-      line-height: $lineHeight;
-
-    }
-  }
-
-  @mixin numbered-list() {
-    &::before {
-      counter-increment: list;
-      content: '0' counter(list);
-      color: inherit;
-      font-weight: 400;
-      display: inline-block;
-      position: absolute;
-      left: 0;
-    }
-  }
-
-  // Mixin to create links
-  @mixin style-cta($textColor, $linkIcon: false) {
-    font-family: $fontHighlight;
-    color: $textColor;
-    font-weight: 400;
-    display: inline-block;
-    line-height: 1;
-
-    &:hover {
-      color: $colorGrayDark;
-    }
-
-    @if $linkIcon {
-      text-decoration: none;
-      &::before {
-        display: inline-block;
-        padding-right: 10px;
-        font-family: $fontIcon;
-        line-height: ($lineHeight) - 1; // remove 1px from line-height to fix baseline alignment
-        font-size: $fontSmall;
-        content: $linkIcon;
-      }
-    }
-  }
-
-  // Mixin to create highlight modules
-  @mixin highlight-symbol($verticalOffset: 0, $horizontalOffset: 45px, $fontSize: 130px) {
-    position: relative;
-
-    &::before {
-      display: none;
-
-      @include medium {
-        display: block;
-        position: absolute;
-        top: 106px;
-        right: $horizontalOffset;
-
-        font-family: $fontIcon;
-        font-size: $fontSize;
-        line-height: 1px;
-        text-align: center;
-        height: 100%;
-        width: $mediumColWidth;
-        color: #ffffff;
-      }
-
-      .highlight-module--left & {
-        right: auto;
-        left: $horizontalOffset;
-      }
-
-      @include wide {
-        top: 134px;
-        width: $wideColWidth;
-        font-size: $fontSize + 50;
-
-        .highlight-module--large & {
-          font-size: $fontSize + 300;
-        }
-      }
-    }
-  }
-
-  // Grid CSS rules
-  @mixin rule--col($mediaQuery) {
-    @if $mediaQuery == medium {
-      float: left;
-      margin-right: $mediumGutterWidth;
-    }
-
-    @if $mediaQuery == wide {
-      float: left;
-      margin-right: $wideGutterWidth;
-    }
-  }
diff --git a/app/styles/components/components.scss b/app/styles/components/components.scss
deleted file mode 100755
index 8c68f8a..0000000
--- a/app/styles/components/components.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
-*
-* Main Stylesheet For Visual Style Guide
-*
-**/
-
-@import '_utils';
-@import '_normalize';
-@import '_global';
-
-// Icons - Leave it here to otherfiles can extend if needed
-@import '_components/_icons';
-
-// Color Palette
-@import '_palette';
-
-// Modules
-@import '_modules/_highlight';
-@import '_modules/_editorial-header';
-@import '_modules/_summary-header';
-@import '_modules/_related-guides';
-@import '_modules/_in-this-guide';
-@import '_modules/_articles-section';
-@import '_modules/_guides-section';
-@import '_modules/_page-header';
-@import '_modules/_featured-section';
-@import '_modules/_featured-spotlight';
-@import '_modules/_quote';
-@import '_modules/_article-nav';
-@import '_modules/_did-you-know';
-@import '_modules/_toc';
-@import '_modules/_next-lessons';
-
-// Components
-@import '_components/_grid';
-@import '_components/_typography';
-@import '_components/_button';
-@import '_components/_list';
-@import '_components/_link';
-@import '_components/_table';
-@import '_components/_media';
-@import '_components/_breadcrumb';
-@import '_components/_subsection-title';
-@import '_components/_articles-list';
-@import '_components/_guides-list';
-@import '_components/_icon-circle';
-
-// Themed styles
-@import '_themed';
-
-// Pages
-@import '_pages/_styleguide';
-@import '_pages/_page-resources';
-
-// Make sure this is last to override anything else :)
-@import '_helper';
diff --git a/app/styles/main.css b/app/styles/main.css
new file mode 100755
index 0000000..1c9ea79
--- /dev/null
+++ b/app/styles/main.css
@@ -0,0 +1,14 @@
+/*
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+
+body {
+  background: #fafafa;
+  font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  color: #333;
+}
diff --git a/app/styles/main.scss b/app/styles/main.scss
deleted file mode 100755
index f452b0c..0000000
--- a/app/styles/main.scss
+++ /dev/null
@@ -1,366 +0,0 @@
-/*
- * Web Starter Kit
- *
- * Multi-screen layout styles for your page. Brought to you by the
- * Web Starter Kit team.
- *
- */
-@import '_h5bp';
-
-/*
- * Visual Style Guide styles
- * Remove if you prefer to use a CSS library, like Bootstrap
- */
-@import 'components/components';
-
-html,
-body {
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  position: relative;
-  font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif;
-  font-weight: 300;
-  background-color: #fff;
-  box-sizing: border-box;
-  min-height: 100%;
-}
-
-body.open {
-  overflow: hidden;
-}
-
-.app-bar {
-  display: block;
-  width: 100%;
-  position: fixed;
-  top: 0;
-  left: 0;
-  background-color: #4285f4;
-  overflow: hidden;
-  z-index: 1;
-}
-
-.app-bar-container {
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  height: 60px;
-  position: relative;
-  -webkit-flex-direction: row;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  margin: 0 auto;
-}
-
-.app-bar.open,
-.app-bar.open ~ main {
-  -webkit-transform: translate(250px, 0);
-          transform: translate(250px, 0);
-}
-
-.app-bar .logo {
-  -webkit-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
-  font-size: 2em;
-  line-height: 60px;
-  margin: 0 16px;
-  padding: 0;
-  color: #fefefe;
-  float: none;
-  max-width: none;
-  font-weight: 300;
-  display: initial;
-}
-
-.app-bar .logo a {
-  text-decoration: none;
-  color: inherit;
-  font-weight: normal;
-}
-
-.app-bar-actions {
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  z-index: 2;
-}
-
-.app-bar button {
-  width: 60px;
-  height: 60px;
-  background-image: none;
-  background-color: transparent;
-  border: none;
-  padding: 0;
-  display: inline-block;
-  -webkit-transition: background-color 0.2s ease-out;
-          transition: background-color 0.2s ease-out;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.app-bar button img {
-  height: 24px;
-  width: 24px;
-}
-
-.app-bar button:hover {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
-.app-bar button:focus {
-  background-color: rgba(255, 255, 255, 0.2);
-  outline: 0;
-}
-
-.app-bar button:active {
-  background-color: rgba(255, 255, 255, 0.4);
-}
-
-.promote-layer {
-  /*
-  This may promote the layer to a composited
-  layer.
-
-  Replace with will-change when available
-
-  #perfmatters
-  */
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
-}
-
-.base,
-p,
-ul,
-ol {
-  font-size: 19px;
-}
-
-.navdrawer-container {
-  z-index: 1;
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  width: 250px;
-  height: 100%;
-  background-color: #3367D6;
-  color: #fefefe;
-  -webkit-transform: translate(-250px, 0);
-          transform: translate(-250px, 0);
-  overflow-y: auto;
-}
-
-.navdrawer-container.open {
-  -webkit-transform: translate(0, 0);
-          transform: translate(0, 0);
-}
-
-.app-bar,
-.navdrawer-container.opened,
-main {
-  -webkit-transition: -webkit-transform 0.3s ease-out;
-          transition: transform 0.3s ease-out;
-}
-
-.navdrawer-container h4,
-.navdrawer-container ul li a {
-  height: 60px;
-  padding: 17px 20px;
-  line-height: 1.4;
-}
-
-.navdrawer-container h4 {
-  background-color: white;
-  color: #3367D6;
-}
-
-.navdrawer-container ul {
-  padding: 0;
-  margin: 0;
-  list-style-type: none;
-}
-
-.navdrawer-container ul li a {
-  display: block;
-  text-decoration: none;
-  color: white;
-  -webkit-transition: background-color 0.2s ease-out;
-          transition: background-color 0.2s ease-out;
-  white-space: nowrap;
-}
-
-.navdrawer-container ul li {
-  border-bottom-style: solid;
-  border-width: 1px;
-  border-color: white;
-  padding: 0;
-}
-
-.navdrawer-container ul li::before {
-  content: none;
-}
-
-.navdrawer-container ul li a:hover {
-  background-color: rgba(255, 255, 255, 0.2);
-}
-
-.navdrawer-container ul li a:focus {
-  background-color: rgba(255, 255, 255, 0.3);
-  outline: 0;
-}
-
-.navdrawer-container ul li a:active {
-  background-color: rgba(255, 255, 255, 0.4);
-}
-
-main {
-  margin: 0 auto;
-  /* Height of the header */
-  padding: 60px 16px 16px 16px;
-  min-height: 100%;
-}
-
-/** Larger Screens - desktops and tablets **/
-@media all and (min-width: 990px) {
-  .app-bar {
-    position: relative;
-  }
-
-  .app-bar.open,
-  .app-bar.open ~ main {
-    -webkit-transform: translate(0px, 0);
-            transform: translate(0px, 0);
-  }
-
-  .app-bar-container {
-    display: block;
-    height: 130px;
-    max-width: 864px;
-    padding: 0 16px;
-    box-sizing: border-box;
-    background-color: #4285f4;
-  }
-
-  .app-bar .logo {
-    float: left;
-    margin: 0;
-    padding: 0;
-    line-height: 130px;
-    font-size: 46px;
-  }
-
-  .app-bar-actions {
-    float: right;
-  }
-
-  .app-bar::after {
-    content: ' ';
-    display: block;
-    height: 0;
-    overflow: hidden;
-    clear: both;
-  }
-
-  button.menu {
-    display: none;
-  }
-
-  .navdrawer-container {
-    position: relative;
-    width: 100%;
-    height: auto;
-    margin-top: 0;
-    -webkit-transform: translate(0, 0);
-            transform: translate(0, 0);
-    -webkit-transition: none;
-            transition: none;
-    overflow-y: auto;
-  }
-
-  .navdrawer-container h4 {
-    display: none;
-  }
-
-  .navdrawer-container ul {
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-    max-width: 864px;
-    margin: 0 auto;
-    -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-            flex-direction: row;
-  }
-
-  .navdrawer-container ul li {
-    border: none;
-  }
-
-  main {
-    max-width: 864px;
-    padding-top: 0;
-    min-height: initial;
-  }
-
-  body {
-    overflow-y: scroll;
-  }
-}
-
-@font-face {
-  font-family: 'Roboto Condensed';
-  font-style: normal;
-  font-weight: 300;
-  src: url(/fonts/RobotoCondensed-Light.eot);
-  src: local('Roboto Condensed Light'), local('RobotoCondensed-Light'), url(/fonts/RobotoCondensed-Light.eot) format('embedded-opentype'), url(/fonts/RobotoCondensed-Light.woff) format('woff');
-}
-
-@font-face {
-  font-family: 'Roboto Condensed';
-  font-style: normal;
-  font-weight: 400;
-  src: url(/fonts/RobotoCondensed-Regular.eot);
-  src: local('Roboto Condensed Regular'), local('RobotoCondensed-Regular'), url(/fonts/RobotoCondensed-Regular.eot) format('embedded-opentype'), url(/fonts/RobotoCondensed-Regular.woff) format('woff');
-}
-
-@font-face {
-  font-family: 'Roboto Condensed';
-  font-style: normal;
-  font-weight: 700;
-  src: url(/fonts/RobotoCondensed-Bold.eot);
-  src: local('Roboto Condensed Regular'), local('RobotoCondensed-Bold'), url(/fonts/RobotoCondensed-Bold.eot) format('embedded-opentype'), url(/fonts/RobotoCondensed-Bold.woff) format('woff');
-}
-
-@font-face {
-  font-family: 'Roboto Condensed';
-  font-style: italic;
-  font-weight: 300;
-  src: url(/fonts/RobotoCondensed-LightItalic.eot);
-  src: local('Roboto Condensed Light Italic'), local('RobotoCondensed-LightItalic'), url(/fonts/RobotoCondensed-LightItalic.eot) format('embedded-opentype'), url(/fonts/RobotoCondensed-LightItalic.woff) format('woff');
-}
-
-@font-face {
-  font-family: 'Roboto Condensed';
-  font-style: italic;
-  font-weight: 400;
-  src: url(/fonts/RobotoCondensed-Italic.eot);
-  src: local('Roboto Condensed Italic'), local('RobotoCondensed-Italic'), url(/fonts/RobotoCondensed-Italic.eot) format('embedded-opentype'), url(/fonts/RobotoCondensed-Italic.woff) format('woff');
-}
-
-@font-face {
-  font-family: 'Roboto Condensed';
-  font-style: italic;
-  font-weight: 700;
-  src: url(/fonts/RobotoCondensed-BoldItalic.eot);
-  src: local('Roboto Condensed Bold Italic'), local('RobotoCondensed-BoldItalic'), url(/fonts/RobotoCondensed-BoldItalic.eot) format('embedded-opentype'), url(/fonts/RobotoCondensed-BoldItalic.woff) format('woff');
-}
diff --git a/app/sw-import.js b/app/sw-import.js
new file mode 100755
index 0000000..cb7fb1f
--- /dev/null
+++ b/app/sw-import.js
@@ -0,0 +1,10 @@
+/*
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+
+importScripts('bower_components/platinum-sw/service-worker.js');
diff --git a/app/test/index.html b/app/test/index.html
new file mode 100755
index 0000000..d8cb5cd
--- /dev/null
+++ b/app/test/index.html
@@ -0,0 +1,32 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<!doctype html>
+<html>
+
+  <head>
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+    <title>Elements Test Runner</title>
+    <meta charset="UTF-8">
+
+    <script src="../../bower_components/webcomponentsjs/webcomponents.min.js"></script>
+    <script src="../../bower_components/web-component-tester/browser.js"></script>
+  </head>
+
+  <body>
+
+    <script>
+      WCT.loadSuites(['my-greeting-basic.html', 'my-list-basic.html']);
+    </script>
+
+
+  </body>
+
+</html>
diff --git a/app/test/my-greeting-basic.html b/app/test/my-greeting-basic.html
new file mode 100755
index 0000000..628e662
--- /dev/null
+++ b/app/test/my-greeting-basic.html
@@ -0,0 +1,53 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<!doctype html>
+<html>
+<head>
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <title>my-greeting-basic</title>
+
+  <script src="../../bower_components/webcomponentsjs/webcomponents.min.js"></script>
+  <link rel="import" href="../../bower_components/polymer/polymer.html">
+  <script src="../../bower_components/web-component-tester/browser.js"></script>
+  <script src="../../bower_components/test-fixture/test-fixture-mocha.js"></script>
+  <link rel="import" href="../../bower_components/test-fixture/test-fixture.html">
+
+  <!-- Step 1: import the element to test -->
+  <link rel="import" href="../elements/my-greeting/my-greeting.html">
+
+</head>
+<body>
+
+  <test-fixture id="basic">
+    <template>
+      <my-greeting></my-greeting>
+    </template>
+  </test-fixture>
+
+  <script>
+
+    suite('my-greeting tests', function() {
+      var greeting, header;
+
+      setup(function() {
+        greeting = fixture('basic');
+      });
+
+      test('Welcome!', function() {
+        header = greeting.querySelector('h1');
+        assert.equal(header.textContent, 'Welcome!');
+      });
+
+    });
+  </script>
+
+</body>
+</html>
diff --git a/app/test/my-list-basic.html b/app/test/my-list-basic.html
new file mode 100755
index 0000000..31803fd
--- /dev/null
+++ b/app/test/my-list-basic.html
@@ -0,0 +1,68 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<!doctype html>
+<html>
+<head>
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <title>my-list-basic</title>
+
+  <script src="../../bower_components/webcomponentsjs/webcomponents.min.js"></script>
+  <link rel="import" href="../../bower_components/polymer/polymer.html">
+  <script src="../../bower_components/web-component-tester/browser.js"></script>
+  <script src="../../bower_components/test-fixture/test-fixture-mocha.js"></script>
+  <link rel="import" href="../../bower_components/test-fixture/test-fixture.html">
+
+  <!-- Step 1: import the element to test -->
+  <link rel="import" href="../elements/my-list/my-list.html">
+
+</head>
+<body>
+
+  <test-fixture id="basic">
+    <template>
+       <my-list></my-list>
+    </template>
+  </test-fixture>
+
+  <script>
+    suite('my-list tests', function() {
+      var list, listItems;
+
+      setup(function() {
+        list = fixture('basic');
+      });
+
+      test('Item lengths should be equalled', function(done) {
+        // Test a property
+        // TODO: Fix list.items.push('Foo') causing a WeakMap exception
+        // Invalid value used as weak map key
+        list.items = [
+            'Responsive Web App boilerplate',
+            'Iron Elements and Paper Elements',
+            'End-to-end Build Tooling (including Vulcanize)',
+            'Unit testing with Web Component Tester',
+            'Routing with Page.js',
+            'Offline support with the Platinum Service Worker Elements'
+            ];
+
+        // Data bindings will stamp out new DOM asynchronously
+        // so wait to check for updates
+        flush(function() {
+          listItems = list.querySelectorAll('li');
+          assert.equal(list.items.length, listItems.length);
+          done();
+        });
+      })
+    });
+  </script>
+
+</body>
+</html>
diff --git a/bower.json b/bower.json
old mode 100644
new mode 100755
index 8367d4f..8531751
--- a/bower.json
+++ b/bower.json
@@ -9,7 +9,7 @@
   "main": "index.html",
   "license": "MIT",
   "private": true,
-  "ignore": [
+	"ignore": [
     "**/.*",
     "node_modules",
     "bower_components",
@@ -18,7 +18,14 @@
     "tests"
   ],
   "dependencies": {
-    "polymer": "Polymer/polymer#~0.5.2",
-    "webcomponentsjs": "~0.5.2"
+    "iron-elements": "PolymerElements/iron-elements#1.0.0",
+    "paper-elements": "PolymerElements/paper-elements#1.0.1",
+    "platinum-elements": "PolymerElements/platinum-elements#1.0.1",
+    "neon-elements": "PolymerElements/neon-elements#1.0.0",
+    "page": "visionmedia/page.js#~1.6.3"
+  },
+  "devDependencies": {
+    "web-component-tester": "*",
+    "test-fixture": "PolymerElements/test-fixture#^1.0.0"
   }
 }
diff --git a/gulpfile.js b/gulpfile.js
new file mode 100755
index 0000000..f4624ec
--- /dev/null
+++ b/gulpfile.js
@@ -0,0 +1,246 @@
+/*
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+
+'use strict';
+
+// Include Gulp & Tools We'll Use
+var gulp = require('gulp');
+var $ = require('gulp-load-plugins')();
+var del = require('del');
+var runSequence = require('run-sequence');
+var browserSync = require('browser-sync');
+var reload = browserSync.reload;
+var merge = require('merge-stream');
+var path = require('path');
+var fs = require('fs');
+var glob = require('glob');
+
+var AUTOPREFIXER_BROWSERS = [
+  'ie >= 10',
+  'ie_mob >= 10',
+  'ff >= 30',
+  'chrome >= 34',
+  'safari >= 7',
+  'opera >= 23',
+  'ios >= 7',
+  'android >= 4.4',
+  'bb >= 10'
+];
+
+var styleTask = function (stylesPath, srcs) {
+  return gulp.src(srcs.map(function(src) {
+      return path.join('app', stylesPath, src);
+    }))
+    .pipe($.changed(stylesPath, {extension: '.css'}))
+    .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
+    .pipe(gulp.dest('.tmp/' + stylesPath))
+    .pipe($.if('*.css', $.cssmin()))
+    .pipe(gulp.dest('dist/' + stylesPath))
+    .pipe($.size({title: stylesPath}));
+};
+
+// Compile and Automatically Prefix Stylesheets
+gulp.task('styles', function () {
+  return styleTask('styles', ['**/*.css']);
+});
+
+gulp.task('elements', function () {
+  return styleTask('elements', ['**/*.css']);
+});
+
+// Lint JavaScript
+gulp.task('jshint', function () {
+  return gulp.src([
+      'app/scripts/**/*.js',
+      'app/elements/**/*.js',
+      'app/elements/**/*.html'
+    ])
+    .pipe(reload({stream: true, once: true}))
+    .pipe($.jshint.extract()) // Extract JS from .html files
+    .pipe($.jshint())
+    .pipe($.jshint.reporter('jshint-stylish'))
+    .pipe($.if(!browserSync.active, $.jshint.reporter('fail')));
+});
+
+// Optimize Images
+gulp.task('images', function () {
+  return gulp.src('app/images/**/*')
+    .pipe($.cache($.imagemin({
+      progressive: true,
+      interlaced: true
+    })))
+    .pipe(gulp.dest('dist/images'))
+    .pipe($.size({title: 'images'}));
+});
+
+// Copy All Files At The Root Level (app)
+gulp.task('copy', function () {
+  var app = gulp.src([
+    'app/*',
+    '!app/test',
+    '!app/precache.json'
+  ], {
+    dot: true
+  }).pipe(gulp.dest('dist'));
+
+  var bower = gulp.src([
+    'bower_components/**/*'
+  ]).pipe(gulp.dest('dist/bower_components'));
+
+  var elements = gulp.src(['app/elements/**/*.html'])
+    .pipe(gulp.dest('dist/elements'));
+
+  var swBootstrap = gulp.src(['bower_components/platinum-sw/bootstrap/*.js'])
+    .pipe(gulp.dest('dist/elements/bootstrap'));
+
+  var swToolbox = gulp.src(['bower_components/sw-toolbox/*.js'])
+    .pipe(gulp.dest('dist/sw-toolbox'));
+
+  var vulcanized = gulp.src(['app/elements/elements.html'])
+    .pipe($.rename('elements.vulcanized.html'))
+    .pipe(gulp.dest('dist/elements'));
+
+  return merge(app, bower, elements, vulcanized, swBootstrap, swToolbox)
+    .pipe($.size({title: 'copy'}));
+});
+
+// Copy Web Fonts To Dist
+gulp.task('fonts', function () {
+  return gulp.src(['app/fonts/**'])
+    .pipe(gulp.dest('dist/fonts'))
+    .pipe($.size({title: 'fonts'}));
+});
+
+// Scan Your HTML For Assets & Optimize Them
+gulp.task('html', function () {
+  var assets = $.useref.assets({searchPath: ['.tmp', 'app', 'dist']});
+
+  return gulp.src(['app/**/*.html', '!app/{elements,test}/**/*.html'])
+    // Replace path for vulcanized assets
+    .pipe($.if('*.html', $.replace('elements/elements.html', 'elements/elements.vulcanized.html')))
+    .pipe(assets)
+    // Concatenate And Minify JavaScript
+    .pipe($.if('*.js', $.uglify({preserveComments: 'some'})))
+    // Concatenate And Minify Styles
+    // In case you are still using useref build blocks
+    .pipe($.if('*.css', $.cssmin()))
+    .pipe(assets.restore())
+    .pipe($.useref())
+    // Minify Any HTML
+    .pipe($.if('*.html', $.minifyHtml({
+      quotes: true,
+      empty: true,
+      spare: true
+    })))
+    // Output Files
+    .pipe(gulp.dest('dist'))
+    .pipe($.size({title: 'html'}));
+});
+
+// Vulcanize imports
+gulp.task('vulcanize', function () {
+  var DEST_DIR = 'dist/elements';
+
+  return gulp.src('dist/elements/elements.vulcanized.html')
+    .pipe($.vulcanize({
+      dest: DEST_DIR,
+      strip: true,
+      inlineCss: true,
+      inlineScripts: true
+    }))
+    .pipe(gulp.dest(DEST_DIR))
+    .pipe($.size({title: 'vulcanize'}));
+});
+
+// Generate a list of files that should be precached when serving from 'dist'.
+// The list will be consumed by the <platinum-sw-cache> element.
+gulp.task('precache', function (callback) {
+  var dir = 'dist';
+
+  glob('{elements,scripts,styles}/**/*.*', {cwd: dir}, function(error, files) {
+    if (error) {
+      callback(error);
+    } else {
+      files.push('index.html', './', 'bower_components/webcomponentsjs/webcomponents-lite.min.js');
+      var filePath = path.join(dir, 'precache.json');
+      fs.writeFile(filePath, JSON.stringify(files), callback);
+    }
+  });
+});
+
+// Clean Output Directory
+gulp.task('clean', del.bind(null, ['.tmp', 'dist']));
+
+// Watch Files For Changes & Reload
+gulp.task('serve', ['styles', 'elements', 'images'], function () {
+  browserSync({
+    notify: false,
+    snippetOptions: {
+      rule: {
+        match: '<span id="browser-sync-binding"></span>',
+        fn: function (snippet) {
+          return snippet;
+        }
+      }
+    },
+    // Run as an https by uncommenting 'https: true'
+    // Note: this uses an unsigned certificate which on first access
+    //       will present a certificate warning in the browser.
+    // https: true,
+    server: {
+      baseDir: ['.tmp', 'app'],
+      routes: {
+        '/bower_components': 'bower_components'
+      }
+    }
+  });
+
+  gulp.watch(['app/**/*.html'], reload);
+  gulp.watch(['app/styles/**/*.css'], ['styles', reload]);
+  gulp.watch(['app/elements/**/*.css'], ['elements', reload]);
+  gulp.watch(['app/{scripts,elements}/**/*.js'], ['jshint']);
+  gulp.watch(['app/images/**/*'], reload);
+});
+
+// Build and serve the output from the dist build
+gulp.task('serve:dist', ['default'], function () {
+  browserSync({
+    notify: false,
+    snippetOptions: {
+      rule: {
+        match: '<span id="browser-sync-binding"></span>',
+        fn: function (snippet) {
+          return snippet;
+        }
+      }
+    },
+    // Run as an https by uncommenting 'https: true'
+    // Note: this uses an unsigned certificate which on first access
+    //       will present a certificate warning in the browser.
+    // https: true,
+    server: 'dist'
+  });
+});
+
+// Build Production Files, the Default Task
+gulp.task('default', ['clean'], function (cb) {
+  runSequence(
+    ['copy', 'styles'],
+    'elements',
+    ['jshint', 'images', 'fonts', 'html'],
+    'vulcanize', 'precache',
+    cb);
+});
+
+// Load tasks for web-component-tester
+// Adds tasks for `gulp test:local` and `gulp test:remote`
+try { require('web-component-tester').gulp.init(gulp); } catch (err) {}
+
+// Load custom tasks from the `tasks` directory
+try { require('require-dir')('tasks'); } catch (err) {}
diff --git a/package.json b/package.json
old mode 100644
new mode 100755
index a3895c4..8e47b4a
--- a/package.json
+++ b/package.json
@@ -1,29 +1,36 @@
 {
-  "name": "thewebplatform.today",
-  "version": "0.0.0",
-  "description": "The Web Platform Podcast website",
-  "main": "app/index.html",
-  "homepage" : "http://www.thewebplatform.today",
-  "scripts": {
-    "sass" : "sass app/styles/components/components.scss app/styles/components.css && sass app/styles/main.scss app/styles/main.css",
-    "feeds" : "node scripts/rsj.js | json > feed.json",
-    "build" : "npm run sass && npm run feeds",
-    "test": "echo \"Error: no test specified\" && exit 1"
+  "private": true,
+  "devDependencies": {
+    "browser-sync": "^2.7.7",
+    "del": "^1.1.1",
+    "glob": "^5.0.6",
+    "gulp": "^3.8.5",
+    "gulp-autoprefixer": "^2.1.0",
+    "gulp-cache": "^0.2.8",
+    "gulp-changed": "^1.0.0",
+    "gulp-cssmin": "^0.1.7",
+    "gulp-flatten": "0.0.4",
+    "gulp-if": "^1.2.1",
+    "gulp-imagemin": "^2.2.1",
+    "gulp-jshint": "^1.6.3",
+    "gulp-load-plugins": "^0.10.0",
+    "gulp-minify-html": "^1.0.2",
+    "gulp-rename": "^1.2.0",
+    "gulp-replace": "^0.5.3",
+    "gulp-size": "^1.0.0",
+    "gulp-uglify": "^1.2.0",
+    "gulp-uncss": "^1.0.1",
+    "gulp-useref": "^1.1.2",
+    "gulp-vulcanize": "^6.0.0",
+    "jshint-stylish": "^2.0.0",
+    "merge-stream": "^0.1.7",
+    "opn": "^1.0.0",
+    "require-dir": "^0.3.0",
+    "run-sequence": "^1.0.2",
+    "vulcanize": ">= 1.4.2",
+    "web-component-tester": "^3.1.3"
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/thewebplatform/thewebplatform.today.git"
-  },
-  "keywords": [
-    "web-components",
-    "web-platform",
-    "podcast",
-    "polymer"
-  ],
-  "author": "Erik Isaksen",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/thewebplatform/thewebplatform.today/issues"
-  },
-  "homepage": "https://github.com/thewebplatform/thewebplatform.today"
+  "engines": {
+    "node": ">=0.10.0"
+  }
 }
diff --git a/wct.conf.json b/wct.conf.json
new file mode 100755
index 0000000..6278c68
--- /dev/null
+++ b/wct.conf.json
@@ -0,0 +1,3 @@
+{
+  "suites": ["app/test"]
+}