diff --git a/app/prompts.json b/app/prompts.json index fe8371a1..9e12281a 100644 --- a/app/prompts.json +++ b/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", diff --git a/app/src/router.js b/app/src/router.js index bd90f10c..b7b6fe68 100644 --- a/app/src/router.js +++ b/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 = '
'; + this.routerHtml = '
"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') { -%> diff --git a/app/templates/src/app/_mdl/__mdl-index.css b/app/templates/src/app/_mdl/__mdl-index.css new file mode 100644 index 00000000..20e0cc41 --- /dev/null +++ b/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; +} diff --git a/app/templates/src/app/_mdl/__mdl-index.less b/app/templates/src/app/_mdl/__mdl-index.less new file mode 100644 index 00000000..95d58316 --- /dev/null +++ b/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 diff --git a/app/templates/src/app/_mdl/__mdl-index.scss b/app/templates/src/app/_mdl/__mdl-index.scss new file mode 100644 index 00000000..88d4ffe8 --- /dev/null +++ b/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 diff --git a/app/templates/src/app/_mdl/__mdl-index.styl b/app/templates/src/app/_mdl/__mdl-index.styl new file mode 100644 index 00000000..4ab28d28 --- /dev/null +++ b/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 diff --git a/app/templates/src/app/components/navbar/__mdl-navbar.html b/app/templates/src/app/components/navbar/__mdl-navbar.html new file mode 100644 index 00000000..a1440908 --- /dev/null +++ b/app/templates/src/app/components/navbar/__mdl-navbar.html @@ -0,0 +1,14 @@ +
+
+ + Gulp Angular + +
+ +
+
+
diff --git a/app/templates/src/app/main/__mdl.html b/app/templates/src/app/main/__mdl.html new file mode 100644 index 00000000..f8e5c2f4 --- /dev/null +++ b/app/templates/src/app/main/__mdl.html @@ -0,0 +1,45 @@ +
+
+
+ + Gulp Angular + +
+ +
+
+
+
+
+

'Allo, 'Allo!

+

+ I'm Yeoman
+ Always a pleasure scaffolding your apps. +

+ +

+ With ♥ thanks to the contributions of +

+
+ +
+
+
+ {{ awesomeThing.title }} +
+

{{ awesomeThing.title }}

+

{{ awesomeThing.description }}

+

{{ awesomeThing.url }}

+
+
+
+
+
+
diff --git a/app/templates/src/assets/images/mdl.png b/app/templates/src/assets/images/mdl.png new file mode 100644 index 00000000..7a85ab90 Binary files /dev/null and b/app/templates/src/assets/images/mdl.png differ diff --git a/test/template/test-bower.js b/test/template/test-bower.js index d0c745f6..c078272b 100644 --- a/test/template/test-bower.js +++ b/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);