CSS utilities
Utilities provide the building blocks for layout and handle a range common use cases that help us avoid writing custom styles.
Utilities provide the building blocks for layout and handle a range common use cases that help us avoid writing custom styles.
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.
Utilities for borders, and border radius.
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).
Use color utilities to apply color to the background of elements, text, and borders.
Details classes are created to enhance the native behaviors of details elements.
Flex utilities can be used to apply flexbox behaviors to elements by using utility classes.
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.
Change the document layout with display, float, alignment, and other utilities.
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 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.
Type utilities are designed to work in combination with line-height utilities so as to result in more sensible numbers wherever possible.