Want to take your software engineering career to the next level? Join the mailing list for career tips & advice Click here


Material Design Components in HTML/CSS/JS

Star full 4f7b624809470f25b6493d5a7b30d9b9cb905931146e785d67c86ef0c205a402Star full 4f7b624809470f25b6493d5a7b30d9b9cb905931146e785d67c86ef0c205a402Star full 4f7b624809470f25b6493d5a7b30d9b9cb905931146e785d67c86ef0c205a402Star full 4f7b624809470f25b6493d5a7b30d9b9cb905931146e785d67c86ef0c205a402Star half bd79095782ee4930099175e5ce7f4c89fa3ddabcd56fffcc7c74f6f2a2d46b27 (3 ratings)
Rated 4.17 out of 5
Subscribe to updates I use material-design-lite

Statistics on material-design-lite

Number of watchers on Github 31630
Number of open issues 367
Average time to close an issue 4 days
Main language HTML
Average time to merge a PR 3 days
Open pull requests 111+
Closed pull requests 86+
Last commit over 3 years ago
Repo Created almost 6 years ago
Repo Last Updated 5 months ago
Size 55.6 MB
Homepage https://getmdl.io
Organization / Authorgoogle
Latest Releasev1.3.0
Page Updated
Do you use material-design-lite? Leave a review!
View open issues (367)
View material-design-lite activity
View TODOs for material-design-lite (13)
View on github
Book a Mock Interview With Me (Silicon Valley Engineering Leader, 100s of interviews conducted)
Software engineers: It's time to get promoted. Starting NOW! Subscribe to my mailing list and I will equip you with tools, tips and actionable advice to grow in your career.
Evaluating material-design-lite for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)
What people are saying about material-design-lite Leave a review
It's simple, light and clean

Material Design Lite

GitHub version npm version Bower version Gitter version Dependency Status

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

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.


Google, 2015. Licensed under an Apache-2 license.

material-design-lite open issues Ask a question     (View All Issues)
  • about 4 years Site Showcase Request - Built with Jekyll
  • about 4 years Bower package is corrupted
  • about 4 years Site Showcase Request: iKevinShah.com
  • about 4 years v2 build hosting
  • about 4 years Accessibility Audit
  • about 4 years Header not expanding when page height is less than window height
  • about 4 years Site Showcase Request
  • about 4 years How can I remove hover on mdl-navigation__link?
  • about 4 years Ripple container is a square during animation time
  • about 4 years Chevrons/Arrows overlap tabs in scrollable tab panel
  • about 4 years Investigate speeding up our webpack build
  • about 4 years More of a critique than issue.
  • about 4 years Wiki for frameworks using a Virtual DOM
  • about 4 years Dropdown menu scrollbar broken in IE11/Edge
  • about 4 years [Checkbox without ripple] When clicking checkbox without ripple, ripple circle appears for a brief moment
  • about 4 years code.getmdl.io does not support CORS; prevents subresource integrity
  • about 4 years Templates images license and copyright
  • about 4 years Support multiple validation error messages
  • about 4 years License clarification
  • about 4 years Incorrect expansion start point for unbounded ripples
  • about 4 years need more instruction on readme
  • about 4 years Add additional icon toggle examples to demo
  • about 4 years Radios should activate ripple when their corresponding label is pressed
  • about 4 years Add mechanism for allowing elements to move when snackbar is present
  • about 4 years Make snackbar more resilient to text overflow
  • about 4 years Single-line text fields do not work with auto-filled form fields
  • about 4 years [mdl-layout__header--waterfall] Block the burger's apparition for small screen
  • about 4 years Implement Icon Button v2 Component
  • about 4 years Add Character Counter to text fields
  • about 4 years Add custom elements demo
material-design-lite open pull requests (View All Pulls)
  • Update Cutting-the-mustard test
  • Refocus the :focused element after the layout rendering
  • Address snackbar MD alignment.
  • Decouple tabs from panels. When a tab is clicked, if a matching pane…
  • Fixed issue #2581
  • Fixed ribbon breaking on iOS.
  • Gulp overhaul
  • Add sliding active indicator to tabs
  • ? Implement creator and increase leak coverage
  • Match drawer metrics in MD spec
  • Use actual colors
  • Changed default padding on header.
  • RTL problems
  • Fix Icon buttons in datatable are misaligned #1402
  • Remove import of partials from components
  • Material tabs shouldn't event.preventDefault().
  • add tool to audit release branch against code.getmdl.io
  • Fix snackbar position on mobile.
  • fix tab navigation for external links
  • Date picker
  • Proof of concept for the v2 component model
  • Use string properties for box style values
  • eslint error fixes
  • Added missing class
  • Added link names which make more sense.
  • Fix indentation
  • FIxed the video autoplay described in #1155
  • Multiple tab strips
  • Updated README.md
  • fix to handle if Tab has no href attribute
  • Reemplace property justify-content value
  • Date picker component
  • Shadow root compatibility feature
  • Added MDL Stepper component
  • Added mdl-chip component
  • Required input validation fix
  • Update _layout.scss
  • Use `customEvent`
  • Fix - Scrollable Tabs Error
  • Fix - Scrollable Tabs Error
  • Added mdl-chip component
  • fix label `for` attributes
  • Update: semantic tags for list action example
  • Added functionality to allow forcing a mobile site layout
  • Initial button split
  • Fix drawer toggle alignment problem.
  • Fixes #376. Uses timeout to prevent events that trigger multiple even…
  • Blur fix (closes #4574)
  • chore(infrastructure): Add validate-commit-msg hook
  • Update babel-core to version 6.13.1 πŸš€
  • Update babel-core to version 6.13.0 πŸš€
  • Update babel-core to version 6.11.4 πŸš€
  • Update mocha to version 3.0.1 πŸš€
  • feat(card): Initial implementation
  • feat(fab): Initial Implementation
  • Use consistent name for MyComponentFoundation
  • Fix drawer toggle mis-alignment due to incorrect line-height.
  • feat(drawer): Add support for closing temporary drawer via escape key
  • Update gulp-sourcemaps to version 2.0.0 πŸš€
  • refactor: Use semantic mdl-animation functions for motion curves
  • Fix alignment in list-control.html
  • feat(menu): Initial implementation of simple menus.
  • Fix unit test mdl-1.x
  • fix spinner styles
  • Update babel-core to version 6.16.0 πŸš€
  • Update README.md
  • Add layout tab class to disable js layout switching
  • updated bower.js
  • feat(select): Auto-Position Menu on open
  • docs: Add service worker support for microsite
  • fixed Edge support
  • Menu pre container
  • Fix browser native validation message
  • Update gulp-tap to version 1.0.1 πŸš€
  • updated
  • updated
  • Stopped using href attr on tabs if it's undefined
  • Add public method setTab to set the active tab programmatically
  • Update gulp-tap to version 0.4.2 πŸš€
  • Update gulp-tap to version 0.4.1 πŸš€
  • Update gulp-tap to version 0.4.0 πŸš€
  • Improve keyboard accessibility for tabs and drawer navigation menu.
  • Remove CSS dependency on .is-small-screen class
  • Automatic uncheck header checkbox
  • Add expansion component
  • Initial yarn lock
  • Remove mouseup event on slider to let change event occur.
  • Implemented datepicker (fixed CLA)
  • Add search component
  • Update gulp-csso to version 3.0.0 πŸš€
  • make mdl capable to be rendered server-side
  • chore(package): update google-closure-compiler to version 20170124.0.0
  • Textfield, floating label font size for invalid state
  • fix Edge support for Slider
  • Update chai to version 4.0.0 πŸš€
  • set is_dirty when placeholder exists
  • Update gulp-autoprefixer to version 4.0.0 πŸš€
  • Android Navigation Drawer
  • Hide menu on tab event
  • Typos in README.md
  • all
  • Bump acorn from 4.0.13 to 7.1.1
  • Update index.html new code
  • Typo in styles.md documentation
  • chore(package): update google-closure-compiler to version 20170409.0.0
  • chore(package): update browser-sync to version 2.18.12
  • Update about.html
  • Update style.css
  • Update index.html
  • Update style.css
  • Improve shadow-mixins
material-design-lite questions on Stackoverflow (View All Questions)
  • Netbeans - Google Material Design Lite class autocomplete is not working
  • Is there a way to create a dialog in material design lite?
  • Need guide for Polymer + Material Design Lite
  • Material Design Lite Layout breaks on second upgradeDom()
  • Incrementing the Material Design Lite Progress bar with React
  • How to set global variable to material design lite library in typescript
  • How to use spinner provided in Material design lite?
  • Logic used on Material-Design-Lite website to customize pallet color
  • Material Design Lite grid with tables
  • How to Attach Events to Table Checkboxes in Material Design Lite
  • Material Design Lite JS not applied to dynamically loaded html file
  • Overlap a div over fixed header in material design lite
  • Material Design Lite: Is Installation on Wordpress possible?
  • Material Design Lite Cards don't align properly
  • Material Design Lite use link layout with fixed header to change page content
  • Material Design Lite fixed navigation row
  • Material design lite inputs in Ember.js app loses it design after route transition
  • Material-Design-Lite auto full screen on browser scroll
  • What is the correct way to make a Material Design Lite table 100% width?
  • How to format select box with Material Design Lite?
  • Integrating Material Design Lite with Angular2
  • How to use Material Design Lite and Angular for forms
  • Material Design Lite and jQuery, smooth scroll not working
  • Material Design Lite and Bootstrap Sticky Footer
  • How to add 2 Sliding Menu in Google Material Design Lite
  • Cannot GET aurelia packages using material design lite
  • Google material design lite : grid distribution
  • Material Design Lite Table - Adding Rows Dynamically Breaks Format
  • Menu separator with material design lite
  • Error Gulp browserify require ('material-design-lite') module not found
material-design-lite list of languages used
material-design-lite latest release notes
v1.3.0 v1.3.0

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 dont have the resources to fully maintain both projects, so we wont be doing any further development on MDL ourselves.

That said, well 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.


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

v1.2.1 v1.2.1

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.


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

v1.2.0 v1.2.0

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.


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

Other projects in HTML
Powered by Autocode - Instant Webhooks, Scripts and APIs
Autocode logo wordmark