Typography

.u-align-left-{BREAKPOINT REFERENCE} Aligns text to the left from the breakpoint referenced in the class name.

.u-align-right-{BREAKPOINT REFERENCE} Aligns text to the right from the breakpoint referenced in the class name.

.u-align-center-{BREAKPOINT REFERENCE} Aligns text to the center from the breakpoint referenced in the class name.

.u-align-justify-{BREAKPOINT REFERENCE} Justifies text from the breakpoint referenced in the class name.

.u-transform-uppercase-{BREAKPOINT REFERENCE} Makes all text uppercased from the breakpoint referenced in the class name.

.u-transform-lowercase-{BREAKPOINT REFERENCE} Makes all text lowercased from the breakpoint referenced in the class name.

.u-transform-capitalize-{BREAKPOINT REFERENCE} Makes all text capitalized from the breakpoint referenced in the class name.

.u-transform-none-{BREAKPOINT REFERENCE} Removes all text transforms from the breakpoint referenced in the class name.

.u-font-weight-normal-{BREAKPOINT REFERENCE} Makes all the text use the font weight of this SCSS variable: $normal from the breakpoint referenced in the class name.

.u-font-weight-medium-{BREAKPOINT REFERENCE} Makes all the text use the font weight of this SCSS variable:$medium from the breakpoint referenced in the class name.

.u-font-weight-bold-{BREAKPOINT REFERENCE} Makes all the text use the font weight of this SCSS variable:$bold from the breakpoint referenced in the class name.

.u-text-decoration-none-{BREAKPOINT REFERENCE} Removes all text decoration from the breakpoint referenced in the class name.

.u-ellipsis-{BREAKPOINT REFERENCE} This will automatically truncate an elements text and add ellipsis (only for single line text, doesn't work for multiline) from the breakpoint referenced in the class name. You will need to add width style to this element for this to work.

The above utility classes will allow you to amend an element typography styling based on the breakpoint reference you use from the default list below:

$breakpoints: (
    xs: 0px,
    sm: 544px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1440px
) !default;

Utility classes will be built for all breakpoints apart from ones with a 0px value.

The breakpoints here are the same breakpoints used for @vivid-web/flexboxgrid-sass.

Each breakpoint creates a min-width media query version of the utility class. This allows chaining of class names for responsive display styles. For instance, is you use the .u-align-left class on an element, the element with have text-align: left; from a window width of 0px, and then on if you add .u-align-right-md to the same element, it will have text-align: right; from a window width of 768px

Breakpoint Specific

If you only want a certain style for a specific breakpoint, and no others, you can use the -specific suffix.

For example, if you want text aligned left from a window width 768px to 992px then you can use .u-align-left-md-specific