PHPackages mdlightdev/material-design-light - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Framework](/categories/framework) 4. / 5. mdlightdev/material-design-light ActiveLibrary[Framework](/categories/framework) mdlightdev/material-design-light ================================ A lightweight CSS framework implementing the Material Design 3. v0.1.0-alpha.2(3y ago)2403[9 issues](https://github.com/mdlightdev/material-design-light/issues)[10 PRs](https://github.com/mdlightdev/material-design-light/pulls)MPL-2.0SCSS Since Jun 13Pushed 2y ago1 watchersCompare [ Source](https://github.com/mdlightdev/material-design-light)[ Packagist](https://packagist.org/packages/mdlightdev/material-design-light)[ Docs](https://www.materialdesignlight.com/)[ RSS](/packages/mdlightdev-material-design-light/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (3)DependenciesVersions (11)Used By (0) ### Material Design Light [](#material-design-light) CSS Framework for Material Design 3 [**Explore the docs ยป**](https://material-design-light.pages.dev/) [Report bug](https://github.com/mdlightdev/material-design-light/issues) [![Website](https://camo.githubusercontent.com/cbf3422b4aed9d3b8d49cbd5aece813978e4e301170fdf7cbfdf647aa44bae4b/68747470733a2f2f696d672e736869656c64732e696f2f776562736974653f75726c3d68747470732533412532462532467777772e6d6174657269616c64657369676e6c696768742e636f6d253246)](https://material-design-light.pages.dev/) [![GitHub repository checks state](https://camo.githubusercontent.com/d425a44ddca145bc07622acb055434d26ceaff067eb967ced1b1a78629295b89/68747470733a2f2f62616467656e2e6e65742f6769746875622f636865636b732f6d646c696768746465762f6d6174657269616c2d64657369676e2d6c69676874)](https://github.com/mdlightdev/material-design-light/actions) [![GitHub](https://camo.githubusercontent.com/fc817301e6c8125d581c4139d1ce668c31178c12235752fbed7b764f035cc04f/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f6d646c696768746465762f6d6174657269616c2d64657369676e2d6c69676874)](https://github.com/mdlightdev/material-design-light/blob/main/LICENSE) [![npm](https://camo.githubusercontent.com/d68b92a61c4918b57a1b9ed10fb538a577c5b0fbc41dec8449b1746856ca3b06/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f6d6174657269616c2d64657369676e2d6c69676874)](https://www.npmjs.com/package/material-design-light) [![Packagist Version](https://camo.githubusercontent.com/b1328f113d350e15c286d637dbe5a22efac27fc30c5fbcd8ebb29969f858c6e9/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6d646c696768746465762f6d6174657269616c2d64657369676e2d6c69676874)](https://packagist.org/packages/mdlightdev/material-design-light) [![Nuget](https://camo.githubusercontent.com/7ea8324cbf3a5df8ff2c235ecb3bba2074875953639be36ac01a594944876f88/68747470733a2f2f696d672e736869656c64732e696f2f6e756765742f762f4d6174657269616c44657369676e4c69676874)](https://www.nuget.org/packages/MaterialDesignLight/) [![GitHub file size in bytes](https://camo.githubusercontent.com/a0b987b31444bfba83e3b9a67340982f30607f0a34bef91662ae7ad708360a4d/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73697a652f6d646c696768746465762f6d6174657269616c2d64657369676e2d6c696768742f646973742f6373732f6d6174657269616c2d64657369676e2d6c696768742e6d696e2e6373733f6c6162656c3d4353532532306d696e696669656425323073697a65)](https://github.com/mdlightdev/material-design-light/blob/main/dist/css/material-design-light.min.css) [![Libraries.io dependency status for GitHub repo](https://camo.githubusercontent.com/371b2bff54db656e5b655144d052094ebff9b92c2230a1e54bce8d52e1658b8b/68747470733a2f2f696d672e736869656c64732e696f2f6c6962726172696573696f2f6769746875622f6d646c696768746465762f6d6174657269616c2d64657369676e2d6c69676874)](https://github.com/mdlightdev/material-design-light/blob/main/package.json) About ===== [](#about) Material Design Light is a lightweight CSS framework that implements the [Material Design 3](https://m3.material.io/) to the full extent. The project is heavily work in progress and offers zero support or assurances on anything. Features -------- [](#features) - ๐Ÿ’… **Material Design 3** *(Material You)* - adheres to the latest design by Google - ๐ŸŽจ **Customizable** - with the [design tokens](./scss/tokens/sys/) you can make the framework truly yours - โšก **Cutting-Edge Technology** - uses the latest CSS features allowing for zero JavaScript - ๐ŸŽ **Lighweight** - minified version is lighter than the popular CSS frameworks - ๐ŸคŸ **No JavaScript** - framework doesn't rely on JavaScript - ๐Ÿ˜Ž **Clean HTML** - uses the *right* elements and supports accessibility features - ๐Ÿ”ง **Vanilla CSS** - compiled as "vanilla" CSS, written with SCSS superset (SASS) - ๐Ÿ“ฑ **Responsive** - works with any screen size and follows the adaptive design Quick start ----------- [](#quick-start) Several quick start options are available: - [Download the latest release](https://github.com/mdlightdev/material-design-light/releases/latest) - Clone the repository: `git clone https://github.com/mdlightdev/material-design-light.git` - Install with [npm](https://www.npmjs.com/package/material-design-light): `npm i material-design-light` - Install with [Composer](https://packagist.org/packages/mdlightdev/material-design-light): `composer require mdlightdev/material-design-light` - Install with [NuGet](https://www.nuget.org/packages/MaterialDesignLight/): `Install-Package MaterialDesignLight` What's included --------------- [](#whats-included) Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. ``` material-design-light/ โ””โ”€โ”€ css/ โ”œโ”€โ”€ material-design-light.css โ”œโ”€โ”€ material-design-light.css.map โ””โ”€โ”€ material-design-light.min.css ``` Material Design Light provides compiled CSS (`material-design-light.*`), as well as compiled and minified CSS (`material-design-light.min.*`). Source maps (`material-design-light.*.map`) are available for use with certain browsers' developer tools. Bugs and feature requests ------------------------- [](#bugs-and-feature-requests) Have a bug or a feature request? If your problem or idea is not addressed yet, [please open a new issue](https://github.com/mdlightdev/material-design-light/issues/new/choose). Contributing ------------ [](#contributing) Check out the [CONTRIBUTING.md](CONTRIBUTING.md) for more information. Clone and setup the repository: ``` git clone https://github.com/mdlightdev/material-design-light.git cd material-design-light npm install ``` Versioning ---------- [](#versioning) For transparency into the release cycle and in striving to maintain backward compatibility, Material Design Light is maintained under the [Semantic Versioning 2.0.0](https://semver.org/spec/v2.0.0.html) guidelines. See the [Releases](https://github.com/mdlightdev/material-design-light/releases) section of the GitHub project for changelogs for each release version of Material Design Light. Copyright and license --------------------- [](#copyright-and-license) Copyright ยฉ [Material Design Light](https://github.com/mdlightdev) 2022. All rights reserved. Material Design Light is licensed under the terms of the [Mozilla Public License Version 2.0](https://github.com/mdlightdev/material-design-light/blob/main/LICENSE) (MPL 2.0). All other trademarks and trade names referenced herein are the properties of their respective owners in Finland and other countries. ### Health Score 20 โ€” LowBetter than 14% of packages Maintenance13 Infrequent updates โ€” may be unmaintained Popularity11 Limited adoption so far Community11 Small or concentrated contributor base Maturity40 Maturing project, gaining track record Bus Factor1 Top contributor holds 72.7% of commits โ€” single point of failure How is this calculated?**Maintenance (25%)** โ€” Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** โ€” Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** โ€” Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** โ€” Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~10 days Total 3 Last Release 1413d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/9c46ab2e653a72c42f553136b060d158b23d5253e9f4f61276efa272a299d79b?d=identicon)[robinlahtinen](/maintainers/robinlahtinen) --- Top Contributors [![robinlahtinen](https://avatars.githubusercontent.com/u/1215882?v=4)](https://github.com/robinlahtinen "robinlahtinen (128 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (48 commits)") --- Tags csscss-frameworkmaterialmaterial-3material-designmaterial-design-3sassscsswebframeworkwebcsssassresponsivefront-endmaterial-designmobile-first ### Embed Badge ![Health badge](/badges/mdlightdev-material-design-light/health.svg) ``` [![Health](https://phpackages.com/badges/mdlightdev-material-design-light/health.svg)](https://phpackages.com/packages/mdlightdev-material-design-light) ``` ### Alternatives [twbs/bootstrap The most popular front-end framework for developing responsive, mobile first projects on the web. 174.1k17.6M327](/packages/twbs-bootstrap)[twitter/bootstrap The most popular front-end framework for developing responsive, mobile first projects on the web. 174.1k1.7M27](/packages/twitter-bootstrap)[coreui/coreui The most popular front-end framework for developing responsive, mobile-first projects on the web rewritten and maintain by the CoreUI Team 873111.6k4](/packages/coreui-coreui)[components/bootstrap The most popular front-end framework for developing responsive, mobile first projects on the web. 932.8M63](/packages/components-bootstrap)[foundation/foundation-sites The most advanced responsive front-end framework in the world. 29.8k8.4k](/packages/foundation-foundation-sites)[orange-opensource/orange-boosted-bootstrap Orange Boosted with Bootstrap is a Bootstrap based, Orange branded accessible and ergonomic components library. 2148.7k](/packages/orange-opensource-orange-boosted-bootstrap) PHPackages ยฉ 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)