Layout

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


Floats

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

Display

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

Display Table

.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-->
</div><!--Table-->

Display Flex

Set the flex container.

.l-flex Display Flex

<div class="l-flex">Flex</div>

Set horizonal positioning of items within the flex container.

.l-flex-row Flex Row
Row Item 1
Row Item 2
Row Item 3
.l-flex-row-reverse Flex Row Reverse
Row Item 1
Row Item 2
Row Item 3
.l-flex-col Flex Column
Column Item 1
Column Item 2
Column Item 3
.l-flex-col-reverse Flex Column Reverse
Column Item 1
Column Item 2
Column Item 3
<div class="l-flex l-flex-row">Flex Row</div>
<div class="l-flex l-flex-row-reverse">Flex Row Reverse</div>
<div class="l-flex l-flex-col">Flex Col</div>
<div class="l-flex l-flex-col-reverse">Flex Col Reverse</div>

force flex items to wrap. usually only needed when items used fixed size.

.l-flex-wrap Flex Wrap
Wrap Item 1
Wrap Item 2
Wrap Item 3
.l-flex-wrap-reverse Flex Wrap Reverse
Wrap Reverse Item 1
Wrap Reverse Item 2
Wrap Reverse Item 3
.l-flex-nowrap Flex No Wrap
No Wrap Item 1
No Wrap Item 2
No Wrap Item 3
<div class="l-flex l-flex-wrap">Flex Wrap</div>
<div class="l-flex l-flex-wrap-reverse">Flex Wrap Reverse</div>
<div class="l-flex l-flex-nowrap">Flex No Wrap</div>

Set horizontal alignment of content within the flex container.

.l-flex-x-start Justify Flex Start
.l-flex-x-end Justify Flex End
.l-flex-x-center Justify Flex Center
.l-flex-x-between Justify Flex Space Between
Item 1
Item 2
Item 3
.l-flex-x-around Justify Flex Space Around
Item 1
Item 2
Item 3
.l-flex-x-even Justify Flex Space Evenly
Item 1
Item 2
Item 3
<div class="l-flex l-flex-x-start">Flex X Start</div>
<div class="l-flex l-flex-x-end">Flex X End</div>
<div class="l-flex l-flex-x-center">Flex X Center</div>
<div class="l-flex l-flex-x-between">Flex X Space Between</div>
<div class="l-flex l-flex-x-around">Flex X Space Around</div>
<div class="l-flex l-flex-x-even">Flex X Evenly Space</div>

Set vertical alignment of content within the flex container.

.l-flex-y-even Flex Y Start
Item 1
Item 2
Item 3
.l-flex-y-even Flex Y End
Item 1
Item 2
Item 3
.l-flex-y-even Flex Y Center
Item 1
Item 2
Item 3
.l-flex-y-even Flex Y Baseline
Item 1
Item 2
Item 3
.l-flex-y-even Flex Y Stretch
Item 1
Item 2
Item 3
<div class="l-flex l-flex-y-start">Flex Y Start</div>
<div class="l-flex l-flex-y-end">Flex Y End</div>
<div class="l-flex l-flex-y-center">Flex Y Center</div>
<div class="l-flex l-flex-y-baseline">Flex Y Baseline</div>
<div class="l-flex l-flex-y-stretch">Flex Y Stretch</div>

Set alignment of a single item within the flex container.

Item 1
Item 2
Item 3
.l-flex-end Item 4

Implementation example:

<div class="l-flex l-flex-col l-flex-y-start">
	<div>Item 1</div>
	<div class="l-flex-end">Item 2</div>
</div>

Options:

<div class="l-flex-start"> Flex Align This Item Start</div>
<div class="l-flex-end"> Flex Align This Item End</div>
<div class="l-flex-center"> Flex Align This Item Center</div>
<div class="l-flex-stretch"> Flex Align This Item Stretch</div>
<div class="l-flex-between"> Flex Align This Item Space Between</div>
<div class="l-flex-around"> Flex Align This Item Space Around</div>

Manually set flex item sizing based on ratios

e.g. 1-1-2 items will be a 25% 25% 50% row, 1-2 items a 33% 66% row, 1-3 25% 75%

.l-flex-grow-0 Flex Grow 0
Item 1 Item 2 Item 3
.l-flex-grow-1 Flex Grow 1
Item 1 Item 2 Item 3
.l-flex-grow-2 Flex Grow 2
Item 1 Item 2 Item 3
.l-flex-grow-3 Flex Grow 3
Item 1 Item 2 Item 3
.l-flex-grow-4 Flex Grow 4
Item 1 Item 2 Item 3
.l-flex-grow-6 Flex Grow 6
Item 1 Item 2 Item 3

Implementation example:

<div class="l-flex">
	<div class="l-flex-grow-1">Flex Grow 1</div>
</div>

Options:

<div class="l-flex-grow-0">Flex Grow 0</div>
<div class="l-flex-grow-1">Flex Grow 1</div>
<div class="l-flex-grow-2">Flex Grow 2</div>
<div class="l-flex-grow-3">Flex Grow 3</div>
<div class="l-flex-grow-4">Flex Grow 4</div>
<div class="l-flex-grow-5">Flex Grow 5</div>
<div class="l-flex-grow-6">Flex Grow 6</div>

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

Responsive

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


Vertical Align

.u-vertical-align-top

.u-vertical-align-middle

.u-vertical-align-bottom

.u-vertical-align-text-bottom

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

Z-index

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