Material Components for the web (MDC-Web) for Sass

Not maintained: MDC-Web doesn't play well with the asset pipeline (can't import specific JavaScript components) and Ruby Sass often can't compile newest releases. Please use Webpacker instead to include MDC-Web in your Rails projects.

Note: MDC-Web is still in early stage of development. For production environment it is recommended to use previous version of MDC-Web called Material Design Lite for Sass

Material Components for the web (MDC-Web) enable a reliable development workflow to build web projects based on Material Design system.

material_components_web-sass is a Sass-powered version of MDC-Web for your Ruby applications. In addition to all of MDC-Web packages it includes Material Icons, official icon set from Google, and Roboto font, the recommended font for material design.

Open your Rails application's Gemfile and add this line:

gem 'material_components_web-sass'

Save Gemfile and execute bundle command to install the gem.

Open /app/assets/stylesheets/application.scss file and add this line:

@import 'material-components-web';

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. If you wish to keep application.css file, you can create custom.scss file in the same folder and import material-components-web there.

Open app/assets/javascripts/application.js file and add this line:

//= require material-components-web

Restart Rails web server if it was running.

Individual Sass components can be included like this:

@import "@material/button/mdc-button";
@import "@material/card/mdc-card";
@import "@material/checkbox/mdc-checkbox";
@import "@material/dialog/mdc-dialog";
@import "@material/drawer/mdc-drawer";
@import "@material/elevation/mdc-elevation";
@import "@material/fab/mdc-fab";
@import "@material/form-field/mdc-form-field";
@import "@material/grid-list/mdc-grid-list";
@import "@material/icon-toggle/mdc-icon-toggle";
@import "@material/layout-grid/mdc-layout-grid";
@import "@material/linear-progress/mdc-linear-progress";
@import "@material/list/mdc-list";
@import "@material/menu/mdc-menu";
@import "@material/radio/mdc-radio";
@import "@material/ripple/mdc-ripple";
@import "@material/select/mdc-select";
@import "@material/slider/mdc-slider";
@import "@material/snackbar/mdc-snackbar";
@import "@material/switch/mdc-switch";
@import "@material/tabs/mdc-tabs";
@import "@material/textfield/mdc-textfield";
@import "@material/theme/mdc-theme";
@import "@material/toolbar/mdc-toolbar";
@import "@material/typography/mdc-typography";
@import "@material/fonts/material-icons";
@import "@material/fonts/roboto";

MDC-Web relying on module loader for importing individual JavaScript components and because of that there is no simple way to import specific JavaScript components using default Rails asset pipeline. PRs attempting to solve this issue are always welcome!

An icon can be included using ligatures, a typographic feature that is supported in most modern browsers:

<i class="material-icons">info</i>

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

material_components_web-sass follows the upstream version of Material Components for the web. 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.

material_components_web-sass is inspired from bootstrap-sass by Bootstrap team.

Material Components for the web © 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_components_web-sass © Dmitriy Tarasov, 2016. Released under the MIT license.