Spacing

Margin

.u-no-margin-{BREAKPOINT REFERENCE} Removes all margins from the breakpoint referenced in the class name.

.u-no-margin-top-{BREAKPOINT REFERENCE} Removes top margin from the breakpoint referenced in the class name.

.u-no-margin-right-{BREAKPOINT REFERENCE} Removes right margin from the breakpoint referenced in the class name.

.u-no-margin-bottom-{BREAKPOINT REFERENCE} Removes bottom margin from the breakpoint referenced in the class name.

.u-no-margin-left-{BREAKPOINT REFERENCE} Removes left margi from the breakpoint referenced in the class name.n

.u-margin-{BREAKPOINT REFERENCE} Adds $space variable margin from the breakpoint referenced in the class name.

.u-margin-half-{BREAKPOINT REFERENCE} Adds half $space variable margin from the breakpoint referenced in the class name.

.u-margin-top-{BREAKPOINT REFERENCE} Adds $space variable margin to the top from the breakpoint referenced in the class name.

.u-margin-top-half-{BREAKPOINT REFERENCE} Adds half $space variable margin to the top from the breakpoint referenced in the class name.

.u-margin-right-{BREAKPOINT REFERENCE} Adds $space variable margin to the right from the breakpoint referenced in the class name.

.u-margin-right-half-{BREAKPOINT REFERENCE} Adds half $space variable margin to the right from the breakpoint referenced in the class name.

.u-margin-bottom-{BREAKPOINT REFERENCE} Adds $space variable margin to the bottom from the breakpoint referenced in the class name.

.u-margin-bottom-half-{BREAKPOINT REFERENCE} Adds half $space variable margin to the bottom from the breakpoint referenced in the class name.

.u-margin-left-{BREAKPOINT REFERENCE} Adds $space variable margin to the left from the breakpoint referenced in the class name.

.u-margin-left-half-{BREAKPOINT REFERENCE} Adds half $space variable margin to the left from the breakpoint referenced in the class name.

.u-margin-top-auto-{BREAKPOINT REFERENCE} Adds margin-top: auto; to an element from the breakpoint referenced in the class name.

.u-margin-right-auto-{BREAKPOINT REFERENCE} Adds margin-right: auto; to an element from the breakpoint referenced in the class name.

.u-margin-bottom-auto-{BREAKPOINT REFERENCE} Adds margin-bottom: auto; to an element from the breakpoint referenced in the class name.

.u-margin-left-auto-{BREAKPOINT REFERENCE} Adds margin-left: auto; to an element from the breakpoint referenced in the class name.

Padding

.u-no-padding-{BREAKPOINT REFERENCE} Removes all paddings from the breakpoint referenced in the class name.

.u-no-padding-top-{BREAKPOINT REFERENCE} Removes top paddin from the breakpoint referenced in the class name.g

.u-no-padding-right-{BREAKPOINT REFERENCE} Removes right padding from the breakpoint referenced in the class name.

.u-no-padding-bottom-{BREAKPOINT REFERENCE} Removes bottom padding from the breakpoint referenced in the class name.

.u-no-padding-left-{BREAKPOINT REFERENCE} Removes left padding from the breakpoint referenced in the class name.

.u-padding-{BREAKPOINT REFERENCE} Adds $space variable padding from the breakpoint referenced in the class name.

.u-padding-half-{BREAKPOINT REFERENCE} Adds half $space variable padding from the breakpoint referenced in the class name.

.u-padding-top-{BREAKPOINT REFERENCE} Adds $space variable padding to the top from the breakpoint referenced in the class name.

.u-padding-top-half-{BREAKPOINT REFERENCE} Adds half $space variable padding to the top from the breakpoint referenced in the class name.

.u-padding-right-{BREAKPOINT REFERENCE} Adds $space variable padding to the right from the breakpoint referenced in the class name.

.u-padding-right-half-{BREAKPOINT REFERENCE} Adds half $space variable padding to the right from the breakpoint referenced in the class name.

.u-padding-bottom-{BREAKPOINT REFERENCE} Adds $space variable padding to the bottom from the breakpoint referenced in the class name.

.u-padding-bottom-half-{BREAKPOINT REFERENCE} Adds half $space variable padding to the bottom from the breakpoint referenced in the class name.

.u-padding-left-{BREAKPOINT REFERENCE} Adds $space variable padding to the left from the breakpoint referenced in the class name.

.u-padding-left-half-{BREAKPOINT REFERENCE} Adds half $space variable padding to the left from the breakpoint referenced in the class name.

The above utility classes will allow you to amend an element's spacing 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-no-margin-right class on an element, the element with have margin-right: 0; from a window width of 0px, and then on if you add .u-margin-right-auto-md to the same element, it will have margin-right: auto; 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 to remove the right margin from a window width 768px to 992px then you can use .u-no-margin-right-md-specific