Overflow

.u-overflow-hidden-{BREAKPOINT REFERENCE} Makes the element overflow hidden from the breakpoint referenced in the class name.

.u-overflow-auto-{BREAKPOINT REFERENCE} Makes the element overflow auto from the breakpoint referenced in the class name.

The above utility classes will allow you to amend the overflow behaviour 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-overflow-hidden class on an element, the element with have overflow: hidden; from a window width of 0px, and then on if you add .u-overflow-auto-md to the same element, it will have overflow: 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 only want to have the element the hide overflowing content from a window width 768px to 992px then you can use .u-overflow-hidden-md-specific