Layout utilities are prefixed with l- and control the positioning of elements.


Please Note: Floats must have a wrapper with the u-clearfix class attached so they avoid breaking layouts.

.l-float-left Float Left

.l-float-right Float Right

.l-float-none Float None

<div class="u-clearfix">
	<div class="l-float-left">Left</div>
	<div class="l-float-right">Right</div>
	<div class="l-float-none">Right</div>


.l-inline Display Inline

.l-inline-block Display Inline

.l-block Display Block

<p class="l-inline">Inline</p>
<p class="l-inline-block">Inline-block</p>
<p class="l-block">Block</p>
<p class="l-none">None</p>

.l-table Table

.l-table-row Table Row

.l-table-cell Table Cell
.l-table-cell Table Cell
.l-table-cell Table Cell
.l-table-cell Table Cell
<div class="l-table w-100">
	<div class="l-table-row">
		<div class="l-table-cell">Table Cell</div>
		<div class="l-table-cell">Table Cell</div>
		<div class="l-table-cell">Table Cell</div>
		<div class="l-table-cell">Table Cell</div>
	</div><!--Table Row-->


These classes can be used for positioning specific elements in relation to their parents.

<div class="l-pos-absolute">Absolute</div>
<div class="l-pos-relative">Relative</div>
<div class="l-pos-fixed">Fixed</div>
<div class="l-pos-static">Static</div>
<div class="l-pos-top">Top</div>
<div class="l-pos-right">Right</div>
<div class="l-pos-bottom">Bottom</div>
<div class="l-pos-left">Left</div>

<div class="l-pos-top-left">Top left</div>
<div class="l-pos-top-right">Top right</div>
<div class="l-pos-bottom-left">Bottom left</div>
<div class="l-pos-bottom-right">Bottom right</div>

<div class="l-pos-all">Position all corners</div>

Box Sizing

<div class="l-border-box">Border Box</div>
<div class="l-content-box">Content Box</div>


All layout classes are responsive and can use the __m and __l modifier classes, e.g l-block___m.

Vertical Align





	<img src="robot.svg" class="u-vertical-align-top" />
	<img src="moon.svg" class="u-vertical-align-top" />
	<img src="robot.svg" class="u-vertical-align-middle" />
	<img src="moon.svg" class="u-vertical-align-middle" />
	<img src="robot.svg" class="u-vertical-align-bottom" />
	<img src="moon.svg" class="u-vertical-align-bottom" />
	<h3>Text Bottom</h3>
	<img src="robot.svg" class="u-vertical-align-text-bottom" />
	<img src="moon.svg" class="u-vertical-align-text-bottom" />


There are 5 levels of z-index that have classes for use, which correspond to z- variables in Variables.

.z-0 { z-index: $z-0; }
.z-1 { z-index: $z-1; }
.z-2 { z-index: $z-2; }
.z-3 { z-index: $z-3; }
.z-4 { z-index: $z-4; }
.z-5 { z-index: $z-5; }