Grid

Responsive Utilities

All our web experiences should be built to work on every screen size from 320px to 1140px and larger. To achieve this goal we start by building for the smallest screen size and use responsive utilities (such as media queries and our grid system) to modify the content for larger screens.

Breakpoints

Breakpoints are the different screen widths where the site should respond differently. We use the following breakpoints to adapt mobile content to fit progressively larger screens:


Media Queries

If you are importing the pattern library as the uncompiled Sass files, you can use the media query mixin to modify your CSS for different breakpoints. The mixin generates a media query from a specified breakpoint, optionally ending at bigger breakpoints.

/* Sass media query mixin */

.my-responsive-text {

    /* by default, the text colour is black on every size */
    color: black;

    /* make .my-responsive-text blue when the screen is 544px or larger */
    @include media-query('sm') {
        color: blue;
    }

    /* give .my-responsive-text 20px font-size when the screen is between 544px and 768px */
    @include media-query('sm', 'md') {
        font-size: 20px;
    }

    /* It isn't recommended, but if you need to make a mobile specific style you can do that too. */
    /* give .my-responsive-text an underline when the screen is between 320px and 544px */
    @include media-query('xs', 'sm') {
        text-decoration: underline;
    }
}


Grid system

Our grid system is similar to common grid systems such as Bootstrap or Foundation, but it has a few changes to match our needs. First of all, it uses flexbox, a newer layout specification in CSS that makes certain layouts easier to build.

The grid consists of three elements: containers (.container), rows (.row), and columns.


Grid syntax

The syntax for building a grid is very similar to Bootstrap, but the classes have been renamed to be a bit more consistent with our BEM syntax.


Basic examples

These examples show how to arrange columns to make different layouts for mobile and desktop sizes.

.col--xs-12 .col--md-8
.col--xs-6 .col--md-4

.col--xs-6 .col--md-4
.col--xs-6 .col--md-4
.col--xs-6 .col--md-4

.col--xs-6 .col--md-offset-3

.col--xs-4
.col--xs-4
.col--xs-4
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="container">
    <div class="row">
        <div class="col--xs-12 col--md-8">.col--xs-12 .col--md-8</div>
        <div class="col--xs-6 col--md-4">.col--xs-6 .col--md-4</div>
    </div>
    <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
    <div class="row">
        <div class="col--xs-6 col--md-4">.col--xs-6 .col--md-4</div>
        <div class="col--xs-6 col--md-4">.col--xs-6 .col--md-4</div>
        <div class="col--xs-6 col--md-4">.col--xs-6 .col--md-4</div>
    </div>
    <!-- The right column is offset by 3 columns at the 'md' breakpoint and bigger -->
    <div class="row">
        <div class="col--xs-6 col--md-offset-3">.col--xs-6 .col--md-offset-3</div>
    </div>
    <!-- A row with a background image -->
    <div class="row row--display am-background--grey-light-4">
        <div class="col--xs-4">.col--xs-4</div>
        <div class="col--xs-4">.col--xs-4</div>
        <div class="col--xs-4">.col--xs-4</div>
    </div>
</div>


Horizontal Alignment Options

We provide several convenient row alignment options for spacing columns in different ways.

Row Start

Column
Column
Column

Row Center

Column
Column
Column

Row End

Column
Column
Column

Row Spaces Around

Column
Column
Column

Row Spaces Between

Column
Column
Column
<p>Default Row</p>
<div class="row">
    <div class="col--xs-2">.col--xs-2</div>
    <div class="col--xs-2">.col--xs-2</div>
    <div class="col--xs-2">.col--xs-2</div>
</div>

<p>Row Spaces Between</p>
<div class="row row--xs-between">
    <div class="col--xs-2">.col--xs-2</div>
    <div class="col--xs-2">.col--xs-2</div>
    <div class="col--xs-2">.col--xs-2</div>
</div>

<p>Row Spaces Around</p>
<div class="row row--xs-around">
    <div class="col--xs-2">.col--xs-2</div>
    <div class="col--xs-2">.col--xs-2</div>
    <div class="col--xs-2">.col--xs-2</div>
</div>

<p>Row Start</p>
<div class="row row--xs-start">
    <div class="col--xs-2">.col--xs-2</div>
    <div class="col--xs-2">.col--xs-2</div>
    <div class="col--xs-2">.col--xs-2</div>
</div>

<p>Row Center</p>
<div class="row row--xs-center">
    <div class="col--xs-2">.col--xs-2</div>
    <div class="col--xs-2">.col--xs-2</div>
    <div class="col--xs-2">.col--xs-2</div>
</div>

<p>Row End</p>
<div class="row row--xs-end">
    <div class="col--xs-2">.col--xs-2</div>
    <div class="col--xs-2">.col--xs-2</div>
    <div class="col--xs-2">.col--xs-2</div>
</div>


Vertical Alignment Options

Flexbox also provides us with a way to align columns vertically within a row, whenever the row height is larger than the column content.

Top Aligned Row

Column

Middle Aligned Row

Column

Bottom Aligned Row

Column
<p>Top Aligned Row</p>
<div class="row row--xs-top row--xs-center vertical-alignment-demo">
    <div class="col--xs-6">Column</div>
</div>

<p>Middle Aligned Row</p>
<div class="row row--xs-middle row--xs-center vertical-alignment-demo">
    <div class="col--xs-6">Column</div>
</div>

<p>Bottom Aligned Row</p>
<div class="row row--xs-bottom row--xs-center vertical-alignment-demo">
    <div class="col--xs-6">Column</div>
</div>


Advanced Examples

Here is a quick demo that shows how you can use all the above options for different screen sizes to achieve more complex layouts.

.col--xs will fill any leftover space
.col--xs-2

.col--xs-4 Centered in a row
.col--xs-4

Top-left on desktop, middle-centered on mobile
<div class="row">
    <div class="col--xs">.col--xs will fill any leftover space</div>
    <div class="col--xs-2">.col--xs-2</div>
</div>

<div class="row row--xs-center">
    <div class="col--xs-4">.col--xs-4  Centered in a row</div>
    <div class="col--xs-4 col--md-12">.col--xs-4 .col--md-12</div>
</div>

<div class="row row--xs-middle row--xs-center row--md-start row--md-top vertical-alignment-demo">
    <div class="col--xs-6 col--md-10">
        Top-left on desktop, middle-centered on mobile
    </div>
</div>