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.

Common buttons are <button> or <a> within a <fieldset>. 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,<svg>...</svg>'). Since the image is used as a mask, the color of the image does not have to match the color scheme.

<fieldset>
  <button>Text button</button>
  <a class="filled" style="--icon: url('/path/to/file.svg');">Filled button</a>
</fieldset>

Inputs without a label are not styled, but an id is not necessary. Put the label text in a <span> such that <label><input/><span/></label>. 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.

<label><input/><span>Text field</span></label> <!-- or textarea or select -->
<label><input type="range"/><span>Slider</span></label>
<fieldset class="chips"><label><input type="checkbox"/><span>Chip</span></label></fieldset> <!-- or class="segmented" or class="switches" -->

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

<!-- Cards -->
<section class="cards">
  <article><h2>Title</h2><p>Lorem ipsum</p></article>
  <article><hgroup><h2>Title</h2><p>Subhead</p></hgroup><fieldset><button>OK</button></fieldset></article>
</section>

<!-- Dialogs -->
<dialog><h2>Title</h2><p>Lorem ipsum</p><fieldset><button>OK</button></fieldset></dialog>

<!-- Top app bars -->
<header><a style="--icon: url('/path/to/file.svg');">Icon button</a><h1>Top app bar</h1></header>

<!-- Navigation bar -->
<nav><ul>
  <li><a style="--icon: url('/path/to/file.svg');">Label</a></li></ul>
</nav>