mkhairi / material-sass

A rubygem of Material Design for Bootstrap 4

Material-sass

material-sass is a rubygems version of Material Design for Bootstrap 4

Offical repo github.com/Daemonite/material

Documentation daemonite.github.io/material

Dependencies

Rails 5.1+ The Rails JavaScript helpers has been rewritten in a new gem called rails-ujs and they use vanilla JavaScript, so jQuery is not a dependency of Rails anymore. Since bootstrap relies on it, install it with bin/yarn add jquery or via gem 'jquery-rails' and add //= require jquery to application.js.

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

Installation

Add this line to your application's Gemfile:

gem 'bootstrap',     '4.1.1'
gem 'material-sass', '4.1.1'

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

$ bundle install

Or install it yourself as:

$ gem install material-sass

Usage

a. Sass

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

@import "material";
//ps: no need to import 'bootstrap'

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

b. JavaScript

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

//= require jquery
//= require popper
//= require bootstrap
//= require material

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 material assets should be made in official material repo.

1. Fork it ( https://github.com/mkhairi/material-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

material-sass's Issues

$map: #007bff is not a map for `map-get'

I can not start my server after adding your gem, for no reason what so ever, everything is working fine without it, as soon as I install it everything stops working and the error message tells me that I Can't use map-get ( in your css ) i.e. can't just execute the line:

@import "material";

Adding an icon to button components changes the height of the button

Using material_icon gem as suggested in the README, when I add the icon inside a button component, it changes the line height of the button.

There should probably a css rule for the icons.

Not sure if this belongs in this repo or in the original repo though.

Time Picker & DateTime Picker

I see that you have a Time Picker in your Materialize gem, but not here. I was wondering if that was planned? Also, I need a picker for doing both date and time, is that something you're working on at all?