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: