Skip to content

CSS utilities

Utilities provide the building blocks for layout and handle a range common use cases that help us avoid writing custom styles.

Getting started

Utilities provide the building blocks for layout and handle a range common use cases that help us avoid writing custom styles.

Animations

Animations are reusable animation classes that you can use to emphasize an element. All of these animations will animate if you toggle their visibility using the "Toggle" button.

Borders

Utilities for borders, and border radius.

Box shadow

Box shadows are used to make content appear elevated. They are typically applied to containers of content that users need to pay attention to or content that appears on top of (overlapping) other elements on the page (like a pop-over or modal).

Colors

Use color utilities to apply color to the background of elements, text, and borders.

Details

Details classes are created to enhance the native behaviors of details elements.

Flexbox

Flex utilities can be used to apply flexbox behaviors to elements by using utility classes.

Grid

The grid is 12 columns and percentage-based. The number of columns a container spans can be adjusted across breakpoints for responsive layouts. The grid system works with a variety of layout utilities to achieve different results.

Layout

Change the document layout with display, float, alignment, and other utilities.

Margin

Margin utilities are based on a global spacing scale which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that share the same properties, and allows to achieve many different page layouts using the same styles.

Padding

Padding utilities are based on a global spacing scale which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that could share the same properties, and allows to achieve many different page layouts using the same styles.

Typography

Type utilities are designed to work in combination with line-height utilities so as to result in more sensible numbers wherever possible.