Material Design Lite for Sass

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.

Installation

Ruby on Rails

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 original application.css file, you can create custom.scss file in the same folder and import material 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.

Turbolinks

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.

Usage

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

Material Icons

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">&#xE88E;</i>

Complete list of Material Icon names and codepoints can be found here

Variables

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.

Versioning

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.

Contributing

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.

Credits

Material Design Lite for Sass is inspired from bootstrap-sass by Bootstrap team.