Go to file

Brian Hall 37af4d565a Add alpha values for black and white text and update the demo to reflect the addition.		2015-03-30 11:32:29 -05:00
css	Closes #87 by adding white and black options to the color palette, updating the demo, and bumping the build.	2015-03-27 10:37:46 -05:00
fonts	Adding icon font and wsk-icon utility classes	2015-02-16 17:41:09 +00:00
images	Add support for image flattening	2015-02-24 09:11:04 +00:00
js	Add onmouseleave event listeners	2015-03-26 14:18:47 +00:00
src	Add alpha values for black and white text and update the demo to reflect the addition.	2015-03-30 11:32:29 -05:00
test	Improve layout demos	2015-03-23 12:33:49 +00:00
.editorconfig	Update editorconfig	2014-06-20 19:31:06 -03:00
.gitattributes	Bring back .git configs	2015-02-04 10:10:46 +00:00
.gitignore	Ignore gulp-cache temp files.	2015-02-16 09:23:36 +00:00
.jscsrc	Fix .jscsrc rule	2015-01-26 10:33:51 +00:00
.jshintrc	Updates to fix jshint warnings	2014-12-23 01:02:30 +00:00
LICENSE	Update copyright year	2015-01-06 13:36:47 +00:00
README.md	Fixes #15 - adds browser support	2015-02-21 01:18:54 +00:00
bower.json	bower.json improvements	2015-02-21 01:47:12 +00:00
gulpfile.js	Add test:visual task	2015-03-23 15:56:23 +00:00
package.json	Merge pull request #44 from google/test/menu	2015-03-19 12:59:32 +00:00

README.md

Material Design Lite

A library of Material Design components in CSS, JS and HTML

Quick start

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.

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

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.

Getting Started

Download

Clone or download this repository and reference the following files in your project:

<script src="js/material.min.js"></script>
<link rel="stylesheet" href="css/material.min.css">

You will want to include the entire package to ensure optional assets like images or fonts are correctly included.

npm

$ npm install --save material-design-lite

bower

$ bower install --save material-design-lite

Development

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 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.

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.

Versioning

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.