Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
lib
 
 
 
 
 
 
 
 
 
 
 
 

README.md

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.

example: http://materialize.labs.my/

source: https://github.com/mkhairi/materialize-rails

Notices

This master branch now v1.0.0

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

Installation

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

Usage

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';

or

You can import each component just like in this file below: https://github.com/mkhairi/materialize-sass/blob/master/assets/stylesheets/materialize.scss

b. JavaScript

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

//= require materialize

or

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="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 

or import this line in your application.scss

  @import "https://fonts.googleapis.com/icon?family=Material+Icons";

or install this gem for offline icons

  gem 'material_icons' 

see docs

Contributing

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

  1. Fork it ( https://github.com/mkhairi/materialize-sass/fork )
  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
You can’t perform that action at this time.