{"id":13397850,"url":"https://github.com/finnhvman/matter","last_synced_at":"2025-05-16T18:10:27.047Z","repository":{"id":34028123,"uuid":"163683630","full_name":"finnhvman/matter","owner":"finnhvman","description":"Material Design Components in Pure CSS. Materializing HTML at just one class per component 🍰","archived":false,"fork":false,"pushed_at":"2022-12-06T15:00:30.000Z","size":513,"stargazers_count":1128,"open_issues_count":30,"forks_count":83,"subscribers_count":29,"default_branch":"master","last_synced_at":"2025-05-08T18:06:16.884Z","etag":null,"topics":["css","design-system","google-design","library","material","material-components","material-design"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/finnhvman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"open_collective":"matter","custom":["paypal.me/finnhvman","https://www.buymeacoffee.com/finnhvman"]}},"created_at":"2018-12-31T16:38:39.000Z","updated_at":"2025-04-12T15:26:14.000Z","dependencies_parsed_at":"2023-01-15T04:03:55.015Z","dependency_job_id":null,"html_url":"https://github.com/finnhvman/matter","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/finnhvman%2Fmatter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/finnhvman%2Fmatter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/finnhvman%2Fmatter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/finnhvman%2Fmatter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/finnhvman","download_url":"https://codeload.github.com/finnhvman/matter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254582907,"owners_count":22095518,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","design-system","google-design","library","material","material-components","material-design"],"created_at":"2024-07-30T18:01:48.791Z","updated_at":"2025-05-16T18:10:27.024Z","avatar_url":"https://github.com/finnhvman.png","language":"JavaScript","funding_links":["https://opencollective.com/matter","paypal.me/finnhvman","https://www.buymeacoffee.com/finnhvman"],"categories":["JavaScript","CSS and JS"],"sub_categories":["Frameworks CSS JS"],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./docs/m.svg\" alt=\"Matter M logo\" width=\"90\" height=\"90\"\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eMatter\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003eMaterial Design Components in Pure CSS\u003c/p\u003e\n\n\u003cp align=\"center\"\u003eMaterializing HTML at just one class per component (\u003ca href=\"https://codepen.io/finnhvman/full/zMKagM\"\u003eex-Pure CSS Material Components\u003c/a\u003e)\u003c/p\u003e\n\n![13 Matter Components](./docs/hero.png)\n\n## 🎬 Get Started\n\n1. Get Matter in one of the following ways:\u003cbr/\u003e\u003cbr/\u003e\n    **Normal build** from CDN (include this in `\u003chead\u003e`):\n    ```html\n    \u003clink href=\"https://res.cloudinary.com/finnhvman/raw/upload/matter/matter-0.2.2.css\" rel=\"stylesheet\"\u003e\n    ```\n    **Minified build** from CDN (include this in `\u003chead\u003e`):\n    ```html\n    \u003clink href=\"https://res.cloudinary.com/finnhvman/raw/upload/matter/matter-0.2.2.min.css\" rel=\"stylesheet\"\u003e\n    ```\n    **Download a build** from the assets of a release in [Releases](https://github.com/finnhvman/matter/releases), and include it in your project\n\n2. Use the Markup and apply the Class of your choice:\n\n### Buttons\n```html\n\u003c!-- Button Markup; Classes: matter-button-contained, matter-button-outlined, matter-button-text, --\u003e\n\u003c!-- matter-button-unelevated --\u003e\n\u003cbutton class=\"matter-button-contained\"\u003eBUTTON\u003c/button\u003e\n\n\u003c!-- Button Examples: Contained, Outlined, Text and Unelevated Buttons --\u003e\n\u003cbutton class=\"matter-button-contained\"\u003eCONTAINED\u003c/button\u003e\n\n\u003cbutton class=\"matter-button-outlined\"\u003eOUTLINED\u003c/button\u003e\n\n\u003cbutton class=\"matter-button-text\"\u003eTEXT\u003c/button\u003e\n\n\u003cbutton class=\"matter-button-unelevated\"\u003eUNELEVATED\u003c/button\u003e\n\n```\n\n### Colors\n```html\n\u003c!-- Change the color of components --\u003e\n\u003c!-- Classes: matter-primary, matter-secondary, matter-error, matter-warning, matter-success --\u003e\n\u003cbutton class=\"matter-button-contained matter-secondary\"\u003eBUTTON\u003c/button\u003e\n\n\u003c!-- Change the color of text; Classes: matter-primary-text, matter-secondary-text, --\u003e\n\u003c!-- matter-error-text, matter-warning-text, matter-success-text --\u003e\n\u003cp class=\"matter-secondary-text\"\u003eI am a paragraph\u003c/p\u003e\n```\n\n### Links\n```html\n\u003c!-- Link Markup (does not override font properties); Class: matter-link --\u003e\n\u003ca class=\"matter-link\" href=\"https://github.com/finnhvman/matter\"\u003eLink\u003c/a\u003e\n```\n\n### Progress Indicators\n```html\n\u003c!-- Progress Markup (indeterminate); Classes: matter-progress-linear, matter-progress-circular --\u003e\n\u003cprogress class=\"matter-progress-linear\"\u003e\u003c/progress\u003e\n\n\u003c!-- Progress Markup (determinate); Class: matter-progress-linear --\u003e\n\u003cprogress class=\"matter-progress-linear\" value=\"50\" max=\"100\"\u003e\u003c/progress\u003e\n```\n\n### Selection Controls\n```html\n\u003c!-- Checkbox Markup; Class: matter-checkbox --\u003e\n\u003clabel class=\"matter-checkbox\"\u003e\n    \u003cinput type=\"checkbox\"\u003e\n    \u003cspan\u003eCheckbox\u003c/span\u003e\n\u003c/label\u003e\n\n\u003c!-- Radio Markup; Class: matter-radio --\u003e\n\u003clabel class=\"matter-radio\"\u003e\n    \u003cinput type=\"radio\" name=\"group\"\u003e\n    \u003cspan\u003eRadio\u003c/span\u003e\n\u003c/label\u003e\n\n\u003c!-- Switch Markup; Class: matter-switch --\u003e\n\u003clabel class=\"matter-switch\"\u003e\n    \u003cinput type=\"checkbox\" role=\"switch\"\u003e\n    \u003cspan\u003eSwitch\u003c/span\u003e\n\u003c/label\u003e\n```\n\n### Textfields\n```html\n\u003c!-- Textfield Markup with \u003cinput\u003e (Keep the placeholder attribute as it is!); --\u003e\n\u003c!-- Classes: matter-textfield-filled, matter-textfield-outlined, matter-textfield-standard --\u003e\n\u003clabel class=\"matter-textfield-filled\"\u003e\n    \u003cinput placeholder=\" \"/\u003e\n    \u003cspan\u003eTextfield\u003c/span\u003e\n\u003c/label\u003e\n\n\u003c!-- Textfield Markup with \u003ctextarea\u003e (Keep the placeholder attribute as it is!); --\u003e\n\u003c!-- Classes: matter-textfield-filled, matter-textfield-outlined, matter-textfield-standard --\u003e\n\u003clabel class=\"matter-textfield-filled\"\u003e\n    \u003ctextarea placeholder=\" \"\u003e\u003c/textarea\u003e\n    \u003cspan\u003eTextfield\u003c/span\u003e\n\u003c/label\u003e\n```\n\n### Tooltips\n```html\n\u003c!-- Tooltip Markup; Classes: matter-tooltip, matter-tooltip-top --\u003e\n\u003cspan class=\"matter-tooltip\"\u003e\u003cspan id=\"tooltip-id\" aria-hidden=\"true\"\u003eTooltip\u003c/span\u003e\u003c/span\u003e\n\n\u003c!-- Put as first child of originating component --\u003e\n\u003c!-- Use unique id on inner span of tooltip, refer it with aria-describedby in originating component --\u003e\n\u003clabel class=\"matter-textfield-outlined\"\u003e\n    \u003cspan class=\"matter-tooltip\"\u003e\u003cspan id=\"tooltip\" aria-hidden=\"true\"\u003eTooltip\u003c/span\u003e\u003c/span\u003e\n    \u003cinput placeholder=\" \" aria-describedby=\"tooltip\"/\u003e\n    \u003cspan\u003eOutlined Textfield with Tooltip\u003c/span\u003e\n\u003c/label\u003e\n```\n\n### Typography\n```html\n\u003c!-- Typography Classes: matter-h1, ..., matter-h6, matter-subtitle1, matter-subtitle2, --\u003e\n\u003c!-- matter-body1, matter-body2, matter-button, matter-caption, matter-overline --\u003e\n\u003cp class=\"matter-body1\"\u003eYour paragraph here\u003c/p\u003e\n```\n\n---\n\nUse standard HTML attributes like `autofocus`, `disabled`, `required`, etc. where applicable to further configure components.\n\nClick the link of a component in the next section to find more examples of its usage in the `.spec.html` file!\n\n## 📦 Components \u0026 Utilities\n\n**Implemented/Planned:**\n* [x] Buttons\n  * [x] [Contained](./src/components/buttons/contained)\n  * [x] [Outlined](./src/components/buttons/outlined)\n  * [x] [Text](./src/components/buttons/text)\n  * [x] [Unelevated](./src/components/buttons/unelevated)\n* [x] [Colors](./src/utilities/colors)\n* [x] [Links](./src/components/links)\n* [x] Progress Indicators\n  * [x] [Circular](./src/components/progress/circular)\n  * [x] [Linear](./src/components/progress/linear)\n* [x] Selection Controls\n  * [x] [Checkbox](./src/components/selection/checkbox)\n  * [x] [Radio](./src/components/selection/radio)\n  * [x] [Switch](./src/components/selection/switch)\n* [ ] Slider\n* [x] Textfields\n  * [x] [Filled](./src/components/textfields/filled)\n  * [x] [Outlined](./src/components/textfields/outlined)\n  * [x] [Standard](./src/components/textfields/standard)\n* [x] [Tooltip](./src/components/tooltips)\n* [x] [Typography](./src/utilities/typography)\n\n## 🌐 Browser Support\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./docs/browsers.png\" alt=\"Chrome, Firefox, Safari, Edge, Samsung Internet\" width=\"520\"\u003e\u003cbr/\u003e\n  \u003cb\u003eTargeted Browsers\u003c/b\u003e: Chrome, Firefox, Safari\u003cbr/\u003e\n  \u003cb\u003eSupported Browsers\u003c/b\u003e: Edge, Samsung Internet\n\u003c/p\u003e\n\nAutomated tests are executed in targeted browsers and manual testing is performed in supported browsers.\n\nMatter components are well-covered with **Visual Feature Tests** (**VFTs**). Visual Feature Tests verify certain visual parts of components like: dominant color, shape of corners (rounded/sharp), types of edges (outlined or not), shadows, and more. VFTs are executed for every component in various states (like hover, focus, active, etc. and their permutations) in targeted browsers. VFTs reside in the `.spec.js` files of the components.\n\n## 👋 Who Is This For?\n\n**People** who work on:\n\n* Simple projects\n* Internal facing tools\n* Framework-less apps\n* Javascript-less apps\n* Proof of Concept and demo projects\n\n**Newcomers** to web development who want to build nice UIs quick and easy. \n\nThis is **not** for complex apps and SPAs. Rather use the following libraries in case of larger projects: \n* [Material-UI (React)](https://github.com/mui-org/material-ui)\n* [Vuetify](https://github.com/vuetifyjs/vuetify)\n* [Material Design for Angular](https://github.com/angular/material2)\n* [Material Components Web](https://github.com/material-components/material-components-web)\n\n## 🤔 Philosophy\n\nThe purpose of Matter is to provide the most easy-to-use but accurate implementation of [Material Design Components](https://material.io/design/guidelines-overview/).  \n\nMatter has probably the lowest entry-barrier among Material Design Component libraries. The only technical knowledge needed to use it is basic HTML5. It doesn't rely on JavaScript, it only needs one to three HTML elements and a CSS class per component to work. The markup of the components is semantic by design.\n\nMatter is built with theming in mind. Its components can be customized by specifying certain colors and/or fonts. The granularity of customization is variable: components can be themed on global level, component level, component instance level, or on any level between.\n\n💎 Matter is solid. All the components are tested thoroughly to ensure rock-solid quality across all targeted browsers.\n\n💧 Matter is liquid. Components can be resized fluidly to match layout needs, otherwise they take up the size necessary.\n\n🎈 Matter is gas. It's highly compressible so delivery can be performed in compact formats like gzip or brotli.\n  \n⚡️ Matter is plasma. It's just CSS relying almost exclusively on class selectors making it lightning fast.\n\n## 💬 Contact\n\nIf you have questions, feedback or anything to share you can get in touch via:\n* Twitter [@finnhvman](https://twitter.com/finnhvman)\n* Spectrum [@finnhvman](https://spectrum.chat/users/finnhvman)\n* or [submit an issue](https://github.com/finnhvman/matter/issues)\n\n## 🙏 Special Thanks To\n\n* [Scott O'Hara](https://twitter.com/scottohara) (accessibility)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffinnhvman%2Fmatter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffinnhvman%2Fmatter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffinnhvman%2Fmatter/lists"}