CSS Utilities
Utilities provide the building blocks for layout and handle a range common use cases that help us avoid writing custom styles.
When we need to add some margin or padding, rather than adding a new selector specific to that use case, we can use utilities. This helps us reduce the number of unique property-value pairs, and helps us keep more consistent styles across the site.
- Utilities should do one job well and one job only, are immutable, and on occasion are an acceptable approach to overriding component styles.
- Utility class-names should be transparent and clearly describe the job they do.
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.