Generate demo widget based on snippets.

2015-06-23 17:22:22 +01:00 · 2015-06-23 17:22:22 +01:00 · 310c6c89a9
parent 45345361e8
commit 310c6c89a9
23 changed files with 463 additions and 148 deletions
--- a/docs/_assets/main.css
+++ b/docs/_assets/main.css
@ -475,6 +475,142 @@ body:not(.about) .mdl-navigation__link.download > button {
  margin-top: 100px;
  margin-bottom: 0;
 }
+/* Components Snippets */
+.snippet-group {
+  margin-left: -16px;
+  margin-right: -16px;
+  margin-bottom: 84px;
+}
+.snippet-group .snippet-header {
+  display: table;
+  border-collapse:collapse;
+  border-spacing: 0;
+  width: 100%;
+}
+.snippet-group .snippet-demos,
+.snippet-group .snippet-captions{
+  display: table-row;
+}
+.snippet-group .snippet-captions {
+  background-color: white;
+}
+.snippet-group .snippet-demo .snippet-demo-container {
+  text-align: left;
+  display: inline-block;
+}
+.snippet-group .snippet-demo,
+.snippet-group .snippet-caption {
+  display: table-cell;
+  width: 1px;
+  text-align: center;
+}
+.snippet-group .snippet-caption {
+  font-size: 13px;
+  padding: 20px 40px;
+  white-space: nowrap;
+  text-align: center;
+  position: relative;
+}
+.snippet-group .snippet-caption .snippet-copy {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  opacity: 0;
+  z-index: 3;
+}
+.snippet-group .snippet-caption .mdl-button {
+  text-transform: none;
+  font-size: 13px;
+  font-weight: normal;
+}
+.snippet-group .snippet-caption .snippet-copy embed {
+  height: 100%;
+  width: 785%;
+}
+.snippet-group .snippet-caption .mdl-button__ripple-container {
+  z-index: 2;
+}
+.snippet-group .snippet-caption:hover {
+  color: black;
+}
+.snippet-group .snippet-caption .material-icons {
+  position: relative;
+  top: 6px;
+  margin-right: 10px;
+}
+.snippet-group .snippet-demo {
+  padding: 0px 40px 40px 40px;
+}
+.snippet-group .snippet-demos .snippet-demo:first-child,
+.snippet-group .snippet-captions .snippet-caption:first-child,
+.snippet-group .snippet-demos .snippet-demo:last-child,
+.snippet-group .snippet-captions .snippet-caption:last-child {
+  width: 50%;
+}
+.snippet-group .snippet-code {
+  position: relative;
+}
+.snippet-group .snippet-code pre {
+  margin: 0;
+  border-radius: 0;
+  display: block;
+  padding: 0;
+  overflow: hidden;
+}
+.snippet-group .snippet-code code {
+  padding: 8px 16px;
+  position: relative;
+  max-height: none;
+}
+.snippet-group .snippet-code pre[class*=language-]>code[data-language] {
+  max-height: none;
+}
+.snippet-group .snippet-code code:first-of-type {
+  padding-top: 16px;
+}
+.snippet-group .snippet-code code:last-of-type {
+  padding-bottom: 16px;
+}
+.snippet-group .snippet-code code.highlighted {
+  background-color: rgba(0,0,0,0.05);
+}
+.snippet-group .snippet-code code.highlighted:only-of-type {
+  background-color: transparent;
+}
+.snippet-group .snippet-code code::after {
+  display: none;
+}
+.snippet-group .snippet-code code.highlighted::after {
+  display: inline-block;
+  content: 'Copy';
+  color: rgba(0,0,0,0.5);
+  font-size: 13px;
+  background-color: rgba(0,0,0,0.1);
+  border-top-left-radius: 5px;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  padding: 3px 10px;
+}
+.snippet-group .snippet-code code.highlighted.copied::after {
+  content: 'Copied';
+  color: rgba(255,255,255,0.5);
+  background-color: rgba(0,0,0,0.6);
+}
+.no-flash .snippet-group .snippet-code code.highlighted::after,
+.no-flash .snippet-group .copy{
+  display: none;
+}
+@media (max-width: 850px) {
+  .snippet-group .snippet-demo,
+  .snippet-group .snippet-caption {
+    padding-left: 1%;
+    padding-right: 1%;
+  }
+}
 /* Prism and code blocks styling and overrides */
 .token.attr-name, .token.builtin, .token.selector, .token.string {
  color: #E91E63;
--- a/docs/_assets/snippets.js
+++ b/docs/_assets/snippets.js
@ -0,0 +1,127 @@
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+function MaterialComponentsSnippets() {
+  'use strict';
+
+  this.snippetButtons = document.querySelectorAll('.snippet-caption .mdl-button');
+  this.init();
+}
+
+/**
+ * Initializes the MaterialComponentsSnippets components.
+ */
+MaterialComponentsSnippets.prototype.init = function() {
+  'use strict';
+
+  for (var i = 0; i < this.snippetButtons.length; i++) {
+    this.snippetButtons[i].addEventListener('mouseover',
+        this.onMouseOverHandler(this.snippetButtons[i]));
+    this.snippetButtons[i].addEventListener('mouseout',
+        this.onMouseOutHandler(this.snippetButtons[i]));
+    this.snippetButtons[i].addEventListener('mouseup',
+        this.onMouseDownHandler(this.snippetButtons[i]));
+  }
+};
+
+/**
+ * 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
+ */
+MaterialComponentsSnippets.prototype.CssClasses_ = {
+  HIGHLIGHTED: 'highlighted',
+  COPIED: 'copied'
+};
+
+/**
+ * Gets the <code> element that is referenced but the given button.
+ * @param  {HTMLElement} button The snippet copy button
+ * @return {HTMLElement} the code element referenced by the button
+ */
+MaterialComponentsSnippets.prototype.getCodeElement = function(button) {
+  'use strict';
+
+  var href = button.getAttribute('href');
+  if (href && href.indexOf('#') >= 0) {
+    return document.getElementById(href.split('#')[1]);
+  }
+  return null;
+};
+
+/**
+ * Returns a mouseDownHandler for a snippet copy button.
+ * @param  {HTMLElement} button the snippet copy button
+ * @return {function} the click handler
+ */
+MaterialComponentsSnippets.prototype.onMouseDownHandler = function(button) {
+  'use strict';
+
+  var ctx = this;
+  return function() {
+    var code = ctx.getCodeElement(button);
+    if (code) {
+      code.classList.add(ctx.CssClasses_.COPIED);
+    }
+  };
+};
+
+/**
+ * Returns a mouseOverHandler for a snippet copy button.
+ * @param  {HTMLElement} button the snippet copy button
+ * @return {function} the click handler
+ */
+MaterialComponentsSnippets.prototype.onMouseOverHandler = function(button) {
+  'use strict';
+
+  var ctx = this;
+  return function() {
+    var code = ctx.getCodeElement(button);
+    if (code) {
+      code.classList.add(ctx.CssClasses_.HIGHLIGHTED);
+    }
+  };
+};
+
+/**
+ * Returns a mouseOutHandler for a snippet copy button.
+ * @param  {HTMLElement} button the snippet copy button
+ * @return {function} the click handler
+ */
+MaterialComponentsSnippets.prototype.onMouseOutHandler = function(button) {
+  'use strict';
+
+  var ctx = this;
+  return function() {
+    var code = ctx.getCodeElement(button);
+    if (code) {
+      code.classList.remove(ctx.CssClasses_.HIGHLIGHTED);
+      code.classList.remove(ctx.CssClasses_.COPIED);
+    }
+  };
+};
+
+window.addEventListener('load', function() {
+  'use strict';
+
+  // Handle the case where Flash is not available.
+  if (swfobject && !swfobject.hasFlashPlayerVersion('9.0.0')) {
+    document.body.classList.add('no-flash');
+  }
+  new MaterialComponentsSnippets();
+});
--- a/docs/_pages/components.md
+++ b/docs/_pages/components.md
@ -16,6 +16,40 @@ categories:
    components:
      - name: button
        class: mdl-button
+        snippets:
+          - snippet_group:
+            - caption: Colored FAB
+              file: fab-colored.html
+            - caption: With ripple
+              file: fab-colored-ripple.html
+          - snippet_group:
+            - caption: Plain FAB
+              file: fab.html
+            - caption: With ripple
+              file: fab-ripple.html
+            - caption: Disabled
+              file: fab-disabled.html
+          - snippet_group:
+            - caption: Raised Button
+              file: raised.html
+            - caption: With ripple
+              file: raised-ripple.html
+            - caption: Disabled
+              file: raised-disabled.html
+          - snippet_group:
+            - caption: Colored button
+              file: raised-colored.html
+            - caption: Accent colored
+              file: raised-accent-ripple.html
+            - caption: With Ripples
+              file: raised-ripple-accent.html
+          - snippet_group:
+            - caption: Flat button
+              file: flat.html
+            - caption: With ripple
+              file: flat-ripple.html
+            - caption: Disabled
+              file: flat-disabled.html
  - name: cards
    title: Cards
    description: Self-contained pieces of paper with data.
--- a/docs/_templates/components.html
+++ b/docs/_templates/components.html
@ -2,6 +2,8 @@

 {% block content %}
 <link href="{{page.include_prefix}}assets/components.css" rel="stylesheet">
+<script src="{{page.include_prefix}}assets/swfobject.js"></script>
+<script src="{{page.include_prefix}}assets/snippets.js"></script>
 <script src="{{page.include_prefix}}assets/components.js"></script>
 <link rel="stylesheet" href="{{page.include_prefix}}components/demos.css">

@ -52,6 +54,12 @@
              <h1 class="mdl-components__classname" id="{{ category.name }}-section/{{ component.name }}">{{ component.caption }}</h1>
            </span>
          {%- endif %}
+          <!-- Generating snippets -->
+          {% for snippet_group in component.snippets %}
+            {% set snippet_group["component_name"] = component.name %}
+            {% include "./snippets.html" with snippet_group only %}
+          {%- endfor %}
+          <!-- Adding the demo page -->
        {% set demo_css = "../../dist/components/" + component.name + "/demo.css" %}
          <style>
            {% include demo_css ignore missing %}
--- a/docs/_templates/snippets.html
+++ b/docs/_templates/snippets.html
@ -0,0 +1,53 @@
+<div class="snippet-group">
+  <div class="snippet-header">
+    <div class="snippet-demos">
+      <div class="snippet-demo"></div>
+      {% for snippet in snippet_group %}
+        {% set snippet_file = "../../src/" + component_name + "/snippets/" + snippet.file %}
+        <div class="snippet-demo">
+          <div class="snippet-demo-container" id="{{ component_name }}/{{ snippet.file }}/demo">
+          {% include snippet_file ignore missing %}
+          </div>
+        </div>
+      {%- endfor %}
+      <div class="snippet-demo"></div>
+    </div>
+    <div class="snippet-captions">
+      <div class="snippet-caption"></div>
+      {% for snippet in snippet_group %}
+        <div class="snippet-caption">
+          <button class="mdl-color-text--grey-600 mdl-button mdl-js-button mdl-js-ripple-effect" id="{{ component_name }}/{{ snippet.file }}/copy" href="#{{ component_name }}/{{ snippet.file }}">
+            <i class="material-icons copy">content_copy</i> {{ snippet.caption }}
+          </button>
+        </div>
+      {%- endfor %}
+      <div class="snippet-caption"></div>
+    </div>
+  </div>
+  <div class="snippet-code">
+    <pre class="language-markup">{% for snippet in snippet_group %}<code id="{{ component_name }}/{{ snippet.file }}"></code>{%- endfor %}</pre>
+    <script>
+      // Grab the MDL element code now and inject it into the <code> block and the copy-paste button.
+      // We're doing this inline/now to make sure this is done before the MDL library modifies the DOM.
+      {% for snippet in snippet_group %}
+        var demoContainer = document.getElementById("{{ component_name }}/{{ snippet.file }}/demo");
+        var codeContainer = document.getElementById("{{ component_name }}/{{ snippet.file }}");
+        var copyButton = document.getElementById("{{ component_name }}/{{ snippet.file }}/copy");
+
+        // Put the code in the <code> block.
+        var code = demoContainer.innerHTML.trim();
+        codeContainer.textContent = code + "\n";
+
+        // Add the copy-to-clipboard Flash button overlay in the button.
+        var clippySwf = '<object class="snippet-copy" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">' +
+          '<param name="movie" value="/assets/clippy.swf"/>' +
+          '<param name="wmode" value="transparent" />' +
+          '<param name="quality" value="low" />' +
+          '<param name="scale" value="exactfit" />' +
+          '<embed src="/assets/clippy.swf" scale="exactfit" quality="low" wmode="transparent" FlashVars="text=' + code.replace(/"/g, '&quot;') + '"/>' +
+          '</object>';
+        copyButton.innerHTML += clippySwf;
+      {%- endfor %}
+    </script>
+  </div>
+</div>
--- a/gulpfile.js
+++ b/gulpfile.js
@ -21,6 +21,8 @@

 // Include Gulp & Tools We'll Use
 var gulp = require('gulp');
+var fs = require('fs');
+var merge = require('merge-stream');
 var $ = require('gulp-load-plugins')();
 var del = require('del');
 var runSequence = require('run-sequence');
@ -334,29 +336,46 @@ gulp.task('demoresources', function () {
 });

 /**
- * Generates demo files for testing.
+ * Generates demo files for testing made of all the snippets and the demo file
+ * put together.
 */
 gulp.task('demos', ['demoresources'], function() {
-  return gulp.src(['./src/**/demo.html'])
-    // Add basic front matter.
-    .pipe($.header('---\nlayout: demo\nbodyclass: demo\ninclude_prefix: ../../\n---\n\n'))
-    .pipe($.frontMatter({property: 'page', remove: true}))
-    .pipe($.marked())
-    .pipe((function () {
-      var componentPages = [];
-      return through.obj(function(file, enc, cb) {
-        file.page.component = file.relative.split('/')[0];
-        componentPages.push(file.page);
-        this.push(file);
-        cb();
-      },
-      function(cb) {
-        site.components = componentPages;
-        cb();
+
+  function getComponentFolders() {
+    return fs.readdirSync('./src/')
+      .filter(function(file) {
+        return fs.statSync(path.join('./src/', file)).isDirectory();
      });
-    })())
-    .pipe(applyTemplate())
-    .pipe(gulp.dest('dist/components'));
+  }
+
+  var tasks = getComponentFolders().map(function(component) {
+    return gulp.src([
+        './src/' + component + '/snippets/*.html',
+        './src/' + component + '/demo.html'
+      ])
+      .pipe($.concat('/demo.html'))
+      // Add basic front matter.
+      .pipe($.header('---\nlayout: demo\nbodyclass: demo\ninclude_prefix: ../../\n---\n\n'))
+      .pipe($.frontMatter({property: 'page', remove: true}))
+      .pipe($.marked())
+      .pipe((function () {
+        var componentPages = [];
+        return through.obj(function(file, enc, cb) {
+            file.page.component = component;
+            componentPages.push(file.page);
+            this.push(file);
+            cb();
+          },
+          function(cb) {
+            site.components = componentPages;
+            cb();
+          });
+      })())
+      .pipe(applyTemplate())
+      .pipe(gulp.dest('dist/components/' + component));
+  });
+
+  return merge(tasks);
 });

 /**
@ -385,7 +404,11 @@ gulp.task('pages', ['components'], function() {
 * Copies assets from MDL and _assets directory.
 */
 gulp.task('assets', function () {
-  return gulp.src(['docs/_assets/**/*'])
+  return gulp.src([
+      'docs/_assets/**/*',
+      'node_modules/clippy/build/clippy.swf',
+      'node_modules/swfobject-npm/swfobject/src/swfobject.js'
+    ])
    .pipe($.if(/\.(svg|jpg|png)$/i, $.imagemin({
      progressive: true,
      interlaced: true
--- a/package.json
+++ b/package.json
@ -54,6 +54,7 @@
    "jshint-stylish": "^1.0.0",
    "merge-stream": "^0.1.7",
    "mocha": "^2.1.0",
+    "napa": "^1.2.0",
    "opn": "^1.0.0",
    "require-dir": "^0.3.0",
    "run-sequence": "^1.0.2",
@ -64,6 +65,10 @@
    "node": ">=0.10.0"
  },
  "scripts": {
+    "install": "napa mojombo/clippy",
    "test": "gulp && git status | grep 'working directory clean' >/dev/null || (echo 'Please commit all changes generated by building'; exit 1)"
+  },
+  "dependencies": {
+    "swfobject-npm": "^2.3.0-1"
  }
 }
--- a/src/button/demo.css
+++ b/src/button/demo.css
@ -1,45 +0,0 @@
-/**
- * Copyright 2015 Google Inc. All Rights Reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.demo-button {
-  display: inline-block;
-  margin: 20px 20px 0 0;
- }
-
-.demo-button .highlight-button {
-  position:relative;
-  top: -50px;
-  left: 50%;
-}
-
-.demo-button .adjust {
-  margin-left: -30px;
-}
-
-.demo-button .highlight-text {
-  text-align: center;
-}
-
-.demo-button .overflow-vis {
-  overflow: visible;
-}
-
-.demo-button .codepen-mover-button {
-  position: absolute;
-  bottom: 5px;
-  right: 8px;
-  background-color: #cccccc;
-}
--- a/src/button/demo.html
+++ b/src/button/demo.html
@ -1,82 +0,0 @@
-<div class="demo-preview-block demo-button">
-  <div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
-    <div class="mdl-tabs__tab-bar">
-      <a class="mdl-tabs__tab overflow-vis is-active" href="#raised-button">
-        <button class="mdl-button mdl-js-button mdl-button--raised highlight-button adjust">
-          Button
-        </button>
-        <span class="adjust">Raised Button</span>
-      </a>
-      <a class="mdl-tabs__tab overflow-vis" href="#plain-fab">
-        <button class="mdl-button mdl-js-button mdl-button--fab highlight-button adjust">
-          <i class="material-icons">add</i>
-        </button>
-        <span class="adjust">Plain FAB</span>
-      </a>
-      <a class="mdl-tabs__tab overflow-vis" href="#colored-fab">
-        <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored highlight-button adjust">
-          <i class="material-icons">add</i>
-        </button>
-        <span class="adjust">Colored FAB</span>
-      </a>
-      <a class="mdl-tabs__tab overflow-vis" href="#colored-fab-ripple">
-        <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-js-ripple-effect highlight-button adjust">
-          <i class="material-icons">add</i>
-        </button>
-        <span class="adjust">FAB w/ Ripple</span>
-      </a>
-      <a class="mdl-tabs__tab overflow-vis" href="#colored-fab-disabled">
-        <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--disabled highlight-button adjust" disabled>
-          <i class="material-icons">add</i>
-        </button>
-        <span class="adjust">Disabled</span>
-      </a>
-    </div>
-    <br>
-    <div class="mdl-tabs__panel is-active" id="raised-button">
-      <pre class="demo-code"><code class="language-markup">
-        &lt;link rel="stylesheet" href="https://storage.googleapis.com/materialdesignlite/material.css"&gt;
-        &lt;script src="https://storage.googleapis.com/materialdesignlite/material.min.js"&gt;&lt;/script&gt;
-        &lt;button class="mdl-button mdl-js-button mdl-button--raised"&gt;
-        Button
-        &lt;/button&gt;
-      </code></pre>
-    </div>
-    <div class="mdl-tabs__panel" id="plain-fab">
-      <pre class="demo-code"><code class="language-markup">
-        &lt;link rel="stylesheet" href="https://storage.googleapis.com/materialdesignlite/material.css"&gt;
-        &lt;script src="https://storage.googleapis.com/materialdesignlite/material.min.js"&gt;&lt;/script&gt;
-        &lt;button class="mdl-button mdl-js-button mdl-button--fab"&gt;
-        &lt;i class="material-icons"&gt;add&lt;/i&gt;
-        &lt;/button&gt;
-      </code></pre>
-    </div>
-    <div class="mdl-tabs__panel" id="colored-fab">
-      <pre class="demo-code"><code class="language-markup">
-        &lt;link rel="stylesheet" href="https://storage.googleapis.com/materialdesignlite/material.css"&gt;
-        &lt;script src="https://storage.googleapis.com/materialdesignlite/material.min.js"&gt;&lt;/script&gt;
-        &lt;button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored"&gt;
-        &lt;i class="material-icons"&gt;add&lt;/i&gt;
-        &lt;/button&gt;
-      </code></pre>
-    </div>
-    <div class="mdl-tabs__panel" id="colored-fab-ripple">
-      <pre class="demo-code"><code class="language-markup">
-        &lt;link rel="stylesheet" href="https://storage.googleapis.com/materialdesignlite/material.css"&gt;
-        &lt;script src="https://storage.googleapis.com/materialdesignlite/material.min.js"&gt;&lt;/script&gt;
-        &lt;button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-js-ripple-effect"&gt;
-        &lt;i class="material-icons"&gt;add&lt;/i&gt;
-        &lt;/button&gt;
-      </code></pre>
-    </div>
-    <div class="mdl-tabs__panel" id="colored-fab-disabled">
-      <pre class="demo-code"><code class="language-markup">
-        &lt;link rel="stylesheet" href="https://storage.googleapis.com/materialdesignlite/material.css"&gt;
-        &lt;script src="https://storage.googleapis.com/materialdesignlite/material.min.js"&gt;&lt;/script&gt;
-        &lt;button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored" disabled&gt;
-        &lt;i class="material-icons"&gt;add&lt;/i&gt;
-        &lt;/button&gt;
-      </code></pre>
-    </div>
-  </div>
-</div>
--- a/src/button/snippets/fab-colored-ripple.html
+++ b/src/button/snippets/fab-colored-ripple.html
@ -0,0 +1,4 @@
+<!-- Colored FAB button with ripple -->
+<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
+  <i class="material-icons">add</i>
+</button>
--- a/src/button/snippets/fab-colored.html
+++ b/src/button/snippets/fab-colored.html
@ -0,0 +1,4 @@
+<!-- Colored FAB button -->
+<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
+  <i class="material-icons">add</i>
+</button>
--- a/src/button/snippets/fab-disabled.html
+++ b/src/button/snippets/fab-disabled.html
@ -0,0 +1,4 @@
+<!-- Disabled FAB button -->
+<button class="mdl-button mdl-js-button mdl-button--fab" disabled>
+  <i class="material-icons">add</i>
+</button>
--- a/src/button/snippets/fab-ripple.html
+++ b/src/button/snippets/fab-ripple.html
@ -0,0 +1,4 @@
+<!-- FAB button with ripple -->
+<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
+  <i class="material-icons">add</i>
+</button>
--- a/src/button/snippets/fab.html
+++ b/src/button/snippets/fab.html
@ -0,0 +1,4 @@
+<!-- FAB button -->
+<button class="mdl-button mdl-js-button mdl-button--fab">
+  <i class="material-icons">add</i>
+</button>
--- a/src/button/snippets/flat-disabled.html
+++ b/src/button/snippets/flat-disabled.html
@ -0,0 +1,4 @@
+<!-- Disabled flat button -->
+<button class="mdl-button mdl-js-button" disabled>
+  Button
+</button>
--- a/src/button/snippets/flat-ripple.html
+++ b/src/button/snippets/flat-ripple.html
@ -0,0 +1,4 @@
+<!-- Flat button with ripple -->
+<button class="mdl-button mdl-js-button mdl-js-ripple-effect">
+  Button
+</button>
--- a/src/button/snippets/flat.html
+++ b/src/button/snippets/flat.html
@ -0,0 +1,4 @@
+<!-- Flat button -->
+<button class="mdl-button mdl-js-button">
+  Button
+</button>
--- a/src/button/snippets/raised-accent-ripple.html
+++ b/src/button/snippets/raised-accent-ripple.html
@ -0,0 +1,4 @@
+<!-- Accent-colored raised button with ripple -->
+<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect">
+  Button
+</button>
--- a/src/button/snippets/raised-colored.html
+++ b/src/button/snippets/raised-colored.html
@ -0,0 +1,4 @@
+<!-- Colored raised button -->
+<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
+  Button
+</button>
--- a/src/button/snippets/raised-disabled.html
+++ b/src/button/snippets/raised-disabled.html
@ -0,0 +1,4 @@
+<!-- Raised disabled button-->
+<button class="mdl-button mdl-js-button mdl-button--raised" disabled>
+  Button
+</button>
--- a/src/button/snippets/raised-ripple-accent.html
+++ b/src/button/snippets/raised-ripple-accent.html
@ -0,0 +1,4 @@
+<!-- Accent-colored raised button with ripple -->
+<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
+  Button
+</button>
--- a/src/button/snippets/raised-ripple.html
+++ b/src/button/snippets/raised-ripple.html
@ -0,0 +1,4 @@
+<!-- Raised button with ripple -->
+<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
+  Button
+</button>
--- a/src/button/snippets/raised.html
+++ b/src/button/snippets/raised.html
@ -0,0 +1,4 @@
+<!-- Raised button -->
+<button class="mdl-button mdl-js-button mdl-button--raised">
+  Button
+</button>