A library of Material Design components in CSS, JS, and HTML (MDL website).
Material Design Lite lets you add a Material Design look and feel to your static content websites. It doesn’t rely on any JavaScript frameworks or libraries. Optimised for cross-device use, gracefully degrades in older browsers, and offers an experience that is accessible from the get-go.
Four quick start options are available:
- Download the latest release.
- Clone the repo:
git clone https://github.com/google/material-design-lite.git. - Install with Bower:
bower install material-design-lite. - Install with npm:
npm install material-design-lite.
Within the download you'll find the following directories and files.
| File/Folder | Provides |
|---|---|
| bower.json | Bower package configuration. |
| CONTRIBUTING.md | MDL contribution guidelines. |
| docs | Template files for documentation. |
| 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. |
| templates | Example templates |
| test | Project test files. |
| IE9 | IE10 | IE11 | Chrome | Opera | Firefox | Safari | Chrome (Android) | Mobile Safari |
|---|---|---|---|---|---|---|---|---|
| B | A | A | A | A | A | A | A | A |
A-grade browsers are fully supported. B-grade browsers will gracefully degrade to our CSS-only experience.
Clone or download this repository, build it and reference the following files in your project:
<script src="dist/js/material.min.js"></script>
<link rel="stylesheet" href="dist/css/material.min.css">You will want to include the entire package to ensure optional assets like images or fonts are correctly included.
npm install --save material-design-lite
bower install --save material-design-lite
Material Design Lite uses the official Material Icons font. We recommend you include it using:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
You can check for other options on the Developer's Guide.
All of the demos and templates in this project use the preferred ligature syntax:
<i class="material-icons">face</i>
If you need to support older browsers, take a look at the Developer's Guide for how to use codepoints instead, as well as the list of supported codepoints.
The sources (JS, Sass) and demo files for all components can be found in the src directory. To get started
modifying them, first install the necessary dependencies, from the root of the project:
npm install && npm install -g gulp
Next, run the following one-liner to preview the components:
gulp serve
Any changes made to files inside the src directory will cause the page to reload. This page can also be loaded
up on physical devices thanks to BrowserSync.
To build a production version of the components, run:
gulp
This will clean the dist folder and rebuild the assets for serving.
The 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 templates:
- 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.
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.
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.
Copyright Google, 2015. Licensed under an Apache-2 license.