https://github.com/clshortfuse/materialdesignweb
Material Design for Web
https://github.com/clshortfuse/materialdesignweb
css design material
Last synced: 9 months ago
JSON representation
Material Design for Web
- Host: GitHub
- URL: https://github.com/clshortfuse/materialdesignweb
- Owner: clshortfuse
- License: isc
- Created: 2018-01-20T20:40:21.000Z (over 8 years ago)
- Default Branch: main
- Last Pushed: 2025-02-25T20:46:04.000Z (over 1 year ago)
- Last Synced: 2025-10-10T21:19:37.543Z (9 months ago)
- Topics: css, design, material
- Language: JavaScript
- Homepage: https://clshortfuse.github.io/materialdesignweb/
- Size: 20.6 MB
- Stars: 41
- Watchers: 1
- Forks: 6
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# materialdesignweb
Material Design for Web
*A standards-focused, zero-dependency implemention of Material Design 3 (Material You).*
   
# Demo
https://clshortfuse.github.io/materialdesignweb/
# Getting started
## Pre-bundled
````html
Hello World!
````
Includes all components and theming over URL params.
## Development
### Static Theme Generation:
> `npx -p @shortfuse/materialdesignweb mdw-css --color=color=6750A4 --custom=yellow,orange:orange,green:0f0,alias:aqua --lightness=auto > theme.css`
### Dynamic Theme Generation:
See [loader.js](./theming/loader.js) for an example.
### Component Loading
````js
import { Button } from '@shortfuse/materialdesignweb';
// OR
import Button from '@shortfuse/materialdesignweb/components/Button.js';
// OR
import Button from 'https://www.unpkg.com/@shortfuse/materialdesignweb/components/Button.js';
// OR
import { Button } from 'https://cdn.jsdelivr.net/npm/@shortfuse/materialdesignweb?color=6750A4';
const button = new Button();
button.textContent = 'Hello World!';
document.body.append(button);
````
# Support
Compatibility is kept for as long possible by including browser-version-based patches. Ultimately, compatiblity may be dropped as new features get added. Bugs present in supported browsers should always be fixed.
| Feature | Chrome | Edge | Firefox | Safari |
| ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| [ShadowRoot](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot) | 53 | 79 | 63 | 10 |
| [WeakRef](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakRef) | 84 | 84 | 79 | 14.1 |
| [:where()](https://developer.mozilla.org/en-US/docs/Web/CSS/:where) | 88 | 88 | 78 | 14 |
| | | | | |
| [Array.at](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/at)† | 92 | 92 | 90 | 15.4 |
| [replaceChildren](https://developer.mozilla.org/en-US/docs/Web/API/Element/replaceChildren)† | 84 | 86 | 79 | 14.1 |
| [ElementInternals](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals)† | 77 | 79 | 93 | 16.4 |
| [delegatesFocus](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus)† | 53 | 79 | 94 | 15 |
| [AdoptedStyleSheets](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/adoptedStyleSheets)* | 73 | 79 | 101 | 16.4 |
| [CSS container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries)* | 106 | 106 | 110 | 16.0 |
| |
| Compatibility | 88 | 88 | 78 | 16.4 |
| Support | [Latest ChromeOS LTS Release](https://chromeos.dev/en/education/chromeos-lts) | [Microsoft Edge Extended Stable Channel](https://learn.microsoft.com/en-us/DeployEdge/microsoft-edge-channels#extended-stable-channel) | ESR 115 | Last 2 Versions |
| Status | [](https://github.com/clshortfuse/materialdesignweb/actions/workflows/test-chromium.yml) | [](https://github.com/clshortfuse/materialdesignweb/actions/workflows/test-chromium.yml) | [](https://github.com/clshortfuse/materialdesignweb/actions/workflows/test-firefox.yml) | [](https://github.com/clshortfuse/materialdesignweb/actions/workflows/test-webkit.yml) |
*Optional
†Can be polyfilled
Notes:
* Compatibility may be extended via polyfills (not included)
# Components
| Component | Features | Status | Size |
| :----------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| [Badge](components/Badge.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") | [:heavy_check_mark:](# "Ready") |  |
| [Bottom App Bar](components/BottomAppBar.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Toolbar") | [:heavy_check_mark:](# "Ready") |  |
| Bottom Sheet | | [:memo:](# "Planned") | |
| [Button](components/Button.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Button") | [:heavy_check_mark:](# "Ready") |  |
| [Card](components/Card.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:arrow_up_down:](# "Flexable") [:wheelchair:](# "ARIA Figure") | [:heavy_check_mark:](# "Ready") |  |
| [Fab](components/Fab.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Button") | [:heavy_check_mark:](# "Ready") |  |
| [Fab - Extended](components/ExtendedFab.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Button") | [:heavy_check_mark:](# "Ready") |  |
| [Icon Button](components/IconButton.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Button \| Checkbox") | [:heavy_check_mark:](# "Ready") |  |
| [Segmented Button](components/SegmentedButton.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Option") | [:heavy_check_mark:](# "Ready") |  |
| [Segmented Button Group](components/SegmentedButtonGroup.js) | [:crayon:](# "Ink") [:wheelchair:](# "ARIA Listbox") | [:heavy_check_mark:](# "Ready") |  |
| [Checkbox](components/Checkbox.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Checkbox") | [:heavy_check_mark:](# "Ready") |   |
| [Chip](components/Chip.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Button") | [:heavy_check_mark:](# "Ready") |  |
| [Chip - Filter](components/FilterChip.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Checkbox \| Radio") | [:heavy_check_mark:](# "Ready") |  |
| Chip: Filter Dropdown | | [:construction:](# "Under Construction") | |
| Chip: Input | | [:construction:](# "Under Construction") | |
| Date Picker | | [:grey_question:](# "Unknown") | |
| [Dialog](components/Dialog.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Dialog") | [:heavy_check_mark:](# "Ready") |  |
| Dialog: Full-screen | | [:grey_question:](# "Unknown") | |
| [Divider](components/Divider.js) | [:crayon:](# "Ink") | [:heavy_check_mark:](# "Ready") |  |
| [Icon](components/Icon.js) | [:crayon:](# "Ink") | [:heavy_check_mark:](# "Ready") |  |
| [List](components/List.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA List") | [:heavy_check_mark:](# "Ready") |   |
| [Listbox](components/Listbox.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Option") | [:heavy_check_mark:](# "Ready") |   |
| [Menu](components/Menu.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Menu") | [:heavy_check_mark:](# "Ready") |   |
| [Navigation Bar](components/NavBar.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Nav") | [:heavy_check_mark:](# "Ready") |   |
| [Navigation Drawer](components/NavDrawer.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Nav") | [:construction:](# "Under Construction") |   |
| [Navigation Rail](components/NavDrawer.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Nav") | [:heavy_check_mark:](# "Ready") |   |
| [Progress Indicators](components/Progress.js) | [:crayon:](# "Ink") [:wheelchair:](# "ARIA Progress") | [:heavy_check_mark:](# "Ready") |  |
| [Search](components/Search.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Toolbar") | [:construction:](# "Under Construction") |  |
| [Radio](components/Radio.js) | [:crayon:](# "Ink") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Radio") | [:heavy_check_mark:](# "Ready") |   |
| [Side Sheet](components/SideSheet.js) | | [:construction:](# "Under Construction") | |
| [Slider](components/Slider.js) | [:crayon:](# "Ink") [:wheelchair:](# "ARIA Slider") | [:warning:](# "Issues") |  |
| [Snackbar](components/Snackbar.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Status") | [:heavy_check_mark:](# "Ready") |  |
| [Switch](components/Switch.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:a:](# "Font") [:wheelchair:](# "ARIA Switch") | [:heavy_check_mark:](# "Ready") |   |
| [Tab](components/Tab.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Tab List \| Tab \| Tab Panel") | [:heavy_check_mark:](# "Ready") |     |
| [Text Input](components/Input.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Textbox") | [:heavy_check_mark:](# "Ready") |  |
| [Text Area](components/TextArea.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Textarea") | [:heavy_check_mark:](# "Ready") |  |
| [Text Select](components/Select.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Combobox") | [:heavy_check_mark:](# "Ready") |  |
| Time Picker | | [:grey_question:](# "Unknown") | |
| [Tooltip](components/Tooltip.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Tooltip") | [:heavy_check_mark:](# "Ready") |  |
| [Top App Bar](components/TopAppBar.js) | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:wheelchair:](# "ARIA") | [:heavy_check_mark:](# "Ready") |  |
# Additional
| Component | Description | Status | Size |
| :--------------------------------- | :---------------------------------------------------- | :--------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------------------------: |
| [Box](components/Box.js) | Simple themeable component with Flex and Grid options | [:heavy_check_mark:](# "Ready") |  |
| [Layout](components/Layout.js) | Manages page nav, and pane layouts | [:construction:](# "Under Construction") |  |
| [Icon](components/Icon.js) | Font-icon, SVG, and IMG support | [:construction:](# "Under Construction") |  |
| [Body](components/Body.js) | Box with Body typography | [:heavy_check_mark:](# "Ready") |  |
| [Label](components/Label.js) | Box with Label typography | [:heavy_check_mark:](# "Ready") |  |
| [Headline](components/Headline.js) | Box with Headline typography | [:heavy_check_mark:](# "Ready") |  |
| [Title](components/Title.js) | Box with Title typography | [:heavy_check_mark:](# "Ready") |  |
| [Ripple](components/Ripple.js) | Ripple effect | [:heavy_check_mark:](# "Ready") |  |
| [Shape](components/Shape.js) | Themeable, flexable, shapeable element | [:heavy_check_mark:](# "Ready") |  |
| [Surface](components/Surface.js) | Themeable, flexable, shapeable, elevateable element | [:heavy_check_mark:](# "Ready") |  |
# Mixins
| Mixin | Description | Status | Size |
| :---------------------------------------------- | :----------------------------------------------- | :--------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| [AriaReflector](mixins/AriaReflectorMixin.js) | Reflects ARIA Properties | [:heavy_check_mark:](# "Ready") |  |
| [AriaToolbar](mixins/AriaToolbarMixin.js) | Shared ARIA Toolbar functionality | [:heavy_check_mark:](# "Ready") |  |
| [Control](mixins/ControlMixin.js) | HTML Control wrapper | [:heavy_check_mark:](# "Ready") |  |
| [Density](mixins/DensityMixin.js) | Component density options | [:heavy_check_mark:](# "Ready") |  |
| [Flexable](mixins/FlexableMixin.js) | Add flexbox options as attributes | [:heavy_check_mark:](# "Ready") |  |
| [FormAssociated](mixins/FormAssociatedMixin.js) | Form-associated custom element support | [:heavy_check_mark:](# "Ready") |  |
| [Input](mixins/InputMixin.js) | HTMLInputElement wrapper | [:heavy_check_mark:](# "Ready") |  |
| [KeyboardNav](mixins/KeyboardNavMixin.js) | Adds arrow key navigation and roving tab index | [:warning:](# "Issues") |  |
| [ResizeObserver](mixins/ResizeObserverMixin.js) | Shared Eelement resize observer | [:heavy_check_mark:](# "Ready") |  |
| [Ripple](mixins/RippleMixin.js) | Replaces pressed state with ripple effect | [:heavy_check_mark:](# "Ready") |  |
| [RTLObserver](mixins/RTLObserverMixin.js) | Shared RTL paoge observer | [:heavy_check_mark:](# "Ready") |  |
| [ScrollListener](mixins/ScrollListenerMixin.js) | Listen for horizontal and vertical scroll events | [:heavy_check_mark:](# "Ready") |  |
| [Shape](mixins/ShapeMixin.js) | Adds shape and outline layer to elements | [:warning:](# "Issues") |  |
| [Surface](mixins/SurfaceMixin.js) | Adds shadows to elements | [:warning:](# "Issues") |  |
| [TextField](mixins/TextFieldMixin.js) | Shared text field functionality | [:heavy_check_mark:](# "Ready") |  |
| [TooltipTrigger](mixins/TooltipTriggerMixin.js) | Triggers tooltips based on events | [:construction:](# "Under Construction") |  |
| [TouchTarget](mixins/TouchTargetMixin.js) | Adds extended touch target to controls | [:construction:](# "Under Construction") |  |
# Core
| File | Description | Status | Size |
| :---------------------------------------- | :------------------------------------------------------------------------- | :--------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| [Composition](core/Composition.js) | Composes templates based on styles, fragments, and watches. Renders data | [:construction:](# "Under Construction") |  |
| [CustomElement](core/CustomElement.js) | Handles ShadowDOM, ElementInternals, Property attributes, and compositions | [:construction:](# "Under Construction") |  |
| [CompositionAdapter](core/Composition.js) | Handles data array to elements binding | [:construction:](# "Under Construction") |  |
| [jsonMergePatch](core/jsonMergePatch.js) | Applies, constructors, and evaluates JSON Merge Patch | [:construction:](# "Under Construction") |  |
| [css](core/css.js) | CSS, CSSStyleSheet, HTMLStyleElement functions | [:heavy_check_mark:](# "Ready") |  |
| [customTypes](core/customTypes.js) | Non-primitive observable types | [:construction:](# "Under Construction") |  |
| [optimizations](core/optimizations.js) | Micro-optimizations functions | [:construction:](# "Under Construction") |  |
| [dom](core/dom.js) | DOM functions | [:warning:](# "Issues") |  |
| [observe](core/observe.js) | Observable pattern for primitives and objects | [:construction:](# "Under Construction") |  |
| [template](core/template.js) | Template literals for CSS (CSSStyleSheet) and HTML (DocumentFragment) | [:heavy_check_mark:](# "Ready") |  |
| [uid](core/uid.js) | Generates a UID string | [:heavy_check_mark:](# "Ready") |  |
# Other Components
These components do not have official M3 guidelines
| Component | Status |
| :----------- | :--------------------------------------: |
| ~~Backdrop~~ | [:skull:](# "Not planned") |
| Banner | [:construction:](# "Under Construction") |
| Data Table | [:memo:](# "Planned") |
| Image List | [:grey_question:](# "Unknown") |
# Legend
* [:paintbrush:](# "Background") - Background Theming
* [:crayon:](# "Ink") - Ink (Foreground) Theming
* [:o:](# "Outline") - Outline
* [:a:](# "Font") - Font Theming
* [:large_blue_diamond:](# "Shape") - Shape Size Theming
* [:signal_strength:](# "Density") - Density
* [:arrow_up_down:](# "Flexable") - Flexable layout
* [:wheelchair:](# "ARIA") - ARIA Role
* [:heavy_check_mark:](# "Ready") - Ready
* [:warning:](# "Issues") - Issues
* [:construction:](# "Under Construction") - Under Construction
* [:memo:](# "Planned") - Planned
* [:grey_question:](# "Unknown") - Unknown
* [:skull:](# "Not planned") - Not planned
# Archive
The Material Design 1/2 version has been archived in the [`archive-md2`](https://github.com/clshortfuse/materialdesignweb/tree/archive-md2) branch.