Documentation of media queries, grids, wrappers and layout utility classes.

Files

app/styles/utils/_media.scss
app/styles/layout/_grid.scss
app/styles/tools/_utilities.scss

Media queries

There are three main media queries for screen layouts: S, M, L; and two supplementary media queries XS and XL. Breakpoints for these layouts are described bellow.

Breakpoints

XL
width > 1280px
L
width > 960px
M
width > 640px
S
width > 480px
XS
width > 0px

Mixins

Code:
@include breakpoint(m) {
  ... styles M and up ...
}
@include breakpoint(xl, down) {
  ... styles smaller than XL ...
}
@include breakpoint(s, only) {
  ... styles S only ...
}
@include breakpoint(640px) {
  ... styles 640px and up ...
}
@include breakpoint(1200px, down) {
  ... styles 1200px and down ...
}
@include breakpoint(s, l) {
  ... styles S up and L down (smaller than L, in this case S and M)...
}
@include breakpoint(200px, 400px) {
  ... styles between 200px and 400px ...
}

Wrappers

By default there is one main wrapper class .wrapper-main.

wrapper-main
width: 960px
Code:
<div class='wrapper-main'>
  ...
</div>

Grid

Grid has mobile first design and consists of 12 columns across 5 different media breakpoints XS (default) / S / M / L / XL.

Note

Start by creating horizontal container with a class of .row. Now you can add elements with a class beginning with .col- and specify width of each with .col-[-breakpoint]-[width], where breakpoint is one of s/m/l/xl and width is number 1-12. There is no need to specify the xs breakpoint, because it's default by definition of mobile first philosophy.

Basic column behavior gets applied on any element with class containing .col--. Therefore a .col--m-5 will automatically behave as .col--12 on viewports smaller than M.

Warning

Media queries for layouts are set by min width, so for example stuff for layout M are inherited also in L and XL.

Basic

Example:
XL4L3M512
XL4L6M712
XL4L312
L4M512
L8M712
XL7S612
XL5L612
Code:
<div class="row">
  <div class="col--m-5 col--l-3 col--xl-4"> … </div>
  <div class="col--m-7 col--l-6 col--xl-4"> … </div>
  <div class="col--l-3 col--xl-4"> … </div>
</div>

<div class="row">
  <div class="col--m-5 col--l-4"> … </div>
  <div class="col--m-7 col--l-8"> … </div>
</div>

<div class="row">
  <div class="col--s-6 col--xl-7"> … </div>
  <div class="col--l-6 col--xl-5"> … </div>
</div>

Automatic sizing

In addition to exact sizing, columns can take all available space or just the space they need using .col-[-breakpoint]-fill and .col-[-breakpoint]-shrink

Example:
XS3
Fill all available space
Shrink
Fill all available space
Fill all available space
Fill all available space
Fill all available space
Shrink
Shrink
Shrink
Shrink
Code:
<div class="row">
  <div class="col col--3"> ... </div>
  <div class="col col--fill"> ... </div>
  <div class="col col--shrink"> ... </div>
</div>

<div class="row">
  <div class="col col--fill"> ... </div>
  <div class="col col--fill"> ... </div>
  <div class="col col--fill"> ... </div>
  <div class="col col--fill"> ... </div>
</div>

<div class="row">
  <div class="col col--shrink"> ... </div>
  <div class="col col--shrink"> ... </div>
  <div class="col col--shrink"> ... </div>
  <div class="col col--shrink"> ... </div>
</div>

Alignment

Grid alignment utilities are covered in Utilites section.

Nesting

Rows and columns can be also nested.

Example:
L312
Nested M6Nested 12
Nested M6Nested 12
Code:
<div class="row">
  <div class="col col--l-3"> ... </div>
  <div class="col col--l-9">
    <div class="row">
      <div class="col--m-6"> ... </div>
      <div class="col--m-6"> ... </div>
    </div>
  </div>
</div>

Offsets

Colums can be moved to the right by using classes like .ofst-[-breakpoint]-[width]. You can also center column with class .ofst-[-breakpoint]-center.

Example:
6S5, ofst S1M4, ofst S1L3, ofst S1
12S10, ofst S1L7, ofst L1
12M10L8, center L
Code:
<div class="row">
  <div class="col--6 col--s-5 ofst--s-1 col--m-4 col--l-3">
    ...
  </div>
  <div class="col--2 col--s-10 ofst--s-1 col--l-7 ofst--l-1">
    ...
  </div>
</div>
<div class="row">
  <div class="col--m-10 col--l-8 ofst--l-center">
    ...
  </div>
</div>

Vertical space

Vertical space between rows can be created by using class .row--space.

Example:
12
L6, col L nospaceXS12, col space
L6, col L nospaceXS12, col space
Code:
<div class="row row--l-space">
  <div class="col">
    ...
  </div>
</div>
<div class="row row--l-space">
  <div class="col col--l-6 col--space col--l-nospace">
    ...
  </div>
  <div class="col col--l-6 col--space col--l-nospace">
    ...
  </div>
</div>

Grid layout

Grid layout sizes its children into an evenly spaced layout. Use .grid to set the base styles and add modifiers per breakpoint and number of items in one row .grid-[-breakpoint]-[number]

To add spacing between items use .grid--spaced. You can even break the layout using .col-[-breakpoint]-[width] on any grid item.

Example:
.grid.grid--1.grid--s-2.grid--m-3.grid--l-4
 
 
 
 
 
 
 
 
 
 
 
 

.grid.grid--spaced
 
 
 
 
 
 
 
 
 
 
 
 

 
 
 
 
12
.col--m-8
.col--l-6
 
 
 
 
 
 
Code:
<div class="grid grid--1 grid--s-2 grid--m-3 grid--l-4">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="grid grid--spaced grid--1 grid--s-2 grid--m-3 grid--l-4">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>