Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
40 lines (33 sloc) 1.18 KB
A utility class modifies a single trait, typically a single CSS property. To apply a trait, or a combination of traits to an element, add the corresponding utility class directly to the HTML element.
Together, they can form a variety of UI patterns. You won't always want to use combinations of utilities to generate more complicated patterns, but the option is there. Once you've identified a set of traits that seem to be reused a lot, it's a good time to consider turning those into a component.
**Format:** `ds-u-[NAME]`
<div class="ds-u-fill--primary-alt ds-u-padding--3">
<p class="ds-u-margin--0 ds-u-color--white ds-u-text-align--center">Hello world</p>
Weight: 20
Style guide: utilities
@import 'background-color';
@import 'border';
@import 'border-radius';
@import 'color';
@import 'display-visibility';
@import 'flexbox';
@import 'float';
@import 'font-family';
@import 'font-size';
@import 'font-style';
@import 'font-weight';
@import 'line-height';
@import 'margin';
@import 'measure/measure';
@import 'overflow';
@import 'padding';
@import 'text-align';
@import 'text-decoration';
@import 'text-transform';
@import 'truncate';
@import 'vertical-align';
You can’t perform that action at this time.