Containers

Containers provide media query screen width restrictions on your content.

<div class="o-container o-container--xsmall"></div>
<div class="o-container o-container--small"></div>
<div class="o-container o-container--medium"></div>
<div class="o-container o-container--large"></div>
<div class="o-container o-container--xlarge"></div>
<div class="o-container o-container--super"></div>

Container sizes

Containers work off the screen size variables:

$screen-width-xsmall:  20em;
$screen-width-small:   30em;
$screen-width-medium:  48em;
$screen-width-large:   64em;
$screen-width-xlarge:  78em;
$screen-width-super:   116em;

Responsiveness

Each container can also be applied at certain screen sizes. .o-container--small@large for example will restrict the horizontal width to small when the viewport has a large or more width. Each size container has an xsmall, small, medium, large, xlarge and super responsive suffix.

.o-container--xsmall

.o-container--small

.o-container--medium

.o-container--large

.o-container--xlarge

.o-container--super