Layout

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


Floats

.l-float-left

Left

.l-float-right

Right

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

Display

.l-inline

Inline

.l-inline-block

Inline-block

.l-block

Block

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

Positioning

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-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>

Responsive

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