Float

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

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

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

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