Floats
A series of utility classes that adjust the float property of a selector, with support for responsive modifiers.
Install
npm install seed-floats --save
Dependencies
Usage
Clearfix
Class: .u-clearfix
The technique of “clearing” must be utilitized when float utility classes are being used. This ensures that elements on your page align correctly.
For most use cases, applying a “clearfix” class to the parent selector containing floating elements takes care of this.
<div class="u-clearfix">
<div class="u-pull-left">
Buzz
</div>
<div class="u-pull-left">
Slinky
</div>
<div class="u-pull-right">
Woody
</div>
</div>Pull (Float)
All of the following classes support responsive modifiers.
| Class | Float |
|---|---|
.u-pull-left |
left |
.u-pull-right |
right |
.u-pull-none |
none |
Example
<div class="u-clearfix">
<div class="u-pull-right">
Woody
</div>
</div>Clear
For most use-cases, the clearfix utility class is able to handle float clearing. However, the following clear classes are available to provide finer grain control.
All of the following classes support responsive modifiers.
| Class | Clearfix |
|---|---|
.u-clear-none |
none |
.u-clear-left |
left |
.u-clear-right |
right |
.u-clear-both |
both |
Configurations
Below are the default Sass configuration variables for seed-floats. The variables can be found in the pack’s _config.scss file.
seed-floats/_config.scss$seed-floats-clearfix-namespace: "u-clearfix" !default;
$seed-floats-pull-namespace: "u-pull" !default;