diff --git a/node_modules/mdl-ext/src/grid/snippets/grid.html b/node_modules/mdl-ext/src/grid/snippets/grid.html
new file mode 100644
index 0000000..26e6b11
--- /dev/null
+++ b/node_modules/mdl-ext/src/grid/snippets/grid.html
@@ -0,0 +1,121 @@
+<p>Element queries vs Media Queries. Drag the slider to see the effect</p>
+
+<style>
+
+  .demo-grid {
+    margin-bottom: 16px;
+  }
+  .demo-grid .mdl-grid,
+  .demo-grid .mdlext-grid {
+    /*padding: 0;*/
+  }
+  .demo-grid .mdl-cell,
+  .demo-grid .mdlext-cell {
+    background: rgb(63,81,181);
+    text-align: center;
+    color: white;
+    padding: 10px;
+    border: 1px solid #aaaaaa;
+  }
+  .demo-grid .mdl-cell:nth-child(odd),
+  .demo-grid .mdlext-cell:nth-child(odd) {
+    background: rgb(33,150,243);
+  }
+  .demo-grid-c .mdl-cell,
+  .demo-grid-c .mdlext-cell {
+    background: rgb(255,213,79);
+    color: #000;
+    border: 0;
+  }
+  .demo-grid-c .mdl-cell:nth-child(odd),
+  .demo-grid-c .mdlext-cell:nth-child(odd) {
+    background: rgb(165,214,167);
+    color: #000;
+  }
+</style>
+
+
+<p id="grid-container-width" style="text-align: center;">
+  <strong>100</strong>%
+  <input class="mdl-slider mdl-js-slider" type="range" min="50" max="100" value="100" step="10" tabindex="0">
+</p>
+
+<div style="border: 1px solid #dddddd;">
+  <div id="grid-container" style="margin: 0 auto;">
+
+    <h5>mdlext-grid, using element queries</h5>
+    <div class="demo-grid">
+      <div class="mdlext-grid mdlext-grid--no-spacing">
+        <div class="mdlext-cell mdlext-cell--1-col">1</div>
+        <div class="mdlext-cell mdlext-cell--1-col">1</div>
+        <div class="mdlext-cell mdlext-cell--1-col">1</div>
+        <div class="mdlext-cell mdlext-cell--1-col">1</div>
+        <div class="mdlext-cell mdlext-cell--1-col">1</div>
+        <div class="mdlext-cell mdlext-cell--1-col">1</div>
+        <div class="mdlext-cell mdlext-cell--1-col">1</div>
+        <div class="mdlext-cell mdlext-cell--1-col">1</div>
+        <div class="mdlext-cell mdlext-cell--1-col">1</div>
+        <div class="mdlext-cell mdlext-cell--1-col">1</div>
+        <div class="mdlext-cell mdlext-cell--1-col">1</div>
+        <div class="mdlext-cell mdlext-cell--1-col">1</div>
+      </div>
+    </div>
+
+    <div class="demo-grid demo-grid-c">
+      <div class="mdlext-grid mdlext-grid--no-spacing">
+        <div class="mdlext-cell mdlext-cell--4-col mdlext-cell--2-col-tablet mdlext-cell--1-col-phone">4 (2 tablet, 1 phone)</div>
+        <div class="mdlext-cell mdlext-cell--6-col mdlext-cell--4-col-tablet mdlext-cell--3-col-phone">6 (4 tablet, 3 phone)</div>
+        <div class="mdlext-cell mdlext-cell--2-col mdlext-cell--2-col-tablet mdlext-cell--hide-phone">2 (2 tablet, hide phone)</div>
+      </div>
+    </div>
+
+
+    <h5>mdl-grid, using media queries</h5>
+    <div class="demo-grid">
+      <div class="mdl-grid mdl-grid--no-spacing">
+        <div class="mdl-cell mdl-cell--1-col">1</div>
+        <div class="mdl-cell mdl-cell--1-col">1</div>
+        <div class="mdl-cell mdl-cell--1-col">1</div>
+        <div class="mdl-cell mdl-cell--1-col">1</div>
+        <div class="mdl-cell mdl-cell--1-col">1</div>
+        <div class="mdl-cell mdl-cell--1-col">1</div>
+        <div class="mdl-cell mdl-cell--1-col">1</div>
+        <div class="mdl-cell mdl-cell--1-col">1</div>
+        <div class="mdl-cell mdl-cell--1-col">1</div>
+        <div class="mdl-cell mdl-cell--1-col">1</div>
+        <div class="mdl-cell mdl-cell--1-col">1</div>
+        <div class="mdl-cell mdl-cell--1-col">1</div>
+      </div>
+    </div>
+
+    <div class="demo-grid demo-grid-c">
+      <div class="mdl-grid mdl-grid--no-spacing">
+        <div class="mdl-cell mdl-cell--4-col mdl-cell--2-col-tablet mdl-cell--1-col-phone">4 (2 tablet, 1 phone)</div>
+        <div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--3-col-phone">6 (4 tablet, 3 phone)</div>
+        <div class="mdl-cell mdl-cell--2-col mdl-cell--2-col-tablet mdl-cell--hide-phone">2 (2 tablet, hide phone)</div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  'use strict';
+  window.addEventListener('load', function() {
+    (function() {
+      'use strict';
+      var widthLabel = document.querySelector('#grid-container-width strong');
+      var slider = document.querySelector('#grid-container-width input');
+
+      slider.addEventListener('input', function(e) {
+        setWidth(this.value);
+      }.bind(slider));
+
+      function setWidth(value) {
+        widthLabel.innerText = value;
+        document.querySelector('#grid-container').style.width = value + '%';
+        eqjs.refreshNodes();
+        eqjs.query(undefined, true);
+      }
+    }());
+  });
+</script>