Materialize Sass version for Rails Asset Pipeline
JavaScript CSS Ruby
Latest commit cd19e70 Nov 29, 2016 @mkhairi committed on GitHub Merge pull request #129 from tricknotes/fix-readme
Fix for `color` function

Materialize Sass version for Rails Asset Pipeline

Gem Version

materialize-sass is a Sass powered version of Materialize, a modern responsive front-end framework based on Material Design.


In your Gemfile you need to add the materialize-sass gem:

gem 'materialize-sass'

NOTE: Ensure that the sass-rails gem is presented in your Gemfile.

And then run the bundler and restart your server to make the files available through the pipeline:

$ bundle install

Or install it separately:

$ gem install materialize-sass


a. Sass

Import Materialize styles in app/assets/stylesheets/application.scss:

@import "materialize";

NOTE: If you have just generated a new Rails application, it may come with a .css file instead. If this file exists, it will be served instead of Sass, so remove it.

$ rm app/assets/stylesheets/application.css

HINT: Override materialize color variable.

Since materialize color scheme are declared in color.scss you should import the color.scss first. then you can override color variable just like this:

@import "materialize/components/color";
$primary-color: color("blue", "lighten-2") !default;
$secondary-color: color("yellow", "base") !default;
@import 'materialize';


You can import each component just like in this file below:

b. JavaScript

Require Materialize javascripts in app/assets/javascripts/application.js:

For turbolinks 5 users

//= require jquery
//= require turbolinks
//= require materialize-sprockets

For turbolinks classic users

Add jquery-turbolinks gem to Gemfile

gem 'jquery-turbolinks'

//= require jquery
//= require jquery.turbolinks
//= require materialize
//= require turbolinks

For non turbolinks users

//= require jquery
//= require materialize

c. Extras


in your application.scss

@import "materialize/extras/nouislider";

in your application.js

//= require materialize/extras/nouislider


  1. Fork it ( )
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create a new Pull Request