Go to file

Sérgio Gomes 4f52641a49 Merge pull request #1551 from google/closure-fixes Closure fixes		2015-09-07 10:47:16 +01:00
docs	Use code points rather than ligatures in nav	2015-08-13 15:38:28 +01:00
src	Styling fixes across the codebase to play well with Closure.	2015-09-07 10:29:59 +01:00
templates	fix add space between # and headings (closes #1450 )	2015-08-22 12:30:34 +01:00
test	Change in the function upgradElementsInternal to enable the upgrade of child elements created by parent element's upgrade, like RippleContainerElement in Checkbox. The problem was happening when the element was created dynamically.	2015-08-31 13:47:31 +01:00
utils	Styling fixes across the codebase to play well with Closure.	2015-09-07 10:29:59 +01:00
.drone.p12.enc	Auto-publish master to staging on green (success)	2015-06-24 16:37:02 +01:00
.drone.yml	Run memory tests on CI	2015-08-06 15:34:47 +01: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	Remove /css and /js alltogether	2015-05-06 14:39:10 +01:00
.jscsrc	Styling fixes across the codebase to play well with Closure.	2015-09-07 10:29:59 +01:00
.jshintrc	Fix jshint deprecatoins	2015-07-16 09:46:58 -04:00
CONTRIBUTING.md	link for AngularJS contribution guidelines added	2015-08-01 12:06:36 -03:00
LICENSE	Update copyright year	2015-01-06 13:36:47 +00:00
README.md	Fixing link location for the "cutting the mustard" test (Closes #1318 )	2015-08-06 09:46:28 +01:00
bower.json	Bump to 1.0.4	2015-08-19 18:28:41 +01:00
gulpfile.js	Styling fixes across the codebase to play well with Closure.	2015-09-07 10:29:59 +01:00
package.json	Styling fixes across the codebase to play well with Closure.	2015-09-07 10:29:59 +01:00

README.md

Material Design Lite

An implementation of Material Design components in vanilla CSS, JS, and HTML

Material Design Lite (MDL) lets you add a Material Design look and feel to your static content websites. It doesn't rely on any JavaScript frameworks or libraries. Optimized for cross-device use, gracefully degrades in older browsers, and offers an experience that is accessible from the get-go.

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.

Browser Support

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.

Getting Started

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

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!

What's included

In the repo you'll find the following directories and files.

File/Folder	Provides
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.
templates	Example templates.
test	Project test files.

Build

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

To build a production version of the components, run:

gulp

This will clean the dist folder and rebuild the assets for serving.

Templates

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:

Templates are not officially supported in IE9 and legacy browsers that do not pass the minimum-requirements defined in our cutting-the-mustard test.

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.

Feature requests

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?

If you found a bug, have any questions or want to contribute. Follow our guidelines, and help improve the Material Design Lite. For more information visit our wiki.

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.