Utility Classes

150+ CSS shortcuts and utility classes

Demo

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

API

Shortcuts: Display Flexbox Float Space Position Font Text Border Other

Display

Name Description
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 Shortcut for flex-grow: 1
flx-wrap Shortcut for flex-wrap: wrap
flx-col Shortcut for flex-direction: column
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-end Shortcut for align-items: flex-end
align-self-stretch Shortcut for align-self: stretch
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

Space

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.

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-bolder Shortcut for font-weight: bolder
fnt-bold Shortcut for font-weight: bold
fnt-normal Shortcut for font-style: normal
fnt-light Shortcut for font-weight: 200
fnt-italic Shortcut for font-style: italic

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-[xs|sm|md|lg|xl|xxl] Sets font-size.
txt-[color-name] Sets text color. Names map to the color custom props, e.g. txt-red-dark

Border

Name Description
brd-radius-[sm|md|full] Sets border radius. Use full to create circles.
brd-width-[sm|md] Sets border width.

Other

Name Description
pointer Shortcut for cursor: pointer. Useful when you want an element to seem clickable. Buttons and links already have pointer set.
noselect Prevents the user from selecting the text of this element.
full-height Shortcut for height: 100%
full-width Shortcut for width: 100%
auto-width Shortcut for width: auto
overflow-auto Shortcut for overflow: auto

Guidelines

Avoid CSS bloat

Use these classes to avoid writing and maintaining unnecessary styles that do what these classes already do. Quite often a feature can be implemented without writing any CSS if you leverage these shortcuts!

Keep it stupid-simple

Do you really need to create another idiomatic framework-dependent component perfectly coded and packaged with all the right configurations and test coverage? Probably not. Some designs can, and probably should, just be implemented with utility classes. Like the demo:

Homer J. Simpson
Safety Inspector
Chunkylover53@aol.com
555-7334
E. M. Dash
Design System
@realEmDash
1-800-M-DASH

Reuse is possible with the standard <template> element or template literals. If standards aren't going to work, partials or static components are a good choice.

Accessibility

There are no accessibility recommendations for these classes.