Materializecss rubygem for Rails Asset Pipeline / Sprockets
Switch branches/tags
Nothing to show
Clone or download
Latest commit b92ad99 Sep 16, 2018
Failed to load latest commit information.
assets update assets Sep 13, 2018
lib bump version v1.0.0 Sep 13, 2018
.gitignore update assets Jun 14, 2017
Gemfile born Dec 19, 2014
LICENSE.txt born Dec 19, 2014 update readme Sep 16, 2018
Rakefile remove turbolink, keep untouched assets #179 Aug 27, 2018
materialize-sass.gemspec update gemspec Sep 16, 2018

Materialize sass ruby gem Gem Version

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




This master branch now v1.0.0

Documentation for previous releases (v0.100.*) are available this branch.


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

gem 'materialize-sass', '~> 1.0.0'

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-variables";
$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:

//= require materialize


Require materialize-sprockets to provide individual Materialize components for ease of debugging

//= require materialize-sprockets

c. Icons

Include this line in the portion of your HTML code

  <link href="" rel="stylesheet"> 

or import this line in your application.scss

  @import "";

or install this gem for offline icons

  gem 'material_icons' 

see docs


note: Any changes or Pull Request regarding materialize assets should be made in official materialize repo.

  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