materialize-sass is a Sass powered version of Materialize, a modern responsive front-end framework based on Material Design.
This master branch now v1.1.0-alpha
Documentation for previous releases (v0.100.*) are available this branch.
In your Gemfile you need to add the
gem 'materialize-sass', '~> 1.0.0'
or github master branch
gem 'materialize-sass', github: 'mkhairi/materialize-sass
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
Import Materialize styles in
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: https://github.com/mkhairi/materialize-sass/blob/master/assets/stylesheets/materialize.scss
//= require materialize
Require materialize-sprockets to provide individual Materialize components for ease of debugging
//= require materialize-sprockets
Include this line in the portion of your HTML code
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
or import this line in your application.scss
or install this gem for offline icons
note: Any changes or Pull Request regarding materialize assets should be made in official materialize repo.
- Fork it ( https://github.com/mkhairi/materialize-sass/fork )
- Create your feature branch (
git checkout -b my-new-feature)
- Commit your changes (
git commit -am 'Add some feature')
- Push to the branch (
git push origin my-new-feature)
- Create a new Pull Request