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.18
Still in development, some features may not work properly and still many breaking changes. #1


Select your favorite scheme 🎨
<link rel="stylesheet" href="https://unpkg.com/gmx.css/theme.css">



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


Blockquote & Pre

First line.
Second line.
Third line. 

First line
Second line
Third line

Typography

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi posuere viverra diam, vel egestas sapien tincidunt vel. Fusce a erat augue. Fusce vel lorem vestibulum, luctus nisi at, lobortis est.

Tables