material-design-lite/README.md

95 lines
2.4 KiB
Markdown
Raw Normal View History

# Material Design Lite
2014-04-16 17:26:21 +04:00
2015-02-05 09:46:41 +03:00
> A library of [Material Design](www.google.com/design/spec/material-design/introduction.html) components in CSS, JS and HTML
2015-02-09 17:20:21 +03: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
```
2014-04-16 18:12:57 +04:00
2015-02-04 13:14:46 +03:00
## Getting Started
2014-04-16 18:12:57 +04:00
2015-02-05 09:46:41 +03:00
### Download
Clone or [download](https://github.com/google/material-design-lite/archive/master.zip) this repository
2015-02-04 13:14:46 +03:00
and reference the following files in your project:
2014-05-23 23:02:58 +04:00
2015-02-04 13:14:46 +03:00
```html
<script src="js/material.min.js">
<link rel="stylesheet" href="css/material.min.css">
```
2015-02-04 13:14:46 +03:00
You will want to include the entire package to ensure optional assets like images or fonts are correctly
included.
2014-05-27 13:27:36 +04:00
2015-02-05 09:46:41 +03:00
### npm
2014-06-16 18:03:08 +04:00
2015-02-05 09:46:41 +03:00
```
$ npm install --save material-design-lite
2015-02-04 13:14:46 +03:00
```
2014-06-19 16:50:10 +04:00
2015-02-05 09:46:41 +03:00
### bower
2014-05-16 13:59:52 +04:00
2015-02-05 09:46:41 +03:00
```
$ bower install --save material-design-lite
2015-02-04 13:14:46 +03:00
```
2014-06-16 14:26:01 +04:00
2015-02-05 09:46:41 +03:00
2015-02-04 13:14:46 +03:00
## Development
2014-06-19 18:22:40 +04:00
2015-02-04 13:14:46 +03: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 14:26:01 +04:00
2015-02-05 09:46:41 +03:00
```
2015-02-04 13:14:46 +03:00
$ npm install && npm install -g gulp
```
2014-06-16 14:26:01 +04:00
2015-02-04 13:14:46 +03:00
Next, run the following one-liner to preview the components:
2014-06-16 14:26:01 +04:00
2015-02-05 09:46:41 +03:00
```
2015-02-04 13:14:46 +03:00
$ gulp serve
```
2014-06-06 14:55:13 +04:00
2015-02-04 13:14:46 +03: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.
2015-02-04 13:14:46 +03:00
To build a production version of the components, run:
2015-02-05 09:46:41 +03:00
```
2015-02-04 13:14:46 +03:00
$ gulp
```
2015-02-04 13:14:46 +03: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 14:14:04 +04:00
2015-02-05 09:46:41 +03:00
2014-06-06 16:06:29 +04:00
## License
Copyright Google, 2015. Licensed under an Apache-2 license.