Fender Design System

Grid (Floats)

You can combine display, float, padding, and widths to contstruct a wide variety of fluid grids.

Floats

Floats may be set on any element, but it will only affect elements that aren't absolutely positioned. When you float an element you inherently set its display to block.

There are only three values that can be declared for float: left, right, or none. These three base classes are very easy to memorize: fl, fr, fn.

.fl

Float Left

.fr

Float Right

.fn

Float None

Clears

CSS Reference

When floats are used for layouts - they need a clearfix solution. This helps prevent layout problems caused by the elements being removed from the block context of the surrounding elements.

This example shows two floated elements wrapped in an element with a 4px solid red border. In the top version where the floats are cleared, the red element wraps around the elements. In the second example - the parent element is collapsed and the two floated elements sit outside of it. It should be noted you don't have to clear floated elements that are inside another floated element.

UnCleared Floats

Fixed Columns

fl w-100 pa2

fl w-90 pa2

fl w-10 pa2

fl w-80 pa2

fl w-20 pa2

fl w-75 pa2

fl w-25 pa2

fl w-70 pa2

fl w-30 pa2

fl w-60 pa2

fl w-40 pa2

fl w-50 pa2

fl w-third pa2

fl w-two-thirds pa2

fl w-25 pa2

fl w-20 pa2

fl w-10 pa2

Two Columns - Collapsing

  <div class="cf">
    <div class="fl w-100 w-50-ns pa2">
      <div class="outline bg-white pv4"></div>
    </div>
    <div class="fl w-100 w-50-ns pa2">
      <div class="outline bg-white pv4"></div>
    </div>
  </div>

Three Columns - Collapse to Single

  <div class="cf">
    <div class="fl w-100 w-third-ns pa2">
      <div class="outline bg-white pv4"></div>
    </div>
    <div class="fl w-100 w-third-ns pa2">
      <div class="outline bg-white pv4"></div>
    </div>
    <div class="fl w-100 w-third-ns pa2">
      <div class="outline bg-white pv4"></div>
    </div>
  </div>

Three Columns - Collapse to Mixed

  <div class="cf">
    <div class="fl w-100 w-third-ns pa2">
      <div class="outline bg-white pv4"></div>
    </div>
    <div class="fl w-50 w-third-ns pa2">
      <div class="outline bg-white pv4"></div>
    </div>
    <div class="fl w-50 w-third-ns pa2">
      <div class="outline bg-white pv4"></div>
    </div>
  </div>

Four Columns - Collapse to single

  <div class="cf">
    <div class="fl w-100 w-25-ns pa2">
      <div class="outline bg-white pv4"></div>
    </div>
    <div class="fl w-100 w-25-ns pa2">
      <div class="outline bg-white pv4"></div>
    </div>
    <div class="fl w-100 w-25-ns pa2">
      <div class="outline bg-white pv4"></div>
    </div>
    <div class="fl w-100 w-25-ns pa2">
      <div class="outline bg-white pv4"></div>
    </div>
  </div>

Four Columns - Collapse to Mixed

  <div class="cf">
  <div class="fl w-100 w-25-ns pa2">
    <div class="outline bg-white tc pv4"></div>
  </div>
  <div class="fl w-third w-25-ns pa2">
    <div class="outline bg-white tc pv4"></div>
  </div>
  <div class="fl w-third w-25-ns pa2">
    <div class="outline bg-white tc pv4"></div>
  </div>
  <div class="fl w-third w-25-ns pa2">
    <div class="outline bg-white tc pv4"></div>
  </div>
</div>