Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/finnhvman/matter
Material Design Components in Pure CSS. Materializing HTML at just one class per component 🍰
https://github.com/finnhvman/matter
css design-system google-design library material material-components material-design
Last synced: 6 days ago
JSON representation
Material Design Components in Pure CSS. Materializing HTML at just one class per component 🍰
- Host: GitHub
- URL: https://github.com/finnhvman/matter
- Owner: finnhvman
- License: mit
- Created: 2018-12-31T16:38:39.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T15:00:30.000Z (about 2 years ago)
- Last Synced: 2024-10-29T22:31:05.839Z (2 months ago)
- Topics: css, design-system, google-design, library, material, material-components, material-design
- Language: JavaScript
- Homepage:
- Size: 501 KB
- Stars: 1,130
- Watchers: 29
- Forks: 85
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-material-design - Matter - Pure CSS material components using modern css practices (CSS and JS / Frameworks CSS JS)
- jimsghstars - finnhvman/matter - Material Design Components in Pure CSS. Materializing HTML at just one class per component 🍰 (JavaScript)
README
Matter
Material Design Components in Pure CSS
Materializing HTML at just one class per component (ex-Pure CSS Material Components)
## 🎬 Get Started
1. Get Matter in one of the following ways:
**Normal build** from CDN (include this in ``):
```html
```
**Minified build** from CDN (include this in ``):
```html
```
**Download a build** from the assets of a release in [Releases](https://github.com/finnhvman/matter/releases), and include it in your project
2. Use the Markup and apply the Class of your choice:
### Buttons
```html
BUTTON
CONTAINED
OUTLINED
TEXT
UNELEVATED
```
### Colors
```html
BUTTON
I am a paragraph
```
### Links
```html
Link
```
### Progress Indicators
```html
```
### Selection Controls
```html
Checkbox
Radio
Switch
```
### Textfields
```html
Textfield
Textfield
```
### Tooltips
```html
Tooltip
Tooltip
Outlined Textfield with Tooltip
```
### Typography
```html
Your paragraph here
```
---
Use standard HTML attributes like `autofocus`, `disabled`, `required`, etc. where applicable to further configure components.
Click the link of a component in the next section to find more examples of its usage in the `.spec.html` file!
## 📦 Components & Utilities
**Implemented/Planned:**
* [x] Buttons
* [x] [Contained](./src/components/buttons/contained)
* [x] [Outlined](./src/components/buttons/outlined)
* [x] [Text](./src/components/buttons/text)
* [x] [Unelevated](./src/components/buttons/unelevated)
* [x] [Colors](./src/utilities/colors)
* [x] [Links](./src/components/links)
* [x] Progress Indicators
* [x] [Circular](./src/components/progress/circular)
* [x] [Linear](./src/components/progress/linear)
* [x] Selection Controls
* [x] [Checkbox](./src/components/selection/checkbox)
* [x] [Radio](./src/components/selection/radio)
* [x] [Switch](./src/components/selection/switch)
* [ ] Slider
* [x] Textfields
* [x] [Filled](./src/components/textfields/filled)
* [x] [Outlined](./src/components/textfields/outlined)
* [x] [Standard](./src/components/textfields/standard)
* [x] [Tooltip](./src/components/tooltips)
* [x] [Typography](./src/utilities/typography)
## 🌐 Browser Support
Targeted Browsers: Chrome, Firefox, Safari
Supported Browsers: Edge, Samsung Internet
Automated tests are executed in targeted browsers and manual testing is performed in supported browsers.
Matter 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.
## 👋 Who Is This For?
**People** who work on:
* Simple projects
* Internal facing tools
* Framework-less apps
* Javascript-less apps
* Proof of Concept and demo projects
**Newcomers** to web development who want to build nice UIs quick and easy.
This is **not** for complex apps and SPAs. Rather use the following libraries in case of larger projects:
* [Material-UI (React)](https://github.com/mui-org/material-ui)
* [Vuetify](https://github.com/vuetifyjs/vuetify)
* [Material Design for Angular](https://github.com/angular/material2)
* [Material Components Web](https://github.com/material-components/material-components-web)
## 🤔 Philosophy
The purpose of Matter is to provide the most easy-to-use but accurate implementation of [Material Design Components](https://material.io/design/guidelines-overview/).
Matter 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.
Matter 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.
💎 Matter is solid. All the components are tested thoroughly to ensure rock-solid quality across all targeted browsers.
💧 Matter is liquid. Components can be resized fluidly to match layout needs, otherwise they take up the size necessary.
🎈 Matter is gas. It's highly compressible so delivery can be performed in compact formats like gzip or brotli.
⚡️ Matter is plasma. It's just CSS relying almost exclusively on class selectors making it lightning fast.
## 💬 Contact
If you have questions, feedback or anything to share you can get in touch via:
* Twitter [@finnhvman](https://twitter.com/finnhvman)
* Spectrum [@finnhvman](https://spectrum.chat/users/finnhvman)
* or [submit an issue](https://github.com/finnhvman/matter/issues)
## 🙏 Special Thanks To
* [Scott O'Hara](https://twitter.com/scottohara) (accessibility)