Add MDL support

app/prompts.json

@@ -166,6 +166,13 @@
         },
         "name": "Angular Material, the reference implementation of the Google's Material Design specification"
       },
+      {
+        "value": {
+          "key": "material-design-lite",
+          "module": null
+        },
+        "name": "Material Design Lite, add a Material Design look and feel to your websites."
+      },
       {
         "value": {
           "key": "foundation",

app/techs.json

@@ -29,6 +29,12 @@
         "description": "The Angular reference implementation of the Google's Material Design specification.",
         "logo": "angular-material.png"
     },
+    "material-design-lite": {
+        "title": "Material Design Lite",
+        "url": "http://www.getmdl.io/",
+        "description": "Add a Material Design look and feel to your websites.",
+        "logo": "material-design-lite.png"
+    },
     "browsersync": {
         "title": "BrowserSync",
         "url": "http://browsersync.io/",

app/templates/_bower.json

@@ -40,6 +40,9 @@
     "foundation": "~5.5.2",
 <% } if(props.ui.key === 'angular-material') { -%>
     "angular-material": "~0.9.7",
+<% } if(props.ui.key === 'material-design-lite') { -%>
+    "material-design-lite": "~1.0.4",
+    "material-design-iconfont": "~0.0.2",
 <% } if(props.bootstrapComponents.key === 'ui-bootstrap') { -%>
     "angular-bootstrap": "~0.13.0",
 <% } if(props.bootstrapComponents.key === 'angular-strap') { -%>

app/templates/gulp/_build.js

@@ -60,6 +60,8 @@ gulp.task('html', ['inject', 'partials'], function () {
     .pipe($.replace('../<%- computedPaths.appToBower %>/bower_components/bootstrap/fonts/', '../fonts/'))
 <% } else if (props.ui.key === 'bootstrap' && props.cssPreprocessor.extension === 'styl') { -%>
     .pipe($.replace('../<%- computedPaths.appToBower %>/bower_components/bootstrap-stylus/fonts/', '../fonts/'))
+<% } else if (props.ui.key === 'material-design-lite') { -%>
+    .pipe($.replace('../<%- computedPaths.appToBower %>/bower_components/material-design-iconfont/iconfont/', '../fonts/'))
 <% } -%>
     .pipe($.minifyCss({ processImport: false }))
     .pipe($.sourcemaps.write('maps'))
@@ -96,6 +98,8 @@ gulp.task('images', function () {
 gulp.task('fonts', function () {
 <% if (props.ui.key === 'bootstrap' && props.cssPreprocessor.extension === 'styl') { -%>
   return gulp.src($.mainBowerFiles().concat('bower_components/bootstrap-stylus/fonts/*'))
+<% } else if (props.ui.key === 'material-design-lite') { -%>
+  return gulp.src($.mainBowerFiles().concat('bower_components/material-design-iconfont/iconfont/*'))
 <% } else { -%>
   return gulp.src($.mainBowerFiles())
 <% } -%>

app/templates/src/app/_material-design-lite/__material-design-lite-index.css

@@ -0,0 +1,80 @@
+@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500,700);
+
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(../../bower_components/material-design-iconfont/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
+  src: local('Material Icons'),
+       local('MaterialIcons-Regular'),
+       url(../../bower_components/material-design-iconfont/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
+       url(../../bower_components/material-design-iconfont/iconfont/MaterialIcons-Regular.woff) format('woff'),
+       url(../../bower_components/material-design-iconfont/iconfont/MaterialIcons-Regular.ttf) format('truetype');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;  /* Preferred icon size */
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+}
+
+main {
+  padding: 20px;
+  background: #fafafa;
+}
+
+.acme-card-wide.mdl-card {
+  width: 100%;
+}
+.acme-card-wide > .mdl-card__title {
+  color: #fff;
+  height: 176px;
+  background: url('../assets/images/yeoman.png') center / cover;
+  background-size: 110px;
+  background-repeat: no-repeat;
+}
+.acme-card-wide > .mdl-card__title > .mdl-card__title-text {
+  color: #000;
+}
+.acme-card-wide > .mdl-card__menu {
+  color: #000;
+}
+.acme-card-wide > .mdl-card__actions {
+  text-align: center;
+}
+
+.acme-card-square.mdl-card {
+  width: 100%;
+  min-height: 200px;
+}
+.acme-card-square > .mdl-card__title {
+  color: #fff;
+  background: #283593;
+}
+.acme-card-square > .mdl-card__media {
+  color: #fff;
+  background: none;
+  text-align: center;
+}
+.acme-card-square > .mdl-card__media > img {
+  height: 100px;
+}

app/templates/src/app/_material-design-lite/__material-design-lite-index.less

@@ -0,0 +1,103 @@
+/**
+ *  Do not remove the comments below. It's the markers used by wiredep to inject
+ *  sass dependencies when defined in the bower.json of your dependencies
+ */
+// bower:less
+// endbower
+
+@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500,700);
+
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(../../bower_components/material-design-iconfont/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
+  src: local('Material Icons'),
+       local('MaterialIcons-Regular'),
+       url(../../bower_components/material-design-iconfont/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
+       url(../../bower_components/material-design-iconfont/iconfont/MaterialIcons-Regular.woff) format('woff'),
+       url(../../bower_components/material-design-iconfont/iconfont/MaterialIcons-Regular.ttf) format('truetype');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;  /* Preferred icon size */
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+}
+
+main {
+  padding: 20px;
+  background: #fafafa;
+}
+.acme-card-wide {
+  &.mdl-card {
+    width: 100%;
+  }
+
+  > .mdl-card__title {
+    color: #fff;
+    height: 176px;
+    background: url('../assets/images/yeoman.png') center / cover;
+    background-size: 110px;
+    background-repeat: no-repeat;
+  }
+
+  > .mdl-card__title > .mdl-card__title-text {
+    color: #000;
+  }
+
+  > .mdl-card__menu {
+    color: #000;
+  }
+
+  > .mdl-card__actions {
+    text-align: center;
+  }
+}
+
+.acme-card-square {
+  &.mdl-card {
+    width: 100%;
+    min-height: 200px;
+  }
+
+  > .mdl-card__title {
+    color: #fff;
+    background: #283593;
+  }
+
+  > .mdl-card__media {
+    color: #fff;
+    background: none;
+    text-align: center;
+    img {
+      height: 100px;
+    }
+  }
+}
+
+/**
+ *  Do not remove the comment below. It's the markers used by gulp-inject to inject
+ *  all your sass files automatically
+ */
+// injector
+// endinjector

app/templates/src/app/_material-design-lite/__material-design-lite-index.scss

@@ -0,0 +1,103 @@
+/**
+ *  Do not remove the comments below. It's the markers used by wiredep to inject
+ *  sass dependencies when defined in the bower.json of your dependencies
+ */
+// bower:scss
+// endbower
+
+@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500,700);
+
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(../../bower_components/material-design-iconfont/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
+  src: local('Material Icons'),
+       local('MaterialIcons-Regular'),
+       url(../../bower_components/material-design-iconfont/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
+       url(../../bower_components/material-design-iconfont/iconfont/MaterialIcons-Regular.woff) format('woff'),
+       url(../../bower_components/material-design-iconfont/iconfont/MaterialIcons-Regular.ttf) format('truetype');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;  /* Preferred icon size */
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+}
+
+main {
+  padding: 20px;
+  background: #fafafa;
+}
+.acme-card-wide {
+  &.mdl-card {
+    width: 100%;
+  }
+
+  > .mdl-card__title {
+    color: #fff;
+    height: 176px;
+    background: url('../assets/images/yeoman.png') center / cover;
+    background-size: 110px;
+    background-repeat: no-repeat;
+  }
+
+  > .mdl-card__title > .mdl-card__title-text {
+    color: #000;
+  }
+
+  > .mdl-card__menu {
+    color: #000;
+  }
+
+  > .mdl-card__actions {
+    text-align: center;
+  }
+}
+
+.acme-card-square {
+  &.mdl-card {
+    width: 100%;
+    min-height: 200px;
+  }
+
+  > .mdl-card__title {
+    color: #fff;
+    background: #283593;
+  }
+
+  > .mdl-card__media {
+    color: #fff;
+    background: none;
+    text-align: center;
+    img {
+      height: 100px;
+    }
+  }
+}
+
+/**
+ *  Do not remove the comment below. It's the markers used by gulp-inject to inject
+ *  all your sass files automatically
+ */
+// injector
+// endinjector