Floats

Pack name: seed-floats

Floats utility pack for Seed

Contents

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.

Lefty
Lefty
Righty
<div class="u-clearfix">
  <div class="u-pull-left">
    Lefty
  </div>
  <div class="u-pull-left">
    Lefty
  </div>
  <div class="u-pull-right">
    Righty
  </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

I'm being pull to the right!
<div class="u-clearfix">
  <div class="u-pull-right">
    I'm being pull to the right!
  </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 Clear
u-clear-none none
u-clear-left left
u-clear-right right
u-clear-both both