data-sevc: MODIFY-view+suggestedDataser+michellaneus

Renato De Donato
2 parents e0e4a976 025ed52b
Showing 87 changed files with 7945 additions and 2 deletions
bower_components/polymer-element-catalog/.firebaserc.enc
bower_components/polymer-element-catalog/.gitignore
bower_components/polymer-element-catalog/.travis.yml
bower_components/polymer-element-catalog/LICENSE.txt
bower_components/polymer-element-catalog/README.md
bower_components/polymer-element-catalog/app/elements/app-bar/app-bar.css
bower_components/polymer-element-catalog/app/elements/app-bar/app-bar.html
bower_components/polymer-element-catalog/app/elements/app-cart/app-cart.html
bower_components/polymer-element-catalog/app/elements/app-link/app-link.html
bower_components/polymer-element-catalog/app/elements/app-logo/app-logo.html
bower_components/polymer-element-catalog/app/elements/app-shell/app-shell.html
bower_components/polymer-element-catalog/app/elements/app-sidebar/app-sidebar.css
bower_components/polymer-element-catalog/app/elements/app-sidebar/app-sidebar.html
bower_components/polymer-element-catalog/app/elements/app-styles/app-styles.html
bower_components/polymer-element-catalog/app/elements/cart-icon/cart-icon.html
bower_components/polymer-element-catalog/app/elements/cart-item-icon/cart-item-icon.html
bower_components/polymer-element-catalog/app/elements/cart-item/cart-item.html
bower_components/polymer-element-catalog/app/elements/catalog-cart/catalog-cart.html
bower_components/polymer-element-catalog/app/elements/catalog-data/catalog-data.html
bower_components/polymer-element-catalog/app/elements/catalog-element/catalog-element.html
+.tmp
+node_modules
+bower_components
+dist
+npm-debug.log
+.divshot-cache
+language: node_js
+sudo: false
+node_js:
+- 0.12
+before_install:
+- openssl aes-256-cbc -K $encrypted_430815991462_key -iv $encrypted_430815991462_iv
+  -in .firebaserc.enc -out $HOME/.firebaserc -d
+install:
+- npm install
+- "./node_modules/.bin/bower update"
+script: npm run build
+cache:
+  directories:
+  - node_modules
+  - bower_components
+after_success:
+- "./scripts/travis_deploy"
+notifications:
+  slack: polymer:j3IJDjBbXxqzuGRCIDYJ7tIA
+// Copyright (c) 2015 The Polymer Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * 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.
+//    * 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.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" 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.
+# Polymer Element Catalog
+
+## Getting Started
+
+To work on the Polymer Elements Catalog, clone the repository.
+
+To install dependencies:
+
+    npm run deps
+    
+To start a local development server:
+
+    npm run serve
+    
+To start a local development server with `fixtures` turned on:
+
+    FIXTURES=true npm run serve
+    
+To prepare the repo for publication:
+
+    npm run build
+    
+Note: Make sure that you're running chrome 42 or later!
+    
+### Fixtures
+
+While parts of the system are still in flux, it will be necessary to have stubbed
+data and other bits to be able to work against. Anything in the `fixtures`
+directory will be available when running a development server. By the time
+the catalog ships, the `fixtures` directory should be empty.
+
+## Managing Catalog Data
+
+Data for the catalog is compiled by intelligently composing together information
+from multiple sources:
+
+1. The `catalog.json` file in this repository
+2. The `bower.json` for each element package and individual element
+3. Metadata parsed directly elements' source using [hydrolysis](https://github.com/PolymerLabs/hydrolysis)
+4. Other files in package and element repositories, such as guide markdown files
+
+Each of these inputs is combined and compiled into a static format easily loaded
+by the catalog application. Outputs of the catalog compilation process include:
+
+1. A `/data/catalog.json` file heavily annotated with parsed metadata
+2. Pre-parsed element documentation in `/data/docs`
+3. The compiled HTML output of guide markdown files in `/data/guides`
+
+### How `catalog.json` is Created
+
+The final `catalog.json` file can be thought of as the repo's initial file
+decorated substantially with metadata. For instance, a package in the initial
+file:
+
+```json
+{
+  "packages": [
+    {"title":"Iron Elements", "name":"iron-elements"}
+  ]
+}
+```
+
+Gets decorated with metadata parsed from its' `bower.json`:
+
+```json
+{
+  "packages": [
+    {
+      "title":"Iron Elements",
+      "name":"iron-elements",
+      "description":"Polymer core elements",
+      "version":"1.0.0",
+      "tags":["utility","scaffolding","user-input"]
+    }
+  ]
+}
+```
+
+This decoration occurs in steps and can be considered a series of merges.
+
+### Packages
+
+Each set of elements (henceforth "package") is responsible for maintaining its
+own documentation according to the conventions established elsewhere in this
+document. Each package is represented in `catalog.json` as an entry in an array.
+This array corresponds to the order in which packages are presented in nav
+contexts in the element catalog. Each package has the following associated data:
+
+* **name:** the corresponding package name from `bower.json`
+* **title:** the human-friendly name of the package for nav display
+
+Each named package should be declared as a dependency in the `bower.json` for
+this repository. Additionally, each package's version number should be explicit,
+as the version declared in `bower.json` is used as display text in the catalog.
+
+```js
+{
+  // correct example
+  "iron-elements":  "PolymerElements/iron-elements#1.0.0"
+  // incorrect example
+  "paper-elements": "PolymerElements/paper-elements#^1.0"
+}
+```
+
+By maintaining strict versioning in the catalog, updating a package's data
+becomes as easy as a pull request to `bower.json`.
+
+### Package Metadata
+
+As much as possible, the element catalog uses existing conventions from systems
+such as Bower as a repository for metadata.
+
+#### bower.json
+
+The `bower.json` for a package should contain a `dependencies` entry for each of
+its child elements. A declared dependency will be considered a child element of
+the package if and only if its name is identical to the package name before the
+first dash. As an example, if the package is `iron-elements`, `iron-ajax` would
+be considered a child but `polymer` would not.
+
+The element catalog uses the following information from `bower.json`:
+
+* **name:** The package name should correspond to a `packages` entry in the
+  `catalog.json` file in this repository for it to be displayed.
+* **description:** The package description should be phrased such that it can
+  be used as descriptive summary text in the catalog when the package is
+  presented along-side other packages. It should be less than 200 characters
+  in length but adequately descriptive of the primary use cases for the package.
+* **keywords:** Excluding `web-components` and `polymer`, these keywords will be
+  used as **tags** in the final catalog data.
+
+### Elements
+
+Elements behave much like packages: they are responsible for maintaining their
+own documentation in `bower.json`. In addition, the source `.html` files for
+elements should be documented in accordance with the [Polymer Elements style guide](http://polymerelements.github.io/style-guide/).
+
+#### bower.json
+
+The catalog uses the following information from an element's `bower.json`:
+
+* **name:** The element name. Except in rare cases, this should match a `.html`
+  file of the same name that contains the element or imports all default elements
+  for element repos with multiple elements.
+* **description:** A less-than-200 character description of what the element
+  does and how it should be used.
+* **keywords:** Except for `web-components` and `polymer`, these keywords will
+  be used as **tags** in the final catalog data.
+* **main:** This field should represent **every .html file that a user might
+  directly import**. For instance, in `iron-icons` each icon set might be imported
+  separately, so each set should be included in main. For many (most) elements
+  this can just be a string with the `.html` filename matching the `name` field.
+
+### Guides
+
+Guides are in-depth articles that allow for article-style documentation in
+addition to the API documentation for each element parsed using hydrolysis.
+
+Guides are simply Markdown files with YAML front-matter and can be included
+in the repository for the catalog, a package, or an individual element. To
+avoid namespace collisions, guides for packages and individual elements are
+identified with `repo-name/guide-name`, while guides in this repository are
+identified simply with `guide-name`.
+
+Each guide will be listed and accessible in the **Guides** section of the
+catalog, and will additionally be associated with each element and package
+it references.
+
+#### Example Markdown File (e.g. `bower_components/gold-elements/guides/ecommerce.md`)
+
+```markdown
+---
+title: How to Build an E-Commerce Site with Gold Elements
+summary: "Learn how to add drop-in E-commerce components to quickly build a web presence for your business."
+tags: ['ecommerce','beginner']
+elements: ['gold-checkout','paper-input']
+updated: 2015-04-10
+---
+
+Actual article content starts here.
+
+## Example Section
+
+Etc. etc.
+```
+
+#### Example compiled `catalog.json`
+
+```js
+{
+  // guides with associated packages should also be referenced in the package metadata
+  "packages": [
+    {"name":"gold-elements","guides":["gold-elements/ecommerce"]}
+  ],
+  "guides": [
+    {
+      "name":"gold-elements/ecommerce",
+      "title":"How to Build an E-Commerce Site with Gold Elements",
+      "tags":["ecommerce","beginner"],
+      "elements":["gold-checkout","paper-input"],
+      "package":"gold-elements"
+    }
+  ],
+  "elements": [
+     {"name":"paper-input","guides":["gold-elements/ecommerce"]}
+  ]
+}
+```
+
+#### Assets in Guides
+
+If a guide needs images or other assets, those should be stored in `/guides/assets`
+in the repository and always referenced with relative URLs (e.g. `assets/filename.jpg`).
+By maintaining this convention the catalog compilation process will automatically
+ensure that images and other assets are properly accessible to the guide.
 \ No newline at end of file
+:host * {
+  box-sizing: border-box;
+}
+
+:host(.search-on) {
+  left: 0;
+  background: inherit;
+  z-index: 1001;
+}
+
+:host ::content iron-icon {
+  margin-right: 15px;
+  cursor: pointer;
+}
+
+#search {
+  position: relative;
+}
+
+#search iron-icon {
+  margin-right: 0;
+}
+
+#search[show] {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  padding: 0 16px;
+  background: #fff;
+}
+
+#search input {
+  display: none;
+  font-family: var(--primary-font-family);
+  font-size: 15px;
+  width: 100%;
+  padding: 10px;
+  border: 0;
+  border-radius: 2px;
+  -webkit-appearance: none;
+}
+
+#search[show] input {
+  display: block;
+}
+
+#search input:focus {
+  outline: 0;
+}
 \ No newline at end of file
+<dom-module id="app-bar">
+  <!--<link rel="import" type="css" href="app-bar.css">-->
+  <style>
+    :host * {
+      box-sizing: border-box;
+    }
+
+    :host(.search-on) {
+      left: 0;
+      background: inherit;
+      z-index: 1001;
+    }
+
+    :host ::content iron-icon {
+      margin-right: 15px;
+      cursor: pointer;
+    }
+
+    #search {
+      position: relative;
+    }
+
+    #search iron-icon {
+      margin-right: 0;
+    }
+
+    #search[show] {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      padding: 0 16px;
+      background: #fff;
+    }
+
+    #search input {
+      display: none;
+      font-family: var(--primary-font-family);
+      font-size: 15px;
+      width: 100%;
+      padding: 10px;
+      border: 0;
+      border-radius: 2px;
+      -webkit-appearance: none;
+    }
+
+    #search[show] input {
+      display: block;
+    }
+
+    #search input:focus {
+      outline: 0;
+    }
+  </style>
+  <template>
+    <content></content>
+    <div id="search" class="horizontal layout center" show$="{{showingSearch}}" on-tap="toggleSearch">
+      <iron-icon icon="search" hidden$="[[noSearch]]"></iron-icon>
+      <form on-submit="performSearch" class="flex">
+        <input type="search" id="query" value="{{query::keyup}}" autocomplete="off" placeholder="Search Elements" on-blur="clearSearch">
+      </form>
+    </div>
+  </template>
+</dom-module>
+
+<script>
+  Polymer({
+    is: 'app-bar',
+    properties: {
+      query: {
+        type: String,
+        notify: true
+      },
+      showingSearch: {
+        type: Boolean,
+        value: false
+      },
+      noSearch: {
+        type: Boolean,
+        value: false
+      }
+    },
+    observers: [
+      'updateSearchDisplay(showingSearch)'
+    ],
+    listeners: {
+      keyup: 'hotkeys'
+    },
+    toggleSearch: function(e) {
+      if (e) {
+        e.stopPropagation();
+      }
+      if (e.target === this.$.query) {
+        return;
+      }
+
+      this.showingSearch = !this.showingSearch;
+    },
+    clearSearch: function() {
+      this.showingSearch = false;
+    },
+    updateSearchDisplay: function(showingSearch) {
+      if (showingSearch) {
+        this.classList.add('search-on');
+        this.async(function() {
+          this.$.query.focus();
+        });
+      } else {
+        this.classList.remove('search-on');
+      }
+    },
+    hotkeys: function(e) {
+      // ESC
+      if (e.keyCode === 27 && Polymer.dom(e).rootTarget === this.$.query) {
+        this.showingSearch = false;
+      }
+    },
+    performSearch: function(e) {
+      e.preventDefault();
+      this.fire('nav', {url: '/browse?q=' + this.query});
+    }
+  });
+</script>
 \ No newline at end of file
+<link rel="import" href="../../bower_components/paper-toolbar/paper-toolbar.html">
+<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
+<link rel="import" href="../../bower_components/paper-tabs/paper-tab.html">
+<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
+<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
+<link rel="import" href="../../bower_components/paper-radio-group/paper-radio-group.html">
+<link rel="import" href="../../bower_components/paper-radio-button/paper-radio-button.html">
+<link rel="import" href="../../bower_components/paper-button/paper-button.html">
+
+<link rel="import" href="../cart-item/cart-item.html">
+<link rel="import" href="../catalog-cart/catalog-cart.html">
+
+<dom-module id="app-cart">
+  <style>
+    :host {
+      background: white;
+      @apply(--layout-fit);
+      @apply(--layout);
+      @apply(--layout-vertical);
+    }
+
+    #toolbar {
+      color: #666;
+    }
+
+    #toolbar-title {
+      margin-left: 15px;
+    }
+
+    #download {
+      padding: 16px;
+    }
+
+    #dl code {
+      font-weight: bold;
+      color: #3f51b5;
+    }
+
+    #download h4 {
+      font-size: 14px;
+      font-weight: bold;
+      margin: 0;
+    }
+
+    #download > section {
+      margin-bottom: 24px;
+    }
+
+    #download textarea {
+      box-sizing: border-box;
+      display: block;
+      width: 100%;
+      height: 110px;
+      padding: 8px;
+      background: var(--paper-blue-grey-50);
+      border: 1px solid var(--paper-blue-grey-100);
+      border-radius: 2px;
+      font-size: 12px;
+      color: var(--paper-blue-grey-500);
+      resize: none;
+    }
+
+    #download paper-button {
+      background: #e91e63;
+      color: white;
+      margin-top: 10px;
+    }
+
+    paper-tabs {
+      --paper-tabs-selection-bar-color: #304ffe;
+    }
+    paper-tab {
+      --paper-tab-ink: #304ffe;
+    }
+  </style>
+  <template>
+    <catalog-cart id="data" items="{{items}}"></catalog-cart>
+
+    <paper-toolbar id="toolbar">
+      <iron-icon icon="stars"></iron-icon>
+      <span id="toolbar-title" class="flex">My Collection</span>
+      <iron-icon icon="chevron-right" on-tap="close"></iron-icon>
+    </paper-toolbar>
+    <paper-tabs id="tabs" selected="{{_tab}}">
+      <paper-tab name="elements">Elements (<span>[[items.length]]</span>)</paper-tab>
+      <paper-tab name="download">Download</paper-tab>
+    </paper-tabs>
+    <iron-pages selected="[[_tab]]" class="flex">
+      <div id="elements">
+        <template is="dom-repeat" items="[[items]]">
+          <cart-item element="[[item]]" on-remove="_handleRemove"></cart-item>
+        </template>
+      </div>
+      <div id="download">
+        <section>
+          <h4>Download Options</h4>
+
+          <paper-radio-group selected="{{downloadMethod}}" id="dl">
+            <paper-radio-button name="elements">
+              <code>elements folder</code> - the full source for the latest
+              version of all your selected elements
+            </paper-radio-button>
+            <paper-radio-button name="bower">
+              <code>bower.json</code> - just the bower.json file, from which
+              you can run bower install to fetch your elements
+            </paper-radio-button>
+          </paper-radio-group>
+
+          <paper-button raised on-tap="download">Download</paper-button>
+        </section>
+        <section>
+          <h4>Bower Command</h4>
+
+          <p>You can copy the command below and paste it into the terminal to
+          install the elements from your cart into a project that already uses
+          Bower.</p>
+
+          <textarea readonly value="[[_itemsAsBowerCommand(items.*)]]" on-tap="_selectAll"></textarea>
+        </section>
+      </div>
+    </iron-pages>
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'app-cart',
+  enableCustomStyleProperties: true,
+  properties: {
+    items: {
+      type: Array,
+      notify: true
+    },
+    downloadMethod: {
+      type: String,
+      value: 'bower'
+    },
+    _tab: {
+      type: Number,
+      value: 0
+    }
+  },
+  log: function() { console.log(arguments); },
+  close: function() {
+    this.fire('cart-close');
+  },
+  add: function(name) {
+    if (this.includes(name)) {
+      this.fire('toast', {text: "Element " + name + " is already in your collection"});
+    } else if (this.$.data.add(name)) {
+      this.fire('toast', {text: "Element " + name + " has been added to your collection"});
+    }
+  },
+  remove: function(name) {
+    if (name.name) name = name.name;
+    this.$.data.remove(name);
+    this.fire('toast', {text: "Element " + name + " has been removed from your collection"});
+  },
+  _hasAny: function(arr) {
+    return arr && (arr > 0);
+  },
+  _handleRemove: function(e) {
+    this.remove(e.currentTarget.element);
+  },
+  includes: function(el) {
+    return this.$.data.includes(el);
+  },
+  _itemsAsDependencies: function() {
+    var out = {};
+    this.items.forEach(function(item) {
+      out[item.name] = item.source + "#" + item.target;
+    });
+    return out;
+  },
+  _itemsAsQueryString: function() {
+    return this.items.map(function(item) {
+      return item.name + "=" + encodeURIComponent(item.source + "#" + item.target);
+    }).join("&");
+  },
+  _itemsAsBowerCommand: function() {
+    return "bower install --save " + this.items.map(function(item) {
+      if (item) {
+        return item.source + "#" + item.target;
+      }
+    }).join(" ");
+  },
+  _selectAll: function(e) {
+    e.currentTarget.select();
+  },
+  bowerString: function() {
+    return JSON.stringify({
+      name: "polymer-project",
+      dependencies: this._itemsAsDependencies()
+    }, null, 2);
+  },
+  zipUrl: function() {
+    return "http://bowerarchiver.appspot.com/archive?" + this._itemsAsQueryString();
+  },
+  download: function() {
+    var link = document.createElement('a');
+    ga('send', 'event', 'download');
+
+    switch (this.downloadMethod) {
+      case 'bower':
+        var blob = new Blob([this.bowerString()], {type: 'application/json'});
+        var url = URL.createObjectURL(blob);
+        link.href = url;
+        link.download = 'bower.json';
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        break;
+      case 'elements':
+        link.href = this.zipUrl();
+        link.download = 'elements.zip';
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        break;
+    }
+  }
+});
+</script>
 \ No newline at end of file
+<script>
+Polymer({
+  is: 'app-link',
+  extends: 'a',
+  properties: {
+    skipNav: Boolean
+  },
+  listeners: {
+    'click': 'navigate'
+  },
+  navigate: function(e) {
+    // allow for ctrl+click to open in new window
+    if (e.ctrlKey || e.metaKey) {
+      return true;
+    } else {
+      e.preventDefault();
+      if (!this.skipNav) this.fire('nav', {url: this.href});
+    }
+  }
+});
+</script>
 \ No newline at end of file
+<style is="custom-style">
+  * {
+    --app-logo-color: var(--primary-text-color);
+    --app-logo-font-size: 20px;
+  }
+</style>
+
+<dom-module id="app-logo">
+  <style>
+    :host {
+      font-size: var(--app-logo-font-size);
+    }
+
+    a {
+      max-width: 125px;
+      color: var(--app-logo-color);
+      text-transform: none;
+      text-decoration: none;
+    }
+
+    :host([full]) a {
+      max-width: 200px;
+    }
+
+    h1 {
+      font-size: 18px;
+      padding: 0 0 0 16px;
+      font-weight: 500;
+      color: #606060;
+      margin: 0;
+    }
+
+    img {
+      min-width: 36px;
+      padding: 2px;
+      box-sizing: border-box;
+      margin: 6px;
+    }
+  </style>
+  <template>
+    <a href="/" is="pushstate-anchor" class="horizontal layout center">
+      <img src="/images/polymer.svg" width="36" alt="Polymer Logo">
+      <h1 hidden$="[[!full]]">Polymer Catalog</h1>
+      <h1 hidden$="[[full]]">Catalog</h1>
+    </a>
+  </template>
+</dom-module>
+
+<script>
+  Polymer({
+    is: 'app-logo',
+    enableCustomStyleProperties: true,
+    properties: {
+      full: {
+        type: Boolean,
+        value: false
+      }
+    }
+  });
+</script>
+<link rel="import" href="../../bower_components/paper-toolbar/paper-toolbar.html">
+<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/app-router/app-router.html">
+<link rel="import" href="../../bower_components/paper-toast/paper-toast.html">
+
+<link rel="import" href="../app-styles/app-styles.html">
+<link rel="import" href="../app-link/app-link.html">
+<link rel="import" href="../app-logo/app-logo.html">
+<link rel="import" href="../app-cart/app-cart.html">
+<link rel="import" href="../app-bar/app-bar.html">
+<link rel="import" href="../app-sidebar/app-sidebar.html">
+
+<link rel="import" href="../pages/page-packages.html">
+<link rel="import" href="../pages/page-browse.html">
+<link rel="import" href="../pages/page-element.html">
+<link rel="import" href="../pages/page-guide.html">
+<link rel="import" href="../pages/page-not-found.html">
+
+<dom-module id="app-shell">
+  <style>
+    #cartpanel::shadow > #scrim {
+      z-index: 4;
+    }
+    #cartpanel::shadow > #drawer {
+      z-index: 5;
+    }
+
+    paper-toast {
+      z-index: 5;
+    }
+  </style>
+  <template>
+    <paper-drawer-panel id="cartpanel" class="flex" force-narrow right-drawer disable-edge-swipe disable-swipe drawer-width="320px">
+      <div id="main"  main>
+        <app-router id="router" class="flex" mode="pushstate" on-activate-route-end="trackPageview">
+          <app-route path="/" element="page-packages" bindRouter></app-route>
+          <app-route path="/browse" element="page-browse" bindRouter onUrlChange="updateModel"></app-route>
+          <app-route path="/elements/:element" element="page-element" bindRouter onUrlChange="updateModel"></app-route>
+          <app-route path="/guides/:name" element="page-guide" bindRouter></app-route>
+          <app-route path="*" element="page-not-found"></app-route>
+        </app-router>
+      </div>
+      <app-cart id="cart" drawer></app-cart>
+    </paper-drawer-panel>
+  </template>
+</dom-module>
+<script>
+  Polymer({
+    is: 'app-shell',
+    listeners: {
+      'nav': 'handleNav',
+      'page-meta': 'updateTitle',
+      'cart-close': 'cartClose',
+      'cart-open': 'cartOpen',
+      'cart-add': 'cartAdd',
+      'cart-remove': 'cartRemove',
+      'toast': 'showToast'
+    },
+    _toast: null,
+
+    toggleSearch: function() {
+      this.$.search.active = !this.$.search.active;
+    },
+    performSearch: function(e) {
+      e.preventDefault();
+      if (this.query.length) this.$.router.go('/elements?q=' + this.query);
+    },
+    handleNav: function(_, nav) {
+      this.$.router.go(nav.url);
+      this.$.cartpanel.closeDrawer();
+    },
+    updateTitle: function(_, detail) {
+      if (detail.title && detail.title.length) {
+        document.title = detail.title + " - Polymer Element Catalog";
+      } else {
+        document.title = "Polymer Element Catalog";
+      }
+    },
+    cartClose: function() {
+      this.$.cartpanel.closeDrawer();
+    },
+    cartOpen: function() {
+      this.$.cartpanel.openDrawer();
+    },
+    cartAdd: function(e, el) {
+      this.$.cart.add(el);
+    },
+    cartRemove: function(e, el) {
+      this.$.cart.remove(el);
+    },
+    showToast: function(e, detail) {
+      if (!this._toast) {
+        this._toast = document.createElement('paper-toast');
+        Polymer.dom(this.$.router).appendChild(this._toast);
+      }
+      this._toast.text = detail.text;
+      this.async(this._toast.show.bind(this._toast), 1);
+    },
+
+    trackPageview: function(e, detail) {
+      this.debounce('pageview', function() {
+        var loc = window.location.pathname + window.location.search;
+        ga('send', 'pageview', {
+          location: loc,
+          title: document.title
+        });
+        ga('set', 'page', loc);
+      }, 2000);
+    }
+  });
+</script>
 \ No newline at end of file
+:host {
+  height: 100%;
+  box-sizing: border-box;
+  z-index: 2;
+  background: white;
+  border-right: 1px solid #e5e5e5;
+  @apply(--layout);
+  @apply(--layout-vertical);
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+::content paper-toolbar {
+  --paper-toolbar-background: white;
+}
+
+::content .section {
+  margin-bottom: 20px;
+  opacity: 0;
+  transform: translate(0, 100px);
+  transition: var(--material-curve-320);
+}
+
+::content .section:first-child { transition-delay: 100ms; }
+::content .section:nth-child(2) { transition-delay: 200ms; }
+::content .section:nth-child(3) { transition-delay: 300ms; }
+::content .section:nth-child(4) { transition-delay: 400ms; }
+
+::content .active .section {
+  transform: translate(0, 0);
+  opacity: 1;
+}
+
+::content .section h5 {
+  @apply(--paper-font-body2);
+  border-top: 1px solid;
+  border-top-color: var(--divider-color);
+  margin: 24px 0 0 0;
+  padding: 16px 24px 12px 24px;
+}
+
+::content .section p {
+  @apply(--paper-font-body1);
+  color: var(--secondary-text-color);
+  padding: 0 24px;
+  margin: 0;
+}
+
+::content .content {
+  @apply(--layout-vertical);
+}
 \ No newline at end of file
+<style is="custom-style">
+  :root {
+    --app-sidebar-width: 272px;
+    --app-sidebar-background: var(--primary-background-color);
+  }
+</style>
+
+<dom-module id="app-sidebar">
+  <link rel="import" type="css" href="app-sidebar.css">
+  <template>
+    <content></content>
+  </template>
+</dom-module>
+
+<script>
+  Polymer({
+    is: 'app-sidebar',
+    enableCustomStyleProperties: true
+  });
+</script>
 \ No newline at end of file
+<link rel="import" href="../../bower_components/paper-styles/paper-styles.html">
+
+<style is="custom-style">
+  * {
+    box-sizing: border-box;
+  }
+  
+  :root {
+    --iron-icon-size: 24px;
+
+    --primary-font-family: Roboto, 'Noto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+
+    --secondary-background-color: #fafafa;
+
+    --material-curve: cubic-bezier(0.55, 0, 0.1, 1);
+    --material-curve-320: all 320ms cubic-bezier(0.55, 0, 0.1, 1);
+    --material-curve-220: all 220ms cubic-bezier(0.55, 0, 0.1, 1);
+
+    --paper-toolbar-background: #fafafa;
+    --paper-toolbar-color: #424242;
+  }
+</style>
 \ No newline at end of file
+<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
+<link rel="import" href="../catalog-cart/catalog-cart.html">
+
+<dom-module id="cart-icon">
+  <style>
+    :host {
+      display: inline-block;
+      line-height: 40px;
+      width: 40px;
+      height: 40px;
+      cursor: pointer;
+      text-align: center;
+    }
+
+    iron-icon {
+      margin-top: -2px;
+    }
+
+    :host(.full) iron-icon {
+      color: var(--paper-pink-500);
+    }
+  </style>
+  <template>
+    <catalog-cart items="{{cartItems}}"></catalog-cart>
+    <iron-icon icon="stars"></iron-icon>
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'cart-icon',
+  listeners: {
+    tap: 'openCart'
+  },
+  observers: [
+    '_anyItems(cartItems.length)'
+  ],
+  openCart: function() {
+    this.fire('cart-open');
+  },
+  _anyItems: function() {
+    if (this.cartItems.length >= 1) {
+      this.classList.add('full');
+    } else {
+      this.classList.remove('full');
+    }
+  },
+  _pulse: function() {
+    this.classList.remove('pulse');
+    this.async(function() {
+      this.classList.add('pulse');
+    });
+  },
+  _shrink: function() {
+
+  }
+});
+</script>
 \ No newline at end of file
+<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
+
+<link rel="import" href="../catalog-cart/catalog-cart.html">
+
+<dom-module id="cart-item-icon">
+  <style>
+    iron-icon {
+      width: var(--cart-item-icon-size, 18px);
+      height: var(--cart-item-icon-size, 18px);
+    }
+
+    span {
+      @apply(--cart-item-icon-label);
+    }
+  </style>
+  <template>
+    <catalog-cart id="cart" on-item-added="_update" on-item-removed="_update" on-items-changed="_update"></catalog-cart>
+
+    <iron-icon icon="[[_icon]]" title$="[[_label]]"></iron-icon>
+    <span hidden$="[[noLabel]]">[[_label]]</span>
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'cart-item-icon',
+  properties: {
+    element: {type: String, observer: '_update'},
+    presentLabel: {type: String, value: 'Remove from Collection', observer: '_update'},
+    absentLabel: {type: String, value: 'Add to Collection', observer: '_update'},
+    present: {type: Boolean, notify: true, readOnly: true, value: false},
+    noLabel: {type: Boolean, value: false},
+    tappable: {type: Boolean, value: false},
+    _label: String,
+    _icon: String
+  },
+  listeners: {
+    tap: '_tapped'
+  },
+  attached: function() {
+    this._update();
+  },
+  _update: function() {
+    this._setPresent(this.$.cart.includes(this.element));
+    
+    this._label = this.present ? this.presentLabel : this.absentLabel;
+    this.setAttribute('aria-label',this._label);
+    
+    this.debounce('icon', function() {
+      this._icon = this.present ? 'star' : 'star-border';
+    }, 10);
+  },
+  toggle: function(e) {
+    this.fire(this.present ? 'cart-remove' : 'cart-add', this.element);
+  },
+  _tapped: function() {
+    if (this.tappable) this.toggle();
+  }
+});
+</script>
 \ No newline at end of file
+<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
+
+<link rel="import" href="../catalog-element/catalog-element.html">
+
+<dom-module id="cart-item">
+  <style>
+    :host {
+      display: block;
+      font-size: 16px;
+      padding: 12px 16px;
+      @apply(--layout);
+      @apply(--layout-horizontal);
+      cursor: pointer;
+    }
+
+    :host(:hover) iron-icon {
+      opacity: 0.85;
+    }
+
+    iron-icon:hover {
+      opacity: 1.0;
+    }
+
+    iron-icon {
+      width: 16px !important;
+      height: 16px !important;
+      cursor: pointer;
+      margin: 0 6px;
+      opacity: 0.0;
+      transition: var(--material-curve-320);
+    }
+  </style>
+  <template>
+    <span class="flex">[[element.name]]</span>
+    <iron-icon icon="description" view="docs" on-tap="_nav"></iron-icon>
+    <iron-icon icon="visibility" view="demo" on-tap="_nav"></iron-icon>
+    <iron-icon icon="clear" on-tap="_remove"></iron-icon>
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'cart-item',
+  properties: {
+    element: String
+  },
+  _remove: function() {
+    this.fire('remove');
+  },
+  _nav: function(e) {
+    var view = e.currentTarget.getAttribute('view');
+    this.fire('nav', {url: '/elements/' + this.element.name + '?view=' + view});
+  }
+});
+</script>
 \ No newline at end of file
+<link rel="import" href="../catalog-element/catalog-element.html">
+
+<script>
+(function() {
+  var _instances = [];
+
+  var _store = function() {
+    if (_instances.length) {
+      localStorage['catalog.cart'] = JSON.stringify(_instances[0].items);
+    }
+  };
+  
+  var _retrieve = function() {
+    try {
+      return JSON.parse(localStorage['catalog.cart'] || '[]');
+    } catch (e) {
+      console.log('error retrieving catalog data from localstorage.', e);
+      return [];
+    }
+  };
+
+  var _add = function(name) {
+    var el = document.createElement('catalog-element');
+    el.name = name;
+    if (!el.data) {
+      return;
+    }
+
+    var check = _instances[0];
+    var insertAt;
+    if (check.items.length === 0 || check.items[0].name > name) {
+      insertAt = 0;
+    } else {
+      for (var i = 0; i < check.items.length; i++) {
+        if (name > check.items[i].name && (!check.items[i + 1] || name < check.items[i+1].name)) {
+          //console.log(name, ">", check.items[i].name);
+          insertAt = i + 1;
+          break;
+        }
+      }
+    }
+
+    _instances.forEach(function(instance) {
+      instance.splice('items',insertAt,0,el.data);
+      instance.fire('item-added', {name: el.name, element: el.data}, {bubbles: false});
+    });
+    _store();
+    return el.data;
+  };
+
+  var _remove = function(el) {
+    var check = _instances[0];
+    var removeAt = -1;
+    for (var i = 0; i < check.items.length; i++) {
+      if (check.items[i] === el || check.items[i].name === el) {
+        removeAt = i;
+      }
+    }
+
+    if (removeAt >= 0) {
+      _instances.forEach(function(instance) {
+        instance.splice('items',removeAt,1);
+        instance.fire('item-removed', {name: el.name, element: el.data}, {bubbles: false});
+      });
+      _store();
+    } else {
+      return false;
+    }
+  };
+
+  Polymer({
+    is: 'catalog-cart',
+    properties: {
+      items: {
+        type: Array,
+        notify: true,
+        value: function() {
+          return _retrieve();
+        }
+      }
+    },
+    created: function() {
+      _instances.push(this);
+    },
+    add: function(name) {
+      if (this.includes(name)) return false;
+      return _add(name);
+    },
+    remove: function(name) {
+      return _remove(name);
+    },
+    includes: function(el) {
+      for (var i = 0; i < this.items.length; i++) {
+        if (this.items[i] === el || this.items[i].name === el) return true;
+      }
+      return false;
+    }
+  });
+})();
+</script>
 \ No newline at end of file
+<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
+
+<dom-module id="catalog-data">
+  <template>
+    <iron-ajax id="req" url="/catalog.json" method="get" handle-as="json" on-response="_handleResponse"></iron-ajax>
+  </template>
+</dom-module>
+
+<script>
+  (function() {
+    var _data = {};
+    var _els = [];
+
+    var _generateMap = function(list) {
+      var out = {};
+      for (var i = 0; i < list.length; i++) {
+        out[list[i].name] = list[i];
+      }
+      return out;
+    };
+
+    var _setPackageData = function(data) {
+      _data = data || {};
+      if (data) {
+        _data.packageMap = _generateMap(data.packages);
+        _data.elementMap = _generateMap(data.elements);
+        _data.guideMap = _generateMap(data.guides);
+        _data.behaviorMap = {};
+        _data.elements.forEach(function(el) {
+          el.behaviors.forEach(function(be) {
+            _data.behaviorMap[be] = el.name;
+          });
+        });
+      }
+      _els.forEach(function(el){ el.load(_data); });
+    };
+
+    Polymer({
+      is: 'catalog-data',
+      ready: function() {
+        this.load(_data);
+      },
+      attached: function() {
+        if (_els.length === 0 && !_data.packages) { this.$.req.generateRequest(); }
+        _els.push(this);
+      },
+      detached: function() {
+        _els.splice(_els.indexOf(this), 1);
+      },
+      properties: {
+        packages: {
+          type: Array,
+          readOnly: true,
+          notify: true
+        },
+        packageMap: {
+          type: Object,
+          readOnly: true,
+          notify: true
+        },
+        elements: {
+          type: Array,
+          readOnly: true,
+          notify: true
+        },
+        elementMap: {
+          type: Object,
+          readOnly: true,
+          notify: true
+        },
+        guides: {
+          type: Array,
+          readOnly: true,
+          notify: true
+        },
+        guideMap: {
+          type: Object,
+          readOnly: true,
+          notify: true
+        },
+        tags: {
+          type: Object,
+          readOnly: true,
+          notify: true
+        },
+        behaviorMap: {
+          type: Object,
+          readOnly: true,
+          notify: true
+        }
+      },
+      load: function(data) {
+        if (data.packages) {
+          this._setPackages(data.packages);
+          this._setPackageMap(data.packageMap);
+          this._setElements(data.elements);
+          this._setElementMap(data.elementMap);
+          this._setGuides(data.guides);
+          this._setGuideMap(data.guideMap);
+          this._setBehaviorMap(data.behaviorMap);
+          this._setTags(data.tags);
+        }
+      },
+      _handleResponse: function(_, req) {
+        _setPackageData(req.response);
+      }
+    });
+  })();
+</script>
 \ No newline at end of file
+<link rel="import" href="../catalog-data/catalog-data.html">
+
+<dom-module id="catalog-element">
+  <template>
+    <catalog-data element-map="{{_elements}}"></catalog-data>
+  </template>
+</dom-module>
+<script>
+  Polymer({
+    is: 'catalog-element',
+    properties: {
+      name: {type: String, notify: true},
+      _elements: Object,
+
+      data: {type: Object, notify: true, computed: 'getData(_elements,name)'}
+    },
+    getData: function(_elements,name) {
+      if (!_elements) return;
+      return _elements[name];
+    }
+  });
+</script>
 \ No newline at end of file
+<link rel="import" href="../catalog-data/catalog-data.html">
+
+<dom-module id="catalog-guide">
+  <template>
+    <catalog-data guide-map="{{_guides}}"></catalog-data>
+    <iron-ajax id="req" auto url="[[src]]" method="get" handle-as="text" last-response="{{content}}" on-error="_didReceiveError"></iron-ajax>
+  </template>
+</dom-module>
+<script>
+  Polymer({
+    is: 'catalog-guide',
+    properties: {
+      name: {type: String, notify: true},
+      _guides: {type: Object, notify: true},
+
+      data: {type: Object, notify: true, computed: 'getData(_guides,name)'},
+      src: {type: String, notify: true, computed: 'getSrc(name)'},
+      content: {type: String, notify: true}
+    },
+    getData: function(_guides,name) {
+      if (!_guides) return;
+      return _guides[name];
+    },
+    getSrc: function(name) {
+      return "/data/guides/" + name + ".html";
+    },
+    _didReceiveError: function(e) {
+      this.fire('catalog-guide-error', e.detail);
+    }
+  });
+</script>
 \ No newline at end of file
+<link rel="import" href="../catalog-data/catalog-data.html">
+
+<dom-module id="catalog-package">
+  <template>
+    <catalog-data package-map="{{_packages}}"></catalog-data>
+  </template>
+</dom-module>
+<script>
+  Polymer({
+    is: 'catalog-package',
+    properties: {
+      name: {type: String, notify: true},
+      _packages: {type: Object, notify: true},
+
+      data: {type: Object, notify: true, computed: 'getData(_packages,name)'}
+    },
+    getData: function(_packages,name) {
+      if (!_packages) return;
+      return _packages[name];
+    }
+  });
+</script>
 \ No newline at end of file
+<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
+
+<link rel="import" href="../catalog-element/catalog-element.html">
+
+<dom-module id="element-action-menu">
+  <template>
+    <style>
+      :host {
+        @apply(--layout);
+        @apply(--layout-center);
+        @apply(--layout-center-justified);
+        position: absolute;
+        text-align: center;
+        padding-top: 15px;
+        margin-right: 5px;
+        opacity: 1;
+        transition: opacity 0.2s;
+        -webkit-transition: opacity 0.2s;
+      }
+
+      :host(.cards) {
+        background-color: rgba(255, 255, 255, 0.9);
+        margin-right: 0px;
+      }
+
+      :host(.hidden) {
+        pointer-events: none;
+        opacity: 0;
+      }
+
+      a, iron-icon {
+        font-size: 12px;
+        color: #666;
+        outline: none;
+      }
+
+      a {
+        margin: 0 5px;
+        cursor: pointer;
+      }
+
+      span {
+        width: 40px;
+        display: block;
+      }
+
+      a:hover,
+      a:hover iron-icon {
+        color: black;
+      }
+
+      iron-icon {
+        --iron-icon-width: 18px;
+        --iron-icon-height: 18px;
+      }
+
+      cart-item-icon {
+        --cart-item-icon-label: { 
+          display: block;
+          width: 40px;
+        };
+      }
+
+    </style>
+    <catalog-element name="[[element]]" data="{{_element}}"></catalog-element>
+
+    <a tabindex="0" role="button" on-tap="cartAdd">
+      <cart-item-icon id="cartItemIcon" element="[[element]]" present-label="Remove" absent-label="Add" no-label="[[iconsOnly]]"></cart-item-icon>
+    </a>
+
+    <a tabindex="0" role="button" on-click="navToDocs" aria-label="View Docs">
+      <iron-icon icon="description" title="View Docs"></iron-icon>
+      <span hidden$="[[iconsOnly]]">Docs</span>
+    </a>
+
+    <a tabindex="0" role="button" href="[[githubLink(_element.source)]]" target="_blank" title="View Source on GitHub" aria-label="View Source on GitHub">
+      <iron-icon icon="code"></iron-icon>
+      <span hidden$="[[iconsOnly]]">Source</span>
+    </a>
+
+    <a tabindex="0" role="button" on-click="navToDemo" hidden$="[[!_element.demo]]" aria-label="View Demo">
+      <iron-icon icon="visibility" title="View Demo"></iron-icon>
+      <span hidden$="[[iconsOnly]]">Demo</span>
+    </a>
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'element-action-menu',
+  properties: {
+    element: String,
+    _element: Object,
+    iconsOnly: {type: Boolean, value: false, reflectToAttribute: true}
+  },
+  githubLink: function(source) {
+    return "https://github.com/" + source;
+  },
+  cartAdd: function(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    this.$.cartItemIcon.toggle();
+  },
+  navToDocs: function(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    this.fire('nav', {url: '/elements/' + this.element + '?view=docs'});
+  },
+  navToDemo: function(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    if (e.currentTarget.hasAttribute('disabled')) return false;
+    this.fire('nav', {url: '/elements/' + this.element + '?active=' + this._element.active + "&view=demo:" + this._element.demo.path});
+  }
+});
+</script>
 \ No newline at end of file
+<link rel="import" href="../../bower_components/iron-icons/maps-icons.html">
+<link rel="import" href="../../bower_components/paper-material/paper-material.html">
+
+<link rel="import" href="../catalog-element/catalog-element.html">
+<link rel="import" href="../catalog-package/catalog-package.html">
+<link rel="import" href="../hero-image/hero-image.html">
+<link rel="import" href="../package-symbol/package-symbol.html">
+<link rel="import" href="../element-action-menu/element-action-menu.html">
+
+<dom-module id="element-card">
+  <template>
+    <style>
+      :host {
+        display: block;
+        margin: 10px 10px 10px 0;
+        cursor: pointer;
+        border-radius: 4px;
+        border: 1px solid #d0d0d0;
+        background: white;
+        flex: 1 250px;
+        max-width: calc(33% - 10px);
+        transition-properties: opacity, box-shadow;
+        transition-duration: 0.4s;
+
+        -webkit-transition-properties: opacity, box-shadow;
+        -webkit-transition-duration: 0.4s;
+      }
+
+      @media (max-width: 1070px) {
+        :host {
+          max-width: calc(50% - 10px);
+        }
+      }
+
+      @media (max-width: 530px) {
+        :host {
+          max-width: calc(100% - 10px);
+        }
+      }
+
+      :host(:hover),
+      :host(.hover) {
+        @apply(--shadow-elevation-2dp);
+      }
+
+      h3 {
+        font-size: 16px;
+        font-weight: 500;
+        margin: 0;
+        padding: 10px 16px 0;
+      }
+
+      p {
+        margin: 0;
+      }
+
+      #el {
+        cursor: pointer;
+      }
+
+      #hero {
+        width: 100%;
+        height: 120px;
+        background: #ccc;
+        border-radius: 3px 3px 0 0;
+        overflow: hidden;
+        border-bottom: 1px solid #e5e5e5;
+      }
+
+      #hero > img {
+        width: 100%;
+        height: 100%;
+      }
+
+      .meta {
+        border-top: 1px solid;
+        border-bottom: 1px solid;
+        border-color: var(--divider-color);
+        padding: 10px 16px;
+      }
+
+      .meta + .meta {
+        border-top: 0;
+      }
+
+      .meta:last-child {
+        border-bottom: 0;
+      }
+
+      #el-desc {
+        @apply(--paper-font-body1);
+        color: var(--secondary-text-color);
+        margin: 0;
+        padding: 10px 16px;
+        height: 75px;
+      }
+
+      .package {
+        font-size: 12px;
+        font-weight: 500;
+      }
+
+      .package package-symbol {
+        margin: 0 15px 0 0;
+      }
+
+      .package > a:hover {
+        text-decoration: underline;
+      }
+
+      .tags iron-icon {
+        margin: 0 15px 0 0;
+        padding: 5px;
+        color: var(--secondary-text-color);
+        --iron-icon-size: 18px;
+      }
+
+      .tag {
+        margin-right: 4px;
+        font-size: 12px;
+      }
+
+      .tag:hover {
+        text-decoration: underline;
+      }
+
+      .tag:after {
+        margin-left: -3px;
+        content: " ,";
+      }
+
+      .tag:last-of-type:after {
+        content: "";
+      }
+    </style>
+    <a href="[[_getElementLink(item.name)]]">
+      <div id="content" class="vertical layout">
+        <div id="el" view="docs">
+          <div id="hero" on-mouseenter="_mouseEnter" on-mouseleave="_mouseLeave" style$="[[_computeStyle(color)]]">
+            <img src="[[_getImageSrc(item.hero)]]">
+          </div>
+          <h3>[[item.name]]</h3>
+        </div>
+        <p id="el-desc">[[item.description]]</p>
+        <div class="horizontal layout center meta package">
+          <package-symbol symbol="[[packageSymbol]]" color="[[color]]"></package-symbol>
+          <a href="[[_getPackageLink(item.package)]]">[[item.package]]</a>
+        </div>
+        <div class="meta tags">
+          <iron-icon icon="maps:local-offer" class="flex-none"></iron-icon>
+            <template is="dom-repeat" items="[[item.tags]]" as="tag">
+              <a href="[[_getTagLink(item.package, tag)]]" class="tag">[[tag]]</a>
+            </template>
+        </div>
+      </div>
+    </a>
+  </template>
+</dom-module>
+
+<script>
+(function() {
+  var sharedActionMenu = null;
+  var activeCard = null;
+
+  function mouseEnter() {
+    if (activeCard) {
+      activeCard.showActions();
+    }
+  }
+
+  function mouseLeave() {
+    if (activeCard) {
+      activeCard.hideActions();
+    }
+  }
+
+  Polymer({
+    is: 'element-card',
+    enableCustomStyleProperties: true,
+    properties: {
+      item: Object,
+      color: String,
+      packageSymbol: String
+    },
+
+    observers: [
+      '_updatePackage(_element)'
+    ],
+
+    attached: function() {
+      this.style.opacity = 0;
+
+      this.async(function() {
+        this.style.opacity = 1;
+      }, 1);
+    },
+
+    detached: function() {
+      if (activeCard === this) {
+        activeCard = null;
+        if (sharedActionMenu) {
+          Polymer.dom(this.parentNode).removeChild(sharedActionMenu);
+          sharedActionMenu = null;
+        }
+      }
+    },
+
+    _tagClicked: function(e) {
+      e.stopPropagation();
+      this.fire('update-params', {tag: e.currentTarget.name});
+    },
+    _computeStyle: function(color) {
+      return 'background-color:' + color;
+    },
+    _getElementLink: function(elementName) {
+      return '/elements/' + elementName;
+    },
+    _getImageSrc: function(src) {
+      return src && src.length ? src : '/images/hero/random-' + Math.ceil(Math.random() * 4) + '.svg';
+    },
+
+    _getPackageLink: function(packageName) {
+      return '/browse?package=' + packageName + '&view=cards';
+    },
+
+    _getTagLink: function(packageName, tag) {
+      return '/browse?tag=' + tag + '&view=cards';
+    },
+
+    showActions: function() {
+      var top = this.$.hero.offsetTop;
+      var left = this.$.hero.offsetLeft;
+      var width = this.$.hero.offsetWidth;
+
+      if (!sharedActionMenu) {
+        sharedActionMenu = document.createElement('element-action-menu');
+        sharedActionMenu.classList.add('cards');
+        sharedActionMenu.classList.add('hidden');
+        sharedActionMenu.addEventListener('mouseenter', mouseEnter);
+        sharedActionMenu.addEventListener('mouseleave', mouseLeave);
+      }
+      if (!sharedActionMenu.parentNode) {
+        Polymer.dom(this.parentNode).appendChild(sharedActionMenu);
+      }
+
+      top += this.$.hero.offsetHeight - sharedActionMenu.offsetHeight;
+
+      sharedActionMenu.element = this.item.name;
+      sharedActionMenu.style.top = top + 'px';
+      sharedActionMenu.style.left = left + 'px';
+      sharedActionMenu.style.width = width + 'px';
+
+      this._layoutIfNeeded(sharedActionMenu);
+      sharedActionMenu.classList.remove('hidden');
+      this.classList.add('hover');
+      sharedActionMenu.cancelDebouncer('hide');
+    },
+
+    hideActions: function() {
+      if (sharedActionMenu && sharedActionMenu.element == this.item.name) {
+        sharedActionMenu.debounce('hide', function() {
+          sharedActionMenu.classList.add('hidden');
+        }, 10);
+        this.classList.remove('hover');
+      }
+    },
+
+    _mouseEnter: function() {
+      activeCard = this;
+      mouseEnter();
+    },
+
+    _mouseLeave: function(e) {
+      mouseLeave();
+    },
+
+    _layoutIfNeeded: function(el) {
+      return el.offsetTop;
+    }
+  });
+
+})();
+</script>
 \ No newline at end of file
+<link rel="import" href="../element-card/element-card.html">
+<link rel="import" href="../catalog-data/catalog-data.html">
+
+<dom-module id="element-table-cards">
+  <style>
+    :host {
+      display: block;
+      max-width: 920px;
+    }
+    #cards {
+      @apply(--layout-horizontal);
+      @apply(--layout-wrap);
+      
+      margin-right: -10px;
+    }
+  </style>
+  <template>
+    <catalog-data package-map="{{packages}}"></catalog-data>
+    <div id="cards" on-tap="_tap">
+    <!-- 
+      Waiting for Kevin :) 
+      <template name="element-cards-repeat" is="dom-repeat" items="[[elements]]" initial-count="10" chunk-count="10">
+        <element-card item="[[item]]" color="[[_getColor(item)]]" package-symbol="[[_getPackageSymbol(item)]]"></element-card>
+      </template> 
+     -->
+    </div>
+  </template>
+</dom-module>
+<script>
+  Polymer({
+    is: 'element-table-cards',
+
+    properties: {
+      packages: {
+        type: Array
+      },
+
+      elements: {
+        type: Array
+      }
+    },
+
+    observers: [
+      '_render(elements, packages, isAttached)'
+    ],
+
+    _findAncestor: function(node, fn) {
+      while (node && fn.call(this, node)) {
+        node = node.parentNode;
+      }
+      return node;
+    },
+
+    _tap: function(e) {
+      var sourceEvent = e.detail.sourceEvent;
+      var A = this._findAncestor(e.target, function(node) {
+        return node != this && node.tagName !== 'A';
+      });
+
+      if (A && A.tagName === 'A' && A.href.indexOf(location.host) > 0) {
+        if (sourceEvent.ctrlKey || sourceEvent.metaKey) {
+          window.open(A.href);
+        } else {
+          this.fire('nav', {url: A.href});
+        }
+        e.preventDefault();
+      }
+    },
+
+    _getColor: function(item) {
+      return this.packages[item.package].color;
+    },
+
+    _getPackageSymbol: function(item) {
+      return this.packages[item.package].symbol;
+    },
+
+    _render: function(elements, packages) {
+      if (elements) {
+        this.$.cards.innerHTML = '';
+
+        var head = 0;
+        var batchSize = 3;
+        var flush = function() {
+          if (head + batchSize >= elements.length) {
+            batchSize = elements.length - head;
+          }
+
+          if (batchSize <= 0) {
+            return false;
+          }
+          var el;
+          var firstHead = head;
+          var lastHead = firstHead + batchSize;
+
+          for (; head < lastHead; head++) {
+            el = document.createElement('element-card');
+            el.item = elements[head];
+            el.color = packages[el.item.package].color;
+            el.packageSymbol = packages[el.item.package].symbol;
+            Polymer.dom(this.$.cards).appendChild(el);
+          }
+          return true;
+        };
+        var batch = function() {
+          if (flush.call(this)) {
+            batchSize = 10;
+            requestAnimationFrame(batch.bind(this));
+          }
+        };
+
+        batch.call(this);
+      }
+    }
+  });
+</script>
+<link rel="import" href="../../bower_components/paper-styles/paper-styles.html">
+
+<link rel="import" href="../element-action-menu/element-action-menu.html">
+<link rel="import" href="../tag-link/tag-link.html">
+
+<dom-module id="element-table">
+  <template>
+    <style>
+      :host {
+        display: block;
+        position: relative;
+        background: white;
+        border: 1px solid #d0d0d0;
+        border-radius: 3px;
+        opacity: 1;
+        transition: opacity 0.4s;
+      }
+
+      :host(.hidden) {
+        transition: none;
+        opacity: 0;
+      }
+
+      .header {
+        padding: 0 24px;
+        line-height: 56px;
+        font-size: 12px;
+        font-weight: 500;
+        border-bottom: 1px solid #e5e5e5;
+      }
+
+      :host([narrow-viewport]) .header .description {
+        display: none;
+      }
+
+      :host(:not([narrow-viewport])) .header,
+      :host(:not([narrow-viewport])) .row,
+      :host(:not([narrow-viewport])) .row a {
+        @apply(--layout-horizontal);
+      }
+
+      :host([narrow-viewport]) .header,
+      :host([narrow-viewport]) .row,
+      :host([narrow-viewport]) .row a {
+        @apply(--layout-vertical);
+      }
+
+      .row {
+        border-bottom: 1px solid #e5e5e5;
+      }
+
+      .row a {
+        box-sizing: border-box;
+        cursor: pointer;
+        overflow: hidden;
+        width: 100%;
+        padding: 15px 24px;
+        font-weight: 400;
+        font-size: 13px;
+      }
+
+      .row.hover {
+        background: #fafafa;
+      }
+
+      :host(:not([narrow-viewport])) .row.hover .description {
+        padding-right: 120px;
+      }
+
+      .name {
+        min-width: 250px;
+        font-weight: 500;
+      }
+
+      .name .narrow {
+        display: none;
+      }
+
+      :host([narrow-viewport])  .name .narrow {
+        display: inline;
+      }
+
+      .row .description {
+        color: #757575;
+      }
+
+      :host(:not([narrow-viewport])) .row .description {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      #actions element-action-menu {
+        right: 0;
+      }
+
+    </style>
+    <iron-media-query query="(max-width: 640px)" query-matches="{{narrowViewport}}"></iron-media-query>
+
+    <div class="header" style$="[[_getHeaderStyle(color)]]">
+      <div class="name">Name <span class="narrow">/ Description</span></div>
+      <div class="description">Description</div>
+    </div>
+    <template is="dom-repeat" items="[[elements]]">
+      <div class="row" data-index$="[[index]]">
+        <a href$="[[_elementLink(item.name)]]">
+          <div class="name">[[item.name]]</div>
+          <div class="description">[[item.description]]</div>
+        </a>
+      </div>
+    </template>
+    <div id="actions"></div>
+  </template>
+</dom-module>
+<script>
+  Polymer({
+    is: 'element-table',
+
+    properties: {
+      elements: {
+        type: Array,
+        observer: '_elementsChanged'
+      },
+      color: {
+        type: String
+      },
+      narrowViewport: {
+        type: Boolean,
+        reflectToAttribute: true
+      }
+    },
+
+    listeners: {
+      'tap': '_tap',
+      'mouseover': '_mouseOver',
+      'mouseleave': '_mouseLeave'
+    },
+
+    _currentRowIndex: -1,
+
+    _sharedActionMenu: null,
+
+    _findAncestor: function(node, fn) {
+      while (node && fn.call(this, node)) {
+        node = node.parentNode;
+      }
+      return node;
+    },
+
+    _tap: function(e) {
+      var sourceEvent = e.detail.sourceEvent;
+      var A = this._findAncestor(e.target, function(node) {
+        return node != this && node.tagName !== 'A';
+      });
+
+      if (A && A.tagName === 'A' && A.href.indexOf(location.host) > 0) {
+        if (sourceEvent.ctrlKey || sourceEvent.metaKey) {
+          window.open(A.href);
+        } else {
+          this.fire('nav', {url: A.href});
+        }
+        e.preventDefault();
+      }
+    },
+
+    _mouseOver: function(e) {
+      var row = this._findAncestor(e.target, function(node) {
+        return node != this && !node.classList.contains('row') && node.id !== 'actions';
+      });
+      if (row && row.classList.contains('row')) {
+        if (this._currentRowIndex != row.dataset.index) {
+          this._hideActions();
+          this._showActions(row, row.dataset.index);
+        }
+      } else if (row.id !== 'actions') {
+        this._hideActions();
+      }
+    },
+
+    _mouseLeave: function() {
+      this._hideActions();
+    },
+
+    _showActions: function(row, index) {
+      var sharedActionMenu = this._sharedActionMenu;
+      var rowOffsetTop = row.offsetTop;
+
+      if (!sharedActionMenu) {
+        this._sharedActionMenu = document.createElement('element-action-menu');
+        this._sharedActionMenu.classList.add('hidden');
+        Polymer.dom(this.$.actions).appendChild(this._sharedActionMenu);
+        sharedActionMenu = this._sharedActionMenu;
+      }
+
+      sharedActionMenu.iconsOnly = true;
+      sharedActionMenu.element = this.elements[index].name;
+      sharedActionMenu.style.top = rowOffsetTop + 'px';
+
+      this._layoutIfNeeded(sharedActionMenu);
+      sharedActionMenu.classList.remove('hidden');
+      row.classList.add('hover');
+
+      this._currentRowIndex = index;
+      this._currentRow = row;
+    },
+
+    _hideActions: function() {
+      var row = this._currentRow;
+      var sharedActionMenu = this._sharedActionMenu;
+
+      if (row) {
+        if (sharedActionMenu) {
+          sharedActionMenu.classList.add('hidden');
+        }
+        row.classList.remove('hover');
+        this._currentRowIndex = -1;
+        this._currentRow = null;
+      }
+    },
+
+    _elementLink: function(name) {
+      return "/elements/" + name;
+    },
+
+    _getHeaderStyle: function(color) {
+      return 'background-color: '+ color+';';
+    },
+
+    _elementsChanged: function() {
+      this.classList.add('hidden');
+      this.async(function() {
+        this.classList.remove('hidden');
+      }, 1);
+    },
+
+     _layoutIfNeeded: function(el) {
+      return el.offsetTop;
+    }
+  });
+</script>
+<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel="import" href="../bower_components/iron-flex-layout/classes/iron-shadow-flex-layout.html">
+<link rel="import" href="../bower_components/paper-styles/paper-styles.html">
+<link rel="import" href="../bower_components/prism-element/prism-highlighter.html">
+<link rel="import" href="../bower_components/pushstate-anchor/pushstate-anchor.html">
+
+<link rel="import" href="app-shell/app-shell.html">
 \ No newline at end of file
+:host {
+  display: block;
+  width: 456px;
+  margin: 0 16px 16px;
+  background: white;
+}
+
+#content {
+  border: 1px solid #e5e5e5;
+}
+
+h3 {
+  font-size: 20px;
+  font-weight: 500;
+  margin: 0;
+  padding: 10px 16px 0;
+}
+
+img {
+  width: 456px;
+  height: 220px;
+  background: #673AB7;
+  border: 0;
+}
+
+p {
+  margin: 0;
+  line-height: 130%;
+  margin: 0 16px 16px;
+}
+
+#el {
+  cursor: pointer;
+}
+
+#el-graphic {
+  position: relative;
+  width: 100%;
+  height: 120px;
+  background: #ccc;
+  border-radius: 3px 3px 0 0;
+  overflow: hidden;
+}
+
+#el-package package-symbol {
+  margin: 0 15px 0 0;
+}
+
+.meta {
+  @apply(--paper-font-caption);
+  border-top: 1px solid;
+  border-bottom: 1px solid;
+  border-color: var(--divider-color);
+  padding: 10px 16px;
+}
+
+.meta + .meta {
+  border-top: 0;
+}
+
+.meta:last-child {
+  border-bottom: 0;
+}
+
+#el-menu {
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  padding: 10px 16px;
+  background: rgba(0,0,0,.1);
+  box-sizing: border-box;
+  transform: translate(0, 20px);
+  transition: var(--material-curve-320);
+  opacity: 0;
+  visibility: hidden;
+}
+
+#el-menu a {
+  display: block;
+  text-align: center;
+}
+
+#el-menu a:hover {
+  color: #fff;
+}
+
+#el-menu iron-icon {
+  margin: -2px 8px 0 0;
+}
+
+#el-graphic:hover #el-menu {
+  visibility: visible;
+  transform: translate(0, 0);
+  opacity: 1;
+}
+
+#el-desc {
+  @apply(--paper-font-body1);
+  color: var(--secondary-text-color);
+  margin: 0;
+  padding: 10px 16px;
+  height: 75px;
+}
+
+#el-package {
+  font-weight: 500;
+}
+
+#el-tags iron-icon {
+  margin: 0 15px 0 0;
+  padding: 5px;
+  color: var(--secondary-text-color);
+}
+
+#el-tags tag-link:last-of-type + span {
+  display: none;
+}
 \ No newline at end of file
+<link rel="import" href="../../bower_components/paper-material/paper-material.html">
+
+<link rel="import" href="../catalog-guide/catalog-guide.html">
+
+<dom-module id="guide-card">
+  <link rel="import" type="css" href="guide-card.css">
+  <template>
+    <catalog-guide name="[[guide]]" data="{{_guide}}"></catalog-guide>
+
+    <div id="content" class="vertical layout">
+      <h3>[[_guide.title]]</h3>
+      <p>[[_guide.summary]]</p>
+    </div>
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'guide-card',
+  enableCustomStyleProperties: true,
+  properties: {
+    guide: {type: String, notify: true},
+    _guide: Object
+  }
+});
+</script>
 \ No newline at end of file
+<link rel="import" href="../../bower_components/iron-image/iron-image.html">
+
+<dom-module id="hero-image">
+  <style>
+    :host {
+      position: relative;
+      @apply(--layout-horizontal);
+      @apply(--layout-center-justified);
+      @apply(--layout-center);
+    }
+
+    iron-image {
+      @apply(--layout-fit);
+    }
+
+    iron-image::shadow img {
+      fill: white;
+    }
+  </style>
+  <template>
+    
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'hero-image',
+  properties: {
+    src: {type: String, observer: '_update'},
+    _src: String
+  },
+  ready: function() {
+    this._update();
+  },
+  _update: function(src) {
+    if (src && src.length) {
+      this._src = src;
+    } else {
+      this._src = "/images/hero/random-" + Math.ceil(Math.random() * 4) + ".svg";
+    }
+  }
+});
+</script>
 \ No newline at end of file
+<dom-module id="package-symbol">
+  <style>
+    :host {
+      display: block;
+      line-height: 34px;
+      width: 34px;
+      height: 34px;
+      background: #ccc;
+      text-align: center;
+      font-weight: 500;
+      font-size: 18px;
+      color: #606060;
+      outline: none;
+    }
+
+    :host(.large) {
+      line-height: 64px;
+      width: 64px;
+      height: 64px;
+      font-size: 30px;
+    }
+  </style>
+  <template>
+    <div style$="[[_getComputedStyle(color)]]">
+      <span>[[symbol]]</span>
+    </div>
+  </template>
+</dom-module>
+
+<script>
+  Polymer({
+    is: 'package-symbol',
+    properties: {
+      symbol: String,
+      color: String
+    },
+
+    _getComputedStyle: function(color) {
+      return 'background-color: ' + color + ';';
+    } 
+  });
+</script>
 \ No newline at end of file
+:host {
+  display: block;
+  transition: var(--material-curve-320);
+  transform: translate(0, 60px);
+  opacity: 0;
+}
+
+:host(.active) {
+  transform: translate(0, 0);
+  opacity: 1;
+}
+
+#content {
+  display: block;
+  position: relative;
+  width: 100%;
+  background: #fafafa;
+  border-radius: 2px;
+  box-sizing: border-box;
+  overflow: hidden;
+  cursor: pointer;
+  transition: box-shadow 200ms;
+  transition-timing-function: var(--material-curve);
+  color: #606060;
+  border: none;
+  padding: 16px;
+}
+
+:host(:hover) #content {
+  box-shadow: 0 5px 10px rgba(0,0,0,.15);
+}
+
+h2 {
+  font-weight: 400;
+  font-size: 48px;
+  margin: 20px 0;
+  transform: translate(-50px, 0);
+  opacity: 0;
+  transition: all 500ms 320ms;
+  transition-timing-function: var(--material-curve-320);
+}
+
+:host(.active) h2 {
+  transform: translate(0, 0);
+  opacity: 1;
+}
+
+h3 {
+  transform: translate(-50px, 0);
+  opacity: 0;
+  transition: all 600ms 320ms;
+  transition-timing-function: var(--material-curve-320);
+}
+
+:host(.active) h3 {
+  transform: translate(0, 0);
+  opacity: 1;
+}
+
+hr {
+  border: 0;
+  background: #fff;
+  width: 0;
+  height: 1px;
+  opacity: 0.2;
+  margin: 0;
+  transition: width 400ms 320ms;
+  transition-timing-function: var(--material-curve-320);
+}
+
+:host(.active) hr {
+  width: 100%;
+  background: #606060;
+  opacity: 1;
+}
+
+.version {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  font-size: 13px;
+  transition: all 400ms 320ms;
+  transition-timing-function: var(--material-curve-320);
+  transform: translate(50px, 0);
+  opacity: 0;
+}
+
+:host(.active) .version {
+  transform: translate(0, 0);
+  opacity: 0.8;
+}
+
+.title {
+  display: table-caption;
+  margin: 0 0 15px;
+  height: 64px;
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 28px;
+}
+
+.title[extended] {
+  display: block;
+}
+
+.tagline {
+  transition: all 700ms 320ms;
+  transition-timing-function: var(--material-curve-320);
+  transform: translate(-50px, 0);
+  opacity: 0;
+  font-size: 13px;
+  margin: 10px 0 0 0;
+  line-height: 20px;
+  height: 40px;
+}
+
+:host(.active) .tagline {
+  transform: translate(0, 0);
+  opacity: 1;
+}
 \ No newline at end of file
+<link rel="import" href="../catalog-package/catalog-package.html">
+<link rel="import" href="../theme-color/theme-color.html">
+
+<dom-module id="package-tile">
+  <link rel="import" type="css" href="package-tile.css">
+  <template>
+    <catalog-package name="[[name]]" data="{{package}}"></catalog-package>
+    <theme-color id="content" color="[[package.color]]" class="vertical layout" themed themed-border>
+      <span class="version">[[package.version]]</span>
+      <h2 class="symbol">[[package.symbol]]</h2>
+      <h3 class="title" extended$="[[_extendedTitle(package)]]">[[package.title]]</h3>
+      <hr themed-reverse>
+      <p class="tagline">[[package.tagline]]</p>
+    </theme-color>
+  </template>
+</dom-module>
+
+<script>
+  Polymer({
+    is: 'package-tile',
+    enableCustomStyleProperties: true,
+    properties: {
+      name: {type: String, notify: true},
+      package: {type: Object}
+    },
+    attached: function() {
+      var tiles = this.parentNode.querySelectorAll('package-tile');
+      var index = Array.prototype.indexOf.call(tiles, this);
+      setTimeout(function() {
+        this.classList.add('active');
+      }.bind(this), (index + 1) * 50);
+    },
+    _extendedTitle: function(p) {
+      if (p.title.length > 20) return true;
+    }
+  });
+</script>
+:host {
+  background: #fafafa;
+}
+
+a {
+  color: black;
+  text-decoration: none;
+}
+
+#container {
+  background: #fafafa;
+}
+
+.paper-header [paper-drawer-toggle] {
+  margin-left: 10px;
+}
+
+.paper-header {
+  @apply(--layout-horizontal);
+  @apply(--layout-center);
+}
+
+.paper-header h2 {
+  margin-left: 20px;
+  @apply(--layout-flex);
+}
+
+.paper-header .toggleViewButton {
+  --paper-icon-button-ink-color: transparent;
+}
+
+.paper-header .cartButton {
+  margin-right: 10px;
+}
+
+#content {
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  padding: 0 10px;
+}
+
+app-bar .menu-icon {
+  margin-right: 15px;
+}
+
+.elements-title h2 {
+  @apply(--paper-font-title);
+  color: #424242;
+}
+
+.elements-title iron-icon, .elements-title cart-icon {
+  cursor: pointer;
+  margin-left: 16px;
+}
+
+.elements-title > [paper-drawer-toggle] {
+  margin: 0 16px 0 0;
+}
+
+#package-heading .description {
+  font-size: 16px;
+  color: var(--paper-grey-600);
+}
+
+#element-cards, element-table, 
+.elements-title, #package-heading {
+  max-width: 920px;
+  margin: 20px auto;
+}
+
+#package-heading {
+  margin: 0px auto 16px;
+}
+
+[size=xs] > * {
+  display: none;
+}
+
+responsive-element[size=xs].layout {
+  -ms-flex-direction: column;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+}
+
+[size=xs] app-sidebar {
+  min-width: 100%;
+  height: auto;
+}
+
+[size=xs] app-sidebar paper-toolbar /deep/ #topBar {
+  padding: 0 16px;
+}
+
+app-sidebar paper-toolbar {
+  --paper-toolbar-background: white;
+  --paper-toolbar: {
+    box-sizing: border-box;
+  }
+}
+
+#package-tag {
+  display: none;
+}
+
+#package-info {
+  position: relative;
+}
+
+#package-header {
+  position: relative;
+  padding: 16px 24px 0 24px;
+  overflow: hidden;
+}
+
+#package-header iron-icon {
+  cursor: pointer;
+}
+
+#package-header package-symbol {
+  display: inline-block;
+  margin: 0;
+  transform: translate(-50px, 0);
+  opacity: 0;
+  transition: var(--material-curve-320);
+}
+
+#package-title {
+  @apply(--paper-font-title);
+  margin: 0 0 20px;
+  transform: translate(-50px, 0);
+  opacity: 0;
+  transition: var(--material-curve-320);
+}
+
+#package-tagline {
+  margin: 0;
+  padding-right: 80px;
+  transform: translate(-50px, 0);
+  opacity: 0;
+  transition: var(--material-curve-320);
+  font-size: 13px;
+  line-height: 20px;
+}
+
+#package-version {
+  position: absolute;
+  top: 24px;
+  right: 16px;
+  transform: translate(50px, 0);
+  opacity: 0;
+  transition: var(--material-curve-320);
+}
+
+#package-desc {
+  margin: 0;
+}
+
+[size=xs] #package-title {
+  margin-bottom: 0;
+}
+
+[size=xs] #package-tagline {
+  display: none;
+}
+
+[size=xs] #package-tagline {
+  margin-top: 0;
+}
+
+.active #package-header package-symbol,
+.active #package-title,
+.active #package-tagline {
+  transform: translate(0, 0);
+  opacity: 1;
+}
+
+.active #package-version {
+  transform: translate(0, 0);
+  opacity: 0.6;
+}
+
+#search {
+  height: 48px;
+  line-height: 48px;
+  margin-bottom: 12px;
+  position: relative;
+}
+
+#search iron-icon {
+  margin-left: 16px;
+  margin-right: 8px;
+  position: absolute;
+  top: 12px;
+  left: 2px;
+}
+
+#search input {
+  height: 46px;
+  -webkit-appearance: none;
+  line-height: 46px;
+  border: 0;
+  margin: 0;
+  padding-left: 50px;
+  border-bottom: 1px solid #e5e5e5;
+  border-top: 1px solid #e5e5e5;
+  @apply(--paper-font-body1);
+}
+
+#search input:focus {
+  outline: 0;
+  background-color: #eceff1;
+  border-color: #cfd8dc;
+}
+
+#search input::-webkit-search-cancel-button{
+  position: relative;
+  right: 15px;
+}
+
+#package-list {
+  padding: 0 0 10px;
+}
+
+#package-list h5 {
+  margin: 10px 0;
+  padding: 0 16px;
+  color: rgba(0,0,0,.54);
+  font-weight: 500;
+}
+
+#package-list .package {
+  display: block;
+  padding: 9px 16px;
+  font-weight: 500;
+  color: rgba(0,0,0,.87);
+  text-transform: none;
+  cursor: pointer;
+  border-width: 1px 0;
+}
+
+#package-list .package[active] {
+  background: var(--paper-blue-grey-50);
+}
+
+#package-list .package .all-symbol {
+  padding: 5px;
+}
+
+#package-list .package package-symbol, #package-list .package .all-symbol {
+  margin-right: 15px;
+}
+
+#current-tag {
+  background: #2196F3;
+  color: rgba(255,255,255,0.87);
+  padding: 12px;
+  font-size: 16px;
+}
+
+#current-tag b {
+  margin-right: 6px;
+}
+
+#current-tag span {
+  text-transform: uppercase;
+}
+
+.tags tag-link:last-of-type + span {
+  display: none;
+}
+
+[view=cards] element-table {
+  display: none;
+}
+
+[view=table] #element-cards {
+  display: none;
+}
+<link rel="import" href="../../bower_components/iron-selector/iron-selector.html">
+<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
+<link rel="import" href="../../bower_components/iron-icons/av-icons.html">
+<link rel="import" href="../../bower_components/paper-drawer-panel/paper-drawer-panel.html">
+<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../../bower_components/paper-header-panel/paper-header-panel.html">
+
+<link rel="import" href="../app-sidebar/app-sidebar.html">
+<link rel="import" href="../app-logo/app-logo.html">
+<link rel="import" href="../app-bar/app-bar.html">
+<link rel="import" href="../cart-icon/cart-icon.html">
+<link rel="import" href="../catalog-data/catalog-data.html">
+<link rel="import" href="../catalog-package/catalog-package.html">
+<link rel="import" href="../package-symbol/package-symbol.html">
+<link rel="import" href="../tag-link/tag-link.html">
+<link rel="import" href="../theme-color/theme-color.html">
+<link rel="import" href="../element-action-menu/element-action-menu.html">
+<link rel="import" href="../element-table/element-table.html">
+<link rel="import" href="../element-table-cards/element-table-cards.html">
+<link rel="import" href="../responsive-element/responsive-element.html">
+
+<dom-module id="page-browse">
+  <link rel="import" type="css" href="page-browse.css">
+  <template>
+    <catalog-data elements="{{elements}}" packages="{{packages}}"></catalog-data>
+    <catalog-package name="[[package]]" data="{{packageInfo}}"></catalog-package>
+      <paper-drawer-panel id="drawerPanel" responsive-width="900px" narrow="{{narrowMode}}" drawer-width="272px" disable-edge-swipe>
+        <app-sidebar drawer>
+          <paper-toolbar>
+            <app-logo class="flex" tabindex="1"></app-logo>
+            <app-bar class="horizontal layout center end-justified" no-search></app-bar>
+          </paper-toolbar>
+          <div id="search" class="layout horizontal center">
+            <iron-icon icon="search"></iron-icon>
+            <input id="query" type="search" autocomplete="off" value="{{q::keyup}}" placeholder="Search Elements" class="flex" on-search="onSearch">
+          </div>
+          <div class="content">
+            <div id="package-tag" hidden$="[[!tag]]">
+              <span>[[tag]]</span> <iron-icon icon="clear" on-tap="clearTag"></iron-icon>
+            </div>
+            <div id="package-list">
+              <nav>
+                <a class="package" is="app-link" href="/browse?package=" active$="[[_isEqual(package,'')]]" tabindex="1">
+                  <div class="layout horizontal center">
+                    <div class="all-symbol" aria-hidden="true"><iron-icon icon="apps"></iron-icon></div>
+                    <span class="title flex">All Elements</span>
+                  </div>
+                </a>
+                <template is="dom-repeat" items="[[packages]]">
+                  <a class="package" is="app-link" href$="[[_packageLink(item.name)]]" active$="[[_isEqual(package,item.name)]]" tabindex="1">
+                    <div class="layout horizontal center">
+                      <package-symbol aria-hidden="true" symbol="[[item.symbol]]" color="[[item.color]]"></package-symbol>
+                      <span class="title flex">[[item.title]]</span>
+                    </div>
+                  </a>
+                </template>
+              </nav>
+            </div>
+            <div hidden$="[[!tag]]" id="current-tag" class="horizontal layout center">
+              <b>Tag:</b> <span class="flex">[[tag]]</span> <iron-icon icon="clear" on-tap="clearTag"></iron-icon>
+            </div>
+          </div>
+        </app-sidebar>
+        <paper-header-panel id="container" mode="[[_getMode(narrowMode)]]" view$="[[_actualView(view)]]" main>
+          <div class="paper-header">
+            <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
+            <h2 class="flex">[[pageTitle]]</h2>
+            <paper-icon-button class="toggleViewButton" icon="[[viewIcon]]" on-tap="toggleView" hidden$="[[_forceCards]]"></paper-icon-button>
+            <cart-icon class="cartButton" id="cart-toggle" icon="stars" on-tap="cartOpen"></cart-icon>
+          </div>
+          <div id="content">
+            <div id="package-heading" hidden$="[[!packageInfo]]">
+              <div class="description">[[packageInfo.description]]</div>
+            </div>
+
+            <template is="dom-if" if="[[_stampCards(view)]]" restamp>
+              <element-table-cards id="element-cards" elements="[[_filteredElements]]"></element-table-cards>
+            </template>
+            <template is="dom-if" if="[[_stampTable(view)]]" restamp>
+              <element-table color="[[_getColor(packageInfo)]]" elements="[[_filteredElements]]" on-tag-selected="updateTag"></element-table>
+            </template>
+          </div>
+        </paper-header-panel>
+      </paper-drawer-panel>
+  </template>
+</dom-module>
+
+<script>
+  (function() {
+    var _lastNavigated = null;
+    Polymer({
+      is: 'page-browse',
+      enableCustomStyleProperties: true,
+      properties: {
+        router: Object,
+        pageTitle: {type: String},
+
+        // Query Parameters
+        q: {type: String, notify: true, value: '', observer: '_qChanged'},
+        tag: {type: String, notify: true, value: ''},
+        package: {type: String, notify: true, value: ''},
+        view: {type: String, notify: true},
+
+        tagList: {type: Array, computed: 'arrayParam(tag)', value: function() { return []; }},
+        packageList: {type: Array, computed: 'arrayParam(package)', value: function() { return []; }},
+
+        viewIcon: {type: String, computed: 'computeViewIcon(view)', value: 'view-module'},
+        packages: Array,
+        packageInfo: {type: Object, value: {}},
+        elements: Array,
+
+        _filteredElements: Array,
+        _elementCount: Number,
+        _forceCards: {type: Boolean},
+      },
+      observers: [
+        'updateURL(q,package, tag, view, elements)',
+        'updateMeta(package, packageInfo)',
+        'scrollToTop(package)'
+      ],
+      listeners: {
+        'update-params': '_handleParamsUpdate'
+      },
+
+      ready: function() {
+        this.view = this._forceCards ? 'cards' : 'table';
+      },
+
+      filter: function(element) {
+        if (this.q && this.q.length && element.name.indexOf(this.q) < 0) {
+          return false;
+        }
+
+        if (this.packageList.length && this.packageList.indexOf(element.package) < 0) {
+          return false;
+        }
+
+        if (this.tagList.length) {
+          var match = false;
+          for (var i = 0; i < this.tagList.length; i++) {
+            if (element.tags.join(' ').indexOf(this.tagList[i]) >= 0) match = true;
+          }
+          if (!match) return false;
+        }
+
+        return true;
+      },
+
+      updateTag: function(e, detail) {
+        e.stopPropagation();
+        e.preventDefault();
+        var newTag = detail.name;
+        var t = this.tagList.slice(0);
+        if (t.indexOf(newTag) < 0) t.push(newTag);
+        this.tag = t.join(',');
+      },
+      clearTag: function() { this.tag = null; },
+      updatePackage: function(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        var newPkg = e.currentTarget.name;
+        var p = this.packageList.slice(0);
+        if (p.indexOf(newPkg) < 0) p.push(newPkg);
+        this.package = p.join(',');
+      },
+      clearPackage: function() { this.package = null; },
+      togglePackages: function() {
+        if (this.package) {
+          this.prevPackage = this.package;
+          this.clearPackage();
+        } else {
+          this.package = this.prevPackage;
+        }
+      },
+      _parseQueryString: function() {
+        var query = window.location.search.substring(1);
+        var params = query.split('&');
+        var results = [];
+        for (var i = 0; i < params.length; i++) {
+          var pair = params[i].split('=');
+          results[pair[0]] = pair[1];
+        }
+        return results;
+      },
+      _buildQueryString: function() {
+        var out = [];
+        if (this.q && this.q.length) out.push("q=" + this.q);
+        if (this.tag && this.tag.length) out.push("tag=" + this.tag);
+        if (this.package && this.package.length) out.push("package=" + this.package);
+        if (this.view !== 'table') out.push("view=" + this.view);
+
+        return out.join("&");
+      },
+      _handleParamsUpdate: function(_, params) {
+        for (var key in params) {
+          this[key] = params[key];
+        }
+      },
+      _packageLink: function(name) {
+        return "/browse?package=" + name;
+      },
+      _qChanged: function(q) {
+        if (q) {
+          this.async(function() {
+            this.$.query.focus();
+
+            // make sure to force the cursor to the end of the
+            // input. Only an issue in Firefox.
+            this.$.query.setSelectionRange(q.length, q.length);
+          });
+        }
+      },
+      updateURL: function(q, packageName, packageInfo, tag, view) {
+        var qs = this._buildQueryString();
+        if (qs !== _lastNavigated && this.router) {
+          _lastNavigated = qs;
+          this.router.go('/browse' + (qs.length ? '?' + qs : ''), {replace: true});
+        }
+        this.updateMeta(packageName, this.packageInfo);
+
+        if (this.elements) {
+          this._filteredElements = this.elements.filter(this.filter.bind(this));
+          this._elementCount = this._filteredElements.length;
+        }
+        this.scrollToTop();
+      },
+      updateMeta: function(packageName, packageInfo) {
+        if (this.q && this.q.length) {
+          var t = "'" + this.q + "' ";
+          t += (packageInfo && packageInfo.title) ? packageInfo.title : "Elements";
+          this.pageTitle = t;
+        } else if (packageInfo && packageInfo.title) {
+          this.pageTitle = packageInfo.title;
+        } else if (this.tagList.length) {
+          this.pageTitle = "Elements Tagged '" + this.tagList.join("' or '") + "'";
+        } else {
+          this.pageTitle = "All Elements";
+        }
+
+        this.fire('page-meta', { title: this.pageTitle });
+        this.$.drawerPanel.closeDrawer();
+      },
+      toggleView: function() {
+        if (this.view === 'table') {
+          this.view = 'cards';
+        } else {
+          this.view = 'table';
+        }
+      },
+      computeViewIcon: function(view) {
+        if (view === 'table') {
+          return 'view-module';
+        } else {
+          return 'view-list';
+        }
+      },
+      arrayParam: function(param) {
+        if (!param || !param.length) { return []; }
+        return param.toString().split(',');
+      },
+      cartOpen: function(e) {
+        this.fire('cart-open');
+      },
+      onSearch: function(e) {
+        // when a user clicks on the (x) button we need to be sure to
+        // clear the query
+        this.q = this.$.query.value;
+      },
+      scrollToTop: function() {
+        this.$.container.scroller.scrollTop = 0;
+      },
+      _stampCards: function(view) {
+        return view === 'cards';
+      },
+      _stampTable: function(view) {
+        return view === 'table';
+      },
+      closeDrawer: function() {
+        this.$.drawerPanel.closeDrawer();
+      },
+      _actualView: function(view, force) {
+        return force ? 'cards' : view;
+      },
+      _isEqual: function(a,b) {
+        return a === b;
+      },
+      _getColor: function() {
+        return this.packageInfo && this.packageInfo.color ? this.packageInfo.color : '';
+      },
+
+      _getMode: function(narrow) {
+        return narrow ? 'waterfall' : 'scroll';
+      }
+    });
+  })();
+</script>
+responsive-element[size=xs].layout {
+  flex-direction: column;
+}
+
+[size=xs] app-sidebar {
+  min-width: 100%;
+  height: auto;
+}
+
+app-sidebar paper-toolbar {
+  --paper-toolbar-background: white;
+  --paper-toolbar: {
+    box-sizing: border-box;
+  }
+}
+
+[size=xs] app-sidebar paper-toolbar /deep/ #topBar {
+  padding: 0 16px;
+}
+
+#package-heading {
+  height: 48px;
+  line-height: 48px;
+  background: var(--paper-blue-grey-50);
+  border: solid;
+  border-color: var(--paper-blue-grey-100);
+  border-width: 1px 0;
+  cursor: pointer;
+  font-weight: 500;
+}
+
+#package-heading iron-icon {
+  margin: 0 0 0 4px;
+}
+
+#package-heading package-symbol {
+  margin: 0 8px 0 2px;
+}
+
+#element-header {
+  position: relative;
+  padding: 8px 16px;
+}
+
+#element-header .version {
+  position: absolute;
+  top: 24px;
+  right: 16px;
+  font-size: 14px;
+  color: var(--paper-grey-500);
+}
+
+#element-header h2 {
+  margin: 0;
+}
+
+#element-desc p {
+  margin-bottom: 0;
+}
+
+#element-tags tag-link:last-of-type + span {
+  display: none;
+}
+
+[size=xs] .section {
+  display: none;
+}
+
+paper-item, a.item {
+  display: block;
+  font-size: 14px;
+  padding: 4px 16px;
+  min-height: inherit;
+  cursor: pointer;
+  font-weight: 400;
+}
+
+.nav {
+  display: block;
+  margin-top: 8px;
+}
+
+.nav iron-icon {
+  width: 18px;
+  height: 18px;
+  margin-right: 8px;
+}
+
+.nav [active] {
+  background: var(--paper-blue-grey-50);
+}
+
+.nav [active] iron-icon {
+  color: var(--paper-blue-a700);
+}
+
+.nav .item {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+app-sidebar h4 {
+  font-size: 14px;
+  font-weight: 500;
+  margin: 12px 16px;
+}
+
+app-sidebar section {
+  border-top: 1px solid #e5e5e5;
+}
+
+section[main] {
+  background: #fafafa;
+}
+
+iron-component-page {
+  --iron-component-page-container: {
+    padding: 10px;
+  };
+  --iron-component-page-max-width: 920px;
+}
+
+:host([package-name=iron-elements]) iron-component-page {
+  --iron-doc-viewer-header: {
+    background-color: #81c784;
+  };
+}
+
+:host([package-name=gold-elements]) iron-component-page {
+  --iron-doc-viewer-header: {
+    background-color: #ffb74d;
+  };
+}
+
+:host([package-name=google-web-components]) iron-component-page {
+  --iron-doc-viewer-header: {
+    background-color: #64B5F6;
+  };
+}
+
+:host([package-name=neon-elements]) iron-component-page {
+  --iron-doc-viewer-header: {
+    background-color: #a7ffeb;
+  };
+}
+
+:host([package-name=platinum-elements]) iron-component-page {
+  --iron-doc-viewer-header: {
+    background-color: #cfd8dc;
+  };
+}
+
+:host([package-name=molecules]) iron-component-page {
+  --iron-doc-viewer-header: {
+    background-color: #ffab91;
+  };
+}
+
+
+[narrow] iron-component-page {
+  top: 64px;
+}
+
+[paper-drawer-toggle] {
+  position: absolute;
+  top: 12px;
+  left: 10px;
+}
+
+cart-icon {
+  position: absolute;
+  top: 12px;
+  right: 10px;
+}
+
+cart-item-icon {
+  --cart-item-icon-size: 18px;
+  --cart-item-icon-label: {
+    margin-left: 8px;
+  };
+}
+
+#other-elements {
+  overflow: hidden;
+  -webkit-flex-shrink: 5;
+  flex-shrink: 5;
+}
+
+#other-elements .list {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+#element-header, #package-heading, #nav, #cart-add {
+  -webkit-flex-shrink: 0;
+  flex-shrink: 0;
+}
+
+.shrinkable {
+  overflow: hidden;
+  @apply(--layout);
+  @apply(--layout-vertical);
+}
+
+.shrinkable .nav, .shrinkable .list {
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.bower-command-label {
+  margin: 10px 0 2px 17px;
+  font-size: 10px;
+  line-height: 16px;
+  font-weight: 500;
+}
+
+.bower-command {
+  display: block;
+  height: 32px;
+  -webkit-flex-shrink: 0;
+  flex-shrink: 0;
+  padding: 10px 4px;
+  margin: 0 13px 12px;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  border: 1px solid var(--paper-blue-grey-100);
+  border-radius: 2px;
+  font-size: 12px;
+  color: var(--paper-blue-grey-500);
+}
+
+cart-icon {
+  transition: opacity 0.2;
+  -webkit-transition: opacity 0.2s;
+}
+
+cart-icon[fade-out] {
+  opacity: 0;
+}
 \ No newline at end of file
+<link rel="import" href="../../bower_components/iron-selector/iron-selector.html">
+<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
+<link rel="import" href="../../bower_components/paper-toolbar/paper-toolbar.html">
+<link rel="import" href="../../bower_components/paper-item/paper-item.html">
+<link rel="import" href="../../bower_components/paper-header-panel/paper-header-panel.html">
+<link rel="import" href="../../bower_components/paper-drawer-panel/paper-drawer-panel.html">
+<link rel="import" href="../../bower_components/iron-component-page/iron-component-page.html">
+<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
+<link rel="import" href="../../bower_components/paper-item/paper-item.html">
+
+<link rel="import" href="../catalog-data/catalog-data.html">
+<link rel="import" href="../catalog-element/catalog-element.html">
+<link rel="import" href="../catalog-package/catalog-package.html">
+<link rel="import" href="../package-symbol/package-symbol.html">
+<link rel="import" href="../responsive-element/responsive-element.html">
+<link rel="import" href="../theme-color/theme-color.html">
+<link rel="import" href="../cart-icon/cart-icon.html">
+<link rel="import" href="../cart-item-icon/cart-item-icon.html">
+
+<dom-module id="page-element">
+  <link rel="import" type="css" href="page-element.css">
+  <template>
+    <catalog-element name="[[element]]" data="{{metadata}}"></catalog-element>
+    <catalog-package name="[[metadata.package]]" data="{{package}}"></catalog-package>
+    <catalog-data elements="{{elements}}" behavior-map="{{behaviorMap}}"></catalog-data>
+    <paper-drawer-panel id="drawerPanel" narrow="{{narrowDrawer}}" responsive-width="900px" drawer-width="272px" disable-edge-swipe>
+        <app-sidebar drawer>
+          <paper-toolbar>
+            <app-logo class="flex"></app-logo>
+            <app-bar class="horizontal layout center end-justified" query="{{q}}"></app-bar>
+          </paper-toolbar>
+          <div class="content">
+            <a is="app-link" href="[[_packageLink(package.name)]]" class="horizontal layout center" id="package-heading">
+              <iron-icon icon="chevron-left"></iron-icon>
+              <package-symbol color="[[package.color]]" symbol="[[package.symbol]]"></package-symbol>
+              <span class="name flex">[[package.title]]</span>
+            </a>
+            <div id="element-header">
+              <span class="version">[[metadata.version]]</span>
+              <h2 id="element-title">[[element]]</h2>
+              <div id="element-desc">
+                <p>[[metadata.description]]</p>
+              </div>
+            </div>
+
+            <nav id="nav" class="nav" attr-for-selected="name" selected="{{view}}">
+              <a is="app-link" class="item" href="[[_link(active,'docs')]]" active$="[[_isEqual(view,'docs')]]"><iron-icon icon="description"></iron-icon> <span>Docs</span></a>
+              <template is="dom-repeat" items="[[docDemos]]">
+                <a is="app-link" class="item" href="[[_demoLink(active,item.path)]]" active$="[[_demoActive(item.path,view)]]"><iron-icon icon="visibility"></iron-icon> <span>[[_demoName(item.desc)]]</span></a>
+              </template>
+              <a class="item" href="[[_githubLink(metadata.source)]]" target="_blank"><iron-icon icon="code"></iron-icon> <span>Source</span></a>
+            </nav>
+
+            <div class="nav" id="cart-add">
+              <paper-item hidden$="[[!metadata]]" on-tap="toggleCart"><cart-item-icon id="cartIcon" element="[[element]]"></cart-item-icon></paper-item>
+            </div>
+
+            <div class="bower-command-label">Bower Command</div>
+            <input class="bower-command" title="Bower Command" readonly value="[[_bowerCommand(metadata.source)]]" on-tap="_selectAllBowerCommand">
+
+            <section hidden$="[[_oneOrFewer(docElements, docBehaviors)]]" class="shrinkable">
+              <h4>Bundled Elements</h4>
+
+              <nav id="elnav" class="nav">
+                <template is="dom-repeat" items="[[docElements]]">
+                  <a is="app-link" class="item" href$="[[_link(item.is,view)]]" active$="[[_isEqual(item.is,active)]]">[[item.is]]</a>
+                </template>
+              </nav>
+            </section>
+
+            <section class="shrinkable" hidden$="[[_oneOrFewer(docBehaviors, docElements)]]">
+              <h4>Bundled Behaviors</h4>
+              <nav id="elnav" class="nav" attr-for-selected="name" selected="[[active]]">
+                <template is="dom-repeat" items="[[docBehaviors]]">
+                  <a is="app-link" class="item" href$="[[_link(item.is,view)]]" active$="[[_isEqual(item.is,active)]]">[[item.is]]</a>
+                </template>
+              </nav>
+            </section>
+          </div>
+        </app-sidebar>
+        <section main class="fit">
+          <iron-component-page 
+            _catalog
+            id="componentPage"
+            scroll-mode="[[_getScrollMode(narrowDrawer)]]"
+            package$="[[package.name]]"
+            version="[[metadata.version]]"
+            doc-src="[[docSrc(element)]]"
+            base="[[baseURI(element)]]"
+            view="{{view}}"
+            doc-elements="{{docElements}}"
+            doc-behaviors="{{docBehaviors}}"
+            doc-demos="{{docDemos}}"
+            active="{{active}}"
+            on-iron-doc-viewer-component-selected="navToBehavior"
+            on-iron-component-page-error="_handleError">
+          </iron-component-page>
+          <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
+          <cart-icon fade-out$="[[_isCartIconHidden(view)]]"></cart-icon>
+        </section>
+      </paper-drawer-panel>
+  </template>
+</dom-module>
+
+<script>
+  Polymer({
+    is: 'page-element',
+    enableCustomStyleProperties: true,
+    properties: {
+      element: String,
+      view: {type: String, value: 'docs'},
+      active: {type: String, value: ''},
+      docElements: Array,
+      docBehaviors: Array,
+      docDemos: Array,
+      docs: Object,
+      metadata: {type: Object, value: null},
+      package: Object,
+      router: Object,
+      q: String,
+      packageName: {
+        type: String,
+        reflectToAttribute: true
+      },
+      narrowDrawer: Boolean
+    },
+    observers: [
+      'updateMeta(element,active)',
+      'viewUpdated(view)',
+      'analyze(importPath)',
+      'search(q)',
+      '_updateStyles(package)'
+    ],
+    attached: function() {
+      this.updateMeta();
+    },
+    analyze: function() {
+      this.$.analyzer.analyze();
+    },
+    _link: function(active,view) {
+      return this.getURL(active,view);
+    },
+    _demoLink: function(active,path) {
+      return this.getURL(active, 'demo:' + path, true);
+    },
+    _demoActive: function(path) {
+      return this.view === 'demo:' + path;
+    },
+    _githubLink: function(source) {
+      return 'https://github.com/' + source;
+    },
+    getURL: function(active,view,force) {
+      var url = "/elements/" + this.element;
+      var qs = [];
+      if (force || (view && view.length && view !== 'docs')) qs.push('view=' + view);
+      if (force || (active && active.length && active !== this.element)) qs.push('active=' + active);
+      if (qs.length) url += "?" + qs.join("&");
+      return url;
+    },
+    updateMeta: function(element,active) {
+      this.$.drawerPanel.closeDrawer();
+      this.fire('page-meta', {title: (this.active && this.active.length) ? this.active : this.element});
+    },
+    viewUpdated: function() {
+      this.$.drawerPanel.closeDrawer();
+    },
+    _packageLink: function() {
+      return "/browse?package=" + this.package.name;
+    },
+    navToElement: function(e) {
+      this.router.go("/elements/" + e.currentTarget.getAttribute('name'));
+    },
+    navToBehavior: function(e, detail) {
+      if (this.behaviorMap[detail]) {
+        this.router.go("/elements/" + this.behaviorMap[detail] + "?active=" + detail);
+      } else {
+        this.fire('toast', {text: "No documentation available for " + detail});
+      }
+    },
+    docSrc: function(element) {
+      return "/data/docs/" + element + ".json";
+    },
+    baseURI: function(element) {
+      return window.location.origin + "/bower_components/" + element + "/" + element + ".html";
+    },
+    search: function(q) {
+      if (q || this.q) {
+        this.router.go('/browse?q=' + (q || this.q));
+      }
+    },
+    cartAdd: function() {
+      this.fire('cart-add', this.element);
+    },
+    _oneOrFewer: function(arr1, arr2) {
+      if (!arr1 || arr1.length === 0) {
+        return true;
+      }
+      if (!arr2) {
+        return arr1.length <= 1;
+      }
+      return arr1.length + arr2.length <= 1;
+    },
+    toggleCart: function() {
+      this.$.cartIcon.toggle();
+    },
+    listFilter: function(el) {
+      return el.package === this.package.name;
+    },
+    _demoName: function(name) {
+      return name === 'demo' ? 'Demo' : name;
+    },
+    _isEqual: function(a,b) {
+      return a === b;
+    },
+    _bowerCommand: function(source) {
+      return 'bower install --save ' + source;
+    },
+    _selectAllBowerCommand: function(e) {
+      e.currentTarget.select();
+    },
+    _isCartIconHidden: function(view) {
+      return view.indexOf('demo:') === 0;
+    },
+
+    _handleError: function() {
+      this.router.go('/404');
+    },
+
+    _updateStyles: function(packageInfo) {
+      this.packageName = packageInfo.name;
+      this.async(this.$.componentPage.updateStyles, 2);
+    },
+    _getScrollMode: function(narrowDrawer) {
+      return narrowDrawer ? 'waterfall' : 'scroll';
+    }
+  });
+</script>
+<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
+<link rel="import" href="../../bower_components/paper-item/paper-item.html">
+<link rel="import" href="../../bower_components/paper-styles/paper-styles.html">
+<link rel="import" href="../../bower_components/paper-drawer-panel/paper-drawer-panel.html">
+
+<link rel="import" href="../catalog-guide/catalog-guide.html">
+<link rel="import" href="../catalog-data/catalog-data.html">
+
+<dom-module id="page-guide">
+  <style>
+    .content {
+      display: block;
+      padding: 12px 24px;
+    }
+
+    #main {
+      background: #fafafa;
+    }
+
+    .guide-section {
+      background: white;
+      margin: 24px auto;
+      max-width: 800px;
+      padding-bottom: 1px;
+      @apply(--shadow-elevation-2dp);
+    }
+
+    .guide-section .reference-link {
+      float: right;
+      margin: 12px 18px;
+      color: #999;
+    }
+
+    .guide-section .reference-link:hover {
+      color: #333;
+    }
+
+    .guide-section > h2 {
+      border-bottom: 1px solid #e5e5e5;
+      font-size: 20px;
+      line-height: 28px;
+      padding: 10px 18px;
+      margin: 0;
+    }
+
+    .guide-section h3 {
+      font-size: 18px;
+      margin: 20px 20px 12px 20px;
+      font-weight: bold;
+    }
+
+    .guide-section h4 {
+      font-weight: bold;
+      font-size: 16px;
+      margin: 18px 20px 12px 20px;
+    }
+
+    .guide-section p {
+      margin: 16px 20px;
+    }
+
+    .guide-section pre {
+      padding: 20px;
+      background: #fafafa;
+      border: solid #e5e5e5;
+      border-width: 1px 0;
+    }
+
+    #main > paper-toolbar {
+      --paper-toolbar-background: #fafafa;
+      font-size: 20px;
+    }
+
+    app-sidebar paper-toolbar {
+      --paper-toolbar-background: white;
+    }
+
+    #guide-list .item {
+      display: block;
+      font-weight: 400;
+      cursor: pointer;
+      font-size: 14px;
+      line-height: 24px;
+      padding: 0 24px;
+    }
+
+    [paper-drawer-toggle] {
+      margin: 0 10px;
+      cursor: pointer;
+    }
+
+    app-sidebar h4 {
+      font-size: 14px;
+      font-weight: 500;
+      margin: 12px 24px;
+    }
+  </style>
+  <template>
+    <prism-highlighter></prism-highlighter>
+
+    <catalog-data guides="{{guides}}"></catalog-data>
+    <catalog-guide name="[[name]]" data="{{guide}}" content="{{content}}" on-catalog-guide-error="_catalogGuideError"></catalog-guide>
+
+    <paper-drawer-panel drawer-width="272px" disable-edge-swipe>
+      <app-sidebar drawer>
+        <paper-toolbar>
+          <app-logo class="flex"></app-logo>
+          <app-bar class="horizontal layout center end-justified"></app-bar>
+        </paper-toolbar>
+        <h4>Guides</h4>
+        <nav id="guide-list" class="flex">
+          <template is="dom-repeat" items="[[guides]]">
+            <a class="item" is="app-link" href$="[[_guideUrl(item.name)]]">[[item.title]]</a>
+          </template>
+        </nav>
+      </app-sidebar>
+      <paper-header-panel mode="waterfall" class="vertical layout fit" id="main" main>
+        <paper-toolbar class="paper-header flex-none">
+          <iron-icon icon="menu" paper-drawer-toggle></iron-icon>
+          <span class="flex">[[guide.title]]</span>
+        </paper-toolbar>
+
+        <div class="content fit">
+          <div id="content"></div>
+        </div>
+      </paper-header-panel>
+    </paper-drawer-panel>
+  </template>
+</dom-module>
+
+<script>
+  Polymer({
+    is: 'page-guide',
+    properties: {
+      router: Object,
+      guides: Array,
+      guide: Object,
+      name: {
+        type: String,
+        observer: '_nameChanged'
+      },
+      content: String
+    },
+    enableCustomStyleProperties: true,
+    observers: [
+      'contentChanged(content)',
+      'updateMeta(guide)'
+    ],
+
+    contentChanged: function() {
+      if (this.content.indexOf('<!doctype') >= 0) {
+        this._catalogGuideError();
+      } else { console.log( this.content);
+        this.$.content.innerHTML = this.content;
+        this._decorateHeadings();
+        this._highlight();
+        this.scopeSubtree(this.$.content);
+        if (window.location.hash !== "") {
+          var el = Polymer.dom(this.$.content).querySelector(window.location.hash);
+          if (el) el.scrollIntoView();
+        }
+      }
+    },
+
+    _nameChanged: function() {
+      this.$.content.innerHTML = '';
+    },
+
+    _decorateHeadings: function() {
+      var h2s = this.$.content.querySelectorAll('h2');
+      for (var i = 0; i < h2s.length; i++) {
+        var link = document.createElement('a');
+        link.className = "reference-link";
+        link.href = "#" + h2s[i].id;
+        var icon = document.createElement('iron-icon');
+        icon.icon = 'link';
+        link.appendChild(icon);
+        h2s[i].parentNode.insertBefore(link, h2s[i]);
+      }
+    },
+    _highlight: function() {
+      var els = this.$.content.querySelectorAll('pre code');
+      for (var i = 0; i < els.length; i++) {
+        var code = els[i].textContent;
+        var event = this.fire('syntax-highlight', {code: code});
+        if (event.detail.code && !els[i].highlighted) {
+          els[i].highlighted = true;
+          els[i].innerHTML = event.detail.code;
+        }
+      }
+    },
+    _guideUrl: function(name) {
+      return "/guides/" + name;
+    },
+    updateMeta: function() {
+      this.fire('page-meta', {title: this.guide.title});
+    },
+    nav: function(e) {
+      var name = e.currentTarget.getAttribute('name');
+      if (this.name !== name) {
+        this.router.go('/guides/' + name);
+      }
+    },
+    _catalogGuideError: function() {
+      this.router.go('/404');
+    }
+  });
+</script>
 \ No newline at end of file
+<link rel="import" href="../../bower_components/paper-toolbar/paper-toolbar.html">
+<link rel="import" href="../../bower_components/paper-drawer-panel/paper-drawer-panel.html">
+<link rel="import" href="../app-sidebar/app-sidebar.html">
+<link rel="import" href="../app-link/app-link.html">
+
+<dom-module id="page-not-found">
+  <template>
+    <style>
+      paper-toolbar {
+        background-color: white;
+      }
+      section {
+        background-color: #fafafa;
+        padding: 40px;
+      }
+    </style>
+    <paper-drawer-panel id="drawerPanel" responsive-width="900px" drawer-width="272px" disable-edge-swipe>
+      <app-sidebar drawer>
+        <paper-toolbar>
+          <app-logo class="flex"></app-logo>
+          <app-bar class="horizontal layout center end-justified" query="{{q}}"></app-bar>
+        </paper-toolbar>
+      </app-sidebar>
+      <section main class="fit">
+        <h1>There isn't an element for that yet</h1>
+        <p>It seems like you may have misspelled that URL...</p>
+        <a href="/" is="app-link">Take me to the front page</a>
+      </section>
+    </paper-drawer-panel>
+  </template>
+</dom-module>
+
+<script>
+  Polymer({
+    is: 'page-not-found',
+    attached: function() {
+      this.fire('page-meta', { title: 'Page not found' });
+    }
+  });
+</script>
+paper-header-panel {
+  background: #fafafa;
+}
+
+.content {
+  display: block;
+  padding: 50px 0;
+}
+
+.packages, #guides-container {
+  max-width: 1100px;
+  margin: 0 auto;
+}
+
+cart-icon {
+  margin-left: 8px;
+}
+
+@media (max-width: 1132px) {
+  .packages, #guides-container {
+    max-width: 880px;
+  }
+}
+
+@media (max-width: 912px) {
+  .packages, #guides-container {
+    max-width: 660px;
+  }
+}
+
+@media (max-width: 692px) {
+  .packages, #guides-container {
+    max-width: 440px;
+  }
+}
+
+a.package {
+  width: 220px;
+  margin: 8px;
+}
+
+@media (max-width: 489px) {
+  a.package {
+    width: calc(100% - 16px);
+  }
+}
+
+.search.active {
+  left: 15px;
+}
+
+@media (max-width: 639px) {
+  paper-toolbar /deep/ #topBar {
+    margin-top: 4px;
+    padding: 0 16px;
+  }
+}
+
+guide-card, #coming-soon {
+  width: 456px;
+  cursor: pointer;
+  margin: 8px;
+}
+
+@media (max-width: 489px) {
+  guide-card, #coming-soon {
+    width: 100%;
+  }
+}
+
+#guides-container h3 {
+  margin: 36px 8px 8px;
+}
+
+#coming-soon {
+  cursor: normal;
+  line-height: 76px;
+  text-align: center;
+  font-size: 16px;
+  color: rgba(0, 0, 0, var(--dark-primary-opacity));
+  border: 1px dashed #e5e5e5;
+}
+<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
+<link rel="import" href="../../bower_components/iron-icons/maps-icons.html">
+<link rel="import" href="../../bower_components/paper-material/paper-material.html">
+
+<link rel="import" href="../catalog-data/catalog-data.html">
+<link rel="import" href="../package-tile/package-tile.html">
+<link rel="import" href="../guide-card/guide-card.html">
+<link rel="import" href="../cart-icon/cart-icon.html">
+
+<dom-module id="page-packages">
+  <link rel="import" type="css" href="page-packages.css">
+  <template>
+    <catalog-data packages="{{packages}}" guides="{{guides}}"></catalog-data>
+    <paper-header-panel mode="seamed" class="fit">
+      <paper-toolbar class="paper-header">
+        <app-logo full class="flex"></app-logo>
+        <app-bar class="horizontal layout center end-justified" query="{{q}}"></app-bar>
+        <cart-icon></cart-icon>
+      </paper-toolbar>
+
+      <div class="content fit">
+        <div class="packages layout horizontal wrap">
+          <template is="dom-repeat" items="[[packages]]">
+            <a href$="[[_packageLink(item.name)]]" is="app-link" class="package flex-none"><package-tile name$="[[item.name]]"></package-tile></a>
+          </template>
+        </div>
+
+        <div id="guides-container">
+          <h3>Element Guides</h3>
+          <div id="guide-list" class="horizontal layout wrap">
+            <template is="dom-repeat" items="[[guides]]">
+              <a href$="[[_link('guides',item.name)]]" is="app-link"><guide-card guide="[[item.name]]"></guide-card></a>
+            </template>
+            <div id="coming-soon">More guides coming soon, stay tuned!</div>  
+          </div>
+        </div>
+      </div>
+    </paper-header-panel>
+  </template>
+</dom-module>
+
+<script>
+  Polymer({
+    is: 'page-packages',
+    enableCustomStyleProperties: true,
+    properties: {
+      q: { type: String, notify: true }
+    },
+    attached: function() {
+      // reset page title since this is the default page
+      this.fire('page-meta', {title: null});
+    },
+    observers: [
+      'search(q)'
+    ],
+    search: function(q) {
+      if (q || this.q) {
+        this.router.go('/browse?q=' + (q || this.q));
+      }
+    },
+    _link: function() {
+      return "/" + Array.prototype.slice.call(arguments).join("/");
+    },
+    _packageLink: function(name) {
+      return "/browse?package=" + name;
+    },
+    guideSelect: function(e) {
+      this.router.go('/guides/' + e.currentTarget.guide);
+    }
+  });
+</script>
 \ No newline at end of file
+<dom-module id="responsive-element">
+  <style>
+    :host {
+      display: block;
+    }
+  </style>
+  <template>
+    <content></content>
+  </template>
+</dom-module>
+
+<script>
+  (function() {
+    var _els = [];
+    var _lastRecalc = new Date().getTime();
+    var _recalc = function() {
+      for (var i = 0; i < _els.length; i++) {
+        _els[i].recalc();
+      }
+    };
+
+    Polymer({
+      is: 'responsive-element',
+      properties: {
+        size: {
+          type: String,
+          readOnly: true,
+          reflectToAttribute: true
+        },
+        s: {
+          type: Number,
+          value: 768
+        },
+        m: {
+          type: Number,
+          value: 992
+        },
+        l: {
+          type: Number,
+          value: 1200
+        },
+        xl: {
+          type: Number,
+          value: 1600
+        }
+      },
+      attached: function() {
+        _els.push(this);
+        this.recalc();
+      },
+      detached: function() {
+        _els.splice(_els.indexOf(this), 1);
+      },
+      recalc: function() {
+        var w = this.getBoundingClientRect().width;
+
+        if (w < this.s) { this._setSize('xs'); }
+        else if (w < this.m) { this._setSize('s'); }
+        else if (w < this.l) { this._setSize('m'); }
+        else if (w < this.xl) { this._setSize('l'); }
+        else { this._setSize('xl'); }
+      }
+    });
+
+    var _debounce = function(func, wait, immediate) {
+    	var timeout;
+    	return function() {
+    		var context = this, args = arguments;
+    		var later = function() {
+    			timeout = null;
+    			if (!immediate) func.apply(context, args);
+    		};
+    		var callNow = immediate && !timeout;
+    		clearTimeout(timeout);
+    		timeout = setTimeout(later, wait);
+    		if (callNow) func.apply(context, args);
+    	};
+    };
+    window.addEventListener('resize', _debounce(_recalc, 6));
+  })();
+</script>
 \ No newline at end of file
+<dom-module id="tag-link">
+  <style>
+    :host, a {
+      display: inline-block;
+      cursor: pointer;
+      color: #606060;
+    }
+
+    :host(:hover) span {
+      text-decoration: underline;
+    }
+
+    span {
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--primary-text-color);
+      text-decoration: none;
+    }
+  </style>
+  <template>
+    <span>{{name}}</span>
+  </template>
+</dom-module>
+
+<script>
+  Polymer({
+    is: 'tag-link',
+    enableCustomStyleProperties: true,
+    properties: {
+      name: {type: String, notify: true, reflectToAttribute: true, observer: 'convert'}
+    },
+    convert: function() {
+      if (typeof this.name === 'object') {
+        this.name = this.name.valueOf();
+      }
+    }
+  });
+</script>
 \ No newline at end of file
+<script src="../../bower_components/color/one-color.js"></script>
+
+<script>
+  Polymer({
+    is: 'theme-color',
+    properties: {
+      color: {type: String, notify: true},
+      textColor: {type: String, notify: true, computed: 'computeTextColor(color)'},
+      outline: {type: Boolean}
+    },
+    observers: [
+      'colorContent(color)'
+    ],
+    computeTextColor: function(color) {
+      if (this.color) {
+        var lightness = one.color(this.color).lightness();
+        return (lightness > 0.5) ? 'rgba(0,0,0,0.6)' : 'rgba(255,255,255,0.8)';
+      } else {
+        return null;
+      }
+    },
+    _color: function(node, bgColor, color) {
+      node.style.color = color;
+      node.style.backgroundColor = bgColor;
+      if (this.outline) this._outline(node, bgColor);
+    },
+    _colorBorder: function(node, borderColor) {
+      node.style.borderColor = borderColor;
+    },
+    _outline: function(node, bgColor) {
+      if (one.color(bgColor).lightness() > 0.9) {
+        node.style.outline = '1px solid rgba(0,0,0,.25)';
+        node.style.outlineOffset = '-1px';
+      }
+    },
+    colorContent: function() {
+      if (this.hasAttribute('themed')) this._color(this, this.color, this.textColor);
+      if (this.hasAttribute('themed-reverse')) this._color(this, this.textColor, this.color);
+      if (this.hasAttribute('themed-border')) this._colorBorder(this, this.color);
+      if (this.hasAttribute('themed-border-reverse')) this._colorBorder(this, this.textColor);
+      
+      var nodes = Polymer.dom(this).querySelectorAll('[themed],[themed-reverse],[themed-border],[themed-border-reverse]');
+      for (var i = 0; i < nodes.length; i++) {
+        if (nodes[i].hasAttribute('themed')) {
+          this._color(nodes[i], this.color, this.textColor);
+        } else if (nodes[i].hasAttribute('themed-reverse')) {
+          this._color(nodes[i], this.textColor, this.color);
+        } else if (nodes[i].hasAttribute('themed-border')) {
+          this._colorBorder(nodes[i], this.color);
+        } else if (nodes[i].hasAttribute('themed-border-reverse')) {
+          this._colorBorder(nodes[i], this.textColor);
+        }
+      }
+    }
+  });
+</script>
 \ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="1944px" height="1088.64px" viewBox="0 931.68 1944 1088.64" enable-background="new 0 931.68 1944 1088.64"
+	 xml:space="preserve">
+<g id="background" display="none">
+	<rect y="931.68" display="inline" fill="#B0BEC5" width="1944" height="1088.64"/>
+</g>
+<g id="art">
+	<circle cx="673.92" cy="1778.4" r="34.56"/>
+	<circle cx="1477.44" cy="1709.28" r="34.56"/>
+	<circle cx="1140.48" cy="1458.72" r="34.56"/>
+	<circle cx="457.92" cy="1458.72" r="34.56"/>
+	<circle cx="1088.64" cy="1173.6" r="34.56"/>
+	<circle cx="786.24" cy="1510.56" r="34.56"/>
+	<circle cx="1140.48" cy="1709.28" r="34.56"/>
+	<circle cx="561.6" cy="1208.16" r="34.56"/>
+	<path d="M671.328,1790.496l-222.912-330.912l107.136-260.064l553.824-36.288l-309.312,344.736l139.104,77.76l201.312-138.24
+		l362.88,270.432h-365.472l-198.72-111.456L671.328,1790.496z M467.424,1457.856l208.224,308.448l247.104-169.344l-150.336-84.672
+		l295.488-329.184L567.648,1216.8L467.424,1457.856z M1143.072,1700.64h308.448l-311.04-231.552l-184.896,126.144L1143.072,1700.64z
+		"/>
+</g>
+</svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="1944px" height="1088.64px" viewBox="0 931.68 1944 1088.64" enable-background="new 0 931.68 1944 1088.64"
+	 xml:space="preserve">
+<g id="background" display="none">
+	<rect y="931.68" display="inline" fill="#B0BEC5" width="1944" height="1088.64"/>
+</g>
+<g id="art">
+	<circle cx="1373.76" cy="1432.8" r="34.56"/>
+	<circle cx="1123.2" cy="1596.96" r="34.56"/>
+	<circle cx="561.6" cy="1380.96" r="34.56"/>
+	<circle cx="751.68" cy="1216.8" r="34.56"/>
+	<circle cx="1062.72" cy="1173.6" r="34.56"/>
+	<circle cx="457.92" cy="1571.04" r="34.56"/>
+	<circle cx="1477.44" cy="1285.92" r="34.56"/>
+	<circle cx="665.28" cy="1778.4" r="34.56"/>
+	<path d="M669.6,1786.176l-10.368-0.864l-207.36-207.36l1.728-12.96l206.496-135.648l-101.088-38.88l-2.592-14.688l190.08-164.16
+		l8.64-1.728l156.384,54.432l146.88-96.768l12.96,6.048l21.6,153.792l191.808,66.528l188.352-114.048l11.232,12.096l-103.68,146.88
+		l-9.504,3.456l-84.672-29.376l-166.752,101.088l12.096,82.944l-11.232,9.504l-93.312-35.424L669.6,1786.176z M471.744,1572.768
+		l195.264,195.264l339.552-206.496l-326.592-126.144L471.744,1572.768z M1045.44,1558.08l66.528,25.92l-8.64-61.344L1045.44,1558.08
+		z M697.248,1424.16l327.456,126.144l76.032-45.792l-23.328-165.024l-164.16-57.024L697.248,1424.16z M1096.416,1345.536
+		l21.6,148.608l148.608-89.856L1096.416,1345.536z M1305.504,1399.968l64.8,22.464l76.032-108L1305.504,1399.968z M578.016,1378.368
+		l99.36,38.016l215.136-141.696l-139.104-48.384L578.016,1378.368z M931.392,1270.368l143.424,50.112l-19.008-131.328
+		L931.392,1270.368z"/>
+</g>
+</svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="1944px" height="1088.64px" viewBox="0 931.68 1944 1088.64" enable-background="new 0 931.68 1944 1088.64"
+	 xml:space="preserve">
+<g id="background" display="none">
+	<rect y="931.68" display="inline" fill="#B0BEC5" width="1944" height="1088.64"/>
+</g>
+<g id="art">
+	<circle cx="1373.76" cy="1501.92" r="34.56"/>
+	<circle cx="1105.92" cy="1778.4" r="34.56"/>
+	<circle cx="924.48" cy="1614.24" r="34.56"/>
+	<circle cx="1226.88" cy="1337.76" r="34.56"/>
+	<circle cx="777.6" cy="1320.48" r="34.56"/>
+	<circle cx="457.92" cy="1173.6" r="34.56"/>
+	<circle cx="1477.44" cy="1285.92" r="34.56"/>
+	<circle cx="561.6" cy="1631.52" r="34.56"/>
+	<path d="M1111.968,1784.448l-14.688-8.64l88.128-322.272l-391.392-119.232l138.24,275.616l-7.776,12.96l-362.88,17.28l-8.64-6.912
+		l-103.68-457.92l9.504-10.368l1019.52,112.32l0.864,17.28l-245.376,50.976l-26.784,96.768l169.344,51.84l3.456,14.688
+		L1111.968,1784.448z M1202.688,1458.72l-79.488,289.44l234.144-241.92L1202.688,1458.72z M469.152,1183.104l99.36,439.776
+		l342.144-16.416l-140.832-282.528l10.368-12.096l410.4,125.28l27.648-101.952l6.912-6.048l196.992-40.608L469.152,1183.104z"/>
+</g>
+</svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="1944px" height="1088.64px" viewBox="0 931.68 1944 1088.64" enable-background="new 0 931.68 1944 1088.64"
+	 xml:space="preserve">
+<g id="background" display="none">
+	<rect y="931.68" display="inline" fill="#B0BEC5" width="1944" height="1088.64"/>
+</g>
+<g id="art">
+	<circle cx="1477.44" cy="1389.6" r="34.56"/>
+	<circle cx="1477.44" cy="1709.28" r="34.56"/>
+	<circle cx="665.28" cy="1778.4" r="34.56"/>
+	<circle cx="1270.08" cy="1242.72" r="34.56"/>
+	<circle cx="1088.64" cy="1173.6" r="34.56"/>
+	<circle cx="457.92" cy="1614.24" r="34.56"/>
+	<circle cx="1270.08" cy="1579.68" r="34.56"/>
+	<circle cx="561.6" cy="1406.88" r="34.56"/>
+	<path d="M618.624,1791.36l400.896-191.808l-591.84,25.056l380.16-266.112l-244.512,57.024l-5.184-16.416l527.04-233.28l8.64,14.688
+		l-201.312,140.832l380.16-88.128l3.456,2.592l219.456,155.52l-390.528,187.488l168.48-6.912l2.592,1.728l228.96,143.424
+		L618.624,1791.36z M1063.584,1596.96l-351.648,168.48l739.584-63.072l-184.032-114.048L1063.584,1596.96z M854.496,1348.128
+		l-367.2,256.608l572.832-24.192l400.032-192.672l-191.808-136.512L854.496,1348.128z M1010.88,1217.664l-362.016,159.84
+		l198.72-45.792L1010.88,1217.664z"/>
+</g>
+</svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="416px" height="286px" viewBox="0 0 416 286" enable-background="new 0 0 416 286" xml:space="preserve">
+<g>
+	<g>
+		<polygon fill="#303F9F" points="84.157,143 42.878,214.5 84.157,286 125.436,214.5 		"/>
+		<polygon fill="#3F51B5" points="331.842,0 290.561,71.5 331.842,143 373.121,71.5 		"/>
+		<polygon fill="#7986CB" points="373.121,71.5 249.278,286 331.842,286 414.4,143 		"/>
+		<polygon fill="#FF4081" points="249.278,0 84.157,286 166.721,286 331.842,0 		"/>
+		<polygon fill="#536DFE" points="84.157,0 1.596,143 42.878,214.5 166.721,0 		"/>
+		<polygon fill="#FFFFFF" fill-opacity="0.2" points="249.278,0 290.561,71.5 331.842,0 		"/>
+		<polygon fill="#FFFFFF" fill-opacity="0.1" points="208,71.5 249.278,0 290.561,71.5 		"/>
+		<polygon fill="#FFFFFF" fill-opacity="0" points="208,71.5 249.278,143 290.561,71.5 		"/>
+		<polygon fill-opacity="0.1" points="166.721,143 208,71.5 249.278,143 		"/>
+		<polygon fill-opacity="0.2" points="166.721,143 208,214.5 249.278,143 		"/>
+		<polygon fill-opacity="0.3" points="125.438,214.5 166.721,143 208,214.5 		"/>
+		<polygon fill-opacity="0.4" points="125.438,214.5 166.721,286 208,214.5 		"/>
+		<polygon fill-opacity="0.5" points="84.157,286 125.438,214.5 166.721,286 		"/>
+		<polygon fill="#FFFFFF" fill-opacity="0.2" points="84.157,0 125.438,71.5 166.721,0 		"/>
+		<polygon fill="#FFFFFF" fill-opacity="0.1" points="42.878,71.5 84.157,0 125.438,71.5 		"/>
+		<polygon fill="#FFFFFF" fill-opacity="0" points="42.878,71.5 84.157,143 125.438,71.5 		"/>
+		<polygon fill-opacity="0.1" points="1.598,143 42.878,71.5 84.157,143 		"/>
+		<polygon fill-opacity="0.2" points="1.598,143 42.878,214.5 84.157,143 		"/>
+		<polygon fill="#FFFFFF" fill-opacity="0" points="125.438,214.5 84.157,143 42.878,214.5 		"/>
+		<polygon fill-opacity="0.2" points="125.438,214.5 84.157,286 42.878,214.5 		"/>
+		<polygon fill-opacity="0.2" points="373.121,71.5 331.842,0 290.561,71.5 		"/>
+		<polygon fill="#FFFFFF" fill-opacity="0" points="373.121,71.5 331.842,143 290.561,71.5 		"/>
+		<g>
+			<polygon fill="#FFFFFF" fill-opacity="0.2" points="331.842,143 373.121,71.5 414.4,143 			"/>
+			<polygon fill="#FFFFFF" fill-opacity="0.1" points="331.842,143 373.121,214.5 414.4,143 			"/>
+			<polygon fill="#FFFFFF" fill-opacity="0" points="290.561,214.5 331.842,143 373.121,214.5 			"/>
+			<polygon fill-opacity="0.1" points="290.561,214.5 331.842,286 373.121,214.5 			"/>
+			<polygon fill-opacity="0.2" points="249.278,286 290.561,214.5 331.842,286 			"/>
+		</g>
+	</g>
+	<rect y="-65" fill="none" width="416" height="416"/>
+</g>
+<g display="none">
+	<g display="inline">
+		<polygon fill="#303F9F" points="84.157,143 42.878,214.5 84.157,286 166.721,286 		"/>
+		<polygon fill="#3F51B5" points="331.842,0 249.278,0 331.842,143 373.121,71.5 		"/>
+		<polygon fill="#7986CB" points="373.121,71.5 249.278,286 331.842,286 414.4,143 		"/>
+		<polygon fill="#536DFE" points="84.157,0 1.596,143 42.878,214.5 166.721,0 		"/>
+		<polygon fill-opacity="0.5" points="249.278,0 290.561,71.5 331.842,0 		"/>
+		<polygon fill-opacity="0.5" points="84.157,286 125.438,214.5 166.721,286 		"/>
+		<polygon fill="#FFFFFF" fill-opacity="0.2" points="84.157,0 125.438,71.5 166.721,0 		"/>
+		<polygon fill="#FFFFFF" fill-opacity="0.1" points="42.878,71.5 84.157,0 125.438,71.5 		"/>
+		<polygon fill="#FFFFFF" fill-opacity="0" points="42.878,71.5 84.157,143 125.438,71.5 		"/>
+		<polygon fill-opacity="0.1" points="1.598,143 42.878,71.5 84.157,143 		"/>
+		<polygon fill-opacity="0.2" points="1.598,143 42.878,214.5 84.157,143 		"/>
+		<polygon fill="#FFFFFF" fill-opacity="0" points="125.438,214.5 84.157,143 42.878,214.5 		"/>
+		<polygon fill="#FFFFFF" fill-opacity="0" points="373.121,71.5 331.842,143 290.561,71.5 		"/>
+		<g>
+			<polygon fill="#FFFFFF" fill-opacity="0.2" points="331.842,143 373.121,71.5 414.4,143 			"/>
+			<polygon fill="#FFFFFF" fill-opacity="0.1" points="331.842,143 373.121,214.5 414.4,143 			"/>
+			<polygon fill="#FFFFFF" fill-opacity="0" points="290.561,214.5 331.842,143 373.121,214.5 			"/>
+			<polygon fill-opacity="0.1" points="290.561,214.5 331.842,286 373.121,214.5 			"/>
+			<polygon fill-opacity="0.2" points="249.278,286 290.561,214.5 331.842,286 			"/>
+		</g>
+		<polygon fill-opacity="0.2" points="125.438,214.5 84.157,286 42.878,214.5 		"/>
+		<polygon fill-opacity="0.2" points="373.121,71.5 331.842,0 290.561,71.5 		"/>
+	</g>
+	<rect y="-65" display="inline" fill="none" width="416" height="416"/>
+</g>
+<g display="none">
+	<g display="inline">
+		<polygon fill="#FF4081" points="249.279,0 84.157,286 166.721,286 331.843,0 		"/>
+		<polygon fill="#FFFFFF" fill-opacity="0.2" points="249.279,0 290.558,71.5 331.843,0 		"/>
+		<polygon fill="#FFFFFF" fill-opacity="0.1" points="208,71.5 249.279,0 290.558,71.5 		"/>
+		<polygon fill="#FFFFFF" fill-opacity="0" points="208,71.5 249.279,143 290.558,71.5 		"/>
+		<polygon fill-opacity="0.2" points="166.721,143 208,214.5 249.279,143 		"/>
+		<polygon fill-opacity="0.3" points="125.439,214.5 166.721,143 208,214.5 		"/>
+		<polygon fill-opacity="0.4" points="125.439,214.5 166.721,286 208,214.5 		"/>
+		<polygon fill-opacity="0.5" points="84.157,286 125.439,214.5 166.721,286 		"/>
+		<polygon fill-opacity="0.1" points="166.721,143 208,71.5 249.279,143 		"/>
+	</g>
+	<g display="inline">
+		<polygon fill="#FF4081" points="331.84,0 166.718,286 249.279,286 373.121,71.5 		"/>
+		<polygon fill="#FFFFFF" fill-opacity="0.1" points="290.558,71.5 331.84,0 373.121,71.5 		"/>
+		<polygon fill="#FFFFFF" fill-opacity="0" points="290.558,71.5 331.84,143 373.121,71.5 		"/>
+		<polygon fill-opacity="0.2" points="249.279,143 290.558,214.5 331.84,143 		"/>
+		<polygon fill-opacity="0.3" points="208,214.5 249.279,143 290.558,214.5 		"/>
+		<polygon fill-opacity="0.4" points="208,214.5 249.279,286 290.558,214.5 		"/>
+		<polygon fill-opacity="0.5" points="166.718,286 208,214.5 249.279,286 		"/>
+		<polygon fill-opacity="0.1" points="249.279,143 290.558,71.5 331.84,143 		"/>
+	</g>
+	<g display="inline">
+		<polygon fill="#FF4081" points="166.718,0 42.878,214.5 84.16,286 249.279,0 		"/>
+		<polygon fill="#FFFFFF" fill-opacity="0.2" points="166.718,0 208,71.5 249.279,0 		"/>
+		<polygon fill="#FFFFFF" fill-opacity="0.1" points="125.439,71.5 166.718,0 208,71.5 		"/>
+		<polygon fill="#FFFFFF" fill-opacity="0" points="125.439,71.5 166.718,143 208,71.5 		"/>
+		<polygon fill-opacity="0.2" points="84.16,143 125.439,214.5 166.718,143 		"/>
+		<polygon fill-opacity="0.3" points="42.878,214.5 84.16,143 125.439,214.5 		"/>
+		<polygon fill-opacity="0.4" points="42.878,214.5 84.16,286 125.439,214.5 		"/>
+		<polygon fill-opacity="0.1" points="84.16,143 125.439,71.5 166.718,143 		"/>
+	</g>
+	<rect y="-65" display="inline" fill="none" width="416" height="416"/>
+	<g display="inline">
+		<polygon fill="#303F9F" points="84.157,143 42.878,214.5 84.157,286 166.721,286 		"/>
+		<polygon fill="#3F51B5" points="331.843,0 249.279,0 331.843,143 373.121,71.5 		"/>
+		<polygon fill="#7986CB" points="373.121,71.5 249.279,286 331.843,286 414.4,143 		"/>
+		<polygon fill="#536DFE" points="84.157,0 1.597,143 42.878,214.5 166.721,0 		"/>
+		<polygon fill-opacity="0.5" points="249.279,0 290.558,71.5 331.843,0 		"/>
+		<polygon fill-opacity="0.5" points="84.157,286 125.439,214.5 166.721,286 		"/>
+		<polygon fill="#FFFFFF" fill-opacity="0.2" points="84.157,0 125.439,71.5 166.721,0 		"/>
+		<polygon fill="#FFFFFF" fill-opacity="0.1" points="42.878,71.5 84.157,0 125.439,71.5 		"/>
+		<polygon fill="#FFFFFF" fill-opacity="0" points="42.878,71.5 84.157,143 125.439,71.5 		"/>
+		<polygon fill-opacity="0.1" points="1.6,143 42.878,71.5 84.157,143 		"/>
+		<polygon fill-opacity="0.2" points="1.6,143 42.878,214.5 84.157,143 		"/>
+		<polygon fill="#FFFFFF" fill-opacity="0" points="125.439,214.5 84.157,143 42.878,214.5 		"/>
+		<polygon fill="#FFFFFF" fill-opacity="0" points="373.121,71.5 331.843,143 290.558,71.5 		"/>
+		<g>
+			<polygon fill="#FFFFFF" fill-opacity="0.2" points="331.843,143 373.121,71.5 414.4,143 			"/>
+			<polygon fill="#FFFFFF" fill-opacity="0.1" points="331.843,143 373.121,214.5 414.4,143 			"/>
+			<polygon fill="#FFFFFF" fill-opacity="0" points="290.558,214.5 331.843,143 373.121,214.5 			"/>
+			<polygon fill-opacity="0.1" points="290.558,214.5 331.843,286 373.121,214.5 			"/>
+			<polygon fill-opacity="0.2" points="249.279,286 290.558,214.5 331.843,286 			"/>
+		</g>
+		<polygon fill-opacity="0.2" points="125.439,214.5 84.157,286 42.878,214.5 		"/>
+		<polygon fill-opacity="0.2" points="373.121,71.5 331.843,0 290.558,71.5 		"/>
+	</g>
+</g>
+<g display="none">
+	<g display="inline">
+		<polygon fill="#9F499B" points="249.279,0 84.157,286 166.721,286 331.843,0 		"/>
+		<polygon fill="#FFFFFF" fill-opacity="0.2" points="249.279,0 290.558,71.5 331.843,0 		"/>
+		<polygon fill="#FFFFFF" fill-opacity="0.1" points="208,71.5 249.279,0 290.558,71.5 		"/>
+		<polygon fill="#FFFFFF" fill-opacity="0" points="208,71.5 249.279,143 290.558,71.5 		"/>
+		<polygon fill-opacity="0.2" points="166.721,143 208,214.5 249.279,143 		"/>
+		<polygon fill-opacity="0.3" points="125.439,214.5 166.721,143 208,214.5 		"/>
+		<polygon fill-opacity="0.4" points="125.439,214.5 166.721,286 208,214.5 		"/>
+		<polygon fill-opacity="0.5" points="84.157,286 125.439,214.5 166.721,286 		"/>
+		<polygon fill-opacity="0.1" points="166.721,143 208,71.5 249.279,143 		"/>
+	</g>
+	<g display="inline">
+		<polygon fill="#9F499B" points="331.84,0 166.718,286 249.279,286 373.121,71.5 		"/>
+		<polygon fill="#FFFFFF" fill-opacity="0.1" points="290.558,71.5 331.84,0 373.121,71.5 		"/>
+		<polygon fill="#FFFFFF" fill-opacity="0" points="290.558,71.5 331.84,143 373.121,71.5 		"/>
+		<polygon fill-opacity="0.2" points="249.279,143 290.558,214.5 331.84,143 		"/>
+		<polygon fill-opacity="0.3" points="208,214.5 249.279,143 290.558,214.5 		"/>
+		<polygon fill-opacity="0.4" points="208,214.5 249.279,286 290.558,214.5 		"/>
+		<polygon fill-opacity="0.5" points="166.718,286 208,214.5 249.279,286 		"/>
+		<polygon fill-opacity="0.1" points="249.279,143 290.558,71.5 331.84,143 		"/>
+	</g>
+	<g display="inline">
+		<polygon fill="#9F499B" points="373.121,71.5 249.279,286 331.843,286 414.4,143 		"/>
+		<polygon fill-opacity="0.2" points="331.843,143 373.121,214.5 414.4,143 		"/>
+		<polygon fill-opacity="0.3" points="290.558,214.5 331.843,143 373.121,214.5 		"/>
+		<polygon fill-opacity="0.4" points="290.558,214.5 331.843,286 373.121,214.5 		"/>
+		<polygon fill-opacity="0.5" points="249.279,286 290.558,214.5 331.843,286 		"/>
+		<polygon fill-opacity="0.1" points="331.843,143 373.121,71.5 414.4,143 		"/>
+	</g>
+	<g display="inline">
+		<polygon fill="#9F499B" points="166.718,0 42.878,214.5 84.16,286 249.279,0 		"/>
+		<polygon fill="#FFFFFF" fill-opacity="0.2" points="166.718,0 208,71.5 249.279,0 		"/>
+		<polygon fill="#FFFFFF" fill-opacity="0.1" points="125.439,71.5 166.718,0 208,71.5 		"/>
+		<polygon fill="#FFFFFF" fill-opacity="0" points="125.439,71.5 166.718,143 208,71.5 		"/>
+		<polygon fill-opacity="0.2" points="84.16,143 125.439,214.5 166.718,143 		"/>
+		<polygon fill-opacity="0.3" points="42.878,214.5 84.16,143 125.439,214.5 		"/>
+		<polygon fill-opacity="0.4" points="42.878,214.5 84.16,286 125.439,214.5 		"/>
+		<polygon fill-opacity="0.1" points="84.16,143 125.439,71.5 166.718,143 		"/>
+	</g>
+	<g display="inline">
+		<polygon fill="#9F499B" points="84.157,0 1.6,143 42.878,214.5 166.721,0 		"/>
+		<polygon fill="#FFFFFF" fill-opacity="0.2" points="84.157,0 125.439,71.5 166.721,0 		"/>
+		<polygon fill="#FFFFFF" fill-opacity="0.1" points="42.878,71.5 84.157,0 125.439,71.5 		"/>
+		<polygon fill="#FFFFFF" fill-opacity="0" points="42.878,71.5 84.157,143 125.439,71.5 		"/>
+		<polygon fill-opacity="0.2" points="1.6,143 42.878,214.5 84.157,143 		"/>
+		<polygon fill-opacity="0.1" points="1.6,143 42.878,71.5 84.157,143 		"/>
+	</g>
+	<rect y="-65" display="inline" fill="none" width="416" height="416"/>
+</g>
+</svg>
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="description" content="A catalog of Polymer-based web components">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Polymer Element Catalog</title>
+
+  <link rel="shortcut icon" href="/images/p-logo-32.png">
+
+  <link rel="stylesheet" href="/styles/main.css" inline>
+
+  <script src="/../bower_components/webcomponentsjs/webcomponents-lite.js" inline></script>
+
+  <!-- will be replaced with /elements/elements.build.html -->
+  <link rel="import" href="/elements/elements.html">
+  <!-- endreplace-->
+
+  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:900">
+
+<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-39334307-10', 'auto');
+  // ga('send', 'pageview');
+  </script>
+</head>
+
+<body id="app" class="fullbleed" unresolved>
+  <app-shell class="fit"></app-shell>
+</body>
+</html>
+body {
+  font-family: Roboto, 'Noto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  font-weight: 400;
+  color: #424242;
+  line-height: 20px;
+  font-size: 13px;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+body, a {
+  color: #424242;
+}
+
+pre, code {
+  font-family: Inconsolata, monospace;
+}
+
+pre {
+  overflow-x: auto;
+}
+
+h1, h2, h3, h4, h5, h6, a {
+  text-rendering: optimizeLegibility;
+}
+
+
+a {
+  text-decoration: none;
+  letter-spacing: 0;
+}
+
+p {
+  font-size: 14px;
+  line-height: 22px;
+}
+
+h1 {
+  font-size: 45px;
+  font-weight: 400;
+  letter-spacing: -.018em;
+  line-height: 48px;
+}
+
+h2 {
+  font-weight: 400;
+  font-size: 18px;
+  letter-spacing: 0;
+  line-height: 48px;
+  margin: 8px 0;
+}
+
+h3 {
+  font-size: 24px;
+  font-weight: 400;
+  letter-spacing: -.012em;
+  line-height: 32px;
+}
+
+h4 {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+}
+
+h5, h6 {
+  font-size: 13px;
+  line-height: 20px;
+}
+
+a {
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: 0.018em;
+  line-height: 24px;
+}
+
+catalog-app {
+  overflow: hidden;
+}
+
+.menu-icon {
+  display: block;
+  width: 24px;
+  padding-top: 3px;
+  cursor: pointer;
+  box-sizing: border-box;
+  -webkit-user-select: none;
+}
+
+.menu-bar {
+  display: block;
+  width: 18px;
+  height: 2px;
+  margin: 0 auto;
+  margin-bottom: 3px;
+  background: #333;
+  -webkit-transform-origin: center;
+  transition: all 300ms cubic-bezier(0.55, 0, 0.1, 1);
+}
+
+.menu-icon[active] .menu-bar {
+  opacity: 0;
+}
+
+.menu-icon[active] .menu-bar:first-child {
+  -webkit-transform: rotate(45deg) translate(2px,2px);
+  margin-top: 4px;
+  opacity: 1;
+}
+
+.menu-icon[active] .menu-bar:last-child {
+  -webkit-transform: rotate(-45deg) translate(5px,-5px);
+  opacity: 1;
+}
+
+paper-toolbar {
+  color: #424242;
+  transition: height 450ms cubic-bezier(0.55, 0, 0.1, 1);
+}
+
+paper-toolbar.medium-tall {
+  height: 107px;
+}
+
+paper-toolbar nav {
+  margin: 12px 0 0 0;
+}
+
+paper-toolbar nav a {
+  display: inline-block;
+  font-weight: 500;
+  line-height: 50px;
+  text-transform: none;
+  color: #666;
+  margin: 0 12px;
+  padding: 0 4px;
+}
+
+paper-toolbar nav a:hover {
+  color: #536DFE;
+}
+
+paper-toolbar nav a:first-child {
+  margin-left: 0;
+}
+
+paper-toolbar nav .active {
+  color: black;
+  border-bottom: 2px solid #7986CB;
+}
+
+iron-icon {
+  color: rgba(0,0,0,0.54);
+}
+
+p a {
+    text-transform: none;
+    color: rgb(85,114,250);
+}
+
+li p {
+    margin: 0;
+}
+
+aside {
+  margin: 40px;
+  padding: 20px 40px;
+  background-color: #fafafa;
+  border: 1px solid #e5e5e5;
+}
 \ No newline at end of file
+{
+  "name": "polymer-element-catalog",
+  "version": "1.0.11",
+  "authors": [
+    "Google"
+  ],
+  "description": "A catalog showcasing Google's Web Components",
+  "main": "dist/index.html",
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "private": true,
+  "dependencies": {
+    "iron-elements": "PolymerElements/iron-elements#^1.0.0",
+    "paper-elements": "PolymerElements/paper-elements#^1.0.0",
+    "gold-elements": "PolymerElements/gold-elements#^1.0.0",
+    "neon-elements": "PolymerElements/neon-elements#^1.0.0",
+    "platinum-elements": "PolymerElements/platinum-elements#^1.0.0",
+    "google-web-components": "GoogleWebComponents/google-web-components#^1.0.0",
+    "molecules": "PolymerElements/molecules#^1.0.0",
+    "polymer": "Polymer/polymer#^1.0.0",
+    "app-router": "blasten/app-router#master",
+    "pushstate-anchor": "~0.3.0",
+    "color": "~2.5.0",
+    "hydrolysis": "PolymerLabs/hydrolysis#^1.11.0"
+  }
+}
+var path = require('path');
+var fs = require('fs-extra');
+
+var _ = require('lodash');
+var async = require('async');
+
+var stream = require('./utils/stream').obj;
+var packageDetails = require('./utils/package-details');
+var packageElements = require('./utils/package-elements');
+var analyze = require('./utils/analyze');
+var cleanTags = require('./utils/clean-tags');
+
+module.exports = function (imports) {
+
+  var root = imports.root;
+  var destDir = imports.destDir;
+  var bowerFile = require(root + '/bower.json');
+  var deps = bowerFile.dependencies;
+
+  var data = [];
+  var out = {};
+
+  return stream.compose(
+    stream.parse('packages.*'),
+    stream.filter(function(package) {
+
+      return deps[package.name];
+    }),
+    stream.asyncMap(function (package, done) {
+
+      var packageBower = packageDetails({
+        root: root,
+        name: package.name
+      });
+
+      var elements = packageElements({
+        name: package.name,
+        deps: packageBower.dependencies
+      });
+
+      var output = async.map(elements, function (elementName, cb) {
+
+        var details = packageDetails({
+          root: root,
+          name: elementName
+        });
+
+        fs.mkdirsSync(path.join(root, destDir, 'data', 'docs'));
+        if (typeof details.main === 'string') details.main = [details.main];
+        analyze(root, destDir, elementName, details.main || [elementName + '.html'], function(err, data) {
+          // Set up object schema
+          console.log("-",elementName,"(" + details._release + ")");
+
+          var combined = data.elements.concat(data.behaviors);
+          var hero;
+          combined.forEach(function(el) {
+            if (el.hero) hero = '/bower_components/' + elementName + '/' + el.hero;
+          });
+
+          var active = null;
+          var demo = null;
+          for (var i in combined) {
+            if (combined[i].demos.length) {
+              active = combined[i].is;
+              demo = (combined[i].demos || [])[0] || null;
+            }
+          }
+
+          cb(err, {
+            name: elementName,
+            version: details._release,
+            source: details._originalSource,
+            target: details._target,
+            package: package.name,
+            description: details.description,
+            tags: (details.keywords || []).filter(cleanTags),
+            hero: hero,
+            demo: demo,
+            active: active,
+            elements: (data.elements || []).map(function(el){ return el.is; }),
+            behaviors: (data.behaviors || []).map(function(be){ return be.is; }),
+          });
+        });
+      }, function(err, output) {
+        done(err, output);
+      });
+    }),
+
+    // Convert to objects from arrays (and flatten),
+    // and sort
+    stream.create(
+      function (chunk, enc, done) {
+
+        data.push(chunk);
+        done();
+      },
+      function (done) {
+
+        var sortedData = _(data)
+          .flatten()
+          .sortBy('name')
+          .value();
+
+        this.push(sortedData);
+        done();
+      }
+    )
+  );
+}
 \ No newline at end of file
+var path = require('path');
+
+var fs = require('graceful-fs');
+var _ = require('lodash');
+var gs = require('glob-stream');
+var fm = require('front-matter');
+var mkdirp = require('mkdirp');
+
+var stream = require('./utils/stream').obj;
+var render = require('./utils/render-guide');
+
+module.exports = function (options) {
+
+  var guideFilePaths = options.src;
+  var destDir = options.destDir;
+  var output = stream.create();
+
+  gs.create(guideFilePaths)
+    .pipe(stream.get('path'))
+    .pipe(getFileContents())
+    .pipe(constructGuide(destDir))
+    .pipe(output);
+
+  return output;
+};
+
+function getFileContents () {
+
+  return stream.asyncMap(function (filepath, enc, done) {
+
+    fs.readFile(filepath, function (err, content) {
+
+      done(err, {
+        path: filepath,
+        content: content.toString()
+      });
+    });
+  });
+}
+
+function constructGuide (destDir) {
+
+  return stream.concurrent(function (file, enc, done) {
+
+    var rawGuide = fm(file.content);
+    var packageName = getPackageName(file.path);
+    var guideName = getGuideName(file.path);
+    if (packageName) guideName = path.join(packageName, guideName);
+
+    var guide = _(rawGuide.attributes)
+      //.omit('updated', 'summary')
+      .extend({
+        name: guideName,
+        package: packageName
+      })
+      .value();
+
+    // Convert markdown guides to HTML
+    writeGuidesFile({
+      src: file.path,
+      dest: destDir,
+      body: rawGuide.body
+    }, function (err) {
+
+      done(err, guide)
+    });
+  });
+}
+
+function writeGuidesFile (options, done) {
+
+  var src = options.src;
+  var body = options.body;
+  var destDir = options.dest;
+
+  var guideDestPath = formatParsedGuideFilepath(src, destDir);
+  var dir = path.dirname(guideDestPath);
+
+  mkdirp(dir, function (err) {
+
+    if (err) {
+      return done(err);
+    }
+
+    fs.writeFile(guideDestPath, render(body), done);
+  });
+}
+
+function getPackageName (filepath) {
+
+  var segments = filepath.split('/');
+  if (segments.indexOf('bower_components') >= 0) {
+    return segments[segments.length - 3];
+  }
+}
+
+function getGuideName (filepath) {
+
+  var segments = filepath.split('/');
+  return _.last(segments).split('.')[0];
+}
+
+function formatParsedGuideFilepath (srcPath, destDir) {
+
+  var relativeSrcPath = srcPath
+    .replace(process.cwd() + path.sep, '')
+    .split('/')
+    .filter(function (segment) {
+
+      return segment !== 'bower_components';
+    });
+
+  // Elements in the bower_components directory
+  // need to have the guides segment put before the
+  // element name in the path
+  if (relativeSrcPath[0] !== 'guides') {
+    relativeSrcPath[1] = relativeSrcPath[0];
+    relativeSrcPath[0] = 'guides';
+  }
+
+  var filename = _.last(relativeSrcPath).split('.')[0] + '.html';
+  relativeSrcPath = path.dirname(relativeSrcPath.join('/'));
+
+  return path.join(
+    process.cwd(),
+    destDir,
+    'data',
+    relativeSrcPath,
+    filename
+  );
+}
 \ No newline at end of file
+#!/usr/bin/env node
+
+var fs = require('fs');
+var path = require('path');
+
+var _ = require('lodash');
+
+var packages = require('./packages');
+var elements = require('./elements');
+var tags = require('./tags');
+var guides = require('./guides');
+var objectFromStreams = require('./utils/object-from-streams');
+
+module.exports = function (options) {
+  
+  var srcFilepath = options.src;
+  var destDir = options.destDir;
+  
+  var root = path.resolve(__dirname, '../../');
+  var srcCatalog = fs.createReadStream(srcFilepath);
+  var guideFilepaths = [
+    path.resolve(process.cwd(), 'guides', '**.md')//,
+    //path.resolve(process.cwd(), 'bower_components', '**', 'guides', '**.md')
+  ];
+  
+  var elementsStream = srcCatalog.pipe(elements({root: root, destDir: destDir}));
+  var guidesStream = guides({
+    src: guideFilepaths,
+    destDir: destDir
+  });
+  
+  return objectFromStreams({
+    packages: srcCatalog.pipe(packages({
+      root: root,
+      guides: guidesStream
+    })),
+    elements: elementsStream,
+    tags: {
+      data: elementsStream.pipe(tags()),
+      onArray: _.first
+    },
+    guides: guidesStream
+  });
+};
 \ No newline at end of file
+var _ = require('lodash');
+
+var stream = require('./utils/stream').obj;
+var packageDetails = require('./utils/package-details');
+var packageElements = require('./utils/package-elements');
+var parseVersion = require('./utils/parse-version');
+
+module.exports = function (imports) {
+
+  var root = imports.root;
+  var bowerFile = require(root + '/bower.json');
+  var deps = bowerFile.dependencies;
+  var guidesStream = imports.guides;
+
+  return stream.compose(
+    stream.parse('packages.*'),
+    stream.filter(function (package) {
+
+      return deps[package.name];
+    }),
+    stream.asyncMap(function (package, done) {
+
+      var details = packageDetails({
+        root: root,
+        name: package.name
+      });
+
+      var elements = packageElements({
+        name: package.name,
+        deps: details.dependencies
+      });
+
+      // Parse all guides and add to packages meta
+      guidesStream
+        .pipe(stream.filter(function (guide) {
+
+          return guide.package === package.name
+        }))
+        .pipe(stream.concat(function (guides) {
+
+          package.version = details._release;
+          package.description = details.description;
+          package.elements = elements;
+          package.guides = _.pluck(guides, 'name');
+
+          console.log("===",package.name,"(" + details._release + ")");
+
+          done(null, package);
+        }));
+    })
+  );
+};
 \ No newline at end of file
+var path = require('path');
+
+var _ = require('lodash');
+
+var stream = require('./utils/stream').obj;
+var packageDetails = require('./utils/package-details');
+var packageElements = require('./utils/package-elements');
+
+module.exports = function (imports) {
+
+  return stream.map(function (element) {
+      
+    var tags = element.tags;
+    
+    // TODO: parse tags from elements. None of them
+    // have any tags yet
+    
+    return {};
+  });
+};
 \ No newline at end of file
+var path = require('path');
+var fs = require('fs-extra');
+var Analyzer = require('hydrolysis').Analyzer;
+var FileLoader = require('hydrolysis/lib/loader/file-loader');
+var FSResolver = require('hydrolysis/lib/loader/fs-resolver');
+var Promise = require('es6-promise').Promise;
+
+module.exports = function(root, destDir, elementName, sources, callback) {
+  var elRoot = path.join(root, 'bower_components', elementName);
+  var elPath = path.join(elRoot, elementName + '.html');
+  var sourcePaths = sources.map(function(source) {
+    return (source.indexOf('/') >= 0) ? source : path.join(elRoot,source);
+  });
+  var loader = new FileLoader();
+
+  Promise.all(sourcePaths.filter(function(path) {
+    return fs.existsSync(path);
+  }).map(function(path) {
+    return Analyzer.analyze(path,
+      {
+        clean: true,
+        filter: function(href){
+          if (href.indexOf("http://") > -1 || href.indexOf("https://") > -1) {
+            return true;
+          } else {
+            return false;
+          }
+        }
+      })
+    .then(function(analyzer){
+      return {
+        elements: analyzer.elementsForFolder(path),
+        behaviors: analyzer.behaviorsForFolder(path),
+        features: []
+      };
+    });
+  })).then(function(values) {
+    var out = {elements: [], behaviors: [], features: [], elementsByTagName: {}};
+    values.forEach(function(data) {
+      var els = out.elements.map(function(el){ return el.is });
+      var bes = out.behaviors.map(function(be){ return be.is });
+      data.elements.forEach(function(element){
+        element.scriptElement = undefined;
+        element.behaviors && element.behaviors.forEach(function(behavior){
+          behavior.javascriptNode = undefined;
+        });
+        element.properties && element.properties.forEach(function(property){
+          property.javascriptNode = undefined;
+        });
+      })
+
+      out.elements = out.elements.concat(data.elements && data.elements.filter(function(el) { return els.indexOf(el.is) < 0 }) || []);
+      out.behaviors = out.behaviors.concat(data.behaviors && data.behaviors.filter(function(be) { return bes.indexOf(be.is) < 0 }) || []);
+      out.features = out.features.concat(data.features || []);
+
+      data.elements.forEach(function(element) {
+        if (!out.elementsByTagName[element.is]) {
+          out.elementsByTagName[element.is] = element;
+        }
+      });
+    });
+
+    fs.writeFileSync(path.join(root, destDir, 'data', 'docs', elementName + '.json'), JSON.stringify(out));
+
+    callback(null, out);
+  }).catch(function(err) {
+    console.error(err.stack);
+    callback(err);
+  });
+}
 \ No newline at end of file
+var excluded = ['web-components','polymer','web-component','gold','paper','google','iron'];
+module.exports = function(tag) {
+  return excluded.indexOf(tag.toLowerCase()) < 0;
+}
 \ No newline at end of file
+var _ = require('lodash');
+var asyncEach = require('async-each');
+
+var stream = require('./stream').obj;
+
+module.exports = function (spec) {
+  
+  var objectStream = stream.create();
+  
+  
+  asyncEach(Object.keys(spec), function (key, done) {
+    
+    if (stream.validate(spec[key])) {
+      spec[key].pipe(stream.concat(function (data) {
+        
+        var obj = {};
+        obj[key] = data;
+        objectStream.push(obj);
+        
+        done();
+      }));
+    }
+    
+    else if (typeof spec[key] === 'object' && spec[key].onArray && stream.validate(spec[key].data)) {
+      
+      spec[key].data.pipe(stream.concat(function (data) {
+        
+        var obj = {};
+        obj[key] = spec[key].onArray(data);
+        objectStream.push(obj);
+        
+        done();
+      }));
+    }
+    
+    else {
+      var obj = {};
+      obj[key] = spec[key];
+      objectStream.push(obj);
+      done();
+    }
+  }, function () {
+    
+    objectStream.end();
+  });
+  
+  // TODO: right now this returns a stream containing the whole object.
+  // It might be could to split it by key?
+  return objectStream
+    .pipe(stream.reduce(_.extend));
+};
 \ No newline at end of file
+var path = require('path');
+var fs = require('fs');
+
+module.exports = function (imports) {
+
+  var root = imports.root;
+  var name = imports.name;
+
+  var packageBowerFilepath = path.resolve(root, 'bower_components/' + name + '/.bower.json');
+  if (fs.existsSync(packageBowerFilepath)) {
+    return require(packageBowerFilepath);
+  } else {
+    return {};
+  }
+};
 \ No newline at end of file
+var _ = require('lodash');
+
+module.exports = function (imports) {
+
+  var name = imports.name;
+  var deps = imports.deps;
+
+  deps = deps || {};
+
+  return _(deps).keys().value();
+}
 \ No newline at end of file
+module.exports = function (version) {
+  
+  return (version.indexOf('#') > 0) ? version.split('#')[1] : version;
+}
 \ No newline at end of file
+var marked = require('marked');
+
+var renderer = new marked.Renderer();
+var firstHeading = true;
+var permalinks = [];
+
+renderer.heading = function(text, level) {
+  var permalink = text.toLowerCase().replace(/[^\w]+/g, '-');
+  if (permalinks.indexOf(permalink) >= 0) {
+    permalink = permalink + "-1";
+  }
+  permalinks.push(permalink);
+  
+  var htext = '<h' + level + ' id="' + permalink + '">' + text + '</h' + level + '>';
+
+  if (level === 2) {
+    var out = "";
+    firstHeading ? firstHeading = false : out += "</section>\n\n";
+    return out + '<section class="guide-section">\n' + htext + '\n';
+  } else {
+    return htext;
+  }
+}
+
+module.exports = function(content) {
+  permalinks = [];
+  firstHeading = true;
+  
+  var out = marked(content, {renderer: renderer});
+  out += '</section>'
+  return out;
+}
 \ No newline at end of file
+var concat = require('concat-stream');
+var reduce = require('through2-reduce');
+var asyncMap = require('through2-asyncmap');
+var filter = require('through2-filter');
+var map = require('through2-map');
+var through = require('through2');
+var jsonStream = require('JSONStream');
+var isStream = require('is-stream');
+var split = require('split');
+var writeStreamP = require('writestreamp');
+var pumpify = require('pumpify');
+var from = require('from2');
+var concurrent = require('through2-concurrent');
+var eos = require('end-of-stream');
+
+exports.create = through;
+exports.split = split;
+exports.writeFile = writeStreamP;
+exports.from = from;
+exports.concurrent = concurrent;
+exports.onEnd = eos;
+
+exports.parse = jsonStream.parse.bind(jsonStream);
+exports.stringify = jsonStream.stringify.bind(jsonStream);
+exports.stringify.obj = jsonStream.stringifyObject = function (options) {
+  
+  options = options || {};
+  
+  return through.obj(function (chunk, enc, done) {
+    
+    done(null, JSON.stringify(chunk, null, options.space));
+  });
+}
+exports.validate = isStream;
+
+exports.concat = concat;
+exports.compose = pumpify;
+
+exports.reduce = reduce;
+reduce.obj = function (fn) {
+  
+  return reduce.call(null, {objectMode: true}, fn);
+}
+exports.filter = filter;
+exports.map = map;
+exports.asyncMap = asyncMap;
+
+// Object mode
+exports.obj = {
+  create: exports.create.obj,
+  split: exports.split.obj,
+  writeFile: exports.writeFile,
+  from: from.obj,
+  concurrent: exports.concurrent.obj,
+  onEnd: exports.onEnd,
+  
+  parse: exports.parse,
+  stringify: exports.stringify.obj,
+  validate: exports.validate,
+  
+  concat: exports.concat,
+  compose: exports.compose.obj,
+  
+  reduce: exports.reduce.obj,
+  filter: exports.filter.obj,
+  map: exports.map.obj,
+  asyncMap: exports.asyncMap.obj,
+  get: function (key) {
+    
+    return exports.obj.create(function (obj, enc, done) {
+      
+      done(null, obj[key]);
+    });
+  }
+};
+{
+  "packages": [
+    {
+      "name":"iron-elements",
+      "title":"Iron Elements",
+      "color":"#81c784",
+      "symbol": "Fe",
+      "tagline":"Polymer core elements"
+    },
+    {
+      "name":"paper-elements",
+      "title":"Paper Elements",
+      "color":"#ffffff",
+      "symbol": "Md",
+      "tagline":"Material design elements"
+    },
+    {
+      "name":"google-web-components",
+      "title":"Google Web Components",
+      "color":"#64B5F6",
+      "symbol":"Go",
+      "tagline":"Components for Google's APIs and services"
+    },
+    {
+      "name":"gold-elements",
+      "color":"#ffb74d",
+      "title":"Gold Elements",
+      "symbol": "Au",
+      "tagline":"Ecommerce Elements"
+    },
+    {
+      "name":"neon-elements",
+      "title":"Neon Elements",
+      "color":"#a7ffeb",
+      "symbol":"Ne",
+      "tagline": "Animation and Special Effects"
+    },
+    {
+      "name":"platinum-elements",
+      "title":"Platinum Elements",
+      "color":"#cfd8dc",
+      "symbol":"Pt",
+      "tagline":"Offline, push, and more"
+    },
+    {
+      "name":"molecules",
+      "title":"Molecules",
+      "color":"#ffab91",
+      "symbol":"Mo",
+      "tagline": "Wrappers for third-party libraries"
+    }
+  ]
+}
 \ No newline at end of file
+{
+  "name": "polymer-element-catalog",
+  "root": "./dist",
+  "clean_urls": false,
+  "error_page": "error.html",
+  "routes": {
+    "**":"index.html"
+  }
+}
 \ No newline at end of file
+{
+  "firebase": "sizzling-inferno-6187",
+  "public": "dist",
+  "ignore": [
+    "firebase.json",
+    "**/.*",
+    "**/node_modules/**"
+  ],
+  "rewrites": [{
+    "source":"**",
+    "destination":"/index.html"
+  }]
+}
 \ No newline at end of file
+{
+  "packages": [
+    {
+      "name":"iron-elements",
+      "title":"Iron Elements",
+      "version":"1.0.0",
+      "symbol":"Fe",
+      "color":"#81c784",
+      "tagline":"Polymer core elements",
+      "description":"Iron elements are a set of visual and non-visual utility elements. They include elements for working with layout, user input, selection, and scaffolding apps."
+    },
+    {
+      "name":"gold-elements",
+      "title":"Gold Elements",
+      "symbol":"Au",
+      "color":"#ffb74d",
+      "version":"1.0.0",
+      "tagline":"Business elements",
+      "description":"Business elements provide UI and common utility components for eCommerce. They include elements such as checkout forms, product listings, and shopping carts."
+    },
+    {
+      "name":"paper-elements",
+      "title":"Paper Elements",
+      "symbol":"Md",
+      "color":"#ffffff",
+      "version":"1.0.0",
+      "tagline":"Material design elements",
+      "description":"--TBD--"
+    },
+    {
+      "name":"oxygen-elements",
+      "title":"Oxygen Elements",
+      "symbol":"O",
+      "color":"#4DD0E1",
+      "version":"1.0.0",
+      "tagline":"Data-pipes and specialized services",
+      "description":"--TBD--"
+    },
+    {
+      "name":"neon-elements",
+      "title":"Neon Elements",
+      "symbol":"Ne",
+      "color":"#a7ffeb",
+      "version":"1.0.0",
+      "tagline":"Elements that implement special effects",
+      "description":"--TBD--"
+    },
+    {
+      "name":"carbon-elements",
+      "title":"Carbon Elements",
+      "symbol":"C",
+      "color":"#b0bec5",
+      "version":"1.0.0",
+      "tagline":"Magical unknown element group",
+      "description":"--TBD--"
+    },
+    {
+      "name":"molecules",
+      "title":"Molecules",
+      "symbol":"Mo",
+      "color":"#ffab91",
+      "version":"1.0.0",
+      "tagline":"Third-party library wrappers",
+      "description":"--TBD--"
+    },
+    {
+      "name":"service-worker-elements",
+      "title":"Service Worker Elements",
+      "symbol":"Sw",
+      "color":"#ffeb3b",
+      "version":"1.0.0",
+      "tagline":"Offline and networking",
+      "description":"--TBD--"
+    }
+  ],
+  "elements": [
+    {
+      "name":"iron-ajax",
+      "package":"iron-elements",
+      "description":"Make requests using AJAX",
+      "tags":["utility","data","app"]
+    },
+    {
+      "name":"iron-toolbar",
+      "package":"iron-elements",
+      "description":"A horizontal bar useful for layout and navigation",
+      "tags":["ui","layout"]
+    },
+    {
+      "name":"gold-checkout",
+      "package":"gold-elements",
+      "description":"A checkout form for collecting payment info.",
+      "tags":["ui","payments"]
+    },
+    {
+      "name":"paper-item",
+      "package":"paper-elements",
+      "description":"A list item",
+      "tags":["ui","lists"]
+    }
+  ],
+  "guides": [
+    {
+      "name":"example",
+      "title":"Example Guide",
+      "summary":"An example guide to live in place of all guides since we don't have any yet.",
+      "packages":["iron-elements","oxygen-elements"],
+      "elements":["iron-ajax","oxygen-foobar"]
+    }
+  ],
+  "tags": {
+    "app":["iron-ajax"],
+    "layout":["iron-toolbar"],
+    "data":["iron-ajax"],
+    "utility":["iron-ajax"],
+    "ui":["iron-toolbar"]
+  }
+}
 \ No newline at end of file
+<p>This is an example guide, it would normally be generated from Markdown found
+in <code>/guides</code> but in the interest of getting something in the repo
+it isn't this time.</p>
 \ No newline at end of file
+<!doctype html>
+<html>
+<head>
+  <script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js">
+  </script>
+  <link rel="import"
+        href="/bower_components/paper-header-panel/paper-header-panel.html">
+  <link rel="import"
+        href="/bower_components/iron-flex-layout/iron-flex-layout.html">
+  <link rel="import"
+        href="/bower_components/font-roboto/roboto.html">
+  <style>
+    body {
+      font-family: Roboto, 'Noto', 'Helvetica Neue',
+                   Helvetica, Arial, sans-serif;
+    }
+    .paper-header {
+      padding: 25px;
+    }
+  </style>
+</head>
+<body class="fullbleed vertical layout">
+  <paper-header-panel class="flex">
+    <div class="paper-header">Header</div>
+    <div>Content</div>
+  </paper-header-panel>
+</body>
+</html>
+<!doctype html>
+<html>
+<head>
+  <script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js">
+  </script>
+  <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-toolbar/paper-toolbar.html">
+  <link rel="import"
+        href="/bower_components/paper-icon-button/paper-icon-button.html">
+  <link rel="import"
+        href="/bower_components/iron-icons/iron-icons.html">
+  <link rel="import"
+        href="/bower_components/iron-flex-layout/iron-flex-layout.html">
+  <link rel="import"
+        href="/bower_components/font-roboto/roboto.html">
+  <style>
+    body {
+      font-family: Roboto, 'Noto', 'Helvetica Neue',  
+                   Helvetica, Arial, sans-serif;
+    }
+  </style>
+</head>
+<body class="fullbleed vertical layout">
+  <paper-drawer-panel class="flex">
+    <paper-header-panel drawer>
+      <paper-toolbar>
+        <div>Application</div>
+      </paper-toolbar>
+      <div> Drawer content... </div>
+    </paper-header-panel>
+    <paper-header-panel main>
+      <paper-toolbar>
+        <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
+        <div>Title</div>
+      </paper-toolbar>
+      <div> Main content... </div>
+    </paper-header-panel>
+  </paper-drawer-panel>
+</body>
+</html>
+<!doctype html>
+<html>
+<head>
+  <script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js">
+  </script>
+  <link rel="import"
+        href="/bower_components/paper-header-panel/paper-header-panel.html">
+  <link rel="import"
+        href="/bower_components/paper-toolbar/paper-toolbar.html">
+  <link rel="import"
+        href="/bower_components/iron-flex-layout/iron-flex-layout.html">
+  <link rel="import"
+        href="/bower_components/font-roboto/roboto.html">
+  <style>
+    body {
+      font-family: Roboto, 'Noto', 'Helvetica Neue',  
+                   Helvetica, Arial, sans-serif;
+    }
+  </style>
+</head>
+<body class="fullbleed vertical layout">
+  <paper-header-panel class="flex">
+    <paper-toolbar>
+      <div>Header</div>
+    </paper-toolbar>
+    <div>Content</div>
+  </paper-header-panel>
+</body>
+</html>
+<!doctype html>
+<html>
+<head>
+  <script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js">
+  </script>
+  <link rel="import"
+        href="/bower_components/paper-header-panel/paper-header-panel.html">
+  <link rel="import"
+        href="/bower_components/paper-toolbar/paper-toolbar.html">
+  <link rel="import"
+        href="/bower_components/paper-icon-button/paper-icon-button.html">
+  <link rel="import"
+        href="/bower_components/iron-icons/iron-icons.html">
+  <link rel="import"
+        href="/bower_components/iron-flex-layout/iron-flex-layout.html">
+  <link rel="import"
+        href="/bower_components/font-roboto/roboto.html">
+  <style>
+    body {
+      font-family: Roboto, 'Noto', 'Helvetica Neue',
+                   Helvetica, Arial, sans-serif;
+    }
+  </style>
+</head>
+<body class="fullbleed vertical layout">
+  <paper-header-panel class="flex">
+    <paper-toolbar>
+      <div>Header</div>
+      <span class="flex"></span>
+      <paper-icon-button icon="search"></paper-button-icon>
+    </paper-toolbar>
+    <div>Content</div>
+  </paper-header-panel>
+</body>
+</html>
+<!doctype html>
+<html>
+<head>
+  <script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js">
+  </script>
+  <link rel="import"
+        href="/bower_components/paper-header-panel/paper-header-panel.html">
+  <link rel="import"
+        href="/bower_components/paper-toolbar/paper-toolbar.html">
+  <link rel="import"
+        href="/bower_components/paper-icon-button/paper-icon-button.html">
+  <link rel="import"
+        href="/bower_components/paper-tabs/paper-tabs.html">
+  <link rel="import"
+        href="/bower_components/iron-icons/iron-icons.html">
+  <link rel="import"
+        href="/bower_components/iron-flex-layout/iron-flex-layout.html">
+  <link rel="import"
+        href="/bower_components/font-roboto/roboto.html">
+  <style>
+    body {
+      font-family: Roboto, 'Noto', 'Helvetica Neue',
+                   Helvetica, Arial, sans-serif;
+    }
+  </style>
+</head>
+<body class="fullbleed vertical layout">
+  <paper-header-panel class="flex">
+    <paper-toolbar class="medium-tall">
+      <paper-icon-button id="navicon"
+                         icon="menu"></paper-icon-button>
+      <!-- flex class forces span to fill space between icons -->
+      <span class="flex">Title</span>
+      <!-- icon displays at right because of span class above -->
+      <paper-icon-button id="morebutton"
+                         icon="more-vert"></paper-icon-button>
+      <paper-tabs class="bottom fit" selected="0">
+        <paper-tab>ONE</paper-tab>
+        <paper-tab>TWO</paper-tab>
+      </paper-tabs>
+    </paper-toolbar>
+    <div>Content</div>
+  </paper-header-panel>
+</body>
+</html>
+<!doctype html>
+<html>
+<head>
+  <script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js">
+  </script>
+  <link rel="import"
+        href="/bower_components/paper-header-panel/paper-header-panel.html">
+  <link rel="import"
+        href="/bower_components/paper-toolbar/paper-toolbar.html">
+  <link rel="import"
+        href="/bower_components/iron-flex-layout/iron-flex-layout.html">
+  <link rel="import"
+        href="/bower_components/font-roboto/roboto.html">
+  <style>
+    body {
+      font-family: Roboto, 'Noto', 'Helvetica Neue',
+                   Helvetica, Arial, sans-serif;
+    }
+  </style>
+</head>
+<body class="fullbleed vertical layout">
+  <paper-header-panel class="flex">
+    <paper-toolbar id="t" class="tall">
+      <div>Header</div>
+    </paper-toolbar>
+    <div>Content</div>
+  </paper-header-panel>
+</body>
+</html>
+---
+title: Flexbox layout with iron-flex-layout
+summary: "Simple flexbox layout"
+tags: ['beginner']
+elements: ['iron-flex-layout']
+updated: 2015-05-03
+---
+
+<style>
+.demo {
+  background-color: #ccc;
+  padding: 4px;
+  margin: 12px;
+}
+
+.demo div {
+  background-color: white;
+  padding: 12px;
+  margin: 4px;
+}
+
+.tall {
+  height: 124px;
+}
+
+.demo.vertical {
+  height: 250px;
+}
+
+demo-tabs::shadow #results {
+  width: 40%;
+  max-width: initial;
+}
+
+table {
+  margin: 16px 20px;
+}
+td,th {
+  padding 0px 8px;
+}
+</style>
+
+## Overview
+
+The `iron-flex-layout` component provides simple ways to use [CSS flexible box layout](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes), also known as _flexbox_. This component provides two different ways to use flexbox:
+
+*   Layout classes. The layout class stylesheet provides a simple set of class-based flexbox rules. Layout classes
+    let you specify layout properties directly in markup.
+
+*   Custom CSS mixins.  The mixin stylesheet includes custom CSS mixins that can be applied 
+    inside a CSS rule using the `@apply` function. 
+
+Using the classes or CSS mixins is largely a matter of preference. The following sections discuss 
+how to use the each of the stylesheets.
+
+<aside><b>Note:</b> Before using either of these stylesheets, it's helpful to be familiar with the basics 
+of flexbox layout. Chris Coyier's [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) is a 
+good primer.</aside>
+
+### Using layout classes
+
+To use layout classes import the `classes/iron-flex-layout` file.
+
+    <link rel="import" href="bower_components/iron-flex-layout/classes/iron-flex-layout.html">
+
+Then simply apply the classes to any element.
+
+    <div class="layout horizontal wrap">
+
+Many of the layout rules involve combinations of multiple classes (such as `layout horizontal wrap` above).
+The order in which the classes are specified doesn't matter, so `layout horizontal` and `horizontal layout`
+are equivalent.
+
+_Currently_, the layout class stylesheet uses the `/deep/` combinator 
+and therefore, works across all local DOM boundaries. 
+
+Because `/deep/` is slated to be removed from the shadow DOM spec, this
+stylesheet will eventually be replaced by a  set of rules that do not use
+`/deep/`. When that happens, the stylesheet will need to be imported into each
+scope  where it's used.
+
+### Using layout mixins
+
+Custom mixins can be applied inside a Polymer 
+custom element's stylesheet, **or** inside a `custom-style` stylesheet to apply styles to the 
+main document. (They cannot be applied in the main document without a `custom-style` stylesheet.)
+
+**Example: using mixins in the main document**
+
+    <head>
+
+      ...
+
+      <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
+
+      ...
+
+      <!-- main document -- apply mixins in a custom-style element -->
+      <style is="custom-style">
+        .container {
+          @apply(--layout-horizontal);
+          @apply(--layout-wrap);
+        }
+      </style>
+
+    </head>
+    <body>
+
+      <div class="container">
+        <div>One</div>
+        <div>Two</div>
+        <div>Three</div>
+      </div>
+
+    </body>
+
+**Example: using mixins in a Polymer element**
+
+    <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
+
+      ...
+
+    <dom-module id="mixin-demo">
+
+      <!-- inside an element -- apply mixins in a standard style element -->
+      <style>
+        .container {
+          @apply(--layout-horizontal);
+          @apply(--layout-wrap);
+        }
+      </style>
+
+      <template>
+        <div class="container">
+          <div>One</div>
+          <div>Two</div>
+          <div>Three</div>
+        </div>
+      </template>
+
+      <script>
+        Polymer({ is: 'mixin-demo' });
+      </script>
+
+    </dom-module>
+
+
+In general the mixins require a little more code to use, but they can be preferable if you
+don't want to use the classes, or if you want to switch layouts based on a media query.
+
+Custom CSS properties and mixins are features provided by the Polymer library. 
+See [Cross-scope styling](https://www.polymer-project.org/1.0/docs/devguide/styling.html#xscope-styling) 
+in the Polymer developer guide.
+
+## Horizontal and vertical layout
+
+Create a flex container that lays out its children vertically or horizontally.
+
+Class | Mixin | Result 
+:-|:-|:-
+<code>layout horizontal</code>| <code>&#8209;&#8209;layout-horizontal</code> | Horizontal layout container.
+<code>layout vertical</code> | <code>&#8209;&#8209;layout-verical</code> | Vertical layout container.
+
+**Example: classes** 
+
+    <div class="layout horizontal">
+      <div>One</div>
+      <div>Two</div>
+      <div>Three</div>
+    </div>
+
+**Example: mixins** 
+
+    <dom-module id="mixin-demo">
+
+      <style>
+        .container {
+          @apply(--layout-horizontal);
+        }
+      </style>
+
+      <template>
+
+        <div class="container">
+          <div>One</div>
+          <div>Two</div>
+          <div>Three</div>
+        </div>
+
+        ...
+
+**Example output**
+
+<div class="layout horizontal demo">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+</div>
+
+### Flexible children
+
+Children of a flex container can use flex to control their own sizing.
+
+Class | Mixin | Result 
+:-|:-|:-
+<code>flex</code>| <code>&#8209;&#8209;layout-flex</code> | Expand the child to fill available space in the main axis.
+<code>flex-<var>ratio</var></code>| <code>&#8209;&#8209;layout-flex-<var>ratio</var></code> | Assign a flex ratio of 1 to 12.
+<code>flex-none</code>| <code>&#8209;&#8209;layout-flex-none</code> | Don't flex the child.
+<code>flex-auto</code>| <code>&#8209;&#8209;layout-flex-auto</code> | Sets flex `flex-basis` to `auto` and `flex-grow` and `flex-shrink` to 1.
+
+
+**Example: classes** 
+
+        <div class="horizontal layout">
+          <div>Alpha</div>
+          <div class="flex">Beta (flex)</div>
+          <div>Gamma</div>
+        </div>
+
+**Example: mixins** 
+
+    <dom-module id="mixin-demo">
+
+      <style>
+        .container {
+          @apply(--layout-horizontal);
+        }
+        .flexchild {
+          @apply(--layout-flex);
+        }
+      </style>
+
+      <template>
+
+        <div class="container">
+          <div>One</div>
+          <div class="flexchild">Two</div>
+          <div>Three</div>
+        </div>
+
+        ...
+
+**Example output**
+
+<div class="horizontal layout demo">
+  <div>Alpha</div>
+  <div class="flex">Beta (flex)</div>
+  <div>Gamma</div>
+</div>
+
+#### Flexible children in vertical layouts
+
+The same rules can be used for children in vertical layouts.
+
+**Example: classes**
+
+    <div class="vertical layout" style="height:250px">
+      <div>Alpha</div>
+      <div class="flex">Beta (flex)</div>
+      <div>Gamma</div>
+    </div>
+
+**Example: mixins**
+
+    <dom-module id="mixin-demo">
+
+      <style>
+        .container {
+          @apply(--layout-vertical);
+        }
+        .flexchild {
+          @apply(--layout-flex);
+        }
+      </style>
+
+      <template>
+
+        <div class="container">
+          <div>One</div>
+          <div class="flexchild">Two</div>
+          <div>Three</div>
+        </div>
+
+        ...
+
+**Example output**
+
+<div class="vertical layout demo tall">
+  <div>Alpha</div>
+  <div class="flex">Beta (flex)</div>
+  <div>Gamma</div>
+</div>
+
+**Note**: for vertical layouts, the container needs to have a height for the 
+children to flex correctly.
+
+#### Flex ratios
+
+Children elements can be told to take up more space by including a "flex ratio"
+from 1 to 12. This is equivalent to specifying the CSS `flex-grow` property.
+
+For example, the following examples make "Gamma" 2x larger than "Beta" and "Alpha" 3x larger, use 
+`flex-2` and `flex-3`, respectively.
+
+**Example: classes**
+
+        <div class="horizontal layout demo">
+          <div class="flex-3">Alpha</div>
+          <div class="flex">Beta</div>
+          <div class="flex-2">Gamma</div>
+        </div>
+
+**Example: mixins**
+
+    <dom-module id="mixin-demo">
+
+      <style>
+        .container {
+          @apply(--layout-horizontal);
+        }
+        .flexchild {
+          @apply(--layout-flex);
+        }
+        .flex2child {
+          @apply(--layout-flex-2);
+        }
+        .flex3child {
+          @apply(--layout-flex-3);
+        }
+      </style>
+
+      <template>
+
+        <div class="container">
+          <div class="flex3child">One</div>
+          <div class="flexchild">Two</div>
+          <div class="flex2child">Three</div>
+        </div>
+
+        ...
+
+**Example output**
+
+<div class="horizontal layout demo">
+  <div class="flex-3">Alpha</div>
+  <div class="flex">Beta</div>
+  <div class="flex-2">Gamma</div>
+</div>
+
+<!--
+### Auto-vertical
+
+For vertical layouts, you can use the `auto-vertical` attribute
+on a child element to set an automatic flex basis on that element.
+Use this attribute for responsive designs
+if you want elements laid out horizontally when the display is wide
+or vertically when narrow.
+
+The following code uses `core-media-query` to get the screen size.
+If it's smaller than 640 pixels,
+the layout becomes vertical and the elements layout on a flex basis.
+Otherwise, the layout becomes horizontal and the elements are laid out
+normally.
+
+{% raw %}
+    <template is="auto-binding">
+      <core-media-query query="max-width: 640px"
+                        queryMatches="{{phoneScreen}}"></core-media-query>
+      <div layout vertical?="{{phoneScreen}}"
+           horizontal?="{{!phoneScreen}}">
+        <div auto-vertical>Alpha</div>
+        <div auto-vertical>Beta</div>
+        <div auto-vertical>Gamma</div>
+      </div>
+    </template>
+{% endraw %}
+
+<div vertical layout class="demo" style="height:170px">
+  <div auto-vertical>Alpha</div>
+  <div auto-vertical>Beta</div>
+  <div auto-vertical>Gamma</div>
+</div>
+-->
+
+### Cross-axis alignment
+
+By default, children stretch to fit the cross-axis (e.g. _vertical_ stretching in a _horizontal_ layout).
+
+    <div class="horizontal layout">
+      <div>Stretch Fill</div>
+    </div>
+
+<div class="horizontal layout demo tall">
+  <div>Stretch Fill</div>
+</div>
+
+Center _across_ the main axis (e.g. _vertical_ centering elements in a _horizontal_ layout)
+by adding the `center` class or applying the `--layout-center` mixin.
+
+**Example: classes, cross-axis center**
+
+    <div class="horizontal layout center">
+      <div>Center</div>
+    </div>
+
+**Example: mixins, cross-axis center**
+
+    <dom-module id="mixin-demo">
+
+      <style>
+        .container {
+          @apply(--layout-horizontal);
+          @apply(--layout-center);
+        }
+      </style>
+
+      <template>
+
+        <div class="container">
+          <div>Center</div>
+        </div>
+
+        ...
+
+**Example output, cross-axis center**
+
+<div class="horizontal layout center demo tall">
+  <div>Center</div>
+</div>
+
+You can also position at the top/bottom (or left/right in `vertical` layouts) using the `start` or `end`
+classes, or by applying the `--layout-start` or `--layout-end` mixins.
+
+
+**Example: classes, cross-axis start**
+
+    <div class="horizontal layout start">
+      <div>start</div>
+    </div>
+
+**Example: mixins, cross-axis start**
+
+    <dom-module id="mixin-demo">
+
+      <style>
+        .container {
+          @apply(--layout-horizontal);
+          @apply(--layout-start);
+        }
+      </style>
+
+      <template>
+
+        <div class="container">
+          <div>start</div>
+        </div>
+
+        ...
+
+**Example output, cross-axis start**
+
+<div class="horizontal layout start demo tall">
+  <div>start</div>
+</div>
+
+
+**Example: classes, cross-axis end**
+
+    <div class="horizontal layout end">
+      <div>end</div>
+    </div>
+
+**Example: mixins, cross-axis end**
+
+    <dom-module id="mixin-demo">
+
+      <style>
+        .container {
+          @apply(--layout-horizontal);
+          @apply(--layout-end);
+        }
+      </style>
+
+      <template>
+
+        <div class="container">
+          <div>end</div>
+        </div>
+
+        ...
+
+**Example output, cross-axis end**
+
+<div class="horizontal layout end demo tall">
+  <div>end</div>
+</div>
+
+
+### Justification
+
+Justifying aligns contents along the **main axis**.  Justify the layout 
+by specifying  one of the following.
+
+
+Class | Mixin | Result 
+:-|:-|:-
+`start-justified`| <code>&#8209;&#8209;layout-start-justified</code> | Aligns contents at the start of the main axis.
+`center-justified` | <code>&#8209;&#8209;layout-center-justified</code> | Centers contents along the main axis.
+`end-justified` | <code>&#8209;&#8209;layout-end-justified</code> | Aligns contents to the end of the main axis.
+`justified` | <code>&#8209;&#8209;layout-justified</code> | Aligns contents with equal spaces between children. 
+`around-justified` | <code>&#8209;&#8209;layout-around-justified</code> | Aligns contents with equal spaces arround children. 
+
+
+
+**Example: classes, start justified** 
+
+    <div class="horizontal start-justified layout">
+      <div>start-justified</div>
+    </div>
+
+**Example output, start justified**
+
+<div class="horizontal start-justified layout demo">
+  <div>start-justified</div>
+</div>
+
+**Example: mixins, center justified**
+
+    <dom-module id="mixin-demo">
+
+      <style>
+        .container {
+          @apply(--layout-horizontal);
+          @apply(--layout-center-justified);
+        }
+      </style>
+
+      <template>
+
+        <div class="container">
+          <div>center-justified</div>
+        </div>
+
+        ...
+
+**Example output, center justified**
+
+<div class="horizontal center-justified layout demo">
+  <div>center-justified</div>
+</div>
+
+**Example: classes, end justified** 
+
+    <div class="horizontal end-justified layout">
+      <div>end-justified</div>
+    </div>
+
+**Example output, end justified**
+
+<div class="horizontal end-justified layout demo">
+  <div>end-justified</div>
+</div>
+
+**Example: mixins, equal space between elements**
+
+    <dom-module id="mixin-demo">
+
+      <style>
+        .container {
+          @apply(--layout-horizontal);
+          @apply(--layout-justified);
+        }
+      </style>
+
+      <template>
+
+        <div class="container">
+          <div>justified</div>
+          <div>justified</div>
+          <div>justified</div>
+        </div>
+
+        ...
+
+**Example output, equal space between elements**        
+
+<div class="horizontal justified layout demo">
+  <div>justified</div>
+  <div>justified</div>
+  <div>justified</div>
+</div>
+
+**Example: classes, equal space around each element**
+
+    <div class="horizontal around-justified layout">
+      <div>around-justified</div>
+      <div>around-justified</div>
+    </div>
+
+<div class="horizontal around-justified layout demo">
+  <div>around-justified</div>
+  <div>around-justified</div>
+</div>
+
+## Self alignment
+
+Alignment can also be set per-child (instead of using the layout container's rules).
+
+Class | Mixin | Result 
+:-|:-|:-
+`self-start`| <code>&#8209;&#8209;layout-self-start</code> | Aligns the child at the start of the cross-axis.
+`self-center` | <code>&#8209;&#8209;layout-self-center</code> | Centers the child along the cross-axis.
+`self-end` | <code>&#8209;&#8209;layout-self-end</code> | Aligns the child at the end of the cross-axis.
+`self-stretch` | <code>&#8209;&#8209;self-stretch</code> | Stretches the child to fit the cross-axis. 
+
+**Example: classes**
+
+    <div class="horizontal layout" style="height: 120px;">
+      <div class="flex self-start">Alpha</div>
+      <div class="flex self-center">Beta</div>
+      <div class="flex self-end">Gamma</div>
+      <div class="flex self-stretch">Delta</div>
+    </div>
+
+**Example: mixins**
+
+    <dom-module id="mixin-demo">
+
+      <style>
+        .container {
+          @apply(--layout-horizontal);
+          @apply(--layout-justified);
+          height: 120px;
+        }
+        .container div {
+          @apply(--layout-flex);
+        }
+        .child1 {
+          @apply(--layout-self-start);
+        }
+        .child2 {
+          @apply(--layout-self-center);
+        }
+        .child3 {
+          @apply(--layout-self-end);
+        }
+        .child4 {
+          @apply(--layout-self-stretch);
+        }
+      </style>
+
+      <template>
+
+        <div class="container">
+          <div class="child1">Alpha</div>
+          <div class="child2">Beta</div>
+          <div class="child3">Gamma</div>
+          <div class="child4">Delta</div>
+        </div>
+
+        ...
+
+**Example output**
+
+<div class="horizontal layout demo tall">
+  <div class="flex self-start">Alpha</div>
+  <div class="flex self-center">Beta</div>
+  <div class="flex self-end">Gamma</div>
+  <div class="flex self-stretch">Delta</div>
+</div>
+
+<aside><b>Note:</b> The <code>flex</code> class 
+(and <code>--layout-flex</code> mixin) shown in these examples is
+added for the demo and not required for self-alignment.</aside>
+
+
+## Wrapping
+
+Wrapped layouts can be enabled with the `wrap` class or `--layout-wrap` mixin.
+
+**Example: classes**
+
+    <div class="horizontal layout wrap" style="width: 220px">
+      <div>Alpha</div>
+      <div>Beta</div>
+      <div>Gamma</div>
+      <div>Delta</div>
+    </div>
+
+**Example output**
+
+<div class="horizontal layout wrap demo" style="width: 220px">
+  <div>Alpha</div>
+  <div>Beta</div>
+  <div>Gamma</div>
+  <div>Delta</div>
+</div>
+
+## Reversed layouts
+
+Layout direction can be mirrored using the following rules:
+
+Class | Mixin | Result 
+:-|:-|:-
+<code>layout horizontal&#8209;reverse</code>| <code>&#8209;&#8209;layout-horizontal-reverse</code> | Horizontal layout with children laid out in reverse order (last-to-first).
+<code>layout verical&#8209;reverse</code> | <code>&#8209;&#8209;layout-verical-reverse</code> | Vertical layout with children laid out in reverse order.
+<code>layout wrap&#8209;reverse</code> | <code>&#8209;&#8209;layout-wrap-reverse</code> | Wrap layout with wrapped rows placed in the reverse order (for example, in a vertical layout, the second row is placed above the first row, instead of below).
+
+**Example: mixins**
+
+    <dom-module id="mixin-demo">
+
+      <style>
+        .container {
+          @apply(--layout-horizontal-reverse);
+        }
+      </style>
+
+      <template>
+
+        <div class="container">
+          <div>Alpha</div>
+          <div>Beta</div>
+          <div>Gamma</div>
+          <div>Delta</div>
+        </div>
+
+        ...
+
+**Example output**
+
+<div class="horizontal-reverse layout demo">
+  <div>Alpha</div>
+  <div>Beta</div>
+  <div>Gamma</div>
+  <div>Delta</div>
+</div>
+
+## Full bleed &lt;body>
+
+It's common to want the entire `<body>` to fit to the viewport. By themselves, Polymer's layout features on 
+`<body>` don't achieve the result. You can make `<body>` take up the entire viewport by adding the `fullbleed` class:
+
+    <body class="fullbleed vertical layout">
+      <div flex>Fitting a fullbleed body.</div>
+    </body>
+
+This removes its margins and maximizes its height to the viewport. There is no equivalent mixin, but the same result can
+be achieved in CSS very simply:
+
+    body {
+      margin: 0;
+      height: 100vh;
+    }
+
+Note that the `fullbleed` class **only works on the `<body>` tag.** This is the only rule in the 
+stylesheet that is scoped to a particular tag.
+
+
+## General purpose rules
+
+Polymer also includes other general purpose rules for basic positioning:
+
+Class | Mixin | Result 
+:-|:-|:-
+`block`| `--layout-block` | Assigns `display: block`
+`invisible` | `--layout-invisible` | Assigns `visibility: hidden`
+`relative` | `--layout-relative` | Assigns `position: relative`
+`fit` | `--layout-fit` | Sets `position: absolute` and sets `top:0;right:0;bottom:0;left:0;` (aka "trbl fitting"). 
+
+<aside><b>Note:</b>When using `fit` layout, the element must have an ancestor with fixed size and `position: relative` layout
+to fit inside of.
+</aside>
+
+
+**Example: classes**
+
+    <div>Before <span>[A Span]</span> After</div>
+
+    <div>Before <span class="block">[A Block Span]</span> After</div>
+    <div>Before invisible span <span class="invisible">Not displayed</span> After invisible span</div>
+    <div class="relative" style="height: 100px;">
+      <div class="fit" style="background-color: #000;color: white">Fit</div>
+    </div>
+
+**Example output**
+
+<div class="demo">Before <span>[A Span]</span> After</div>
+<div class="demo">Before <span class="block">[A Block Span]</span> After</div>
+<div class="demo">Before invisible span <span class="invisible">Not displayed</span> After invisible span</div>
+<div class="relative" style="height: 100px;" class="demo">
+  <div class="fit" style="background-color: #000;color: white">Fit</div>
+</div>
+---
+title: Responsive Material Design layouts
+summary: "How to create responsive Material Design layouts
+with Paper and Iron elements."
+tags: ['layout']
+elements: ['paper-header-panel','paper-toolbar','paper-drawer-panel',
+'paper-icon-button','paper-tabs','paper-tab','paper-drawer-panel', 'iron-icons',
+'iron-flex-layout']
+updated: 2015-07-23
+---
+
+<style>
+  paper-button {
+    background: #81C784;
+    color: white;
+  }
+</style>
+
+## Introduction
+
+This guide teaches you how to use Paper and Iron elements to create a 
+responsive layout.
+
+## Installation
+
+Below is a list of commands for installing all of the elements mentioned
+in this document. You probably
+do not need to install all of these elements. Read the guide and decide
+how you want to implement your layout, and then install only the elements
+that you need.
+
+```bash
+bower install --save PolymerElements/paper-header-panel
+bower install --save PolymerElements/paper-toolbar
+bower install --save PolymerElements/paper-drawer-panel
+bower install --save PolymerElements/paper-icon-button
+bower install --save PolymerElements/paper-tabs
+bower install --save PolymerElements/paper-tab
+bower install --save PolymerElements/iron-icons
+bower install --save PolymerElements/iron-flex-layout
+```
+
+We'll assume that you can import these elements from `/bower_components/`.
+
+## Creating a header
+
+This section shows you how to:
+
+* Create a standard layout with `paper-header-panel` and `paper-toolbar`,
+  which is probably the most common and easiest layout.
+* Use a custom element for a header.
+* Add icons to a header.
+* Set the height of a header.
+* Add tabs to a header.
+* Modify the disply and behavior of a header.
+
+### Creating a header with `paper-toolbar`
+
+The code below uses a `paper-header-panel` as the container of the
+page and a `paper-toolbar` as a header. When a `paper-toolbar` is a 
+child of `paper-header-panel`, the panel automatically displays 
+the toolbar as the header. All other 
+children are placed in the content area.
+
+```hmtl
+...
+<head>
+...
+  <link rel="import" 
+        href="/bower_components/paper-header-panel/paper-header-panel.html">
+  <link rel="import" 
+        href="/bower_components/paper-toolbar/paper-toolbar.html">
+  <link rel="import" 
+        href="/bower_components/iron-flex-layout/iron-flex-layout.html">
+...
+<body class="fullbleed vertical layout">
+  <!-- paper-header-panel must have an explicit height -->
+  <paper-header-panel class="flex">
+    <paper-toolbar>
+      <div>Header</div>
+    </paper-toolbar>
+    <div>Content</div>
+  </paper-header-panel>
+</body>
+...
+```
+
+<a href="assets/header-and-toolbar.html" target="_blank">
+  <paper-button noink>Demonstration</paper-button>
+</a>
+
+`paper-header-panel` **must have an explicit height**. See the list item
+on `flex` below for an explanation of why the code above works.
+
+`fullbleed`, `vertical`, `layout`, and `flex` are helper classes from
+`iron-flex-layout.html`. We use them in our examples as an easy way 
+to create a responsive design with [Flexbox](http://www.smashingmagazine.com/2015/08/flexible-future-for-web-design-with-flexbox/), 
+but the `paper` elements do not depend 
+on them. Below is a description of each class used in the example above:
+ 
+* `fullbleed` instructs `body` to occupy the entire viewport. 
+* `vertical` and `layout` instruct `body` to stack elements 
+  vertically (use `vertical horizontal` to stack horizontally). `layout`
+  must be accompanied by `vertical` or `horizontal`. It is meaningless
+  on its own.
+* `flex` instructs `paper-panel-header` to stretch to the entire 
+  size of its parent, in this case `body` (which is set to fill the entire 
+  viewport, hence achieving a responsive design).
+
+See [Flexbox layout with iron-flex-layout](/guides/flex-layout) for more
+on `iron-flex-layout`.
+
+### Using other elements for the header
+
+You can use another element as a header by adding the 
+`paper-header` class to the element. 
+
+```html
+<head>
+  <link rel="import" 
+        href="/bower_components/paper-header-panel/paper-header-panel.html">
+  <link rel="import" 
+        href="/bower_components/iron-flex-layout/iron-flex-layout.html">
+...
+<body class="fullbleed vertical layout">
+  <paper-header-panel class="flex">
+    <div class="paper-header">
+      Header
+    </div>
+    <div>Content</div>
+  </paper-header-panel>
+</body>
+```
+
+<a href="assets/custom-header.html" target="_blank">
+  <paper-button noink>Demonstration</paper-button>
+</a>
+
+### Adding icons
+
+Use `paper-icon-button` and `iron-icons` to add icons to your header:
+
+```html
+...
+<head>
+...
+  <link rel="import" 
+        href="/bower_components/paper-header-panel/paper-header-panel.html">
+  <link rel="import" 
+        href="/bower_components/paper-toolbar/paper-toolbar.html">
+  <link rel="import" 
+        href="/bower_components/paper-icon-button/paper-icon-button.html">
+  <link rel="import" 
+        href="/bower_components/iron-icons/iron-icons.html">
+  <link rel="import" 
+        href="/bower_components/iron-flex-layout/iron-flex-layout.html">
+...
+<body class="fullbleed vertical layout">
+  <paper-header-panel class="flex">
+    <paper-toolbar>
+      <div>Header</div>
+      <span class="flex"></span>
+      <paper-icon-button icon="search"></paper-button-icon>
+    </paper-toolbar>
+    <div>Content</div>
+  </paper-header-panel>
+</body>
+```
+
+<a href="assets/icons.html" target="_blank">
+  <paper-button noink>Demonstration</paper-button>
+</a>
+
+`paper-icon-button` displays the icon and handles the icon's behavior.
+`iron-icons` is a collection of SVG icons which you can use for free 
+in your project. 
+
+How does the search icon display on the right side? The trick
+is the `span` between the `div` and the `paper-icon-button`. 
+The `div` containing the text `Header` only takes up as 
+much space as is needed to display 
+the text content. Same with the `paper-icon-button`; it only takes up
+as much space as is needed to display the icon. The `flex`
+class forces the `span` to fill the entire space between the `div` and
+the `paper-icon-button`.
+
+### Setting the height
+
+Use the `medium-tall` (2x regular height) and `tall` (3x regular height) style 
+classes to change the height of your header.
+
+```hmtl
+...
+<head>
+...
+  <link rel="import" 
+        href="/bower_components/paper-header-panel/paper-header-panel.html">
+  <link rel="import" 
+        href="/bower_components/paper-toolbar/paper-toolbar.html">
+  <link rel="import" 
+        href="/bower_components/iron-flex-layout/iron-flex-layout.html">
+...
+<body class="fullbleed vertical layout">
+  <paper-header-panel class="flex">
+    <paper-toolbar class="tall">
+      <div>Header</div>
+    </paper-toolbar>
+    <div>Content</div>
+  </paper-header-panel>
+</body>
+...
+```
+
+<a href="assets/tall-header.html" target="_blank">
+  <paper-button noink>Demonstration</paper-button>
+</a>
+
+### Adding tabs
+
+Use `paper-tabs` to add tabs to your header:
+
+```hmtl
+...
+<head>
+...
+  <link rel="import" 
+        href="/bower_components/paper-header-panel/paper-header-panel.html">
+  <link rel="import" 
+        href="/bower_components/paper-toolbar/paper-toolbar.html">
+  <link rel="import" 
+        href="/bower_components/paper-icon-button/paper-icon-button.html">
+  <link rel="import"
+        href="/bower_components/paper-tabs/paper-tabs.html">
+  <link rel="import" 
+        href="/bower_components/iron-icons/iron-icons.html">
+  <link rel="import" 
+        href="/bower_components/iron-flex-layout/iron-flex-layout.html">
+...
+<body class="fullbleed vertical layout">
+  <paper-header-panel class="flex">
+    <paper-toolbar class="medium-tall">
+      <paper-icon-button id="navicon"
+                         icon="menu"></paper-icon-button>
+      <!-- flex class forces span to fill space between icons -->
+      <span class="flex">Title</span>
+      <!-- icon displays at right because of span class above -->
+      <paper-icon-button id="morebutton"
+                         icon="more-vert"></paper-icon-button>
+      <paper-tabs class="bottom fit" selected="0">
+        <paper-tab>ONE</paper-tab>
+        <paper-tab>TWO</paper-tab>
+      </paper-tabs>
+    </paper-toolbar>
+    <div>Content</div>
+  </paper-header-panel>
+</body>
+...
+```
+
+<a href="assets/tabs.html" target="_blank">
+  <paper-button noink>Demonstration</paper-button>
+</a>
+
+### Modifying header display and behavior
+
+Use the `mode` attribute of `paper-header-panel` to control how the 
+header displays and responds to scrolling. The list below describes 
+the different valid values for `mode`. See the link below for a 
+demonstration of all modes.
+
+* `standard`: The header appears at a higher level than the content area, 
+  with a drop shadow. Content scrolls under the header.
+* `seamed`: The header appears at the same level as the content area, 
+  with a seam between the two (no drop shadow). Content scrolls under the header.
+* `waterfall`: The header initially presents as seamed. When content scrolls 
+  under the header, the header raises up and casts a drop shadow (as in 
+  standard mode).
+* `waterfall-tall`: Like waterfall, except that the toolbar starts off 
+  tall (3x standard height) and condenses to a standard-height 
+  toolbar as the user scrolls. In this mode, `paper-header-panel` controls
+  the height of the toolbar, so you should not set it yourself (via
+  `medium-tall` or `tall`).
+* `scroll`: The header is seamed with the content and scrolls with the content.
+* `cover`: The content scrolls over the header. This mode is designed to 
+  be used with narrow content (for example cards).
+
+<a href="/elements/paper-header-panel?view=demo:demo/index.html" target="_blank">
+  <paper-button noink>Demonstration</paper-button>
+</a>
+
+## Creating a responsive navigation drawer
+
+Use `paper-drawer-panel` to create a left-side or right-side
+navigation menu. 
+
+```html
+<head>
+  <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-toolbar/paper-toolbar.html">
+  <link rel="import" 
+        href="/bower_components/paper-icon-button/paper-icon-button.html">
+  <link rel="import" 
+        href="/bower_components/iron-icons/iron-icons.html">
+  <link rel="import" 
+        href="/bower_components/iron-flex-layout/iron-flex-layout.html">
+...
+<body class="fullbleed vertical layout">
+  <paper-drawer-panel class="flex">
+    <paper-header-panel drawer>
+      <paper-toolbar>
+        <div>Application</div>
+      </paper-toolbar>
+      <div> Drawer content... </div>
+    </paper-header-panel>
+    <paper-header-panel main>
+      <paper-toolbar>
+        <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
+        <div>Title</div>
+      </paper-toolbar>
+      <div> Main content... </div>
+    </paper-header-panel>
+  </paper-drawer-panel>
+</body>
+```
+
+<a href="assets/drawer.html" target="_blank">
+  <paper-button noink>Demonstration</paper-button>
+</a>
+
+On narrow screens, the drawer is hidden by default. The user can 
+touch the button or swipe in order to display the drawer.
+On wide screens, the drawer is always open and the button to open
+the drawer is hidden.
+
+Use the `togglePanel` method to hide or reveal the drawer 
+programmatically. Or, add the `paper-drawer-toggle` attribute to an 
+element. This attribute makes the element act as an open / close button and 
+removes the need to call `togglePanel` explicitly.
+
+Any children with the `drawer` attribute set are placed in the navigation area.
+Any children with the `main` attribute are placed in the main panel.
+---
+title: Using Elements
+summary: "Learn how to install and use Polymer Elements in your own projects."
+tags: ['beginner']
+elements: ['paper-checkbox']
+updated: 2015-05-03
+---
+
+
+## Introduction
+
+The Polymer element sets provide elements that you can use in your web pages 
+and apps. These elements are built with the [Polymer library](https://www.polymer-project.org).
+
+**You don't need to use Polymer directly** to use these elements.
+However, using Polymer you can take advantage of special
+features such as data binding.
+
+## Installing Elements
+
+You can install elements one at a time, or install a whole collection of elements.
+
+Polymer contains a few primary collections of elements:
+
+-   [Iron elements](/browse?package=iron-elements). A set of utility
+    elements including generic UI elements (such as icons, input and layout
+    components), as well as non-UI elements providing features like AJAX, signaling and storage.
+
+-   [Paper elements](/browse?package=paper-elements). A set of UI elements that implement the
+    [material design system](http://www.google.com/design/spec/material-design/).
+
+-   [Gold elements](/browse?package=gold-elements). Form elements for ecommerce.
+
+-   [Neon elements](/browse?package=neon-elements). Animation-related elements.
+
+-   [Platinum elements](/browse?package=platinum-elements). Elements for app-like features, 
+    like push notifications, offline caching and bluetooth.
+
+
+If you find a component you want while browsing the docs, simply click the 
+star <iron-icon class="inline-icon" icon="star-border"></iron-icon> to add it to 
+your collection.
+
+When you've selected some components, you can download either a `bower.json` file or a ZIP file.
+
+*   `bower.json` file. Just the metadata you need to install the components using
+    Bower.
+    
+    Bower is the recommended way to manage components. Bower also handles installing
+    the components' dependencies and updating installed components. For more information, 
+    see [Installing with Bower](#installing-with-bower).
+
+*   ZIP file. A single file containing your selected components and all their dependencies, 
+    so you can unzip and start using them immediately. The ZIP file requires no extra tools, 
+    but doesn't provide a built-in method for updating dependencies. For more information, see
+    [Installing from ZIP files](#installing-from-zip-files).
+
+To download the components in your collection:
+
+1.  Click <iron-icon class="inline-icon" icon="stars"></iron-icon> and 
+    select the **Download** tab.
+
+2.  Choose a download format and click **Download**.
+
+Pick your method and follow the instructions in the download dialog.
+
+If you install one or more elements, you also get the
+[Polymer library](https://www.polymer-project.org), as well as the [web components polyfills](http://webcomponents.org/polyfills/),
+which allow you to run Polymer on browsers that don't yet support
+the web components standards.
+
+### Installing with Bower
+
+The recommended way to install **Polymer** elements
+is through Bower. To install Bower, see the [Bower web site](http://bower.io/).
+
+Bower removes the hassle of dependency management when developing or consuming
+elements. When you install a component, Bower makes sure any dependencies are
+installed as well.
+
+#### Project setup
+
+If you haven't created a `bower.json` file for your application, 
+download the `bower.json` from the catalog and edit it to add your
+own project name and version.
+
+If you already have a `bower.json` file, merge the 
+`dependencies` section of the downloaded file into your existing
+`bower.json` file. 
+
+The resulting file should look something like this:
+
+```
+{
+  "name": "my-project",
+  "version": "0.0.0",
+  "dependencies": {
+    "iron-a11y-keys": "PolymerElements/iron-a11y-keys#^1.0.0",
+    "iron-ajax": "PolymerElements/iron-ajax#^1.0.0",
+    "paper-button": "PolymerElements/paper-button#^1.0.0"
+  }
+}
+```
+
+The next step is to install your selected components:
+
+    bower install
+
+Bower adds a `bower_components/` folder in the root of your project and
+fills it with your selected elements and their dependencies.
+
+
+#### Installing from the command line
+
+You can also install components from the command line using the `bower install` command.
+
+You can also choose one of the commonly-used packages:
+
+-   `PolymerElements/iron-elements`
+
+-   `PolymerElements/paper-elements`
+
+-   `PolymerElements/gold-elements`
+
+For example:
+
+    bower install --save PolymerElements/iron-elements
+
+<aside>
+<b>Tip:</b> <code>--save</code> adds the item as a dependency in your app's <code>bower.json</code>.
+</aside>
+
+
+#### Updating packages
+
+When a new version of Polymer is available, run `bower update`
+in your app directory to update your copy:
+
+    bower update
+
+This updates all packages in `bower_components/`.
+
+### Installing from a ZIP file
+
+When you download a component or component set as a ZIP file, you get all of
+the dependencies bundled into a single archive. It's a great way to get
+started because you don't need to install any additional tools.
+
+Expand the ZIP file in your project directory to create a `bower_components` folder.
+
+![Example Zip Contents](assets/zip-file-contents.png)
+
+Unlike Bower, the ZIP file doesn't provide a built-in method
+for updating dependencies. You can manually update components with a new ZIP
+file, or you can update the files using Bower.
+
+#### Migrating from a ZIP file to Bower
+
+If you downloaded a ZIP file and subsequently install Bower, you can
+use `bower init` to create a new `bower.json` file with your existing
+dependencies in it:
+
+    bower init
+
+This generates a basic `bower.json` file. 
+
+Enter **Y** when prompted to set currently installed components as dependencies.
+
+Some of the questions, like "What kind of modules do you expose," can be skipped 
+by pressing Enter.
+
+
+## Using elements
+
+To use elements, first load the web components polyfill library, `webcomponents-lite.min.js`. 
+Many browsers have yet toimplement the various web components APIs. Until they do, `webcomponents-lite`
+provides [polyfill support](http://webcomponents.org/polyfills/). **Be sure to include
+this file before any code that touches the DOM.**
+
+Once you have some elements installed and you've loaded `webcomponents-lite.min.js`,
+using an element is simply a matter of loading the element file using an
+[HTML Import](http://webcomponents.org/articles/introduction-to-html-imports/).
+
+An example `index.html` file:
+
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <!-- 1. Load webcomponents-lite.min.js for polyfill support. -->
+        <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js">
+        </script>
+
+        <!-- 2. Use an HTML Import to bring in some elements. -->
+        <link rel="import" href="bower_components/paper-button/paper-button.html">
+        <link rel="import" href="bower_components/paper-input/paper-input.html">
+      </head>
+      <body>
+        <!-- 3. Declare the element. Configure using its attributes. -->
+        <paper-input label="Your name here"></paper-input>
+        <paper-button>Say Hello</paper-button>
+        <div id="greeting"></div>
+
+        <script>
+          // To ensure that elements are ready on polyfilled browsers, 
+          // wait for WebComponentsReady. 
+          document.addEventListener('WebComponentsReady', function() {
+            var input = document.querySelector('paper-input');
+            var button = document.querySelector('paper-button');
+            var greeting = document.getElementById("greeting");
+            button.addEventListener('click', function() {
+              greeting.textContent = 'Hello, ' + input.value;
+            });
+          });
+        </script>
+      </body>
+    </html>
+
+<aside>
+<b>Note:</b> You must run your app from a web server for the [HTML Imports](http://webcomponents.org/articles/introduction-to-html-imports/)
+polyfill to work properly. This requirement goes away when the API is available natively.
+</aside>
+
+
+If you aren't using the polyfill, you can't rely on the `WebComponentsReady` event. Instead, 
+simply place script at the end of the file (after any custom elements).
+
+## Polymer element APIs
+
+To use Polymer elements effectively, it's important to be familiar with a
+few of the common Polymer element APIs.
+
+### Attribute and properties
+
+The Polymer element docs list element _properties_, but not element attributes. Unless otherwise
+noted, every property on a Polymer element has a corresponding _attribute_. Use the attribute name
+when configuring a property from markup, or when creating a Polymer data binding to a property.
+
+When mapping attribute names to property names:
+
+*   Attribute names are converted to lowercase property names. For example,
+    the _attribute_ `firstName` maps to the property `firstname`.
+
+*   Attribute names with _dashes_ are converted to _camelCase_ property names 
+    by capitalizing the character following each dash, then removing the dashes. 
+    For example, the _attribute_ `first-name` maps to the property `firstName`.
+
+####  Passing object and array values in attributes
+
+[HTML attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) are string values, but sometimes you need to pass more complicated values into a custom element, such as objects or arrays. Ultimately, it's up to the element author to decide how to decode values passed in as attributes, but many Polymer elements understand attribute values that are a JSON-serialized object or array. For example:
+
+    <roster-list persons='[{"name": "John"}, {"name": "Bob"}]'></roster-list>
+
+For Polymer elements, you can find the expected type for each attribute listed in the API docs. If you pass the wrong type, it may be decoded incorrectly.
+
+The same mappings happen in reverse when converting property names to attribute
+names (for example, if a property is defined using `reflectToAttribute: true`.)
+
+#### Data binding
+
+Polymer elements also support data binding, using a format like this:
+
+    <my-element property-name="{{hostProperty}}"></my-element>
+
+These data binding annotations are only supported in two places:
+
+- In the [local DOM template](https://www.polymer-project.org/1.0/docs/devguide/local-dom.html#template-stamping) of a Polymer element.
+
+- Inside an [autobinding template](https://www.polymer-project.org/1.0/docs/devguide/templates.html#dom-bind).
+
+For more information see [Data binding](https://www.polymer-project.org/1.0/docs/devguide/data-binding.html).
+
+### DOM manipulation
+
+Because not all browsers support shadow DOM natively, Polymer uses a shim called shady DOM
+to achieve shadow DOM's goals of composition and style encapsulation. 
+
+As a result, if you are manipulating a Polymer element, you need to use the `Polymer.dom` 
+APIs to maintain the correct DOM structure. This is particularly important when adding or removing
+children from a Polymer element, for example.
+
+For more information, see [DOM API](https://www.polymer-project.org/1.0/docs/devguide/local-dom.html#dom-api).
+
+### Custom CSS properties and mixins
+
+Many of the Polymer elements can be styled using custom CSS properties and mixins. 
+
+Property and mixin values can be specified:
+
+- Inside a Polymer element's `<style>` tag to specify values scoped to that element.
+- Inside a `custom-style` element to specify values in the document scope.
+
+For more information, see [Cross-scope styling](https://www.polymer-project.org/1.0/docs/devguide/styling.html#xscope-styling)
+and [Custom element for document styling (custom-style)](https://www.polymer-project.org/1.0/docs/devguide/styling.html#custom-style).
+
+<!-- 
+## Next steps
+
+Now that you've got the basic idea of using and installing elements, it's time to start
+building something!
+
+In the next section we'll cover using the Core layout elements
+to structure an application's layout.  Continue on to:
+
+<p>
+<a href="../elements/layout-elements.html">
+  <paper-button raised><core-icon icon="arrow-forward" ></core-icon>Layout elements</paper-button>
+</a>
+</p>
+
+To learn about building your own elements using the Polymer library, see
+[Polymer in 10 minutes](creatingelements.html).
+
+If you'd rather browse the existing elements, check out the
+<a href="../elements/core-elements.html">Polymer Core elements</a>
+and <a href="../elements/paper-elements.html">Paper elements</a> catalogs.
+-->
+
+---
+title: neon-animation
+summary: "A short guide to neon-animation and neon-animated-pages"
+tags: ['animation','intermediate']
+elements: ['neon-animation','neon-animated-pages']
+updated: 2015-05-26
+---
+
+# neon-animation
+
+`neon-animation` is a suite of elements and behaviors to implement pluggable animated transitions for Polymer Elements using [Web Animations](https://w3c.github.io/web-animations/).
+
+*Warning: The API may change.*
+
+* [A basic animatable element](#basic)
+* [Animation configuration](#configuration)
+  * [Animation types](#configuration-types)
+  * [Configuration properties](#configuration-properties)
+  * [Using multiple animations](#configuration-multiple)
+  * [Running animations encapsulated in children nodes](#configuration-encapsulation)
+* [Page transitions](#page-transitions)
+  * [Shared element animations](#shared-element)
+  * [Declarative page transitions](#declarative-page)
+* [Included animations](#animations)
+* [Demos](#demos)
+
+<a name="basic"></a>
+## A basic animatable element
+
+Elements that can be animated should implement the `Polymer.NeonAnimatableBehavior` behavior, or `Polymer.NeonAnimationRunnerBehavior` if they're also responsible for running an animation.
+
+```js
+Polymer({
+  is: 'my-animatable',
+  behaviors: [
+    Polymer.NeonAnimationRunnerBehavior
+  ],
+  properties: {
+    animationConfig: {
+      value: function() {
+        return {
+          // provided by neon-animation/animations/scale-down-animation.html
+          name: 'scale-down-animation',
+          node: this
+        }
+      }
+    }
+  },
+  listeners: {
+    // this event is fired when the animation finishes
+    'neon-animation-finish': '_onNeonAnimationFinish'
+  },
+  animate: function() {
+    // run scale-down-animation
+    this.playAnimation();
+  },
+  _onNeonAnimationFinish: function() {
+    console.log('animation done!');
+  }
+});
+```
+
+[Live demo](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/doc/basic.html)
+
+<a name="configuration"></a>
+## Animation configuration
+
+<a name="configuration-types"></a>
+### Animation types
+
+An element might run different animations, for example it might do something different when it enters the view and when it exits from view. You can set the `animationConfig` property to a map from an animation type to configuration.
+
+```js
+Polymer({
+  is: 'my-dialog',
+  behaviors: [
+    Polymer.NeonAnimationRunnerBehavior
+  ],
+  properties: {
+    opened: {
+      type: Boolean
+    },
+    animationConfig: {
+      value: function() {
+        return {
+          'entry': {
+            // provided by neon-animation/animations/scale-up-animation.html
+            name: 'scale-up-animation',
+            node: this
+          },
+          'exit': {
+            // provided by neon-animation-animations/fade-out-animation.html
+            name: 'fade-out-animation',
+            node: this
+          }
+        }
+      }
+    }
+  },
+  listeners: {
+    'neon-animation-finish': '_onNeonAnimationFinish'
+  },
+  show: function() {
+    this.opened = true;
+    this.style.display = 'inline-block';
+    // run scale-up-animation
+    this.playAnimation('entry');
+  },
+  hide: function() {
+    this.opened = false;
+    // run fade-out-animation
+    this.playAnimation('fade-out-animation');
+  },
+  _onNeonAnimationFinish: function() {
+    if (!this.opened) {
+      this.style.display = 'none';
+    }
+  }
+});
+```
+
+[Live demo](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/doc/types.html)
+
+You can also use the convenience properties `entryAnimation` and `exitAnimation` to set `entry` and `exit` animations:
+
+```js
+properties: {
+  entryAnimation: {
+    value: 'scale-up-animation'
+  },
+  exitAnimation: {
+    value: 'fade-out-animation'
+  }
+}
+```
+
+<a name="configuration-properties"></a>
+### Configuration properties
+
+You can pass additional parameters to configure an animation in the animation configuration object.
+All animations should accept the following properties:
+
+ * `name`: The name of an animation, ie. an element implementing `Polymer.NeonAnimationBehavior`.
+ * `node`: The target node to apply the animation to. Defaults to `this`.
+ * `timing`: Timing properties to use in this animation. They match the [Web Animations Animation Effect Timing interface](https://w3c.github.io/web-animations/#the-animationeffecttiming-interface). The
+ properties include the following:
+     * `duration`: The duration of the animation in milliseconds.
+     * `delay`: The delay before the start of the animation in milliseconds.
+     * `easing`: A timing function for the animation. Matches the CSS timing function values.
+
+Animations may define additional configuration properties and they are listed in their documentation.
+
+<a name="configuration-multiple"></a>
+### Using multiple animations
+
+Set the animation configuration to an array to combine animations, like this:
+
+```js
+animationConfig: {
+  value: function() {
+    return {
+      // fade-in-animation is run with a 50ms delay from slide-down-animation
+      'entry': [{
+        name: 'slide-down-animation',
+        node: this
+      }, {
+        name: 'fade-in-animation',
+        node: this,
+        timing: {delay: 50}
+      }]
+    }
+  }
+}
+```
+
+<a name="configuration-encapsulation"></a>
+### Running animations encapsulated in children nodes
+
+You can include animations in the configuration that are encapsulated in a child element that implement `Polymer.NeonAnimatableBehavior` with the `animatable` property.
+
+```js
+animationConfig: {
+  value: function() {
+    return {
+      // run fade-in-animation on this, and the entry animation on this.$.myAnimatable
+      'entry': [
+        {name: 'fade-in-animation', node: this},
+        {animatable: this.$.myAnimatable, type: 'entry'}
+      ]
+    }
+  }
+}
+```
+
+<a name="page-transitions"></a>
+## Page transitions
+
+*The artist formerly known as `<core-animated-pages>`*
+
+The `neon-animated-pages` element manages a set of pages to switch between, and runs animations between the page transitions. It implements the `Polymer.IronSelectableBehavior` behavior. Each child node should implement `Polymer.NeonAnimatableBehavior` and define the `entry` and `exit` animations. During a page transition, the `entry` animation is run on the new page and the `exit` animation is run on the old page.
+
+<a name="shared-element"></a>
+### Shared element animations
+
+Shared element animations work on multiple nodes. For example, a "hero" animation is used during a page transition to make two elements from separate pages appear to animate as a single element. Shared element animation configurations have an `id` property that identify they belong in the same animation. Elements containing shared elements also have a `sharedElements` property defines a map from `id` to element, the element involved with the animation.
+
+In the incoming page:
+
+```js
+properties: {
+  animationConfig: {
+    value: function() {
+      return {
+        // the incoming page defines the 'entry' animation
+        'entry': {
+          name: 'hero-animation',
+          id: 'hero',
+          toPage: this
+        }
+      }
+    }
+  },
+  sharedElements: {
+    value: function() {
+      return {
+        'hero': this.$.hero
+      }
+    }
+  }
+}
+```
+
+In the outgoing page:
+
+```js
+properties: {
+  animationConfig: {
+    value: function() {
+      return {
+        // the outgoing page defines the 'exit' animation
+        'exit': {
+          name: 'hero-animation',
+          id: 'hero',
+          fromPage: this
+        }
+      }
+    }
+  },
+  sharedElements: {
+    value: function() {
+      return {
+        'hero': this.$.otherHero
+      }
+    }
+  }
+}
+```
+
+<a name="declarative-page"></a>
+### Declarative page transitions
+
+For convenience, if you define the `entry-animation` and `exit-animation` attributes on `<neon-animated-pages>`, those animations will apply for all page transitions.
+
+For example:
+
+```js
+<neon-animated-pages id="pages" class="flex" selected="[[selected]]" entry-animation="slide-from-right-animation" exit-animation="slide-left-animation">
+  <neon-animatable>1</neon-animatable>
+  <neon-animatable>2</neon-animatable>
+  <neon-animatable>3</neon-animatable>
+  <neon-animatable>4</neon-animatable>
+  <neon-animatable>5</neon-animatable>
+</neon-animated-pages>
+```
+
+The new page will slide in from the right, and the old page slide away to the left.
+
+<a name="animations"></a>
+## Included animations
+
+Single element animations:
+
+ * `fade-in-animation` Animates opacity from `0` to `1`.
+ * `fade-out-animation` Animates opacity from `1` to `0`.
+ * `scale-down-animation` Animates transform from `scale(1)` to `scale(0)`.
+ * `scale-up-animation` Animates transform from `scale(0)` to `scale(1)`.
+ * `slide-down-animation` Animates transform from `translateY(-100%)` to `none`.
+ * `slide-up-animation` Animates transform from `none` to `translateY(-100%)`.
+ * `slide-left-animation` Animates transform from `none` to `translateX(-100%)`;
+ * `slide-right-animation` Animates transform from `none` to `translateX(100%)`;
+ * `slide-from-left-animation` Animates transform from `translateX(-100%)` to `none`;
+ * `slide-from-right-animation` Animates transform from `translateX(100%)` to `none`;
+
+ * `transform-animation` Animates a custom transform.
+
+Note that there is a restriction that only one transform animation can be applied on the same element at a time. Use the custom `transform-animation` to combine transform properties.
+
+Shared element animations
+
+ * `hero-animation` Animates an element such that it looks like it scales and transforms from another element.
+ * `ripple-animation` Animates an element to full screen such that it looks like it ripples from another element.
+
+Group animations
+ * `cascaded-animation` Applys an animation to an array of elements with a delay between each.
+
+<a name="demos"></a>
+## Demos
+
+ * [Grid to full screen](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/grid/index.html)
+ * [Animation on load](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/load/index.html)
+ * [List item to detail](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/list/index.html) (For narrow width)
+ * [Dots to squares](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/tiles/index.html)
+ * [Declarative](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/declarative/index.html)
+'use strict';
+
+var path = require('path');
+
+// Include Gulp & Tools We'll Use
+var gulp = require('gulp');
+var gutil = require('gulp-util');
+var $ = require('gulp-load-plugins')();
+var del = require('del');
+var runSequence = require('run-sequence');
+var browserSync = require('browser-sync');
+var pagespeed = require('psi');
+var reload = browserSync.reload;
+var merge = require('merge-stream');
+var superstatic = require('superstatic');
+var plumber = require('gulp-plumber');
+var polybuild = require('./polybuild');
+var inlinesource = require('gulp-inline-source');
+
+var stream = require('./build/catalog/utils/stream').obj;
+var catalogBuilder = require('./build/catalog');
+
+function serve(directories, callback) {
+  var port = process.env.PORT || 3000;
+  var dev = connect();
+  directories.forEach(function (directory) {
+    dev.use(superstatic({ config: { root: directory } }));
+  });
+  dev.listen(port, function () {
+    var url = 'http://localhost:' +  port;
+    $.util.log('Local server started at: ', $.util.colors.cyan(url));
+    if (typeof callback === 'function') {
+      callback(null, url);
+    }
+  });
+}
+
+var AUTOPREFIXER_BROWSERS = [
+  'ie >= 10',
+  'ie_mob >= 10',
+  'ff >= 30',
+  'chrome >= 34',
+  'safari >= 7',
+  'opera >= 23',
+  'ios >= 7',
+  'android >= 4.4',
+  'bb >= 10'
+];
+
+var CATALOG_FILEPATH = __dirname + '/catalog.json';
+
+// 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({esnext: true}))
+    .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',
+    'node_modules/apache-server-configs/dist/.htaccess'
+  ], {
+    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'));
+
+  if (process.env.FIXTURES) {
+    gulp.src(['fixtures/**/*']).pipe(gulp.dest('dist'));
+  }
+
+  return merge(app, bower, elements).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'}));
+});
+
+// Compile and Automatically Prefix Stylesheets
+gulp.task('styles', function () {
+  return gulp.src([
+      'app/styles/**/*.css'
+    ])
+    .pipe($.changed('styles', {extension: '.css'}))
+    // .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
+    .pipe(gulp.dest('.tmp/styles'))
+    .pipe(gulp.dest('dist/styles'))
+    .pipe($.size({title: 'styles'}));
+});
+
+gulp.task('elements', function () {
+  return gulp.src([
+    'app/elements/**/*.css'
+    ])
+    .pipe($.changed('styles', {extension: '.css'}))
+    .pipe(gulp.dest('.tmp/elements'))
+    .pipe(gulp.dest('dist/elements'))
+    .pipe($.size({title: 'elements'}));
+});
+
+// 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'])
+    .pipe(inlinesource())
+    // Replace path for build assets
+    .pipe($.if('*.html', $.replace('elements/elements.html', 'elements/elements.build.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'}));
+});
+
+// Polybuild imports
+gulp.task('polybuild', function () {
+  var DEST_DIR = 'dist/elements';
+
+  return gulp.src('dist/elements/elements.html')
+    .pipe(polybuild())
+    .pipe(gulp.dest(DEST_DIR))
+    .pipe($.size({title: 'polybuild'}));
+});
+
+// Clean Output Directory
+gulp.task('clean', del.bind(null, ['.tmp', 'dist']));
+
+// Clean everything
+gulp.task('distclean', ['clean'], del.bind(null, ['bower_components']));
+
+// Watch Files For Changes & Reload
+gulp.task('serve', ['styles', 'elements', 'catalog:dev'], function () {
+  var dirs = ['.tmp','app'];
+  var mw = [
+    function(req, res, next) {
+      if (req.url.indexOf('/bower_components') !== 0) return next();
+      req.url = req.url.replace(/^\/bower_components/,'');
+      return superstatic({config: {root: 'bower_components'}})(req,res,next);
+    },
+    superstatic({config: {root: '.tmp'}}),
+    superstatic({config: {root: 'app'}})
+  ]
+  if (process.env.FIXTURES) mw.unshift(superstatic({config: {root: 'fixtures'}}));
+
+  browserSync({
+    notify: true,
+    server: {
+      baseDir: dirs,
+      middleware: mw
+    }
+  });
+
+  gulp.watch(['app/**/*.html'], reload);
+  gulp.watch(['app/styles/**/*.css'], ['styles', reload]);
+  gulp.watch(['app/elements/**/*.css'], ['elements', reload]);
+  gulp.watch(['app/scripts/**/*.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,
+    // 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'],
+    'catalog:dist',
+    'polybuild',
+    cb);
+});
+
+// Run PageSpeed Insights
+// Update `url` below to the public URL for your site
+gulp.task('pagespeed', function (cb) {
+  // Update the below URL to the public URL of your site
+  pagespeed.output('example.com', {
+    strategy: 'mobile',
+    // By default we use the PageSpeed Insights free (no API key) tier.
+    // Use a Google Developer API key if you have one: http://goo.gl/RkN0vE
+    // key: 'YOUR_API_KEY'
+  }, cb);
+});
+
+gulp.task('catalog_assets:dist', function() {
+  return gulp.src('guides/assets/**/*').pipe(gulp.dest('dist/guides/assets'));
+});
+
+// Build element catalog JSON file
+gulp.task('catalog:dist', ['catalog_assets:dist'], function () {
+  if (process.env.FIXTURES) return;
+
+  return execCatalogTask({
+    destDir: 'dist'
+  });
+});
+
+gulp.task('catalog_assets:dev', function() {
+  return gulp.src('guides/assets/**/*').pipe(gulp.dest('.tmp/guides/assets'));
+});
+
+gulp.task('catalog:dev', ['catalog_assets:dev'], function () {
+  return execCatalogTask({
+    destDir: '.tmp',
+    space: 2
+  });
+});
+
+function execCatalogTask (options) {
+  var destDir = options.destDir;
+  var space = options.space;
+  var destFilepath = path.join('.', destDir, 'catalog.json');
+
+  return catalogBuilder({
+      src: CATALOG_FILEPATH,
+      destDir: destDir
+    })
+    .pipe(stream.stringify({space: space}))
+    .pipe(stream.writeFile(destFilepath));
+}
+
+
+// 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) {}
+{
+  "name": "polymer-element-catalog",
+  "version": "1.0.1",
+  "description": "A catalog of Google's Web Components",
+  "main": "index.js",
+  "scripts": {
+    "serve": "gulp serve",
+    "serve:dist": "gulp serve:dist",
+    "build": "gulp",
+    "clean": "gulp clean",
+    "deps": "npm install && bower install",
+    "deploy": "firebase deploy",
+    "stage": "firebase deploy -f p-catalog-staging",
+    "deploy-from-scratch":"gulp distclean && bower install && gulp && firebase deploy"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/divshot/polymer-element-catalog.git"
+  },
+  "keywords": [
+    "polymer",
+    "web-components"
+  ],
+  "author": "Google",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/divshot/polymer-element-catalog/issues"
+  },
+  "homepage": "https://github.com/divshot/polymer-element-catalog",
+  "devDependencies": {
+    "JSONStream": "^0.10.0",
+    "apache-server-configs": "^2.7.1",
+    "async": "^0.9.0",
+    "async-each": "^0.1.6",
+    "bower": "^1.4.1",
+    "browser-sync": "^1.3.0",
+    "concat-stream": "^1.4.8",
+    "del": "^0.1.2",
+    "end-of-stream": "^1.1.0",
+    "es6-promise": "^2.1.1",
+    "firebase-tools": "^1.1.6",
+    "from2": "^1.3.0",
+    "front-matter": "^1.0.0",
+    "fs-extra": "^0.18.2",
+    "glob-stream": "^5.0.0",
+    "graceful-fs": "^3.0.6",
+    "gulp": "^3.8.5",
+    "gulp-autoprefixer": "^0.0.8",
+    "gulp-cache": "^0.2.2",
+    "gulp-changed": "^1.0.0",
+    "gulp-crisper": "0.0.4",
+    "gulp-cssmin": "^0.1.6",
+    "gulp-flatten": "^0.0.2",
+    "gulp-if": "^1.2.1",
+    "gulp-imagemin": "^1.0.0",
+    "gulp-inline-source": "^2.1.0",
+    "gulp-jshint": "^1.6.3",
+    "gulp-load-plugins": "^0.5.3",
+    "gulp-minify-html": "^0.1.4",
+    "gulp-plumber": "^1.0.0",
+    "gulp-rename": "^1.2.0",
+    "gulp-replace": "^0.4.0",
+    "gulp-size": "^1.0.0",
+    "gulp-uglify": "^0.3.1",
+    "gulp-uncss": "^0.4.5",
+    "gulp-useref": "^0.6.0",
+    "gulp-util": "^3.0.4",
+    "gulp-vulcanize": "^6.0.0",
+    "hydrolysis": "^1.18.2",
+    "is-stream": "^1.0.1",
+    "jshint-stylish": "^0.4.0",
+    "lazypipe": "^0.2.3",
+    "lodash": "^3.6.0",
+    "marked": "^0.3.3",
+    "merge-stream": "^0.1.6",
+    "mkdirp": "^0.5.0",
+    "nopt": "^3.0.2",
+    "opn": "^1.0.0",
+    "polybuild": "^1.0.3",
+    "polyclean": "^1.2.0",
+    "psi": "^1.0.4",
+    "pumpify": "^1.3.3",
+    "require-dir": "^0.1.0",
+    "run-sequence": "^0.3.6",
+    "split": "^0.3.3",
+    "superstatic": "^2.0.2",
+    "through2": "^0.6.3",
+    "through2-asyncmap": "^1.1.0",
+    "through2-concurrent": "^1.0.0",
+    "through2-filter": "^1.4.1",
+    "through2-map": "^1.4.0",
+    "through2-reduce": "^0.3.0",
+    "vinyl-fs": "^1.0.0",
+    "web-component-tester": "^2.2.3",
+    "writestreamp": "^0.1.0"
+  }
+}
+/**
+ * @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
+ */
+
+//jshint node: true
+'use strict';
+
+var crisper = require('gulp-crisper');
+var lazypipe = require('lazypipe');
+var polyclean = require('polyclean');
+var rename = require('gulp-rename');
+var vulcanize = require('gulp-vulcanize');
+var gutil = require('gulp-util');
+
+var htmlPipe = lazypipe()
+  // inline html imports, scripts and css
+  // also remove html comments
+  .pipe(vulcanize, {
+    inlineScripts: true,
+    inlineCss: true,
+    stripComments: true,
+    stripExcludes: ['bower_components/hydrolysis/hydrolysis-analyzer.html']
+  })
+  // remove whitespace from inline css
+  .pipe(polyclean.cleanCss)
+;
+
+  // remove javascript whitespace
+var leftAlign = polyclean.leftAlignJs;
+
+// minimize javascript with uglifyjs
+var uglify = polyclean.uglifyJs;
+
+module.exports = function(opts) {
+  opts = opts || {};
+  var crush = opts.maximumCrush;
+  var pipe = htmlPipe
+  // switch between cleaning or minimizing javascript
+  .pipe(crush ? uglify : leftAlign)
+  // rename files with an infix '.build'
+  .pipe(rename, function(path) {
+    path.basename += '.build';
+  })
+  // split the javascript out into `.build.js` for CSP compliance
+  .pipe(crisper)
+  ();
+
+  // have to handle errors ourselves, thanks gulp >:(
+  pipe.on('error', function(error) {
+    gutil.log(error.toString());
+    process.exit(1);
+  });
+
+  return pipe;
+};
+#!/usr/bin/env bash
+
+if [[ "${TRAVIS_PULL_REQUEST}" == "false" ]] && [[ "${TRAVIS_TAG}" =~ ^v[0-9]+\.[0-9]+\.[0-9]+$ ]]; then
+  echo "Deploying release $TRAVIS_TAG to production Firebase..."
+  ./node_modules/.bin/firebase deploy
+  exit
+fi
+
+if [[ "${TRAVIS_PULL_REQUEST}" == "false" ]] && [[ "${TRAVIS_BRANCH}" == "master" ]]; then
+  echo "Deploying to staging Firebase..."
+  ./node_modules/.bin/firebase deploy -f p-catalog-staging
+  exit
+fi
 \ No newline at end of file
@@ -100,11 +100,11 @@
             }
  
             /*paper-menu{*/
-                /*/!*visibility: visible ! important;*!/*/
+            /*/!*visibility: visible ! important;*!/*/
             /*}*/
  
             /*paper-item[focused] {*/
-                /*background: #FFFFFF;*/
+            /*background: #FFFFFF;*/
             /*}*/
  
             paper-textarea {