2015-02-04 02:33:39 -08:00
# Material Design Lite
2014-04-16 06:26:21 -07:00
2015-02-12 09:17:13 -08:00
> A library of [Material Design](http://www.google.com/design/spec/material-design/introduction.html) components in CSS, JS and HTML
2015-02-04 22:46:41 -08:00
2015-02-09 06:20:21 -08:00
## Quick start
Four quick start options are available:
- [Download the latest release ](https://github.com/google/material-design-lite/archive/master.zip ).
- Clone the repo: `git clone https://github.com/google/material-design-lite.git` .
- Install with [Bower ](http://bower.io ): `bower install material-design-lite` .
- Install with [npm ](https://www.npmjs.org ): `npm install material-design-lite` .
### What's included
Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
```
├── css
│ ├── material.css
│ └── material.min.css
├── js
│ ├── material.js
│ ├── material.min.js
│ └── material.min.js.map
├── images
├── src
├── package.json
├── bower.json
├── gulpfile.js
├── LICENSE
├── README.md
```
2015-02-09 06:21:58 -08:00
We provide compiled CSS and JS (`material.*`), as well as compiled and minified CSS and JS (`material.min.*`). JS source maps (`material.*.map`) are available for use with certain browsers' developer tools.
2014-04-16 07:12:57 -07:00
2015-02-04 02:14:46 -08:00
## Getting Started
2014-04-16 07:12:57 -07:00
2015-02-04 22:46:41 -08:00
### Download
2014-06-22 10:50:28 -07:00
2015-02-04 02:33:39 -08:00
Clone or [download ](https://github.com/google/material-design-lite/archive/master.zip ) this repository
2015-02-04 02:14:46 -08:00
and reference the following files in your project:
2014-05-23 12:02:58 -07:00
2015-02-04 02:14:46 -08:00
```html
2015-02-11 09:58:41 -08:00
< script src = "js/material.min.js" > < / script >
2015-02-04 02:14:46 -08:00
< link rel = "stylesheet" href = "css/material.min.css" >
```
2014-06-12 09:24:25 -07:00
2015-02-04 02:14:46 -08:00
You will want to include the entire package to ensure optional assets like images or fonts are correctly
included.
2014-05-27 02:27:36 -07:00
2015-02-04 22:46:41 -08:00
### npm
2014-06-16 07:03:08 -07:00
2015-02-04 22:46:41 -08:00
```
$ npm install --save material-design-lite
2015-02-04 02:14:46 -08:00
```
2014-06-19 05:50:10 -07:00
2015-02-04 22:46:41 -08:00
### bower
2014-05-16 02:59:52 -07:00
2015-02-04 22:46:41 -08:00
```
$ bower install --save material-design-lite
2015-02-04 02:14:46 -08:00
```
2014-06-16 03:26:01 -07:00
2015-02-04 22:46:41 -08:00
2015-02-04 02:14:46 -08:00
## Development
2014-06-19 07:22:40 -07:00
2015-02-04 02:14:46 -08:00
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:
2014-06-16 03:26:01 -07:00
2015-02-04 22:46:41 -08:00
```
2015-02-04 02:14:46 -08:00
$ npm install & & npm install -g gulp
```
2014-06-16 03:26:01 -07:00
2015-02-04 02:14:46 -08:00
Next, run the following one-liner to preview the components:
2014-06-16 03:26:01 -07:00
2015-02-04 22:46:41 -08:00
```
2015-02-04 02:14:46 -08:00
$ gulp serve
```
2014-06-06 03:55:13 -07:00
2015-02-04 02:14:46 -08:00
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.
2014-08-18 06:20:42 -07:00
2015-02-04 02:14:46 -08:00
To build a production version of the components, run:
2014-08-18 06:20:42 -07:00
2015-02-04 22:46:41 -08:00
```
2015-02-04 02:14:46 -08:00
$ gulp
```
2014-08-18 06:20:42 -07:00
2015-02-04 02:14:46 -08:00
This will clean and update the `css` , `js` and `images` directories in the root of the project with minified and
concatenated versions of the component files. Namely, `css/material.min.css` and `js/material.min.js` .
2014-06-16 03:14:04 -07:00
2015-02-20 17:18:54 -08:00
## Browser Support
| IE8 | IE9 | IE10 | Chrome | Opera | Firefox | Safari | Chrome (Android) | Mobile Safari |
|-----|-----|------|--------|-------|---------|--------|------------------|---------------|
| B | B | A | A | A | A | A | A | A |
A-grade browsers are fully supported. B-grade browsers will gracefully degrade to our CSS-only experience.
2015-02-09 06:21:58 -08:00
## Versioning
For transparency into our release cycle and in striving to maintain backward compatibility, Material Design Lite is maintained under [the Semantic Versioning guidelines ](http://semver.org/ ). Sometimes we screw up, but we'll adhere to those rules whenever possible.
2015-02-04 22:46:41 -08:00
2014-06-06 05:06:29 -07:00
## License
2015-02-04 02:33:39 -08:00
Copyright Google, 2015. Licensed under an Apache-2 license.