diff --git a/node_modules/mdl-ext/src/demo/etc/buildpages.js b/node_modules/mdl-ext/src/demo/etc/buildpages.js
new file mode 100644
index 0000000..4671609
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/etc/buildpages.js
@@ -0,0 +1,15 @@
+'use strict';
+
+// TODO: Automate this. Use Gulp
+const posthtml = require('posthtml');
+const html = require('fs').readFileSync('partials/lightbox.html').toString();
+
+posthtml()
+  .use(require('posthtml-include')({ encoding: 'utf-8', root: 'partials/' }))
+  .process(html /*, options */)
+  .then(function(result) {
+    console.log(result.html);
+  })
+  .catch(function(error) {
+    console.error(error);
+  });
diff --git a/node_modules/mdl-ext/src/demo/etc/mdl-basic-component.html b/node_modules/mdl-ext/src/demo/etc/mdl-basic-component.html
new file mode 100644
index 0000000..cd4d22f
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/etc/mdl-basic-component.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>A basic MDL component</title>
+  <link rel="stylesheet" href="../node_modules/material-design-lite/material.css" />
+</head>
+<body>
+  <div id="mount">
+    <div class="mdl-basic mdl-js-basic mdl-js-ripple-effect">
+      <p>My basic MDL component</p>
+    </div>
+  </div>
+  <script type="text/javascript" src="../node_modules/material-design-lite/material.js" charset="utf-8"></script>
+  <script type="text/javascript" src="./mdl-basic-component.js" charset="utf-8"></script>
+</body>
+</html>
diff --git a/node_modules/mdl-ext/src/demo/etc/mdl-basic-component.js b/node_modules/mdl-ext/src/demo/etc/mdl-basic-component.js
new file mode 100644
index 0000000..05db9c1
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/etc/mdl-basic-component.js
@@ -0,0 +1,79 @@
+(function() {
+  'use strict';
+
+  /**
+   * https://github.com/google/material-design-lite/issues/4205
+   * @constructor
+   * @param {Element} element The element that will be upgraded.
+   */
+  const MaterialBasic = function MaterialBasic(element) {
+    // Stores the element.
+    this.element_ = element;
+
+    console.log('***** ctor', this.element_.classList, 'data-upgraded', this.element_.getAttribute('data-upgraded'));
+
+    // Initialize instance.
+    this.init();
+  };
+  window['MaterialBasic'] = MaterialBasic;
+
+  /**
+   * Store constants in one place so they can be updated easily.
+   *
+   * @enum {string}
+   * @private
+   */
+  MaterialBasic.prototype.Constant_ = {
+    RIPPLE_COMPONENT: 'MaterialRipple'
+  };
+
+  /**
+   * Store strings for class names defined by this component that are used in
+   * JavaScript. This allows us to simply change it in one place should we
+   * decide to modify at a later date.
+   *
+   * @enum {string}
+   * @private
+   */
+  MaterialBasic.prototype.CssClasses_ = {
+    IS_UPGRADED: 'is-upgraded',
+    JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+    JS_RIPPLE_EFFECT_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events'
+  };
+
+  /**
+   * Initialize component
+   */
+  MaterialBasic.prototype.init = function() {
+    console.log('***** init', this.element_.classList, 'data-upgraded', this.element_.getAttribute('data-upgraded'));
+
+    if (this.element_) {
+      if (this.element_.classList.contains(this.CssClasses_.JS_RIPPLE_EFFECT)) {
+        this.element_.classList.add(this.CssClasses_.JS_RIPPLE_EFFECT_IGNORE_EVENTS);
+      }
+
+      // Do the init required for this component to work
+
+      // Set upgraded flag
+      this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
+    }
+  };
+
+  /**
+   * Downgrade component
+   * E.g remove listeners and clean up resources
+   */
+  MaterialBasic.prototype.mdlDowngrade_ = function() {
+    'use strict';
+  };
+
+  // The component registers itself. It can assume componentHandler is available
+  // in the global scope.
+  /* eslint no-undef: 0 */
+  /* jshint undef:false */
+  componentHandler.register({
+    constructor: MaterialBasic,
+    classAsString: 'MaterialBasic',
+    cssClass: 'mdl-js-basic'
+  });
+})();
diff --git a/node_modules/mdl-ext/src/demo/etc/mdl-iframe-loader.js b/node_modules/mdl-ext/src/demo/etc/mdl-iframe-loader.js
new file mode 100644
index 0000000..abade92
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/etc/mdl-iframe-loader.js
@@ -0,0 +1,100 @@
+'use strict';
+
+/**
+ * Inject required CSS and JS into html fragment loaded into an <iframe>
+ * @type {{}}
+ */
+var mdlIframeLoader = {};
+(function(self) {
+
+  // The CSS and JS needed to run MDL snippets in an <iframe>
+
+  // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
+  try {
+    new window.CustomEvent('test');
+  } catch(e) {
+    var CustomEvent = function(event, params) {
+      var evt;
+      params = params || {
+        bubbles: false,
+        cancelable: false,
+        detail: undefined
+      };
+
+      evt = document.createEvent('CustomEvent');
+      evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+      return evt;
+    };
+
+    CustomEvent.prototype = window.Event.prototype;
+    window.CustomEvent = CustomEvent; // expose definition to window
+  }
+
+  var docs = [
+    { 'type': 'css', 'id': 'font-roboto-css',     'src': 'https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' },
+    { 'type': 'css', 'id': 'material-icon-css',   'src': 'https://fonts.googleapis.com/icon?family=Material+Icons' },
+    { 'type': 'css', 'id': 'dialog-polyfill-css', 'src': 'demo/styles/dialog-polyfill.css' },
+    { 'type': 'css', 'id': 'material-css',        'src': 'https://code.getmdl.io/1.1.3/material.grey-orange.min.css' },
+    { 'type': 'css', 'id': 'mdlext-css',          'src': 'lib/mdl-ext-eqjs.css' },
+    { 'type': 'css', 'id': 'demo-css',            'src': 'demo/styles/demo.css' },
+    { 'type': 'js',  'id': 'dialog-polyfill-js',  'src': 'demo/scripts/dialog-polyfill.js' },
+    { 'type': 'js',  'id': 'material-js',         'src': 'https://code.getmdl.io/1.1.3/material.min.js' },
+    { 'type': 'js',  'id': 'eq-js',               'src': 'demo/scripts/eq.min.js' },
+    { 'type': 'js',  'id': 'mdlext-js',           'src': 'lib/index.js' }
+  ];
+
+  var joinOrigin = function(origin, src) {
+    return src.startsWith('http') ? src : origin.concat(src);
+  };
+
+  var loadResources = function( origin, loadCompleted ) {
+    var expectToLoad = docs.length;
+    var filesLoaded = 0;
+
+    for (var i = 0; i < docs.length; i++) {
+      if (document.getElementById(docs[i].id) === null) {
+        var el;
+        var src = joinOrigin(origin, docs[i].src);
+
+        if (docs[i].type === 'css') {
+          el = document.createElement('link');
+          el.href = src;
+          el.rel = 'stylesheet';
+          el.type = 'text/css';
+        }
+        else {
+          el = document.createElement('script');
+          el.src = src;
+          el.type = 'text/javascript';
+          el.async = false;
+          el.charset = 'utf-8';
+        }
+        el.id = docs[i].id;
+        el.onload = function () {
+          filesLoaded++;
+          if(filesLoaded >= expectToLoad) {
+            loadCompleted();
+          }
+        };
+        document.head.appendChild(el);
+      }
+      else {
+        expectToLoad--;
+      }
+    }
+  };
+
+  /**
+   * Inject required CSS and JS into html fragment loaded into an <iframe>
+   * @param origin path relative to root of this project, e.g. "../../../
+   */
+  self.load = function( origin ) {
+    loadResources( origin, function () {
+      if(window.componentHandler) {
+        window.componentHandler.upgradeDom();
+      }
+    });
+  };
+
+  return self;
+})(mdlIframeLoader);