Utility Classes

210+ CSS shortcuts and utility classes


Homer J. Simpson
Safety Inspector


Categories: Display Flexbox Float Spacing Position Font Text Border Background Other


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


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


Name Description
left Shortcut for float: left
right Shortcut for float: right
clear Shortcut for clear: both


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.


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


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


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.


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.


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.


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.


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.

export function userCardTemplate(imgUrl, name, title, email, phone) { return `
` } const homerCard = userCardTemplate('/img/homer.png', 'Homer J. Simpson', 'Safety Inspector', 'Chunkylover53@aol.com', '555-7334')


There are no accessibility recommendations for these classes.