Customizing

Material Design Lite provides a stable basis to implement Google’s Material Design guidelines in your websites and applications. Built with speed in mind while also getting out of your way. Implementing Material Design doesn’t mean losing your business identity. You also don’t need to sacrifice clean markup to implement Material Design Lite.

Requirements

The only requirement to build your own copy of MDL is to have NodeJS installed. All the tools needed for building are installed using the Node Package Manager. It is strongly recommended to use Node Version Manager to get NodeJS.

Once you have NodeJS installed the npm command will be available in your command line. First, installing gulp globally to provide easy access when building your customized file.

npm install -g gulp

After gulp is installed you should install the dependencies that MDL requires. This is done by executing npm install from the root folder of the project. After the requirements are installed you are ready to begin your own build!

Customizing

Customizing MDL is done through modifying the material-design-lite.scss file in the src folder. This is where each component’s style is imported to create the base styles.

Inside of the primary Sass file, you can define variables that exist in _variables.scss with the !default option to override default options and measurements. You may also define your own targets and extend existing ones. Remember to define variables before the import of the default variables.

Styling your own rules

You can create your own rules for styling elements. To continue to get MDL styles simply @extend the rules you want. This will allow you to apply a few custom classes and receive the same display as using multiple MDL classes plus your own for any custom rules.

// Custom variables
// MDL imports

// Create your own button class while styling to your needs.
.add-to-cart-button {
  @extend .mdl-button;
  @extend .mdl-button--colored;
  @extend .mdl-button--raised;
  width: 100%;
}

Note: Keep an eye on the number of rules in your output. IE9 has a bug that restricts the number of rules you can have to 4096 per-file. More information can be found at htmlr.

Going further

You now should understand the basics of customizing your Material Design Lite build. To continue customizing sites to include your own components, customize existing components for the entire site, and improve your workflow.