Layout
beta

Our grid system is based on the Bootstrap CSS library. Please read the Boostrap source documentation thoroughly. The grid system allows us to create responsive layouts by rerranging content depending on the width of the viewport (aka, the browser window.)

Each page or template must include at least one section, a semantically correct element which holds the grid structure. Semantic tags are important to good communication between the markup and the browser, essential for accessibility, especially screen readers, and also extremely useful for developers to understand, find, and modify the content within the markup. Semantic tags are:

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

Everything in the grid is held in a container. The container sets a maximum width of 1200px and a minimum width of 320px. It has left and right padding of 20px on mobile (< 768px) and 10px on larger devices (≥ 768px).

The blue box represents a container.

desktop_windows Desktop view with 10px left and right padding

10px padding left
10px
10px padding right
10px

phone_iphone Mobile view with 20px left and right padding

20px padding left
20px
20px padding right
20px

A column is the most basic unit of our grid. It can be any height; its width depends on the size of the device and the number of columns per row.

The purple box represents a column.

Each column has padding of 10px on the left and right sides called a gutter.

Each cyan side represents a gutter.

10px padding left
10px
10px padding right
10px

Columns are contained in a row. The columns get wider or narrower depending on how many there are in a row. A row can contain 1, 2, 3, 4, 6, 8, 9, or 12 columns. (The Design Language also supports a 5-column grid system, read more here. A row also has negative margins on either side, so that it spans the full width of the container.

1
2
3
4
5
6
7
8
9
10
11
12
container
row
column
gutter
 

Breakpoints are the exact viewport widths where the grid will reflow.

Breakpoint Class name Mixin
Extra small (viewport < 768px) class="col-xs-[*]" No mixin
Small (viewport ≥ 768px) class="col-sm-[*]" @include breakpoint-sm {}
Medium (viewport ≥ 992px) class="col-md-[*]" @include breakpoint-md {}
Large (viewport ≥ 1200px) class="col-lg-[*]" @include breakpoint-lg {}
* number of columns (between 1-12) See SCSS styling for an example.

Click on an icon to see different breakpoints. The column classes are listed above each grid. The active class for the current breakpoint is bold.

done

The column classes describe how many columns they will span per breakpoint in the format of col–[breakpoint]–[number].

<div class="col-xs-12 col-sm-6">

A col-xs-12 class will span 12 columns at the extra-small breakpoint, less than 768 pixels. A col-sm-6 class describes a column that will span 6 columns at the small breakpoint, which is greater than or equal to 768 pixels. Since there is no larger breakpoint, (md or lg) this applies to all devices greater than or equal to 768 pixels.

In the following example, there is a row with a single column that spans all 12 columns at all breakpoints which contains a header. Beneath that is a row that contains 2 side-by-side columns that each span 6 columns on the small (and larger) breakpoints. On mobile, the extra-small breakpoint, there are 2 full width columns, one above the other. Click the mobile and desktop icons to see this in action. Note that the code stays the same.

Some header
Column 1…
Column 2…
done

In the following example, there is a row with a single column that spans all 12 columns at all breakpoints which contains a header. Beneath that is a row that contains 4 side-by-side columns that each span 3 columns on the small (and larger) breakpoints. On mobile, the extra-small breakpoint, there are 2 half-width columns, that each span 6 columns, one above the other. Click the mobile and desktop icons to see this in action. As in the example above, note that the code stays the same.

Some header
Column 1…
Column 2…
Column 3…
Column 4…
done

Nesting a container within another container will cause alignment issues, especially across breakpoints. A row class especially needs a container class, because the negative margins of the row compensates for the padding of the container.

close

The row class provides negative padding that ensures all content is aligned. Columns without a row class will not be aligned correctly and will reflow in unexpected ways.

close

Every column or group of columns must be contained in its own row class, including nested columns.

close

If you look at the code of the common complex layout below, you will notice that it is formatted in the following order:

  1. Main header <header>
  2. Main navigation content <nav>
  3. Main <main>
    1. Main actions and information <div class="main-actions...">
    2. Some information <div class="some-info...">
    3. Extra <div class="extra...">
  4. Main footer content <footer>

On a larger device, the design calls for the "Main actions and information" area to be in the middle, flanked by "Some information" and "Extra". However, on mobile, the content will appear in the order above. Rather than trying to reorder the columns on the extra-small breakpoint, the layout is achieved through column ordering on the larger breakpoint, so the content flows naturally on the extra-small, (mobile) breakpoint. The markup is mobile-first.

Main header
Main navigation content
Main actions and information
Buying and Selling
[Content…]
Research
[Content…]
Some information
Info 1
[Content…]
Info 2
[Content…]
Info 3
[Content…]
Extra
Cool stuff
Exciting news
Trading info
More cool stuff
done

SCSS styling must also be mobile first. A mobile device (with potentially less bandwidth), will ignore all breakpoints except for its own. The xs breakpoint, is not used because any styles outside the larger breakpoints are the mobile styles, making it mobile first.

done

A mobile device will read only the following:

close

A mobile device will read the following:

Easily change the order of grid columns per breakpoint with col-[breakpoint]-push-[column-number] and col-[breakpoint]-pull-[column-number] modifier classes.

Eg. col-xs-push-6 col-xs-6 pushes col-xs-6 over 6 columns at the extra small breakpoint, and col-xs-pull-6 col-xs-6 pulls col-xs-6 6 columns to the left at the extra small breakpoint. Since no other breakpoints are used, this behavior is across all viewports.

Column One
Column Two
done

Move columns to the right using col-[breakpoint]-offset-[number-of-columns] classes. These classes increase the left margin by [number-of-columns].

Eg. .col-xs-offset-8 moves .col-xs-4 over eight columns.

Offset by 8 columns
done

Centered columns are an easy way to create centered layouts across all breakpoints. They must be an even number of columns, between 2 and 10. Use the class as you would any other column class, inside a row which is inside a container.

Number of columns per breakpoint:
Extra small devices
Phones (<768px)
Small devices
Tablets (≥768px)
Medium devices
Desktops (≥992px)
Large devices
Desktops (≥1200px)
col-centered-10 12 columns 12 columns 10 columns 10 columns
col-centered-8 12 columns 10 columns 8 columns 8 columns
col-centered-6 12 columns 8 columns 6 columns 6 columns
col-centered-4 12 columns 6 columns 4 columns 4 columns
col-centered-2 12 columns 4 columns 2 columns 2 columns
Col centered 10
Col centered 8
Col centered 6
Col centered 4
Col centered 2

Limitations of the 12-column grid make it impossible for 5 columns to take the entire width of a row with five evenly distributed columns.

(The Design Language also supports a 5-column grid system, read more here.)