ember-cli-materialize

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

Which version do I use?

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

Main features

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

Usage

The online demo demonstrates all components with all possible options.

Or you can download the demo:

$ sudo npm install -g ember-cli
$ git clone git@github.com:mike-north/ember-cli-materialize
$ cd ember-cli-materialize
# install dependencies 
$ npm install && bower install
# fire up local server 
$ ember serve

Configuration

Style

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.

Defaults

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
    },
    ...
  };
}
 

Installation

$ ember install ember-cli-materialize

PhantomJS

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.

Testing

This addon is continuiously integrated against the following framework versions

Contributing

See CONTRIBUTING file.

Special Thanks

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

License

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