ga-wdi-boston/ember-template

Installing Materialize within ember-template

Opened this issue · 0 comments

I used ember-cli-materialize, but there may be others out there. Below are the steps I followed. Also, I ran through this process on the Ember auth template since that's the one I ended up starting with for my project. My assumption is the steps would be the same for this template, but just mentioning it in case there's a difference I'm not aware of.

  1. Removed all references/packages/bower components for Bootstrap then re-ran npm install && bower install

  2. Installed ember-cli-materialize via npm

$ npm install -g --save ember-cli-materialize
/Users/n0168225/.nvm/versions/node/v4.6.0/lib
└── ember-cli-materialize@0.22.0-beta.0 
  1. Run ember install ember-cli-materialize

  2. It will prompt to over-write app.scss and ember-cli-build.js, but it looks like it's identical to what we had before aside from adding a few things for materialize

  3. Update node-sass to 3.10 to fix a segmentation fault error

  4. In index.html add a link to load the Roboto font. It needs to be the https URL or else it will work locally and fail when you deploy to gh-pages.

<link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed|Alegreya:700" rel="stylesheet" type="text/css" />

Documentation: https://mike.works/oss/ember-cli-materialize
Githup Repo with more info: https://github.com/mike-north/ember-cli-materialize

They've "emberized" some of the stuff available within materializecss (all found within the documentation), but you can also use the regular materializecss classes, etc. Just for things like sidenav and whatnot you'll have to add some actions on component render or on route activate for it to work correctly.