Material Design Lite (MDL) is a library of CSS and JavaScript components, that lets you add Material Design look to your websites. Material Design Lite is maintained by Google.
material_design_lite-sass
is a Sass-powered version of Material Design Lite for your applications. It allows to include all of Material Design Lite components at once or load them individually.
material_design_lite-sass
includes Material Icons, official icon set from Google, designed under the material design guidelines.
Roboto font, the recommended font for Google’s visual language, Material Design, is also included.
Open your Rails application's Gemfile
and add this line:
gem 'material_design_lite-sass'
Save Gemfile
and execute bundle
command to install the gem.
Open /app/assets/stylesheets/application.scss
file and add this line:
@import 'material';
Note: Default Rails installation comes with
.css
file extension for stylesheet assests files, make sure you change it to.scss
and remove all the*= require_tree .
and*= require_self
statements from file. Alternatively, to keep originalapplication.css
file, you can createcustom.scss
file in the same folder and importmaterial
there.
Open app/assets/javascripts/application.js
file and add this line:
//= require material
Restart Rails web server if it was running and now your Rails application is powered by Sass version of Material Design Lite.
Material Design Lite doesn't support turbolinks by default. You have to either disable turbolinks or add this JavaScript code to your project:
For turbolinks v2:
document.addEventListener('page:change', function() {
componentHandler.upgradeDom();
});
For turbolinks v5:
document.addEventListener('turbolinks:load', function() {
componentHandler.upgradeDom();
});
Put this code, for instance, in app/assets/javascripts/application.js
file or in app/views/layouts/application.html.erb
file after closing </body>
tag.
By default, using @import 'material';
and //= require material
, all of Material Design Lite components are imported. You can also import components individually.
To import specific JavaScript components, first you need to include support components:
//= require material/mdlComponentHandler
//= require material/rAF
Then include desired Material Design Lite JavaScript component:
//= require material/button
//= require material/checkbox
//= require material/data-table
//= require material/icon-toggle
//= require material/layout
//= require material/menu
//= require material/progress
//= require material/radio
//= require material/ripple
//= require material/slider
//= require material/snackbar
//= require material/spinner
//= require material/switch
//= require material/tabs
//= require material/textfield
//= require material/tooltip
Individual Sass components can be included like this:
// Variables and mixins
@import "material/variables";
@import "material/mixins";
// Resets and dependencies
@import "material/resets";
@import "material/typography";
// Components
@import "material/palette";
@import "material/ripple";
@import "material/animation";
@import "material/badge";
@import "material/button";
@import "material/card";
@import "material/checkbox";
@import "material/chip";
@import "material/data-table";
@import "material/dialog";
@import "material/mega_footer";
@import "material/mini_footer";
@import "material/icon-toggle";
@import "material/list";
@import "material/menu";
@import "material/progress";
@import "material/layout";
@import "material/radio";
@import "material/slider";
@import "material/snackbar";
@import "material/spinner";
@import "material/switch";
@import "material/tabs";
@import "material/textfield";
@import "material/tooltip";
@import "material/shadow";
@import "material/grid";
@import "material/material-icons";
@import "material/roboto";
An icon can be included using ligatures, a typographic feature that is supported in most modern browsers:
<i class="material-icons">info</i>
For browsers that do not support ligatures, fall back to specifying the icons using numeric character references:
<i class="material-icons"></i>
Complete list of Material Icon names and codepoints can be found here
Sass version provides many variables to make customization process convenient. The full set of Material Design Lite variables can be found here.
To override the variable it must be redefined before the @import
directive, like this:
$layout-header-bg-color: rgb(128,128,128) !default;
@import 'material';
Note on Sass color variables: All Material Design Lite color variables are defined with RGB values, overriding these variables with hexadecimal color values may result in unexpected behaviour.
Material Design Lite for Sass follows the upstream version of Google's Material Design Lite. But last version number may be ahead, in case there is a need to release project specific changes.
Please always refer to the CHANGELOG when upgrading.
Anyone is welcome to contribute to Material Design Lite for Sass. Please raise an issue, fork the project, make changes to your forked repository and submit a pull request.
Material Design Lite for Sass is inspired from bootstrap-sass by Bootstrap team.
Material Design Lite © Google, 2015. Licensed under the Apache-2 license.
Material Icons © Google, 2016. Licensed under the Apache-2 license.
Roboto © Google, 2015. Licensed under the Apache-2 license.
material_design_lite-sass
© Dmitriy Tarasov, 2015. Released under the MIT license.