Material Design Lite: vanilla Material Design CSS/JS
/material-design-lite
Material Design Lite still does the one job it was built for: dropping Material Design cards, buttons, and typography onto a static HTML page without pulling in React or Angular. The catch is that Google moved active development to Material Components for the Web years ago, so MDL today is maintenance-mode, not growing. It suits a small, mostly-static site that wants that look with zero build step, not a new, component-heavy app.
What is Material Design Lite
Material Design Lite is Google's original vanilla implementation of Material Design — plain CSS, JS, and HTML with no framework in the dependency tree. It ships pre-built components that you drop into an existing HTML page rather than instantiate through a framework API. The project targets static content sites specifically and is built to gracefully degrade in older browsers instead of requiring a modern JS runtime to render anything at all.
Core components and capabilities
- ✓Pure CSS/JS/HTML implementation — no React, Vue, or Angular dependency, so it drops straight into a plain HTML page.
- ✓Graceful degradation: A-grade browsers (Chrome, Firefox, Safari, Opera, IE10, IE11, Chrome for Android, Mobile Safari) get the full experience.
- ✓IE9 falls back to a CSS-only look instead of breaking, per the browser support table in the README.
- ✓Accessible from the start, per the README, rather than retrofitted.
- ✓Distributed three ways: self-hosted v1.3.0 release assets, a CDNJS mirror, or the material-design-lite npm package.
- ✓Apache-2.0 licensed, so it's free to use and modify, including commercially.
How to add MDL to your project
The README is blunt about this: the old getmdl.io-hosted assets are gone, so the safest path is to self-host the v1.3.0 release. Grab the prebuilt CSS and JS from the v1.3.0 release page on GitHub and serve them from your own origin. If you'd rather not host the files, MDL is mirrored on CDNJS as a drop-in CDN link, or you can install the material-design-lite package from npm. To work on MDL itself instead of just consuming it, clone the repo with `git clone https://github.com/google/material-design-lite.git` — but the README warns the master branch is unstable and points production use toward a tagged release, npm, or Bower instead.
Using MDL components in HTML
The exact CSS classes and JS hooks for each component aren't documented in what's available here. That detail used to live on getmdl.io. The README confirms the site, and its component gallery, is gone for good. What is documented is the shape of the mechanism: MDL bills itself as Material Design components built directly in HTML, CSS, and JS, meaning you write ordinary markup and let MDL's stylesheet and script style and behave it, rather than instantiating components through a framework API. For per-component markup today, the README points to the v1.3.0 release assets and the project wiki instead of a live docs site.
Strengths
- ✓No framework tax — plain CSS/JS/HTML drops into a static site or legacy codebase without a build step.
- ✓Apache-2.0 license keeps it unencumbered for commercial use.
- ✓Still installable three ways — self-hosted release, CDNJS mirror, or npm — even with getmdl.io gone.
- ✓Graceful degradation means older browsers get a working CSS-only fallback instead of a broken page.
Limited support status and what it means
- △Limited support: Google's core team has moved development to Material Components for the Web and only reviews PRs, fixes critical bugs, and cuts releases for MDL — no new components are coming from Google.
- △The official docs site, getmdl.io, and its component gallery are gone, so there's no hosted reference for browsing components or their markup.
- △The README explicitly warns against using the master branch in production — you need a tagged release, npm, or Bower for something stable.
- △The browser support matrix lists specific old IE versions (IE9 as B-grade, IE10/11 as A-grade), which dates how old the tested baseline is.
What to use instead of MDL today
Frequently asked questions
Material Design Lite is in limited support: Google's core team no longer builds new features for it, but the README says they still review pull requests, fix critical bugs, and publish releases. Active development moved to Material Components for the Web instead, which is where new component work happens now.
Material Design Lite still works after the getmdl.io shutdown — only the hosted documentation and component gallery are gone, not the library itself. The README recommends self-hosting the v1.3.0 release assets from GitHub, using the CDNJS mirror, or installing the material-design-lite package from npm.
Material Design Lite fully supports Chrome, Firefox, Safari, Opera, IE10, IE11, Chrome for Android, and Mobile Safari as A-grade browsers, per the README's browser support table. IE9 is graded B and gracefully degrades to a CSS-only experience instead of the full interactive one, so pages still render rather than breaking outright.
Material Design Lite is vanilla CSS/JS/HTML with no framework dependency, so nothing stops you from loading its stylesheet and script into a React or Vue app. It wasn't designed around either framework's component model, though, so a framework-native library like Material-UI fits more naturally in a React codebase.
Material Design Lite's README points users to the v1.3.0 release as the version to self-host, since that's the release referenced for production use now that getmdl.io is gone. The README recommends pulling the prebuilt CSS and JS from that release page rather than tracking the unstable master branch.
Material Components for the Web is the better choice for new projects — it's where Google moved active development, per Material Design Lite's own README. Material Design Lite still makes sense for an existing MDL-based site or a zero-build, framework-free option, since it still works even in limited support.
The problem it solves
Before Material Design Lite, getting Google's Material Design look onto a plain HTML page meant either adopting a JS framework's component library or hand-building the CSS yourself — there was no framework-agnostic, drop-in version of Material Design for static or server-rendered pages. MDL filled that specific gap: the visual language, without React or Angular as a prerequisite.
Best use cases
- •Giving a static marketing or content site a Material Design look without wiring up a JS framework.
- •Maintaining a legacy page already built on MDL that needs bug fixes, not a rewrite.
- •Small internal tools where setting up a build pipeline costs more than the page is worth.
Who should try it — and who should skip
Try Material Design Lite if you're maintaining a static site, a marketing page, or a legacy internal tool that already has Material Design styling and just needs to keep working — self-hosting the v1.3.0 assets is a low-effort way to do that. Skip it for anything new: a fresh project gets more from Material Components for the Web or a framework-native library like Material-UI, since MDL isn't gaining components and its hosted docs are gone for good.
Related repositories
Want a second opinion on material-design-lite?
Ask an AI that can read this page — one click and you get its take on material-design-lite.