An ember-cli addon for using Materialize (CSS Framework based on Material Design) in Ember applications.

Ember 2.0 Friendly

Materialize Version ~0.97.0

Ember.js version	ember-cli-materialize version
< 1.10.0	Not supported
1.10.0 <= x < 1.11.0	v0.16.4
1.11.0 <= x < 1.13.0	v0.18.6
x >= 1.13.0

• Imports Materialize sass (via ember-cli-sass) and fonts into your app.
• It's a components library for all Materialize components

The online demo demonstrates all components with all possible options.

Or you can download the demo:

$ sudo npm install -g ember-cli
$ git clone [email protected]:mike-north/ember-cli-materialize
$ cd ember-cli-materialize
# install dependencies
$ npm install && bower install
# fire up local server
$ ember serve

Using SASS makes configuring the color scheme simple. Just make sure you import components/color and components/variables before materialize like the example below.

// Example app.scss
@import 'components/color';

// Custom color settings go here
$primary-color: color("pink", "lighten-2");

@import 'components/variables';
@import 'materialize';
@import 'ember-cli-materialize';

See the materialize docs on sass variables here.

Some of the library's defaults can be set via your config/environment.js file

module.exports = function(/* environment, appConfig */) {
  var ENV = {
    materializeDefaults: {
      modalIsFooterFixed:  false,
      buttonIconPosition:  'left',
      loaderSize:          'big',
      loaderMode:          'indeterminate',
      modalContainerId:    'materialize-modal-root-element',
      dropdownInDuration:  300,
      dropdownOutDuration: 300
    },
    ...
  };
}

$ ember install ember-cli-materialize

If you are using PhantomJS version 1.9.x as a test runner then after installing this addon you may experience test failures when running tests via ember test that you do not see in a browser.

This is due to the known limitation in PhantomJS 1.9 not providing a .bind method. To continue using PhantomJS simply either install ember-cli-es5-shim, which provides a .bind method, or try PhantomJS 2.x.

This addon is continuiously integrated against the following framework versions

See CONTRIBUTING file.

Special thanks to Stefan Gasser for creating and originally maintaining this great library

ember-cli-materialize is released under the MIT License. See the bundled LICENSE file for details.