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>

Or install it

npm install gmx.css
npm install iconify-icon

NPM License npm bundle size NPM Version
Still in development, some features may not work properly and still many breaking changes. Nothing is guaranteed.





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



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

Utilities

Colors:
.primary, .primary-container, .secondary, .secondary-container, .tertiary, .tertiary-container, .background, .surface, .inverse-surface, .surface-variant, .error, .error-container, .accent-gradient
Grid columns:
.s1....s12, .m1....m12, .l1....l12
For all the colums in grid:
.all-s1....all-s12, .all-m1....all-m12, .all-l1....all-l12
Margins:
.margin, .margin-none, .margin-auto, .margin-xs, .margin-s, .margin-l, .margin-xl, .margin-left, .margin-right, .margin-top, .margin-bottom, .margin-horiz, .margin-vert
Paddings:
.padding, .padding-none, .padding-auto, .padding-xs, .padding-s, .padding-l, .padding-xl, .padding-left, .padding-right, .padding-top, .padding-bottom, .padding-horiz, .padding-vert
Gaps:
.gap, .gap-none, .gap-auto, .gap-xs, .gap-s, .gap-l, .gap-xl
Border radius:
.round, .round-none, .round-auto, .round-xs, .round-s, .round-l, .round-xl
Elevates:
.elevate, .elevate-none, .elevate-auto, .elevate-s, .elevate-l, .elevate-xl
Display:
.block, .inline-block, .flex, .inline-flex
Flex utilities:
.flex-row, .flex-col, .flex-wrap, .flex-no-wrap, .flex-max/.all-max
Flex alignment:
.align-start, .align-end, .align-center, .align-baseline, .align-stretch, .justify-left, .justify-center, .justify-right, .justify-between, .justify-around
Text alignment:
.text-left, .text-center, .text-right
Overflow:
.overflow-auto, .overflow-hidden, .overflow-visible, .overflow-scroll
Width:
.width-min, .width-max, .width-fit, .width-full

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.

CSS-only Checkbox solution:


Permanently delete?

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



CSS-only Checkbox solution:



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

Header Header Header
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell
Footer Footer Footer

Tooltips

Extra JS