Containers

Containers are used to wrap and constrain our site's contents.

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

Basic Containers

The basic .l-container class simply adds padding and centers itself.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="l-container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

If you wish to use a container without padding, add the .l-container--flush class.

<div class="l-container  l-container--flush">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Container Sizes

To control the maximum width of the container, we use size modifiers.

Note: Some of the larger containers are constrained by the style guide.

<div class="l-container  l-container--xsmall">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div class="l-container  l-container--small">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div class="l-container  l-container--medium">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div class="l-container  l-container--large">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div class="l-container  l-container--xlarge">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div class="l-container  l-container--super">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Responsiveness

Each container can also be applied at certain screen sizes. .l-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.

This container will change size depending on the viewport width.

<div class="l-container  l-container--xsmall@small  l-container--small@medium  l-container--medium@large  l-container--large@xlarge">
    <p>This container will change size depending on the viewport width.</p>
</div>

Grids

Grids are an easy way to produce a fluid responsive layout. They're easy to use and very flexible.

color key:

grids are pink
grid cells are blue

Note: Ignore the .sg-grid classes. These are just used to add borders.

Basic Grid

Use the .l-grid class to wrap your .l-grid__item elements.

first

second

third

<div class="l-grid  sg-grid">
    <div class="l-grid__item">first</div>
    <div class="l-grid__item">second</div>
    <div class="l-grid__item">third</div>
</div>

Widths

Use fraction class such as 1/3 to apply widths to grid items. If you add a width to one cell the other cells will automatically take up the rest of the space equally.

first

second

third

<div class="l-grid  sg-grid">
    <div class="l-grid__item  1/2">first</div>
    <div class="l-grid__item">second</div>
    <div class="l-grid__item">third</div>
</div>

Nesting

You can nest grids inside cells with ease...with nesting you're into advanced territory!

first

second

third

fourth

fifth

<div class="l-grid  sg-grid">
    <div class="l-grid__item">
        <div class="l-grid  sg-grid">
            <div class="l-grid__item">first</div>
            <div class="l-grid__item">second</div>
        </div>
        <div class="l-grid  sg-grid">
            <div class="l-grid__item">third</div>
            <div class="l-grid__item">fourth</div>
        </div>
    </div>
    <div class="l-grid__item">fifth</div>
</div>

Vertical Alignment

If one of your cells is tall you can apply a vertical alignment modifier class to the grid.

.l-grid--top, .l-grid--middle and .l-grid--bottom are supported.

first

second

third

fourth
fourth
fourth
fourth
fourth

<div class="l-grid  l-grid--bottom  sg-grid">
    <div class="l-grid__item">first</div>
    <div class="l-grid__item">second</div>
    <div class="l-grid__item">third</div>
    <div class="l-grid__item">
        fourth
        <br>fourth
        <br>fourth
        <br>fourth
        <br>fourth
        <br>
    </div>
</div>

You can override the vertical alignment of all the cells in the grid by specifying per cell.

.l-grid__item--top, .l-grid__item--middle and .l-grid__item--bottom are supported.

first

second

third

fourth
fourth
fourth
fourth
fourth

<div class="l-grid  l-grid--bottom  sg-grid">
    <div class="l-grid__item  l-grid__item--top">first</div>
    <div class="l-grid__item  l-grid__item--middle">second</div>
    <div class="l-grid__item">third</div>  <!-- the l-grid pushes this cell down  -->
    <div class="l-grid__item">
        fourth
        <br>fourth
        <br>fourth
        <br>fourth
        <br>fourth
        <br>
    </div>
</div>

Responsiveness

This grids provides you with widths to suit a number of breakpoints designed around content widths of a size you specify. Out of the box, this grid caters to the following breakpoints: @xsmall, @small, @medium, @large, @xlarge, and @super.

In this example, as the viewport increases in size the cells go from 100% wide to 33% wide one after another, rather than all at once. The suffixes apply to the screen sizes and up, in a mobile first manner.

first

second

third

<div class="l-grid  sg-grid">
    <div class="l-grid__item  1/1  1/3@small">first</div>
    <div class="l-grid__item  1/1  1/3@medium">second</div>
    <div class="l-grid__item  1/1  1/3@large">third</div>
</div>

Gutters

.l-grid--flush will remove the negative margin on .l-grid elements and padding on .l-grid__item elements.

first

second

third

<div class="l-grid  l-grid--flush  sg-grid">
    <div class="l-grid__item">first</div>
    <div class="l-grid__item">second</div>
    <div class="l-grid__item">third</div>
</div>

If you simply want to remove the padding on a single item, use .l-grid__item--flush.

first

second

third

<div class="l-grid  sg-grid">
    <div class="l-grid__item">first</div>
    <div class="l-grid__item">second</div>
    <div class="l-grid__item  l-grid__item--flush">third</div>
</div>