Vertical Alignment

NOTE: this will only work with elements that are inline or inline-block

.u-vertical-align-baseline-{BREAKPOINT REFERENCE} Makes the vertical alignment of an element baseline from the breakpoint referenced in the class name.

.u-vertical-align-top-{BREAKPOINT REFERENCE} Makes the vertical alignment of an element top from the breakpoint referenced in the class name.

.u-vertical-align-middle-{BREAKPOINT REFERENCE} Makes the vertical alignment of an element middle from the breakpoint referenced in the class name.

.u-vertical-align-bottom-{BREAKPOINT REFERENCE} Makes the vertical alignment of an element bottom from the breakpoint referenced in the class name.

.u-vertical-align-text-top-{BREAKPOINT REFERENCE} Makes the vertical alignment of an element text-top from the breakpoint referenced in the class name.

.u-vertical-align-text-bottom-{BREAKPOINT REFERENCE} Makes the vertical alignment of an element text-bottom from the breakpoint referenced in the class name.

The above utility classes will allow you to amend the vertical alignment of an element 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-vertical-align-top class on an element, the element with have vertical-align: top; from a window width of 0px, and then on if you add .u-vertical-align-middle-md to the same element, it will have vertical-align: middle; 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 the vertical alignment to the top from a window width 768px to 992px then you can use .u-vertical-align-top-md-specific