Breakout

Breakpoint utility classes allow you make an element's width 'breakout' of its parent container and stretch the full width of the viewport. This is mainly used to give content more room to breath on smaller screens by having its width edge to edge of the viewport, bypassing any margins of parent containers.

Source

Contributors

Base

Standard

I'm breaking out of my parent container.

<div class="o-layout u-flex-center">
	<div class="o-layout__item u-width-6/12">
		<div class="o-box u-p-small c-box">
			<div class="o-box u-p-small c-box is-positive u-breakout u-align-center">
				I'm breaking out of my parent container.
			</div>
		</div>
	</div>
</div>

Responsive

Responsive breakout classes are the most commonly used, as this type of behaviour is useful on devices with smaller screens. The below example show a 2 column layout, which up until the sm breakpoint, have breakout behaviour applied so they have the maximum amount of viewport space available to them.

Content

<div class="o-container">
	<div class="o-layout u-flex-center">
		<div class="o-layout__item u-width-12/12 u-width-6/12@md">
			<div class="o-box u-p-small c-box u-breakout@max-sm u-align-center">
				Content
			</div>
		</div>
		<div class="o-layout__item u-width-12/12 u-width-6/12@md">
			<div class="o-box u-p-small c-box u-breakout@max-sm u-align-center">
				Content
			</div>
		</div>
	</div>
</div>