Google's Material Design Lite for Ember.js apps
This addon requires ember >= 1.11.0
# ember-cli < 0.2.3
ember install:addon ember-material-lite
# ember-cli >= 0.2.3
ember install ember-material-lite
This addon can be used without SASS (relying on pure CSS for styles). If you choose this path, you'll need to alter your app slightly.
- Delete the
ember-cli-sassNPM dependency that the installation blueprint will add to your app. - Add the following line to your
ember-cli-build.js.
app.import('node_modules/material-design-lite/material.css');
You can customize the colors of material design elements globally by setting sass variables prior to importing the main styles.
app/styles/app.scss
@import '_color-definitions';
$color-primary: $palette-teal-500;
$color-accent: $palette-pink-A200;
@import 'material-design-lite';Adding http://fonts.googleapis.com/icon?family=Material+Icons into the index.html just works.
But in few scenarios(like running app offline) you would want to include these icon fonts from the project directories itself.
To achieve the same, first edit ember-cli-build.js to include the following
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var mergeTrees = require('broccoli-merge-trees');
var pickFiles = require('broccoli-static-compiler');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
sassOptions: {
includePaths: ['node_modules/material-design-lite/src']
}
});
var googleFontFiles = pickFiles(
'node_modules/material-design-icons/iconfont',
{
srcDir: '/',
files: ['**/*.woff', '**/*.woff2', '**/*.eot', '**/*.ttf'],
destDir: '/fonts'
}
);
return mergeTrees([app.toTree(), googleFontFiles]);
};Also Add below code on top of app/styles/app.scss file to import icon font files.
/*Material Icons css*/
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(../fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'), local('MaterialIcons-Regular'),
url(../fonts/MaterialIcons-Regular.woff2) format('woff2'), url(../fonts/MaterialIcons-Regular.woff)
format('woff'), url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
}Several of the MDL components reference image assets. In order to include them in your project, edit ember-cli-build.js to include the following:
var mergeTrees = require('broccoli-merge-trees');
var pickFiles = require('broccoli-static-compiler');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
sassOptions: {
includePaths: ['node_modules/material-design-lite/src']
}
});
var materialSVG = pickFiles('node_modules/material-design-lite/src/images', {
srcDir: '/',
files: ['**/*.svg'],
destDir: '/images'
});
return mergeTrees([app.toTree(), materialSVG]);
};ember testember test --server
ember build
For more information on using ember-cli, visit http://www.ember-cli.com/.
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
