Skip to content

Commit

Permalink
Add MDL support
Browse files Browse the repository at this point in the history
  • Loading branch information
Mehdy Dara committed Aug 28, 2015
1 parent 66ba08a commit e2f6d8b
Show file tree
Hide file tree
Showing 10 changed files with 335 additions and 0 deletions.
7 changes: 7 additions & 0 deletions app/prompts.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
{
"value": {
"key": "foundation",
Expand Down
6 changes: 6 additions & 0 deletions app/techs.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": "Material Design",
"logo": "material-design-lite.png"
},
"browsersync": {
"title": "BrowserSync",
"url": "http://browsersync.io/",
Expand Down
2 changes: 2 additions & 0 deletions app/templates/_bower.json
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@
"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",
<% } if(props.bootstrapComponents.key === 'ui-bootstrap') { -%>
"angular-bootstrap": "~0.13.0",
<% } if(props.bootstrapComponents.key === 'angular-strap') { -%>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500,700);
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

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;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
/**
* 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(//fonts.googleapis.com/icon?family=Material+Icons);
@import url(//fonts.googleapis.com/css?family=Roboto:300,400,500,700);

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
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
/**
* 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/icon?family=Material+Icons);
@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500,700);

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
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
/**
* 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:styl
// endbower

@import url('//fonts.googleapis.com/icon?family=Material+Icons');
@import url('//fonts.googleapis.com/css?family=Roboto:300,400,500,700');

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
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title mdl-badge" data-badge="">Gulp Angular</span>
<!-- Add spacer, to align navigation to the right -->
<nav class="mdl-navigation mdl-layout--large-screen-only">
<a class="mdl-navigation__link" href="#">Home</a>
<a class="mdl-navigation__link" href="#">About</a>
<a class="mdl-navigation__link" href="#">Contact</a>
</nav>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation. We hide it in small screens. -->
<span class="mdl-navigation__link">Application was created {{ vm.relativeDate }}.</span>
</div>
70 changes: 70 additions & 0 deletions app/templates/src/app/main/__material-design-lite.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">

<header class="mdl-layout__header">
<acme-navbar creation-date="main.creationDate"></acme-navbar>
</header>

<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>

<main class="mdl-layout__content">
<div class="page-content">
<div class="acme-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">'Allo, 'Allo!</h2>
</div>
<div class="mdl-card__supporting-text">
Always a pleasure scaffolding your apps.
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Splendid Toastr
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
<div class="mdl-grid">

<div class="mdl-cell mdl-cell--4-col" ng-repeat="awesomeThing in main.awesomeThings | orderBy:'rank'">
<div class="acme-card-square mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">{{ awesomeThing.title }}</h2>
</div>
<div class="mdl-card__media">
<img ng-src="assets/images/{{ awesomeThing.logo }}" alt="{{ awesomeThing.title }}">
</div>
<div class="mdl-card__supporting-text">
{{ awesomeThing.description }}
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" ng-href="{{ awesomeThing.url }}">
Website
</a>
</div>
</div>
</div>

</div>
</div>
</main>

<footer class="mdl-mini-footer">
<div class="mdl-mini-footer__right-section">
<div class="mdl-logo">
With ♥ thanks to the contributions of<acme-malarkey extra-values="['Yeoman', 'Gulp', 'Angular']"></acme-malarkey>
</div>
</div>
</footer>

</div>
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit e2f6d8b

Please sign in to comment.