Grid

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

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

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:

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>