Utility Classes
150+ CSS shortcuts and utility classes
Demo
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:
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.