materialize-sass

Materializecss rubygem for Rails Asset Pipeline / Sprockets

Github stars Tracking Chart

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

Main metrics

Overview
Name With Ownermkhairi/materialize-sass
Primary LanguageRuby
Program languageRuby (Language Count: 1)
Platform
License:MIT License
所有者活动
Created At2014-12-19 09:24:21
Pushed At2024-08-12 10:51:16
Last Commit At2024-08-12 18:51:11
Release Count0
用户参与
Stargazers Count804
Watchers Count37
Fork Count246
Commits Count220
Has Issues Enabled
Issues Count153
Issue Open Count8
Pull Requests Count28
Pull Requests Open Count3
Pull Requests Close Count11
项目设置
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private