Utilities
Dozens of utility classes with a single purpose designed to reduce the frequency of highly repetitive declarations in your CSS while allowing for quick and easy development.
Floating
These utility classes float an element to the enable or disable floating, based on the current viewport size using the CSS float
property.
Instead of using left/right
designators, the float utilities use start/end
designators to match up with the flexbox utilities.
Float start aligned on all viewport sizes
Float end aligned on all viewport sizes
Don't float on all viewport sizes
Float end aligned on viewports sized SM (small) or wider
Float end aligned on viewports sized MD (medium) or wider
Float end aligned on viewports sized LG (large) or wider
Float end aligned on viewports sized XL (extra-large) or wider
<div class="float-start">Float start aligned on all viewport sizes</div><br>
<div class="float-end">Float end aligned on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div><br>
<div class="float-sm-end">Float end aligned on viewports sized SM (small) or wider</div><br>
<div class="float-md-end">Float end aligned on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-end">Float end aligned on viewports sized LG (large) or wider</div><br>
<div class="float-xl-end">Float end aligned on viewports sized XL (extra-large) or wider</div><br>
// Related simple non-responsive mixins
.element {
@include float-start;
}
.another-element {
@include float-end;
}
.unfloated-element {
@include float-none;
}