Float

Usage

None

Prevent the element from floating.

<div class="h-14 p-r c-white">
  <div class="ai-c bg-indigo d-f d-14 fl-none jc-c">A</div>
</div>

Inline End

Float the element to the end of the inline direction.

<div class="h-14 p-r c-white">
  <div class="ai-c bg-indigo d-f d-14 fl-ie jc-c">A</div>
</div>

Inline Start

Float the element to the start of the inline direction.

<div class="h-14 p-r c-white">
  <div class="ai-c bg-indigo d-f d-14 fl-is jc-c">A</div>
</div>

Left

Float the element to the left side of its container.

<div class="h-14 p-r c-white">
  <div class="ai-c bg-indigo d-f d-14 fl-l jc-c">A</div>
</div>

Right

Float the element to the right side of its container.

<div class="h-14 p-r c-white">
  <div class="ai-c bg-indigo d-f d-14 fl-r jc-c">A</div>
</div>

Responsive Design

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

Hover State

Apply styles conditionally on hover using the h: prefix.