Material Design Lite
An implementation of Material Design components in vanilla CSS, JS, and HTML
Use MDL on your site?
This document is targeted at developers that will contribute to or compile MDL. If you are looking to use MDL on your website or web app please head to getmdl.io.
|IE9||IE10||IE11||Chrome||Opera||Firefox||Safari||Chrome (Android)||Mobile Safari|
A-grade browsers are fully supported. B-grade browsers will gracefully degrade to our CSS-only experience.
Download / Clone
Clone the repo using Git:
git clone https://github.com/google/material-design-lite.git
Alternatively you can download this repository.
Windows users, if you have trouble compiling due to line endings then make sure
you configure git to checkout the repository with
lf (unix) line endings. This
can be achieved by setting
git config core.eol lf git config core.autocrlf input git rm --cached -r . git reset --hard
Remember, the master branch is considered unstable. Do not use this in production. Use a tagged state of the repository, npm, or bower for stability!
In the repo you’ll find the following directories and files.
|CONTRIBUTING.md||MDL contribution guidelines.|
|docs||Files for the documentation site.|
|gulpfile.js||gulp configuration for MDL.|
|LICENSE||Project license information.|
|package.json||npm package information.|
|README.md||Details for quickly understanding the project.|
|src||Source code for MDL components.|
|test||Project test files.|
To get started modifying the components or the docs, first install the necessary dependencies, from the root of the project:
npm install && npm install -g gulp
MDL requires NodeJS 0.12.
Next, run the following one-liner to compile the components and the docs and spawn a local instance of the documentation site:
gulp all && gulp serve
Most changes made to files inside the
src or the
docs directory will cause
the page to reload. This page can also be loaded up on physical devices thanks
To build a production version of the components, run:
This will clean the
dist folder and rebuild the assets for serving.
templates/ subdirectory contains a few exemplary usages of MDL. Templates
have their own, quasi-separate gulp pipeline and can be compiled with
gulp templates. The templates use the vanilla MDL JS and
themed CSS files. Extraneous styles
are kept in a separate CSS file. Use
gulp serve to take a look at the
- Blog Template
- Dashboard Template
- Text Heavy Webpage Template
- Stand Alone Article Template
- Android.com MDL Skin Template
Templates are not officially supported in IE9 and legacy browsers that do not pass the minimum-requirements defined in our cutting-the-mustard test.
The templates refer to CDN hosted versions of the libraries. If you’d like to
test the templates against locally built MDL libraries you need to run the
templates:localtestingoverride gulp task before running
gulp all && gulp templates:localtestingoverride && gulp serve
Beware as any changes to the
templatesdirectory will automatically revert the templates local testing overrides. In this case make sure you run the
templates:localtestingoverridegulp task again or modify the
watch()function in the gulp file.
For transparency into our release cycle and in striving to maintain backward compatibility, Material Design Lite is maintained under the Semantic Versioning guidelines. Sometimes we screw up, but we’ll adhere to those rules whenever possible.
If you find MDL doesn’t contain a particular component you think would be useful, please check the issue tracker in case work has already started on it. If not, you can request a new component. Please keep in mind that one of the goals of MDL is to adhere to the Material Design specs and therefore some requests might not be within the scope of this project.
Want to contribute?
Do you include any features that a framework comes with?
Material Design Lite is focused on delivering a vanilla CSS/JS/HTML library of components. We are not a framework. If you are building a single-page app and require features like two-way data-binding, templating, CSS scoping and so forth, we recommend trying out the excellent Polymer project.
© Google, 2015. Licensed under an Apache-2 license.