Material Design Components in HTML/CSS/JS

Last update: Jan 4, 2023

Overview

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.

Limited support

Material Design Lite is now in limited support, with development having moved to the Material Components for the web repository.

No further development is taking place in MDL by the core team, but we are happy to review PRs, fix critical bugs and push out new releases. No breaking changes will be accepted.

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.

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

MDL is currently in limited support mode, with no further development taking place by the core team. We are happy to accept and review pull requests for new functionality, however, as long as there are no breaking changes.

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.

Please use the default branch, mdl-1.x.

Take note that Material Components for Web, which is MDL v2, is under early Alpha stages (which means everything is a moving target, and we can change anything at any moment). Use with caution.

However, we would absolutely love to have people testing MCW and provide feedback about their experiences using it, especially integrating with other frameworks and libraries.

License

Comments

Select Input

Hello

I just begin with Material design lite, and it's awesome. But i miss something et i didn't find it in the documentation.

I'm working on a form, and i didn't find a way to have good select input. (I find text/number input, checkbox, radio button, ...)

Someone can help me?

Thank you

Thomas
future P1 feature-request

opened by Bamertos 86
Date, Time Pickers

It would be great to have standard components for date and time fields, in line with material design guidelines.

https://www.google.com/design/spec/components/pickers.html
future feature-request

opened by geordee 39
Accordion needed?

I have the SCSS, HTML and Dart-Code. If you want I can create a PR with SCSS+HTML. It should be easy to port the Dart-Code back to JS.

Demo: http://mdl.mikemitterer.at/#/accordion Styles: https://github.com/MikeMitterer/dart-material-design-lite/tree/mdl/lib/assets/styles/accordion Code: https://github.com/MikeMitterer/dart-material-design-lite/blob/mdl/lib/src/components/MaterialAccordion.dart

enhancement future

opened by MikeMitterer 39
Added List component
Added the List component as per the feature request #584 . Three types of Lists

Single Line

Two Line

Three Line

Each list item can have an Icon/avatar and secondary-info and/or secondary-action.

Not Implemented : Expand/Collapse . (Working on it)
cla: yes
opened by rohanthacker 36
Make gulp:all and CI-related tasks work

jscs wants JSDoc comments on every function in the gulpfile and makes drone fail. I’m arguing we don’t need to lint our gulpfile.

r: @sgomes @addyosmani cc: @crhym3
cla: yes

opened by surma 35
Performance issues in the Components page (IE11)

Visit http://www.getmdl.io/components/index.html page on IE11, the main content panel is blank, and browser tab always shows the 'loading' indicator. Content only shows up after several minutes.

In network tab of dev tools, there are many pending HEAD requests to /assets/clippy.swf.

Although it works ok on Chrome, those '*.swf' really makes me feel that I am back to ten years ago...

opened by steven-qi 35
Close drawer on navigation link click

Component name: Layout / Navigation Drawer Material Design spec URL for the component (if any): http://www.getmdl.io/components/index.html#layout-section/layout

It is not possible to close the navigation drawer after a click on a navigation link. It would be great to create a new CSS class, which, when applied on a navigation link, would close the drawer after a click on the link.

opened by jeanmatthieud 31
module boilerplate?
The material.js file doesn't appear to have any mechanism to export itself when run from within a closure, like when included via webpack or similar.

I would expect to be able to do something like:

npm install material-design-lite --save

and then from my source code do (using webpack and babel):

import componentHandler from 'material-design-lite';

or

var componentHandler = require('material-design-lite');

I'm assuming that componentHandler is the only thing that needs to be exported; that seems to be all I need in my quick experiment.

To be able to do this, one fix is required, and another would be nice.

Add module boilerplate.

There are a ton of different module boilerplates out there, but to support my use case it could be as simple as:

if (typeof module === 'object') { module.exports = componentHandler; }

I'd also be able to work with:

window.componentHandler = componentHandler

Add a 'main' entry to package.json.

optional: without it, we can use 'material-design-lite/material' instead of 'material-design-lite', but that forces people to look in source to figure it out.

"main": "material.js",
Tooling
opened by bryanlarsen 31
Date picker

I decided to submit PR without previous/next month slide since there are a lot of users out there who require this component and i believe that this is not crucial feature.
cla: yes

opened by dgrubelic 30

Incompatible es6 depedencies

I am failing to replicate the drone build on my end.

$ docker run -ti crhym3/ci-image /bin/bash
root@473e5c233846:/go# mkdir /workspace
root@473e5c233846:/go# cd /workspace
root@473e5c233846:/workspace# git clone https://github.com/google/material-design-lite.git --depth 1
root@473e5c233846:/workspace/material-design-lite# npm i -qq
root@473e5c233846:/workspace/material-design-lite# gulp all

[16:54:52] Requiring external module babel-core/register
/workspace/material-design-lite/node_modules/gulp-closure-compiler/node_modules/google-closure-compiler/lib/gulp/index.js:106
          let outputFiles;
          ^^^
SyntaxError: Unexpected strict mode reserved word
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Module._extensions..js (module.js:478:10)
    at Object.require.extensions.(anonymous function) [as .js] (/workspace/material-design-lite/node_modules/babel-core/lib/api/register/node.js:214:7)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/workspace/material-design-lite/node_modules/gulp-closure-compiler/node_modules/google-closure-compiler/index.js:26:19)
    at Module._compile (module.js:460:26)

opened by joshq00 30

MDL Button animations do not trigger upon "tapping" on MacBookPro touchpad

The animations applied to an MDL Button such as "raised button" or the ripple do not trigger when I simply "tap" on my MacBookPro touchpad.

Animations are triggered correctly when I do a "physical" click.

To test this you need to enable the "tap to click" option on the Trackpad's menu in System preferences. Then just "tap" your trackpad instead of doing a click.
bug P0 Button confirmed

opened by nicolasgarnier 29
I wanted to use a different color in input element when we click it. What's the easiest way to do that?

** PLEASE READ THIS BEFORE FILING AN ISSUE **

Feature Requests / Breaking Changes in mdl-1.x

The MDL core team has actively begun work on the next major version of MDL, dubbed MDL v2. Because we are a small team that's hyper-focused on delivering the best Material Design Library possible for the web, it is highly unlikely that we will be actively working on new features or making backwards-incompatible changes for MDL as it currently exists.

If there is a non-breaking feature you would like to see implemented in mdl-1.x and are willing to contribute, we'd be happy to offer assistance with you doing so. But we will not personally be actively working on said features.

While we are just getting started with our next version of MDL, you can see our current progress on master as well as an overview of the direction we're headed in our (WIP) developer guide as well as our initial POC branch for our new architecture.

If you're interested in information for a specific MDL v2 component, check out our v2-component issues to see which v2 milestone it's associated with and feel free to subscribe to that issue for updates.

Bugs

Please include the following information with your bug report:

What MDL Version are you using? (please be specific, e.g. major.minor.patch)

What browser(s) is this bug affecting (including version)?

What OS (and version) are you using?

What are the steps to reproduce the bug? Can you create a plunker/codepen/jsfiddle which reproduces it?

What is the expected behavior?

What is the actual behavior?

Any other information you believe would be useful?

opened by 20bcs9772 0

Releases(v1.3.0)

v1.3.0(Dec 21, 2016)
MDL v1.3 adds some fixes that have been committed since 1.2.1, as well as a new feature.

New: prevent automatic upgrading

@AlexanderOtavka added the ability to disable auto-upgrading! This is useful if you want to manage the component lifecycle yourself, such as if you're integrating with a framework.

In order to do this, register an event listener for the mdl-componentupgrading event. Once you receive an event, you can choose whether or not to cancel it, giving you control on a per-component basis.

Bug fixes and improvements

@chajath added an option to disable JS layout switching

@MitchLillie improved tab handling to allow more types of links

@leocaseiro added the mdl-card--border option to mdl-card__supporting-text(https://github.com/google/material-design-lite/commit/4ee5202c6c934096ad8edfe7eb94fc29f133e42d)

@enniel fixed a bug with spinners and some documentation typos

@pndewit fixed a bug with vertical alignment in radios

@ko22009 fixed several unit tests

@hanyuzhou2006 fixed a bug in ripples

@Abradoks improved support for older browsers in radios

Thank you to all the contributors, and sorry if I missed anyone above!

MDC-Web and plans for the future

As you may have noticed, an alpha for Material Components for the web (MDC-Web) was recently released.

MDC-Web started life as version 2 of Material Design Lite, but has since evolved into a project of its own, with a broader team and a strong focus on providing a high-quality Material Design implementation for all of the web.

Here are some of the highlights of what you can expect:

Modular components, served as independent NPM packages (as well as a large all-in-one meta-package)

Manual lifecycle control, with an opt-in auto-init option

Stronger focus on progressive enhancement, performance, and accessibility

Internals built with low-level architecture to facilitate integration into frameworks

Still fully vanilla: no polyfills or frameworks needed

The project is still in its alpha stage, so expect to find a lot of missing components, and to see significant churn as we make changes based on your feedback!

What happens to Material Design Lite?

Material Design Lite (v1) will remain available, with limited support. We don’t have the resources to fully maintain both projects, so we won’t be doing any further development on MDL ourselves.

That said, we’ll do our best to be around to fix critical bugs and accept PRs from the community, as well as release those in new versions. This model has worked well ever since we started the v2 work that eventually resulted in MDC-Web, with new components, new features, and many bugfixes contributed since then.

With this approach, we plan to give developers time to migrate to MDC-Web as the project matures and the community grows.

Full 1.3.0 changelist.

Downloads:

material-design-lite-1.3.0.zip MD5: c6ec30e0470491e58ad2c69aefcbfce9 SHA1: 123dd0c30b2aa03fc37ae8216276547461dd115c SHA256: ce746c6483c357da5642915c38b01b03d124c37565855b6f60b7d87e74228fea

material-design-lite-1.3.0.tar.gz MD5: 18201311fc4c71b581ca717f4ead3992 SHA1: 3aff5e0ec9e31ad1a8e57e9365c7ac113f1d6def SHA256: 4b4ab9845dba0e6a6fda172d69aff6da72c3e429dc1f3d30fa0935d315f40cb6

Source code(tar.gz)
Source code(zip)
v1.2.1(Sep 8, 2016)

MDL v1.2.1 fixes a regression with the drawer button introduced in 1.2. It was being positioned incorrectly.

Full 1.2.1 changelist.

Downloads:

material-design-lite-1.2.1.zip MD5: 1b70c8c1f9e2341c307ddbeaac87e048 SHA1: 83c6d73a424afb9d5461d78be0425e36a0465e11 SHA256: d0659c7acf39ce43348a2bbf4d3c0ea244114cf5234c24afa733f2b952c49c06

material-design-lite-1.2.1.tar.gz MD5: 2728f8703aba0a4ef27b3b573405de68 SHA1: edd174d9fbdc33ae19cc071d2e0ab690aacbe8cd SHA256: 1cd534b279d59763d12d547a88ee4483157f2d87846c98b0d2220661fa92600e

Source code(tar.gz)
Source code(zip)
v1.2.0(Aug 12, 2016)
MDL v1.2 brings in some long due bug-fixes and new features.

New component: chips!

@b-kelly brings us chips!

A huge thank you for working on this component, @b-kelly! 🙌

Bug fixes and improvements

The component downgrade event now fires again. Sorry to anyone affected by this regression introduced in a small refactor for our last release.

@joemidi fixed some JS styling that was causing build failures.

We now call the CustomEvent constructor instead of Event for componentHandler events, which fixes them failing in older browsers.

@karanjthakkar has provided a fix for tooltips following the mouse cursor on scrolling.

@marekjalovec fixed radio selections not updating the other radio's UX in some cases.

@westy92 has added the ability to use mdl-for for tooltips instead of the for attribute. This helps those of you worried about strict HTML validation.

@LayZeeDK fixed the active state coloring for drawer items.

@koba-ninkigumi has allowed the layout tab overflow scrollers to display when needed.

@anirudhb fixed a Chrome regression where tooltips were blurry from a GPU enhancement.

Plans for the future

A huge thank you to everyone who contributed to this release! Quite a few of these bugs have long been waiting to get pushed into a new stable release. Sorry it took so long.

As you may have noticed, the core team isn't working very actively on v1 at the moment. We're currently focusing heavily on v2 development, the current state of which can be seen in the master branch. It is still very early and no support is provided for it at the moment, but you are free to play around with it and help discuss things in the issue tracker. You'll find a number of relevant issues there that we've created to help us figure out what your needs are.

With this large focus on v2, v1 is only supported by the core team for critical bugs, moving forward. That said, we are happy to review PRs against the mdl-1.x branch for any non-critical bugs or new components, as we did for chips on this release. Fixes and bugs must not break compatibility with existing applications, though, since it's still the 1.x line.

This means v1 is now on community-support going forward.

As for v2, we're currently working towards an alpha so we can present our approach and get your feedback. Stay tuned for more!

Full 1.2.0 changelist.

Downloads:

material-design-lite-1.2.0.zip MD5: 135b81cad0fcd71f979b6ebdba995c0d SHA1: 7733b92e4161b21fd11cac9311b99915d10fe148 SHA256: a4c94fa75cc1bb742cc5c6e87db2b487442ec04dd2eda612e29d12780a51b86a

material-design-lite-1.2.0.tar.gz MD5: 82e60a82464c9ddf94c48aeadc687f65 SHA1: 992833b33ae1a66fec9ba46098cdb1259d2185dd SHA256: ad98ad88fe210eddae4732f23bad173d7cd048ed996f3a568d5a63774a3d3e36

Source code(tar.gz)
Source code(zip)
v1.1.3(Mar 17, 2016)
MDL v1.1.3 fixes a few more issues, namely:

#4179: Further fixes to snackbar positioning, on small screens. Thanks, @Garbee!

Update docs and templates to use magic viewport, to enable GPU rasterization on Chrome Android.

#4183: Fix tab navigation with external links. Thanks, @sad270!

#4191: Fix issues with initEvent in Firefox.

Fixes to CI configuration.

Full 1.1.3 changelist.

Downloads:

material-design-lite-1.1.3.zip MD5: 3c788257213c0f582518879a01bf8e4b SHA1: 4f20d699175915174ab83518296239c9efc0cd3c SHA256: 52ddf338664c2eb94cefc27c564183427c73c200f53d3c934df397e4f3b7e5d0

material-design-lite-1.1.3.tar.gz MD5: 0c086db8b63116e5e0572e62e80ba19e SHA1: 9447b160d426883cb2b8397f47fc46081f71f598 SHA256: 648a4a1e09cba4d88c856039ed8c48c1de200233eb7504de14574e9f777e7236

Source code(tar.gz)
Source code(zip)
v1.1.2(Mar 4, 2016)
MDL v1.1.2 fixes a few more issues, namely:

NPM package was missing all colour combinations files in v1.1.1

Data table sorting icon appearance

Improvements to component deconstruction

getmdl.io was missing a link to the Portfolio template (sorry, @mustafa-x!)

Snackbar alignment fixes

Documentation fixes for several components

Printing wasn't working in IE11

Improved support for placeholders in textfields

Full 1.1.2 changelist.

Downloads:

material-design-lite-1.1.2.zip MD5: 281645339cf68342e75ece69efdeb6d7 SHA1: d0116d65086ca2fa385412ec5fab4d69cf5db2c6 SHA256: 726688b1999b4aa29e360e87f60589c59c819f95051be9de296a5895b04c7e3a

material-design-lite-1.1.2.tar.gz MD5: bb38ca65cf2c888865ebacccda6d5e34 SHA1: 60bdd899757358823eaf959d02cc5b823a855cdc SHA256: 1fe91ed86c705142ee1f8037a74f74001b55cc8d09a9c9a48c64b23734ea5404

Source code(tar.gz)
Source code(zip)
v1.1.1(Feb 3, 2016)
MDL v1.1.1 fixes a new minor issues with 1.1.0, namely:

#4056: Incorrect sizing and colors in lists.

#4058: Incorrect behaviour with waterfall headers on small screen sizes.

#4066: Wrong color used for textfield errors.

Full 1.1.1 changelist.

Downloads:

material-design-lite-1.1.1.zip MD5: 594eef0ea44aa7f2b2f51185460743a2 SHA1: d1863d477eeb143ecfd003502279e4c8f37a5863 SHA256: e2b23bac016ee9e52ff7ca6e6ba460952c3b21d1263e18eaf7666da2f1f55a93

material-design-lite-1.1.1.tar.gz MD5: e120af2e5731dddd0af10ca1a417d9b3 SHA1: 7dc2476e628dd1089d07bac65ed3f7d6d6645595 SHA256: 9a7016e71524016837368b0221cf448fb0c8612cdad90fe02a7c45612724f391

Source code(tar.gz)
Source code(zip)
v1.1.0(Feb 1, 2016)
New components!

MDL v1.1.0 is the first feature update of MDL, with three new major additions.

Snackbars and toasts

Using mdl-snackbar, you can now use both toasts:

and snackbars:

Thanks @Garbee, for implementing this much requested component!

Please note, the alignment is known to not be exact content center. Instead the snackbar begins at the center of the page. This is due to limiting technology in the browsers we are supporting.

Dialogs

You can now use mdl-dialog to add modal windows prompting users for input:

Note that this component relies on the <dialog> element, which has very limited cross-browser support at the moment. We do not include a polyfill for this functionality with MDL, but you can use an existing one, or build your own.

Thanks to @Garbee for this component too!

Lists

We've added the mdl-list style component to make it easier for you to create lists with Material Design styling.

Thanks to @rohanthacker for taking care of this one!

New and improved

Added new template: portfolio. Thanks, @mustafa-x!

Added overlap option to badges.

Added full bleed modifier option to menu items.

Added option to hide top rather than bottom in a waterfall header layout.

Added checkFocus() method to textfield.

Added toggleDrawer() method to MaterialLayout.

Added column sorting to data table.

Added data-mdl-for option to menu component.

Fixes

v1.1.0 also includes a number of fixes and improvements, some of the most important being:

Added optional Closure compiler support and tests.

Added memory tests and expanded current test suite.

Fixed issues with downgrading components.

Fixed small visual glitches in footer, switch, layout, button, card.

Fixed small visual glitches in android.com, blog and dashboard templates.

Made a number of a11y improvements across multiple components.

Improvements to the build process and continuous integration.

You can also check the full changelist.

Next steps

Main development will now continue in master with 2.0 work, with mdl-1.1 for bugfix releases on the 1.1.x line.

A huge thank you to everyone who contributed to this release! :raised_hands:

Downloads:

material-design-lite-1.1.0.zip MD5: 406b735ee32009c259cf6446a7e3e4ec SHA1: 8f57587edb081908ae000dbedf2d100ddd53feba SHA256: c20f66c32ac9de0ba6fa475d0400b2e0ff080fa0c02b1527ff77e8f7d862947f

material-design-lite-1.1.0.tar.gz MD5: b2e04f36676e9a17af52b97be8288a3f SHA1: 5898ff2cd94de13c6af6297b11101b375504c922 SHA256: 524bc372ebef086ca858355d6657f56a77fc5ce9462343f5c0787c1960e06e81

Source code(tar.gz)
Source code(zip)
v1.0.6(Nov 2, 2015)
MDL v1.0.6 is the final release of the 1.0 line, with all development continuing now in 1.1. Some notable changes include:

Fixed scrolling with mouse wheel on open drawers.

Worked around iOS 9 WebView bugs with general sibling (~) selector.

Worked around Safari bugs with consecutive adjacent sibling (+) selectors.

Small fixes to button styling to follow the spec more accurately.

A number of small documentation fixes and improvements.

You can also check the full changelist.

Downloads:

material-design-lite-1.0.6.zip MD5: 4869bf87ec07690f884dceeb51403c98 SHA1: c384d97218878649a5d63fdc48315e57c5eb7394 SHA256: 1de4daab6e073eabfd3dc7e2f9bfce12e25fc995638414609a9bee193119a2df

material-design-lite-1.0.6.tar.gz MD5: 77928be85deda07a38c83788431ecdbc SHA1: 707bf0f954b2bee9c2191c3a4c353be6d10998ee SHA256: c3ab035adbf98281d76f771ea1fa324112946f1a342a3808ecbcb74ae77d4b94

Source code(tar.gz)
Source code(zip)
v1.0.5(Sep 29, 2015)
MDL 1.0.5 introduces a few more fixes, notably:

Closure compiler compatibility fixes (#1551, #1570)

Several fixes to mdl-layout (#1532, #1580, #1656)

#1498: Fix for upgrade issues with dynamically created components (thanks, @dopic!)

You can also check the full changelist.

Downloads:

material-design-lite-1.0.5.zip MD5: f2016824b8dad95d015cf8dd5356187f SHA1: 7ce02a267c54844f1d1eb21f9d79fb73b4ed36e9 SHA256: 829639542bbaae5375f8b5e5c7a40053db64ad4ba8710d66d367ebb6f6e20e00

material-design-lite-1.0.5.tar.gz MD5: 2c116d0013e229ed0f1361eb0df4759e SHA1: 365c55e0280050723a04f3a10063016ff33e1dfc SHA256: d9e1a0e602e2865c28c2c4e9004202dc7473f3fcefabb8630fb637ce43c8a87c

Source code(tar.gz)
Source code(zip)
v1.0.4(Aug 20, 2015)
Following hot on the trail of 1.0.3 comes 1.0.4, a hotfix release that addresses some regressions :sweat:

#1423. Textfield background regression.

#1420. Revert iOS data table scrolling fix causing tooltip placement regression.

#1437. Add missing files to release folder.

Full 1.0.4 changelist.

For everything else, please check the 1.0.3 release notes.
Source code(tar.gz)
Source code(zip)
v1.0.3(Aug 18, 2015)
MDL 1.0.3 is a larger revision release with library, documentation and build process fixes.

We're now pretty happy with the current state of 1.0, so we've moved it to an mdl-1.0 branch, which will only be getting important fixes from now on.

Our main focus will now shift to 1.1, where we'll be adding new features without breaking backwards compatibility.

Highlights:

#1256. Fix some issues with programmatic updates to sliders.

#1281. Fix icon alignment inside buttons with text.

#1285. Fix radio button positioning.

#1309 and #1365. Add IIFE wrapping and documentation to component classes.

#1373. Remove documentation styling that was accidentally included in MDL.

#1406. Fix menu behaviour after hiding.

Fixes to hamburger menu and drawer for certain layout combinations.

Many improvements and fixes to documentation.

Several improvements and fixes to library build process.

Several improvements to templates, including accessibility fixes.

Improvements to MDL testing, including the addition of memory tests.

You can also check the full changelist.

Visit getmdl.io to learn how to upgrade to 1.0.3.

Happy coding! :zap::zap::zap:
Source code(tar.gz)
Source code(zip)
v1.0.2(Jul 29, 2015)
MDL 1.0.2 is a small update hot on the heels of 1.0.1 that brings a quick hotfix for IE 10 support with the component handler.

Downgrades will now complete successfully in IE 10 and not cause errors.

Along with that many of the form components have been given new methods for checking state.

For example, you can now call checkDisabled() against form input widgets to check the disabled state and update the UI accordingly.

Source code(tar.gz)
Source code(zip)
v1.0.1(Jul 23, 2015)
Material Design Lite 1.0.1 includes numerous bug-fixes to our components and new support for installing our Sass files for reuse via npm install material-design-lite. See getting started to grab 1.0.1 from our CDN, Bower, npm or to download it today.

Thanks to all our awesome contributors for helping make this release happen. Catch the release highlights below or the full changelog.

MDL 1.0.2 has also been tagged with some a regression fixer for this release. We've already updated getmdl.io to include this version.

Highlights

Component handler

Upgrades

upgradeElement now can take only the element and upgrade all assigned components.

Error objects are now thrown instead of plain strings. This may cause some BC breakage but is unlikely. If you were catching these errors, please verify your code still works as intended.

Components

Buttons

Disabled states now work for any combination of modifiers.

Tooltips

Now hide on scroll with touch devices.

Progress

Downgrade method is now provided to remove the elements it creates from the DOM.

Navigation

Spacing preserved for the drawer icon on larger screens is no longer saved when it isn't present.

Footers

The footer component was not adhereing to BEM naming conventions. This has been fixed and all modifiers are now available as elements (-- to __). Make note that the modifier (--) usage is now deprecated and you should update to element (__) targets.

Shadows

Will work against any component and will override any existing shadows.

Build process

New variable to trim down output by removing individual color classes.

gulp-sass has been updated to the 2.0 release.

Templates

Accessibility updates to icons

Misc changes

Touch-action added to remove 300ms touch delay for IE.

Checkboxes and all other components necessary have been explicitly turned on as a widget. This allows for you to set a disabled state to these elements among using other public methods available on them.

Community Showcase

Thanks to everyone that's been sending in screenshots of what they've been building with MDL. We're working on a proper Showcase page, but welcome all your submissions. Here are just a few of them.

To request your site be added, please file a new issue on our GitHub issue tracker. The issue should include a link, a description of the site and a suggested screenshot.

Contributing

We've been lucky to have almost 100 contributors help improve the project to date. If you'd like to help, check out the confirmed label for bugs we've confirmed we want to fix.

Thanks and heartz <3
Source code(tar.gz)
Source code(zip)
v1.0.0(Jul 6, 2015)

For more information, see our blog post or http://getmdl.io :dancers:
Source code(tar.gz)
Source code(zip)

Owner

Google

Google ❤️ Open Source

GitHub https://getmdl.io

Material Design Based One Page HTML Template

Material Design One Page HTML Template MD One page template is fully responsive and free to use. This HTML template is based on Materialize, a CSS Fra

587 Jan 2, 2023

Materialize, a CSS Framework based on Material Design

MaterializeCSS Materialize, a CSS Framework based on material design. -- Browse the docs -- Table of Contents Quickstart Documentation Supported Brows

38.8k Jan 2, 2023

MDUI 是一个基于 Material Design 的前端框架。

MDUI MDUI 是一个基于 Material Design 的前端框架。 QQ群：635509201 中文文档特性轻量级 CSS 文件仅 32KB minified + gzip JavaScript 文件仅 19KB minified + gzip 多主题 CSS 文件中已经包含了 19种

3.5k Jan 2, 2023

Standalone keycloak theme using Système de Design de l'État (french government design system)

keycloak-dsfr This template has been made thanks to keycloakify. It follows the french design system Système de Design de l'État. You can find guideli

Fabrique numérique des Ministères Sociaux

4 May 25, 2022

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Fluent UI Web ?? ?? ?? Version 8 of @fluentui/react is now available on npm! ?? ?? ?? See the release notes for more info, and please file an issue if

14.5k Jan 4, 2023

Set of react components based on styled-components

React to styled Links Documentation Contributing Ask question or give feedback Packages @react-to-styled/components – all components in one package @r

11 Jan 1, 2023

A package of small but beautiful React components from the planet, Pluto. 🔵 Get minimal components for your React based applications 😍

React Pluto Component Design System + UI Kit A package of small but beautiful React components from the planet Pluto. To install the latest version, r

17 Aug 8, 2022

A responsive HTML template for coding projects with a clean, user friendly design. Crafted with the latest web technologies, the template is suitable for landing pages and documentations.

Scribbler - a responsive HTML template for coding projects and documentations Scribbler is a responsive HTML/CSS/Javascript template designed for deve

394 Jan 1, 2023

Material Design Components in HTML/CSS/JS

Related tags

Overview

Material Design Lite

Limited support

Use MDL on your site?

Browser Support

Download / Clone

Feature requests

Want to contribute?

License

Comments

Add module boilerplate.

Add a 'main' entry to package.json.

Feature Requests / Breaking Changes in mdl-1.x

Bugs

Releases(v1.3.0)

v1.3.0(Dec 21, 2016)

New: prevent automatic upgrading

Bug fixes and improvements

MDC-Web and plans for the future

What happens to Material Design Lite?

v1.2.1(Sep 8, 2016)

v1.2.0(Aug 12, 2016)

New component: chips!

Bug fixes and improvements

Plans for the future

v1.1.3(Mar 17, 2016)

v1.1.2(Mar 4, 2016)

v1.1.1(Feb 3, 2016)

v1.1.0(Feb 1, 2016)

New components!

Snackbars and toasts

Dialogs

Lists

New and improved

Fixes

Next steps

A huge thank you to everyone who contributed to this release! :raised_hands:

v1.0.6(Nov 2, 2015)

v1.0.5(Sep 29, 2015)

v1.0.4(Aug 20, 2015)

v1.0.3(Aug 18, 2015)

v1.0.2(Jul 29, 2015)

v1.0.1(Jul 23, 2015)

Highlights

Component handler

Components

Build process

Templates

Misc changes

Community Showcase

Contributing

v1.0.0(Jul 6, 2015)

Owner

Google

Material Design Based One Page HTML Template

Materialize, a CSS Framework based on Material Design

MDUI 是一个基于 Material Design 的前端框架。

Standalone keycloak theme using Système de Design de l'État (french government design system)

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Set of react components based on styled-components

A package of small but beautiful React components from the planet, Pluto. 🔵 Get minimal components for your React based applications 😍

A responsive HTML template for coding projects with a clean, user friendly design. Crafted with the latest web technologies, the template is suitable for landing pages and documentations.

The CSS design system that powers GitHub

Reseter.css - A Futuristic CSS Reset / CSS Normalizer

A built-time CSS library for styling React components.

700+ Pure CSS, SVG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

A classless CSS framework to write modern websites using only HTML.

Simple CSS library for semantic HTML markup

A CSS bookmarklet that puts pink error boxes (with messages in comic sans) everywhere you write bad HTML.

RxHtmlButtonLibrary - Html Button Styling Library by roxunlimited.com using CSS and jQuery.

A pure html and css library for dark mode in your website.

The fastest way to build beautiful Electron apps using simple HTML and CSS