I had the chance to show Robin Sharma (world class consultant) my vision for a redesign of the current robinsharma.com so here is what I built in an afternoon.

SETTING UP/ COMPILING SASS FILES

Run an "npm install" to get the latest dependencies! !

TO COMPILE A SASS FILE AND QUICKLY CHANGE COLOR SCHEME,

gem install sass; sudo gem install sass; sass --watch materialize.scss:materialize.css 

IN THE DIRECTORY OF the .scss file. Drag the new .css to replace the old one, and voila quick color scheming

angular-materialize

angular-materialize in action http://krescruz.github.io/angular-materialize/

This library is a set of AngularJS directives which make it possible to use features from Materialize with AngularJS.

Just add the module ui.materialize to your dependencies like:

angular.module('angular-app', [
  'ui.materialize'
])

and then you are good to go.

This is not to be confused with the Angular Material project, which is a standalone Material design implementation for AngularJS.

We are on Bower, look for angular-materialize. or in NPM, look for angular-materialize.

Use with Webpack

Angular looks for jQuery and if no exists, it uses jQlite. Some directives of angular-materialize uses some jQuery methods, so be sure that Angular uses it instead of jQlite. It can be done by adding the following lines in your config.

//webpack.config.js
plugins: [
    new webpack.ProvidePlugin({
      'window.jQuery': 'jquery'
    })
  ],

then simply add to your module:

// yourModule.js
// ES6 style
import angularMaterialize from 'angular-materialize';
// OR commonjs style
var angularMaterialize = require('angular-materialize');
angular.module('yourModule', [angularMaterialize]);

Built With

• css
• html
• javascript
• materialize