Add support for MDL CSS Framework

app/prompts.json

@@ -159,6 +159,14 @@
         },
         "name": "Angular Material, the reference implementation of the Google's Material Design specification"
       },
+      {
+        "value": {
+          "key": "mdl",
+          "module": null
+        },
+        "name": "Material Design Lite, light-weight implementation of Google's Material Design"
+      },
+
       {
         "value": {
           "key": "foundation",

app/src/router.js

@@ -10,14 +10,20 @@ module.exports = function(GulpAngularGenerator) {
     var routerPartialSrc = 'src/app/main/__' + this.props.ui.key + '.html';
 
     if (this.props.router.module === 'ngRoute') {
-      this.routerHtml = '<div ng-view></div>';
+      this.routerHtml = '<div ng-view'
+      if(this.props.ui.key === 'mdl')
+        this.routerHtml += ' class="mdl-layout__container"'
+      this.routerHtml += '></div>';
       this.files.push({
         src: 'src/app/_ngroute/__ngroute.' + this.props.jsPreprocessor.srcExtension,
         dest: 'src/app/index.route.' + this.props.jsPreprocessor.extension,
         template: true
       });
     } else if (this.props.router.module === 'ui.router') {
-      this.routerHtml = '<div ui-view></div>';
+      this.routerHtml = '<div ui-view' 
+      if(this.props.ui.key === 'mdl')
+        this.routerHtml += ' class="mdl-layout__container"'
+      this.routerHtml += '></div>';
       this.files.push({
         src: 'src/app/_uirouter/__uirouter.' + this.props.jsPreprocessor.srcExtension,
         dest: 'src/app/index.route.' + this.props.jsPreprocessor.extension,

app/techs.json

@@ -11,6 +11,12 @@
         "description": "Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.",
         "logo": "bootstrap.png"
     },
+    "mdl": {
+        "title": "Material Design Lite",
+        "url": "http://getmdl.io",
+        "description": "Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible.",
+        "logo": "mdl.png"
+    },
     "ui-bootstrap": {
         "title": "Angular UI Bootstrap",
         "url": "http://angular-ui.github.io/bootstrap/",

app/templates/_bower.json

@@ -38,6 +38,8 @@
     "foundation": "~5.5.2",
 <% } if(props.ui.key === 'angular-material') { -%>
     "angular-material": "~0.9.7",
+<% } if(props.ui.key === 'mdl') { -%>
+    "material-design-lite": "~1.0.1",
 <% } if(props.bootstrapComponents.key === 'ui-bootstrap') { -%>
     "angular-bootstrap": "~0.13.0",
 <% } if(props.bootstrapComponents.key === 'angular-strap') { -%>

app/templates/src/app/_mdl/__mdl-index.css

@@ -0,0 +1,47 @@
+@import url(//fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic);
+
+html {
+  font-family: 'Roboto Slab', serif;
+}
+
+[layout=row] {
+  flex-direction: row;
+}
+
+.browsehappy {
+  margin: 0.2em 0;
+  background: #ccc;
+  color: #000;
+  padding: 0.2em 0;
+}
+
+.thumbnail img.pull-right {
+  width: 50px;
+}
+
+section.jumbotron {
+  margin-bottom: 30px;
+  padding: 1px 30px;
+  background-color: #5aadbb;
+  text-align: center;
+
+  color: white;
+}
+
+section.jumbotron h1 {
+  font-size: 3em;
+}
+
+.mdl-grid {
+  display: flex;
+  flex-flow: row wrap;
+}
+
+.mdl-grid .mdl-card {
+  width: 30%;
+}
+
+.mdl-grid .mdl-card img.pull-right {
+  float: right;
+  width: 50px;
+}

app/templates/src/app/_mdl/__mdl-index.less

@@ -0,0 +1,62 @@
+/**
+ *  Do not remove this comments bellow. It's the markers used by wiredep to inject
+ *  less dependencies when defined in the bower.json of your dependencies
+ */
+// bower:less
+// endbower
+
+@import url(//fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,700,700italic,400italic);
+
+html {
+  font-family: 'Roboto Slab', serif;
+}
+
+[layout=row] {
+  flex-direction: row;
+}
+
+.browsehappy {
+  margin: 0.2em 0;
+  background: #ccc;
+  color: #000;
+  padding: 0.2em 0;
+}
+
+.thumbnail {
+  img.pull-right {
+    width: 50px;
+  }
+}
+
+section.jumbotron {
+  margin-bottom: 30px;
+  padding: 1px 30px;
+  background-color: #5aadbb;
+  text-align: center;
+
+  color: white;
+
+  h1 {
+    font-size: 3em;
+  }
+}
+
+.mdl-grid {
+  display: flex;
+  flex-flow: row wrap;
+  .mdl-card {
+    width: 30%;
+
+    img.pull-right {
+      float: right;
+      width: 50px;
+    }
+  }
+}
+
+/**
+ *  Do not remove this comments bellow. It's the markers used by gulp-inject to inject
+ *  all your less files automatically
+ */
+// injector
+// endinjector

app/templates/src/app/_mdl/__mdl-index.scss

@@ -0,0 +1,63 @@
+/**
+ *  Do not remove this comments bellow. 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+Slab:400,700|Roboto:400,700,700italic,400italic);
+
+html {
+  font-family: 'Roboto Slab', serif;
+}
+
+[layout=row] {
+  flex-direction: row;
+}
+
+.browsehappy {
+  margin: 0.2em 0;
+  background: #ccc;
+  color: #000;
+  padding: 0.2em 0;
+}
+
+.thumbnail {
+  img.pull-right {
+    width: 50px;
+  }
+}
+
+section.jumbotron {
+  margin-bottom: 30px;
+  padding: 1px 30px;
+  background-color: #5aadbb;
+  text-align: center;
+
+  color: white;
+
+  h1 {
+    font-size: 3em;
+  }
+}
+
+.mdl-grid {
+  display: flex;
+  flex-flow: row wrap;
+
+  .mdl-card {
+    width: 30%;
+
+    img.pull-right {
+      float: right;
+      width: 50px;
+    }
+  }
+}
+
+/**
+ *  Do not remove this comments bellow. It's the markers used by gulp-inject to inject
+ *  all your sass files automatically
+ */
+// injector
+// endinjector

app/templates/src/app/_mdl/__mdl-index.styl

@@ -0,0 +1,53 @@
+/**
+ *  Do not remove this comments bellow. It's the markers used by wiredep to inject
+ *  stylus dependencies when defined in the bower.json of your dependencies
+ */
+// bower:styl
+// endbower
+
+@import url("//fonts.googleapis.com/css?family=Roboto\+Slab:400,700|Roboto:400,700,700italic,400italic")
+
+html
+  font-family 'Roboto Slab', serif
+
+[layout=row]
+  flex-direction row
+
+.browsehappy
+  margin 0.2em 0
+  background #ccc
+  color #000
+  padding 0.2em 0
+
+.thumbnail
+  img
+    &.pull-right
+      width 50px
+
+
+section
+  &.jumbotron
+    margin-bottom 30px
+    padding 1px 30px
+    background-color #5aadbb
+    text-align center
+    color white
+    h1
+      font-size 3em
+
+.mdl-grid
+  display flex
+  flex-flow row wrap
+  .mdl-card
+    width 30%
+    img
+      &.pull-right
+        float right
+        width 50px
+
+/**
+ *  Do not remove this comments bellow. It's the markers used by gulp-inject to inject
+ *  all your stylus files automatically
+ */
+// injector
+// endinjector

app/templates/src/app/components/navbar/__mdl-navbar.html

@@ -0,0 +1,14 @@
+<div class="mdl-layout mdl-js-layout mdl-layout__header--waterfall">
+  <div class="mdl-layout__header-row">
+    <span class="mdl-layout-title">
+      Gulp Angular
+    </span>
+    <div class="navigation-container">
+      <nav class="mdl-navigation">
+        <a class="mdl-navigation__link mdl-typeography--text-uppercase" href="">Home</a>
+        <a class="mdl-navigation__link mdl-typeography--text-uppercase" href="">About</a>
+        <a class="mdl-navigation__link mdl-typeography--text-uppercase" href="">Contact</a>
+      </nav>
+    </div>
+  </div>
+</div>

app/templates/src/app/main/__mdl.html

@@ -0,0 +1,45 @@
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header" data-upgraded=",MaterialLayout">
+  <div class="mdl-layout__header mdl-layout__header--waterfall mdl-color--black">
+    <div class="mdl-layout__header-row">
+      <span class="mdl-layout-title">
+        Gulp Angular
+      </span>
+      <div class="navigation-container">
+        <nav class="mdl-navigation">
+          <a class="mdl-navigation__link mdl-typeography--text-uppercase" href="">Home</a>
+          <a class="mdl-navigation__link mdl-typeography--text-uppercase" href="">About</a>
+          <a class="mdl-navigation__link mdl-typeography--text-uppercase" href="">Contact</a>
+        </nav>
+      </div>
+    </div>
+  </div>
+  <div class="mdl-layout__content mdl-color--grey-100">
+    <section class="jumbotron">
+      <h1>'Allo, 'Allo!</h1>
+      <p class="lead">
+        <img src="assets/images/yeoman.png" alt="I'm Yeoman"><br>
+        Always a pleasure scaffolding your apps.
+      </p>
+      <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" ng-class="main.classAnimation" ng-click="main.showToastr()">Splendid Toastr</button>
+      <p>
+        With ♥ thanks to the contributions of<acme-malarkey extra-values="['Yeoman', 'Gulp', 'Angular']"></acme-malarkey>
+      </p>
+    </section>
+
+    <div class="mdl-grid">
+      <div
+        class="mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet mdl-cell--12-phone mdl-card mdl-shadow--2dp"
+        ng-repeat="awesomeThing in main.awesomeThings | orderBy:'rank'"
+      >
+        <div class="thumbnail">
+          <img class="pull-right" ng-src="assets/images/{{ awesomeThing.logo }}" alt="{{ awesomeThing.title }}" />
+          <div class="caption">
+            <h3>{{ awesomeThing.title }}</h3>
+            <p>{{ awesomeThing.description }}</p>
+            <p><a ng-href="{{ awesomeThing.url }}">{{ awesomeThing.url }}</a></p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

test/template/test-bower.js

@@ -157,6 +157,12 @@ describe('gulp-angular bower template', function () {
     result.should.not.match(/foundation/);
     result.should.not.match(/material/);
 
+    model.props.ui.key = 'mdl';
+    result = bower(model);
+    result.should.match(/"material-design-lite"/);
+    result.should.not.match(/bootstrap/);
+    result.should.not.match(/foundation/);
+
     model.props.ui.key = 'foundation';
     model.props.foundationComponents.key = 'angular-foundation';
     result = bower(model);