Table of Contents
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
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.
Copyright Google, 2015. Licensed under an Apache-2 license.