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

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.

Installation

Ruby on Rails

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.

Usage

Individual Sass components can be included like this:

@import "@material/animation/mdc-animation";
@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!

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>

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

Versioning

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.

Credits

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