Utility Classes

220+ CSS shortcuts and utility classes

Demo

Homer J. Simpson
Safety Inspector
Chunkylover53@aol.com
555-7334

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.

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

Accessibility

There are no accessibility recommendations for these classes.