Nourished Personal Mucus

    ember-cli-materialize

    0.22.0 • Public • Published

    ember-cli-materialize

    Greenkeeper badge

    Build Status npm version Code Climate Coverage Status Ember Observer Score Book session on Codementor

    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

    NPM

    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 npm version

    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

    Version Failures Allowed
    Ember ~1.10.0 No
    Ember ~1.11.0 No
    Ember ~1.12.0 No
    components/ember#release No
    components/ember#beta No
    components/ember#canary No

    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.

    Analytics

    Install

    npm i ember-cli-materialize

    DownloadsWeekly Downloads

    201

    Version

    0.22.0

    License

    MIT

    Unpacked Size

    133 kB

    Total Files

    183

    Last publish

    Collaborators

    • mike-north-bot
    • northm
    • sgasser