Ensure the autoprefixer runs on demos and components pages.

Fixes #432

docs/_templates/components.html

@@ -34,11 +34,11 @@
           <br><br>
         </span>
         {% for component in category.components %}
-          {% set demo_css = "../../src/" + component.name + "/demo.css" %}
+        {% set demo_css = "../../dist/components/" + component.name + "/demo.css" %}
           <style>
             {% include demo_css ignore missing %}
           </style>
-          {% set demo_js = "../../src/" + component.name + "/demo.js" %}
+          {% set demo_js = "../../dist/components/" + component.name + "/demo.js" %}
           <script>
             {% include demo_js ignore missing %}
           </script>

docs/_templates/demo.html

@@ -18,11 +18,11 @@
     <link rel="stylesheet" href="{{page.include_prefix}}components/demos.css">
     <script src="{{page.include_prefix}}material.min.js"></script>
 
-    {% set demo_css = "../../src/" + page.component + "/demo.css" %}
+    {% set demo_css = "../../dist/components/" + page.component + "/demo.css" %}
     <style>
       {% include demo_css ignore missing %}
     </style>
-    {% set demo_js = "../../src/" + page.component + "/demo.js" %}
+    {% set demo_js = "../../dist/components/" + page.component + "/demo.js" %}
     <script>
       {% include demo_js ignore missing %}
     </script>

gulpfile.js

@@ -230,8 +230,8 @@ gulp.task('clean', del.bind(null, ['dist', '.publish'], {dot: true}));
 gulp.task('default', ['clean', 'mocha'], function (cb) {
   runSequence(
     'styles',
-    ['jshint', 'jscs', 'scripts', 'styles', 'assets', 'pages', 'demos', 'templates',
-     'images', 'styles-grid'],
+    ['jshint', 'jscs', 'scripts', 'styles', 'assets', 'demos', 'pages',
+     'templates', 'images', 'styles-grid'],
     cb);
 });
 
@@ -285,7 +285,7 @@ function applyTemplate() {
 /**
  * Generates an index.html file for each README in MDL/src directory.
  */
-gulp.task('components', function() {
+gulp.task('components', ['demos'], function() {
   return gulp.src(['./src/**/README.md'], {base: './src'})
     // Add basic front matter.
     .pipe($.header('---\nlayout: component\nbodyclass: component\ninclude_prefix: ../../\n---\n\n'))
@@ -314,10 +314,11 @@ gulp.task('components', function() {
 /**
  * Copies demo files from MDL/src directory.
  */
-gulp.task('demos', ['demohtml'], function () {
+gulp.task('demoresources', function () {
   return gulp.src([
-      './src/**/*.css',
-      './src/**/*.js'
+      './src/**/demos.css',
+      './src/**/demo.css',
+      './src/**/demo.js'
     ], {base: './src'})
       .pipe($.if('*.scss', $.sass({
         precision: 10,
@@ -333,7 +334,7 @@ gulp.task('demos', ['demohtml'], function () {
 /**
  * Generates demo files for testing.
  */
-gulp.task('demohtml', function() {
+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'))

src/badge/demo.css

@@ -22,7 +22,7 @@
   margin-bottom: 15px;
 }
 
-div.toolbar {
+.demo-page--badge .toolbar {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -36,7 +36,7 @@ div.toolbar {
   border-radius: 5px;
 }
 
-.wrapper {
+.demo-page--badge .wrapper {
   flex-grow: 1;
 
   display: flex;
@@ -47,7 +47,7 @@ div.toolbar {
   align-items: flex-start;
 }
 
-.icon {
+.demo-page--badge .icon {
   background-color: transparent;
   border: none;
   display: inline-block;
@@ -61,26 +61,26 @@ div.toolbar {
   font-size: 24px;
 }
 
-.icon.mdl-badge {
+.demo-page--badge .icon.mdl-badge {
   opacity: 1;
 }
 
-.icon:hover {
+.demo-page--badge .icon:hover {
   opacity : 1;
 }
 
-.links {
+.demo-page--badge .links {
   margin-top: 25px;
 }
 
-.links a {
+.demo-page--badge .links a {
   text-decoration: none;
   font-weight: normal;
 
   margin-top: 10px;
 }
 
-.dark {
+.demo-page--badge .dark {
   display: block;
   border-radius: 5px;
 

src/badge/demo.html

@@ -1,4 +1,4 @@
-<div class="demo-preview-block">
+<div class="demo-preview-block demo-page--badge">
 
   <section class="toolbar">
     <div class="toolbar">