GMX.css

GMX.css implements the Material 3 design system in Vanilla CSS/JS, from the components to the animations to the theming.



Getting started
<link rel="stylesheet" href="https://unpkg.com/gmx.css">
<script src="https://unpkg.com/iconify-icon"></script>

v0.0.16


Select your favorite scheme 🎨




Color schemes
Primary
Primary Container
Secondary
Secondary Container
Tertiary
Tertiary Container
Background
Surface
Inverse Surface
Surface Variant
Error
Error Container




Button





Segmented button



FAB

Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Permanently delete?

Deleting the selected messages will also remove them from all synced devices.



List

  • This is a headline

    This is supporting text

  • This is a headline

    This is an example of supporting text for a list item component showcase.

Progress




Menu

  • Undo
  • Redo
  • Cut

Dropdown
  • Undo
  • Redo
  • Cut

Radio

Checkbox

Switch

Text field

Chip

Tabs