Awesome
Deprecated. No longer maintained due to https://material.io/components/web/
Material Design Lite Encapsulated
Fork of Material Design Lite (MDL).
This fork attempts to add a graceful patch to enable MDL encapsulation as Module or fallback to vendor under global window. In addition it has option to build MDL suited to widgets by encapsulating and prefixing the css in addition to JS encapsulation. This fork tracks the mdl-1.1 branch of the MDL. This is due to the following note:
*** Important note for contributors - The master branch now has breaking V2 changes. As such it can not be merged into mdl-1.1. If you are making a contribution to 1.1, then please send pull requests directly to that branch. We will routinely merge that back into master. Thank you!
Please refer to Issue 1730 of the official MDL.
The patch:
gulpfile.babel.js // add all:encap, jspm:release, widget tasks, minor modification to scripts task
src/encapsulationPatch.js // new JS (10 lines)
src/mdlExport.js // new JS (30 lines)
test/index.html // add SystemJS to load mdl as module, add MDL components to global scope for mocha tests
package.json // add jspm configuration
Install
The
widget
branch is used for releases,master
is used for merges with the original mdl.
npm install encapsulated-mdl --save
Build
MDL as Module
Encapsulates only the JS code as module.
Run:
gulp all:encap
To build and test (SystemJS is used for loading mdl as module for testing).
Exported:
// In your index.html or app.js
System.import('material.js').then(function (mdl) {
mdl.componentHandler;
mdl.components; // all the Material design objects (MaterialButton, MaterialMenu, etc)
}
If module not used (script tag loading), falls back to encapsulation under:
window[vendor].mdl
- The task expects -v [NAME] parameter
- If none given, default "Google" is used
- MDL objects and functions encapsulated as fallback inside window[vendor].mdl
To specify "foo" vendor run:
gulp all:encap -v foo
MDL for Widgets
Encapsulates JS code as module (same as above).
In addition, allows prefixing all the standard element with .vendor class, so h3 {}
becomes .vendor h3 {}
.
Note: Prefixing all the MDL classes such as
mdl-button
is problematics since & SASS operator is used across the code.
For custom widgets mdl-
prefix of all the mdl classes can be modified so mdl-button
can become foo-button
.
Note: customizing
mdl-
prefix patches the JS code and mocha tests (during the test itself, not the sources). Make sure you use thefoo-button
,foo-layout
, etc in your html.
Run:
gulp widget
The task accepts 2 parameters:
- -v [VENDOR] parameter to specify vendor
- If none given, default "Google" is used
- MDL objects and functions encapsulated as fallback inside window[vendor].mdl and
- -p [PREFIX] parameter to specify
mdl-
customization. - If none given,
mdl-
is not modified.
To specify "foo" vendor and "fa" prefix run:
gulp widget -v foo -p fa
So
h2 {}
.mdl-button {}
/* becomes */
.foo h2 {}
.fa-button {}
Note: This build doesn't build the demos and templates yet.
Widgets specific changes:
src/material-design-lite-widget.scss // copy of src/material-design-lite.scss with minor changes
src/template-widget.scss // copy of src/template.scss with minor changes
src/resets/_resets-widget.scss // copy of src/resets/_resets.scss with minor changes
src/resets/_h5bp-widget.scss // copy of src/resets/_h5bp.scss with minor changes
Make use of Widget specific resets
Resets to standard elements h1
, p
, video
, etc are prefixed by the vendor class so should work as is.
Note: MDL doesn't use !important for all the resets, so if the hosting website does, there can be issues.
For html
and body
tags, convention was used:
The tags are replaced by .mdl-html
and .mdl-body
classes, so use you could use them as the widget container under the
vendor class.
Note: if you compile with custom prefix lets say
fa
, they will become.fa-html
andfa-body
same as othermdl-
prefixed classes.
JSPM
Jspm package configuration was added as well.
gulp jspm:release
task is deprecated dist folder is used.
Backward Compatibility
You can always run the usual:
gulp all
To build and test the regular global version of MDL.
Aurelia
If you are using aurelia, check out aurelia-mdl
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.
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.
If you are submitting a bug fix or a new component for the 1.x line, please send those into mdl-1.x
currently.
The master
branch is where we are working on 2.0.
It is currently highly experimental and no support building or using it will be provided.
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 in v1
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.
Browser Support in v2 (in development)
Supported evergreen browsers:
- Chrome
- Edge
- Firefox
- Opera
Supported versioned browsers:
- Internet Explorer 11
- Safari 8
- Mobile Safari 8
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!
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.
License
© Google, 2015. Licensed under an Apache-2 license.