Utility Classes
210+ CSS shortcuts and utility classes
Demo
API
Categories: Display Flexbox Float Spacing Position Font Text Border Background Other
Display
| Name | Description | ||||||
|---|---|---|---|---|---|---|---|
grid |
Shortcut for display: grid | ||||||
inline-grid |
Shortcut for display: inline-grid | ||||||
flex |
Shortcut for display: flex | ||||||
inline-flex |
Shortcut for display: inline-flex | ||||||
block |
Shortcut for display: block | ||||||
inline-block |
Shortcut for display: inline-block | ||||||
inline |
Shortcut for display: inline | ||||||
hidden |
Shortcut for display: none | ||||||
Flexbox
| Name | Description | ||||||
|---|---|---|---|---|---|---|---|
flx-grow-0 |
Shortcut for flex-grow: 0 | ||||||
flx-grow-1 |
Shortcut for flex-grow: 1 | ||||||
flx-shrink-0 |
Shortcut for flex-shrink: 0 | ||||||
flx-shrink-1 |
Shortcut for flex-shrink: 1 | ||||||
flx-wrap |
Shortcut for flex-wrap: wrap | ||||||
flx-col |
Shortcut for flex-direction: column | ||||||
flx-row |
Shortcut for flex-direction: row | ||||||
flx-basis-content |
Shortcut for flex-basic: content | ||||||
justify-content-start |
Shortcut for justify-content: flex-start | ||||||
justify-content-center |
Shortcut for justify-content: center | ||||||
justify-content-between |
Shortcut for justify-content: between | ||||||
justify-content-evenly |
Shortcut for justify-content: evenly | ||||||
justify-content-around |
Shortcut for justify-content: around | ||||||
justify-content-end |
Shortcut for justify-content: flex-end | ||||||
align-items-center |
Shortcut for align-items: center | ||||||
align-items-start |
Shortcut for align-items: flex-start | ||||||
align-items-end |
Shortcut for align-items: flex-end | ||||||
align-self-stretch |
Shortcut for align-self: stretch | ||||||
align-self-center |
Shortcut for align-self: center | ||||||
align-self-start |
Shortcut for align-self: flex-start | ||||||
align-self-end |
Shortcut for align-self: flex-end | ||||||
Float
| Name | Description | ||||||
|---|---|---|---|---|---|---|---|
left |
Shortcut for float: left | ||||||
right |
Shortcut for float: right | ||||||
clear |
Shortcut for clear: both | ||||||
Spacing
| Name | Description | |||||||
|---|---|---|---|---|---|---|---|---|
pad-[all|t|r|b|l]-[xs|sm|md|lg|xl|none] |
Sets padding on the specified sides (all, top, right, bottom, or left) in the specified size. Sizes map to the space custom props. | |||||||
mar-[all|t|r|b|l]-[xs|sm|md|lg|xl|none] |
Sets margin on the specified sides (all, top, right, bottom, or left) in the specified size. Sizes map to the space custom props. | |||||||
gap-[xs|sm|md|lg|xl|none] |
Sets gap to the specified size. Sizes map to the space custom props. | |||||||
Position
| Name | Description | ||||||
|---|---|---|---|---|---|---|---|
pos-absolute |
Shortcut for position: absolute | ||||||
pos-fixed |
Shortcut for position: fixed | ||||||
pos-relative |
Shortcut for position: relative | ||||||
pos-static |
Shortcut for position: static | ||||||
pos-sticky |
Shortcut for position: sticky | ||||||
pin-[t|r|b|l] |
Shortcut for setting top, right, bottom, or left to zero | ||||||
Font
| Name | Description | ||||||
|---|---|---|---|---|---|---|---|
fnt-bold |
Shortcut for font-weight: 700 | ||||||
fnt-med |
Shortcut for font-weight: 500 | ||||||
fnt-reg |
Shortcut for font-weight: 400 | ||||||
fnt-light |
Shortcut for font-weight: 300 | ||||||
fnt-italic |
Shortcut for font-style: italic | ||||||
fnt-mono |
Shortcut for font-family: monospace | ||||||
fnt-normal |
Shortcut for font-style: normal | ||||||
Text
| Name | Description | ||||||
|---|---|---|---|---|---|---|---|
txt-left |
Shortcut for text-align: left | ||||||
txt-right |
Shortcut for text-align: right | ||||||
txt-center |
Shortcut for text-align: center | ||||||
txt-justify |
Shortcut for text-align: justify | ||||||
txt-lower |
Shortcut for text-transform: lowercase | ||||||
txt-upper |
Shortcut for text-transform: uppercase | ||||||
txt-caps |
Shortcut for text-transform: capitalize | ||||||
txt-space |
Shortcut for letter-spacing: 2px | ||||||
txt-truncate |
Truncates overflowing text and shows an ellipsis. | ||||||
txt-nowrap |
Shortcut for white-space: nowrap. Good for forcing inline elements to stretch wide enough to accommodate the text. | ||||||
txt-break-all |
Shortcut for word-break: break-all. Good for permitting characters to wrap when there's not enough room. | ||||||
txt-break-word |
Shortcut for word-break: break-word. Good for permitting words to wrap when there's not enough room. | ||||||
txt-noselect |
Prevents the user from selecting the text of this element. | ||||||
txt-[xs|sm|md|lg|xl|xxl] |
Sets font-size. | ||||||
txt-[color-name] |
Sets text color. The class names map to the
color custom props, e.g. txt-red-dark => --m-color-red-dark. |
||||||
txt-[info|success|warn|error] |
Sets text color to the alert type. | ||||||
Border
| Name | Description | ||||||
|---|---|---|---|---|---|---|---|
brd-[all|t|r|b|l] |
Adds default border to the specified side(s). | ||||||
brd-none |
Removes border from all sides. | ||||||
brd-radius-[sm|md|full] |
Sets border radius. Use full to create a circle. |
||||||
brd-[sm|md] |
Sets border width. | ||||||
brd-dashed |
Sets border style to dashed. Good for placeholders and drop targets. |
||||||
Background
| Name | Description | ||||||
|---|---|---|---|---|---|---|---|
bg-clip-text |
Clips background to match foreground text. | ||||||
bg-cover |
Background will be scaled to fill entire area of element. The aspect ratio is preserved, but the image may be cropped. | ||||||
bg-contain |
Background will be scaled to fit size of element. The aspect ratio is preserved and the image will not be cropped. | ||||||
bg-[color-name] |
Sets background color. The class names map to the
color custom props, e.g. bg-red-dark => --m-color-red-dark. |
||||||
Other
| Name | Description | ||||||
|---|---|---|---|---|---|---|---|
pointer |
Shortcut for cursor: pointer. Useful when you want an element to seem clickable. Buttons and links already have pointer set. | ||||||
full-height |
Shortcut for height: 100% | ||||||
full-width |
Shortcut for width: 100% | ||||||
auto-width |
Shortcut for width: auto | ||||||
box-border |
Shortcut for box-sizing: border-box | ||||||
box-content |
Shortcut for box-sizing: content-box | ||||||
overflow-auto |
Shortcut for overflow: auto | ||||||
overflow-hidden |
Shortcut for overflow: hidden | ||||||
vis-hidden |
Shortcut for visibility: hidden | ||||||
push |
Shortcut for margin-left: auto. Works well to push a flex item to the end. | ||||||
pull |
Shortcut for margin-right: auto | ||||||
shadow |
Adds default shadow | ||||||
content-vis-auto |
Shortcut for content-visibility: auto. Use on large sections of content not visible to the user after page load. The browser skips rendering and layout until needed thereby reducing the initial page rendering time. | ||||||
Guidelines
Reduce CSS maintenance
You can drastically cut down and even eliminate your CSS maintenance by leveraging these classes as much as possible.
Create and use templates
The demo above with all those classes is fine on its own or even 2-3 copies sitting next to each other, but beyond that you'll want a way to reuse chunks of HTML.
Reuse is possible with the <template> element or template literals (see below). If standard tools aren't enough, templating partials or static components are another low-code option. Avoid the temptation to turn every chunk of HTML into a framework-dependent component.
Accessibility
There are no accessibility recommendations for these classes.