Utility Classes
220+ CSS shortcuts and utility classes
Demo
API
Categories: Display Flexbox 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. Consider using the HTML hidden attribute instead. |
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 | ||||||
place-content-center |
Shortcut for place-content: center |
Spacing
Name | Description | |||||||
---|---|---|---|---|---|---|---|---|
pad-[xs|sm|md|lg|xl|0] |
Sets padding on all sides to the specified size. Sizes map to the
space custom props and 0 really means zero. |
|||||||
pad-[t|r|b|l]-[xs|sm|md|lg|xl|0] |
Sets padding on the specified side (top, right, bottom, or left) in the specified size. Sizes map to the
space custom props and 0 really means zero. |
|||||||
mar-[xs|sm|md|lg|xl|0|auto] |
Sets margin on all sides to the specified size. Sizes map to the
space custom props and 0 really means zero. |
|||||||
mar-[t|r|b|l]-[xs|sm|md|lg|xl|0|auto] |
Sets margin on the specified side (top, right, bottom, or left) in the specified size. Sizes map to the
space custom props and 0 really means zero. |
|||||||
gap-[xs|sm|md|lg|xl|0] |
Sets gap to the specified size. Sizes map to the
space custom props and 0 really means zero. |
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 | ||||||
pos-[t|r|b|l]-0 |
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-maxlength |
Shortcut for max-width: 75ch. Good for limiting text line length to improve readability. See Readability: The Optimal Line Length | ||||||
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 |
Adds a border. | ||||||
brd-[t|r|b|l] |
Adds a border to the specified side. | ||||||
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. | ||||||
height-full |
Shortcut for height: 100% | ||||||
height-half |
Shortcut for height: 50% | ||||||
height-min-0 |
Shortcut for min-height: 0 | ||||||
width-full |
Shortcut for width: 100% | ||||||
width-half |
Shortcut for width: 50% | ||||||
width-fit |
Shortcut for width: fit-content | ||||||
width-min-0 |
Shortcut for min-width: 0 | ||||||
box-sizing-border |
Shortcut for box-sizing: border-box | ||||||
box-sizing-content |
Shortcut for box-sizing: content-box | ||||||
overflow-auto |
Shortcut for overflow: auto | ||||||
overflow-hidden |
Shortcut for overflow: hidden | ||||||
overflow-clip |
Shortcut for overflow: clip (good for rounded corners) | ||||||
vis-hidden |
Shortcut for visibility: hidden | ||||||
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. | ||||||
left |
Shortcut for float: left | ||||||
right |
Shortcut for float: right | ||||||
clear |
Shortcut for clear: both | ||||||
all-unset |
Shortcut for all: unset |
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.