https://github.com/jogemu/md3css

Pure CSS Material 3 Design with flexible icon placement.
https://github.com/jogemu/md3css

css css-baseline css-nesting css-variables material-design

Last synced: about 1 year ago
JSON representation

Pure CSS Material 3 Design with flexible icon placement.

• Host: GitHub
• URL: https://github.com/jogemu/md3css
• Owner: jogemu
• License: unlicense
• Created: 2024-06-08T00:02:35.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2025-02-07T01:11:35.000Z (about 1 year ago)
• Last Synced: 2025-02-07T02:22:15.928Z (about 1 year ago)
• Topics: css, css-baseline, css-nesting, css-variables, material-design
• Language: CSS
• Homepage:
• Size: 68.4 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# md3css

Pure CSS Material 3 Design with flexible icon placement. Leverages recent CSS features, including nesting to reduce redundancy, dynamic light-dark schemes with a wide color gamut and pseudo-classes that became part of Baseline as recently as May 2024. Change the hue of the color scheme, add a font or place an icon with just one CSS variable. Using inheritance, multiple elements can be influenced while combining stylesheets, classes and inline style.

![Demo](https://gist.githubusercontent.com/jogemu/f0c63ab30f60218b31efb578acf4c81d/raw/md3css.svg)

Common buttons are `` or `` within a ``. Use the respective button type in lower case as class and specify the optional leading icon by setting the CSS variable `--icon: url('/path/to/file.svg')` or `url('data:image/svg+xml;utf8,...')`. Since the image is used as a mask, the color of the image does not have to match the color scheme.

```html

  Text button

  Filled button

```

Inputs without a label are not styled, but an id is not necessary. Put the label text in a `` such that ``. The previously introduced variable describes the optional leading icon and `--icon2` the optional trailing icon. Several of these inputs can be grouped in a fieldset with the classes for `chips`, `segmented` buttons or `switches`. Inputs other than `radio`, `checkbox` or `button` are unexpected for these classes and might misbehave.

```html

Text field 

Slider

Chip 

```

In addition to cards, there are other HTML elements that, if best practices are followed, should already be designed correctly.

```html

  
Title

Lorem ipsum

  
Title

Subhead
OK


Title

Lorem ipsum
OK


Icon button
Top app bar




  
Label



```