/ember-material-design

Ember implementation of Google's Material Design

Primary LanguageJavaScriptMIT LicenseMIT

Build Status Ember Observer Score Code Climate

Ember-material-design

The Ember Material Design project is an implementation of Material Design in EmberJS. This project attempts to provide a set of reusable, well-tested and accessible UI components based on the Material Design system.

This project is as close to a reference implementation of Angular Material as I could make it. Most of the credit for this work belongs to that team.

Demo

Visit Demo Page to view the components in action.

Installation

Install the ember-cli addon into project

$ ember install ember-material-design

This project uses SASS for compiling stylesheets. Import them into your styles.scss.

@import "ember-material-design";

To use SASS, you will need to either install broccoli-sass or ember-cli-sass.

$ ember install ember-cli-sass

This project does not provide any vendor prefixes. It is highly recommended to use an autoprefixer. I prefer to use ember-cli-autoprefixer which can be installed as an addon very easily.

$ ember install ember-cli-autoprefixer

Any variables you want to set should be set prior to importing the ember-material-design stylesheet.

For example, to change the $primary color:

$primary: 'red';

@import "ember-material-design";

Fonts

By default, the RobotoDraft font is used from the Google Fonts api. To include this font, add the following line in the <head> section of your index page.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">

If you wish to use another font, overwrite the $font-family in a .scss file before your @import "ember-material-design";.