diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..cccdcdd
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+bower_components
+*.log
+.idea
diff --git a/bower.json b/bower.json
index 29987f4..f6c0acf 100644
--- a/bower.json
+++ b/bower.json
@@ -10,4 +10,4 @@
     "paper-icon-button": "Polymer/paper-icon-button#master",
     "paper-ripple": "Polymer/paper-ripple#master"
   }
-}
\ No newline at end of file
+}
diff --git a/dev/DEVELOPMENT.md b/dev/DEVELOPMENT.md
new file mode 100644
index 0000000..3509e3b
--- /dev/null
+++ b/dev/DEVELOPMENT.md
@@ -0,0 +1,9 @@
+# Development
+
+Guidelines for running demo, testing functionality and contributing.
+
+## Running demo
+
+1) Install dependencies: `bower install`
+2) Start HTTP server: `$ python -m SimpleHTTPServer`
+3) Open Chrome/Mozilla browser `http://localhost:8000/dev-demo.html`
diff --git a/dev/bower.json b/dev/bower.json
new file mode 100644
index 0000000..3965f9d
--- /dev/null
+++ b/dev/bower.json
@@ -0,0 +1,14 @@
+{
+  "name": "paper-tabs",
+  "private": true,
+  "dependencies": {
+    "core-icons": "Polymer/core-icons#master",
+    "core-selector": "Polymer/core-selector#master",
+    "core-toolbar": "Polymer/core-toolbar#master",
+    "core-media-query": "Polymer/core-media-query#master",
+    "font-roboto": "Polymer/font-roboto#master",
+    "paper-icon-button": "Polymer/paper-icon-button#master",
+    "paper-ripple": "Polymer/paper-ripple#master",
+    "webcomponentsjs": "Polymer/webcomponentsjs#master"
+  }
+}
diff --git a/dev/dev-demo.html b/dev/dev-demo.html
new file mode 100644
index 0000000..5b83a90
--- /dev/null
+++ b/dev/dev-demo.html
@@ -0,0 +1,235 @@
+<!--
+    @license
+    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+    Code distributed by Google as part of the polymer project is also
+    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<!doctype html>
+<html>
+<head>
+  <title>paper-tabs</title>
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+
+  <script src="./bower_components/webcomponentsjs/webcomponents.js"></script>
+
+  <link rel="import" href="./bower_components/core-icons/core-icons.html">
+  <link rel="import" href="./bower_components/font-roboto/roboto.html">
+  <link rel="import" href="../paper-tabs.html">
+  <link rel="import" href="./bower_components/core-toolbar/core-toolbar.html">
+  <link rel="import" href="./bower_components/core-media-query/core-media-query.html">
+  <link rel="import" href="./bower_components/paper-icon-button/paper-icon-button.html">
+
+  <style shim-shadowdom>
+
+    body {
+      font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
+      margin: 0;
+      padding: 24px;
+      color: #333;
+    }
+
+    body.core-narrow {
+      padding: 8px;
+    }
+
+    paper-tabs, core-toolbar {
+      background-color: #00bcd4;
+      color: #fff;
+      box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);
+    }
+
+    core-toolbar paper-tabs {
+      box-shadow: none;
+    }
+
+    paper-tabs[noink][nobar] paper-tab.core-selected {
+      color: #ffff8d;
+    }
+
+    paper-tabs.transparent-teal {
+      background-color: transparent;
+      color: #00bcd4;
+      box-shadow: none;
+    }
+
+    paper-tabs.transparent-teal::shadow #selectionBar {
+      background-color: #00bcd4;
+    }
+
+    paper-tabs.transparent-teal paper-tab::shadow #ink {
+      color: #00bcd4;
+    }
+
+    h3 {
+      font-size: 16px;
+      font-weight: 400;
+    }
+
+  </style>
+
+</head>
+<body unresolved>
+
+  <h3>A. No ink effect and no sliding bar</h3>
+
+  <paper-tabs selected="0" noink nobar>
+
+    <paper-tab>ITEM ONE</paper-tab>
+    <paper-tab>ITEM TWO</paper-tab>
+    <paper-tab>ITEM THREE</paper-tab>
+
+  </paper-tabs>
+
+  <br>
+  <br>
+
+  <h3>B. The bottom bar appears to indicate the selected tab, but without sliding effect.</h3>
+
+  <paper-tabs selected="0" noink noslide>
+
+    <paper-tab>ITEM ONE</paper-tab>
+    <paper-tab>ITEM TWO</paper-tab>
+    <paper-tab>ITEM THREE</paper-tab>
+
+  </paper-tabs>
+
+  <br>
+  <br>
+
+  <h3>C. The bar slides to the selected tab</h3>
+
+  <paper-tabs selected="0" noink>
+
+    <paper-tab>ITEM ONE</paper-tab>
+    <paper-tab>ITEM TWO</paper-tab>
+    <paper-tab>ITEM THREE</paper-tab>
+
+  </paper-tabs>
+
+  <br>
+  <br>
+
+  <h3>D. Inky Tabs</h3>
+
+  <paper-tabs selected="0">
+
+    <paper-tab>ITEM ONE</paper-tab>
+    <paper-tab>ITEM TWO</paper-tab>
+    <paper-tab>ITEM THREE</paper-tab>
+
+  </paper-tabs>
+
+  <br>
+  <br>
+
+  <paper-tabs selected="0" class="transparent-teal">
+
+    <paper-tab>ITEM ONE</paper-tab>
+    <paper-tab>ITEM TWO</paper-tab>
+    <paper-tab>ITEM THREE</paper-tab>
+
+  </paper-tabs>
+
+  <br>
+  <br>
+
+  <h3>E. Scrollable Tabs</h3>
+
+  <paper-tabs id="scrollableTabs" selected="0" scrollable>
+
+    <paper-tab>NUMBER ONE ITEM</paper-tab>
+    <paper-tab>ITEM TWO</paper-tab>
+    <paper-tab>THE THIRD ITEM</paper-tab>
+    <paper-tab>THE ITEM FOUR</paper-tab>
+    <paper-tab>FIFTH</paper-tab>
+    <paper-tab>THE SIXTH TAB</paper-tab>
+    <paper-tab>NUMBER SEVEN</paper-tab>
+    <paper-tab>EIGHT</paper-tab>
+    <paper-tab>NUMBER NINE</paper-tab>
+    <paper-tab>THE TENTH</paper-tab>
+    <paper-tab>THE ITEM ELEVEN</paper-tab>
+    <paper-tab>TWELFTH ITEM</paper-tab>
+
+  </paper-tabs>
+
+  <br>
+  <br>
+
+  <h3>F. Link Tabs</h3>
+
+  <paper-tabs selected="0" link>
+
+    <paper-tab><a href="#item1" horizontal center-center layout>ITEM ONE</a></paper-tab>
+    <paper-tab><a href="#item2" horizontal center-center layout>ITEM TWO</a></paper-tab>
+    <paper-tab><a href="#item3" horizontal center-center layout>ITEM THREE</a></paper-tab>
+
+  </paper-tabs>
+
+  <br>
+  <br>
+
+  <h3>G. Tabs in Toolbar</h3>
+
+  <core-toolbar class="medium-tall">
+
+    <paper-icon-button icon="menu"></paper-icon-button>
+    <div flex>Title</div>
+    <paper-icon-button icon="search"></paper-icon-button>
+    <paper-icon-button icon="more-vert"></paper-icon-button>
+
+    <div class="bottom fit" horizontal layout>
+
+      <paper-tabs selected="0" flex style="max-width: 600px;">
+
+        <paper-tab>ITEM ONE</paper-tab>
+        <paper-tab>ITEM TWO</paper-tab>
+        <paper-tab>ITEM THREE</paper-tab>
+
+      </paper-tabs>
+
+    </div>
+
+  </core-toolbar>
+
+  <br>
+  <br>
+
+  <core-toolbar class="tall">
+
+    <paper-tabs selected="0" class="bottom" self-end style="width: 300px;">
+
+      <paper-tab>ITEM ONE</paper-tab>
+      <paper-tab>ITEM TWO</paper-tab>
+
+    </paper-tabs>
+
+    <div class="bottom" flex></div>
+
+    <paper-icon-button class="bottom" icon="search"></paper-icon-button>
+
+  </core-toolbar>
+
+  <!-- detect when window is narrow -->
+  <core-media-query id="mediaQuery" query="max-width: 640px"></core-media-query>
+
+  <script>
+
+    document.querySelector('#mediaQuery').addEventListener('core-media-change',
+      function(e) {
+        document.body.classList.toggle('core-narrow', e.detail.matches);
+        var scrollableTabs = document.querySelector('#scrollableTabs')
+        if (scrollableTabs) {
+          console.log(scrollableTabs);
+          scrollableTabs.updateBar();
+        } else {
+          throw Error("#scrollableTabs element could not be found in the document")
+        }
+      });
+
+  </script>
+
+</body>
+</html>
