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.

Buzz

Slinky

Woody

<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

Woody

<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;

seed-flexy

↑Back to top

Help Scout Developers