GMX.css
NPM Version minzip size
✨ Biggest update yet! Material 3 Expressive + New code construction + Built-in JS file

Install in HTML

<link rel="stylesheet" href="https://unpkg.com/gmx.css">
<script type="module" src="https://unpkg.com/gmx.css/dist/gmx.min.js"></script>*
<script type="module" src="https://unpkg.com/iconify-icon"></script>

Button

Segmented button

Split button

FAB

Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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.

Menu

  • Undo
  • Redo
  • Cut
Dropdown
  • Undo
  • Redo
  • Cut

God save us, everyone Will we burn inside the fires of a thousand suns? For the sins of our hand, sins of our tongue The sins of our father, the sins of our young

God save us, everyone Will we burn inside the fires of a thousand suns? For the sins of our hand, sins of our tongue The sins of our father, the sins of our young

The Requiem

God save us, everyone Will we burn inside the fires of a thousand suns? For the sins of our hand, sins of our tongue The sins of our father, the sins of our young
The Requiem

God save us, everyone Will we burn inside the fires of a thousand suns? For the sins of our hand, sins of our tongue The sins of our father, the sins of our young

Snackbar

Checkbox

Chip

Progress




Radio

Switch

Text field

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

*JS file is optional, except you needed a component that -labeled.

Theme
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
Break-line:
.br, .br-l, .br-xl
Border radius:
.round, .round-none, .round-auto, .round-xs, .round-s, .round-l, .round-xl
Box shadows/Elevates:
.shadow, .shadow-none, .shadow-auto, .shadow-s, .shadow-l, .shadow-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