Layout

Floats

To float elements, use the following classes: .float-l-xs, .float-r-xs, and .float-none-xs

Directions

  • l = left
  • r = right
.float-l-xs
.float-r-xs
.float-none-xs
<div class="col-container">
<div class="float-l-xs border-dark-xs">.float-l-xs</div>
<div class="float-r-xs border-dark-xs">.float-r-xs</div>
</div>
<div class="float-none-xs border-dark-xs m-t-05-xs">.float-none-xs</div>

Display

Use .hide-xs, .block-xs, .inline-xs and .inline-block-xs to change an element's display.

.hide-xs
.block-xs
.inline-xs
.inline-block-xs
<div class="hide-xs">.hide-xs</div>
<div class="block-xs border-mid-xs">.block-xs</div>
<div class="inline-xs border-mid-xs">.inline-xs</div>
<div class="inline-block-xs border-mid-xs">.inline-block-xs</div>

Overflow

Use .overflow-hidden-xs, .overflow-auto-xs, .overflow-scroll-xs and .overflow-visible-xs to change an element's overflow.

.overflow-hidden-xs

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum maiores esse vel quia, voluptates quos. Tempora natus iste aperiam sequi mollitia, doloremque quas recusandae, rerum minima dolorum, veritatis vitae maxime.

.overflow-auto-xs

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum maiores esse vel quia, voluptates quos. Tempora natus iste aperiam sequi mollitia, doloremque quas recusandae, rerum minima dolorum, veritatis vitae maxime.

.overflow-scroll-xs

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum maiores esse vel quia, voluptates quos. Tempora natus iste aperiam sequi mollitia, doloremque quas recusandae, rerum minima dolorum, veritatis vitae maxime.

.overflow-visible-xs

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum maiores esse vel quia, voluptates quos. Tempora natus iste aperiam sequi mollitia, doloremque quas recusandae, rerum minima dolorum, veritatis vitae maxime.

<div class="overflow-hidden-xs p-1-xs m-b-1-xs border-dark-xs" style="height: 110px">
<p>.overflow-hidden-xs</p>
<p>...</p>
</div>

<div class="overflow-auto-xs p-1-xs m-b-1-xs border-dark-xs" style="height: 110px">
<p>.overflow-auto-xs</p>
<p>...</p>
</div>

<div class="overflow-scroll-xs p-1-xs m-b-1-xs border-dark-xs" style="height: 110px">
<p>.overflow-scroll-xs</p>
<p>...</p>
</div>

<div class="overflow-visible-xs p-1-xs m-b-3-xs border-dark-xs" style="height: 110px">
<p>.overflow-visible-xs</p>
<p>...</p>
</div>

Width & Height

Most widths will be set using our grid layout. However, Leap provides .w-fit-xs to set an elements max-width to 100%, additionally it has .w-full-xs and .h-full-xs to set an elements width to 100%. You can use .w-auto-xs to set an elements width to auto.

.w-fit-xs
.w-full-xs
.h-full-xs
.w-auto-xs
<div class="w-fit-xs border-dark-xs p-1-xs m-b-1-xs">.w-fit-xs</div>
<div class="w-full-xs border-dark-xs p-1-xs m-b-1-xs">.w-full-xs</div>
<div class="border-xs p-05-xs m-b-1-xs" style="height: 100px">
<div class="h-full-xs col-20-xs border-dark-xs p-1-xs">.h-full-xs</div>
</div>
<div class="w-auto-xs border-dark-xs p-1-xs">.w-auto-xs</div>

Spacing Units and Naming

We use our spacial units across margin, padding, and positioning. These comes in values from 0-6 and a half space unit of 0.5. Each value represents a unit based on 1rem=16px. Each class uses a shorthand of its name to indicate properties and direction.

Units

  • 0 = 0
  • 0.5 = 0.5rem
  • 1 = 1rem
  • 2 = 1.5rem
  • 3 = 2rem
  • 4 = 3rem
  • 5 = 4rem
  • 6 = 5rem

Properties

  • m = margin
  • p = padding

Sides

  • t = top
  • b = bottom
  • l = left
  • r = right
  • lr = left + right
  • tb = top + bottom

Spacing

Uniform Spacing

These classes are used to apply equal spacing around the entire element.

Margin

  • .m-0-xs
  • .m-05-xs
  • .m-1-xs
  • .m-2-xs
  • .m-3-xs
  • .m-4-xs
  • .m-5-xs
  • .m-6-xs

Padding

  • .p-0-xs
  • .p-05-xs
  • .p-1-xs
  • .p-2-xs
  • .p-3-xs
  • .p-4-xs
  • .p-5-xs
  • .p-6-xs
m-05-xs
m-1-xs
m-2-xs
m-3-xs
p-05-xs
p-1-xs
p-2-xs
p-3-xs
<div class="col-container border-xs">
<div class="border-dark-xs float-l-xs inline-block-xs m-05-xs">m-05-xs</div>
<div class="border-dark-xs float-l-xs inline-block-xs m-1-xs">m-1-xs</div>
<div class="border-dark-xs float-l-xs inline-block-xs m-2-xs">m-2-xs</div>
<div class="border-dark-xs float-l-xs inline-block-xs m-3-xs">m-3-xs</div>
<div class="border-dark-xs float-l-xs inline-block-xs p-05-xs">p-05-xs</div>
<div class="border-dark-xs float-l-xs inline-block-xs p-1-xs">p-1-xs</div>
<div class="border-dark-xs float-l-xs inline-block-xs p-2-xs">p-2-xs</div>
<div class="border-dark-xs float-l-xs inline-block-xs p-3-xs">p-3-xs</div>
</div>

Individual Spacing

These classes are used to apply spacing to a particular side of an element.

Margin

  • .m-t-1-xs margin-top
  • .m-b-1-xs margin-bottom
  • .m-l-1-xs margin-left
  • .m-r-1-xs margin-right
  • .m-lr-1-xs margin left + right
  • .m-tb-1-xs margin top + bottom
  • .m-auto-xs horizontal center
  • .m-t-auto-xs margin-top auto
  • .m-b-auto-xs margin-bottom auto
  • .m-l-auto-xs margin-left auto
  • .m-r-auto-xs margin-right auto

Padding

  • .p-0-xs padding-top
  • .p-05-xs padding-bottom
  • .p-1-xs padding-left
  • .p-2-xs padding-right
  • .p-3-xs padding left + right
  • .p-4-xs padding top + bottom
m-t-3-xs
m-t-4-xs
m-t-5-xs
m-t-6-xs
p-l-3-xs
p-l-4-xs
p-l-5-xs
p-l-6-xs
<div class="col-container border-xs">
<div class="border-dark-xs float-l-xs inline-block-xs m-t-3-xs">m-t-3-xs</div>
<div class="border-dark-xs float-l-xs inline-block-xs m-t-4-xs">m-t-4-xs</div>
<div class="border-dark-xs float-l-xs inline-block-xs m-t-5-xs">m-t-5-xs</div>
<div class="border-dark-xs float-l-xs inline-block-xs m-t-6-xs">m-t-6-xs</div>
<div class="border-dark-xs float-l-xs inline-block-xs p-l-3-xs">p-l-3-xs</div>
<div class="border-dark-xs float-l-xs inline-block-xs p-l-4-xs">p-l-4-xs</div>
<div class="border-dark-xs float-l-xs inline-block-xs p-l-5-xs">p-l-5-xs</div>
<div class="border-dark-xs float-l-xs inline-block-xs p-l-6-xs">p-l-6-xs</div>
<div class="border-dark-xs float-l-xs inline-block-xs p-l-auto-xs">p-l-auto-xs</div>
</div>

Positioning

Positioning is simple with Leap. Just add .relative-xs, .absolute-xs, .fixed-xs, or .static-xs to control the type of positioning on an element. From there, you can apply values based on our spacing units of 0-6 and a half unit of 05. Use .pos-t-n-xs, where t is the side and n is one of our spacing units.

Note: There is no demo for position fixed because it will always be fixed to the viewport, not a parent container.

  • .relative-xs = relative
  • .absolute-xs = absolute
  • .fixed-xs = fixed
  • .static-xs = static
  • .pos-t-n-xs = top
  • .pos-b-n-xs = bottom
  • .pos-l-n-xs = left
  • .pos-r-n-xs = right

Z-Index

Use a z-index class to assign the stack order of elements. We've created classes for values 1-4, which end up as 100-400 in the property value.

  • .z-1-xs = z-index: 100
  • .z-2-xs = z-index: 200
  • .z-3-xs = z-index: 300
  • .z-4-xs = z-index: 400
.relative-xs .pos-t-2-xs .pos-l-5-xs
.relative-xs
.absolute-xs .pos-t-4-xs .pos-l-5-xs
.absolute-xs .pos-t-1-xs .pos-l-2-xs
.absolute-xs .pos-t-4-xs .pos-l-4-xs 
<div class="border-xs p-2-xs m-b-1-xs">
<div class="relative-xs pos-t-2-xs pos-l-5-xs border-dark-xs inline-xs">
.relative-xs .pos-t-2-xs .pos-l-5-xs
</div>
</div>
<div class="relative-xs border-xs p-3-xs m-b-1-xs">
.relative-xs
<div class="absolute-xs pos-t-4-xs pos-l-5-xs border-dark-xs">
.absolute-xs .pos-t-4-xs .pos-l-5-xs
</div>
</div>
<div class="relative-xs border-xs p-5-xs">
<div class="absolute-xs pos-t-1-xs pos-l-2-xs border-dark-xs p-05-xs z-2-xs" style="background: #fff">
.absolute-xs .pos-t-1-xs .pos-l-2-xs
</div>
<div class="absolute-xs pos-t-4-xs pos-l-4-xs border-dark-xs p-05-xs z-1-xs">
.absolute-xs .pos-t-4-xs .pos-l-4-xs
</div>
</div>

Vertical Alignment

You can vertically align elements with the .align-top-xs, .align-middle-xs, or .align-bottom-xs classes.

Gratt Spore This is our friend Gratt Spore and the img tag has the class align-top-xs on it.
Gratt Spore This is our friend Gratt Spore and the img tag has the class align-middle-xs on it.
Gratt Spore This is our friend Gratt Spore and the img tag has the class align-bottom-xs on it. 
<div class="m-b-2-xs">
<img src="img/gratt-spore.svg" alt="Gratt Spore" height="50px" Width="50px" class="align-top-xs m-r-1">
This is our friend Gratt Spore and the <code>img</code> tag has the class <code>align-top-xs</code> on it.
</div>
<div class="m-b-2-xs">
<img src="img/gratt-spore.svg" alt="Gratt Spore" height="50px" Width="50px" class="align-middle-xs m-r-1">
This is our friend Gratt Spore and the <code>img</code> tag has the class <code>align-middle-xs</code> on it.
</div>
<div>
<img src="img/gratt-spore.svg" alt="Gratt Spore" height="50px" Width="50px" class="align-bottom-xs m-r-1">
This is our friend Gratt Spore and the <code>img</code> tag has the class <code>align-bottom-xs</code> on it.
</div>

Rotation

You can rotate elements by using .rotate-n-xs, where n is 0, 45, 90, 135, 180, 225, 270, or 315. You can also change rotation across breakpoints (using our breakpoint suffixes) to accomodate different layouts.

<span class="rotate-0-xs border-dark-xs border-none-t-xs inline-block-xs p-2-xs m-r-2-xs" style="height:60px;"></span>
<span class="rotate-45-xs border-dark-xs border-none-t-xs inline-block-xs p-2-xs m-r-2-xs" style="height:60px;"></span>
<span class="rotate-90-xs border-dark-xs border-none-t-xs inline-block-xs p-2-xs m-r-2-xs" style="height:60px;"></span>
<span class="rotate-135-xs border-dark-xs border-none-t-xs inline-block-xs p-2-xs m-r-2-xs" style="height:60px;"></span>
<span class="rotate-180-xs border-dark-xs border-none-t-xs inline-block-xs p-2-xs m-r-2-xs" style="height:60px;"></span>
<span class="rotate-225-xs border-dark-xs border-none-t-xs inline-block-xs p-2-xs m-r-2-xs" style="height:60px;"></span>
<span class="rotate-270-xs border-dark-xs border-none-t-xs inline-block-xs p-2-xs m-r-2-xs" style="height:60px;"></span>
<span class="rotate-315-xs border-dark-xs border-none-t-xs inline-block-xs p-2-xs" style="height:60px;"></span>