Grid

The SCSS variables for modifying breakpoints can be found in _brand.scss file, in the "Grid" section.

Minimum viewport width is 320px - it can be adjusted in "Layout" section.

Breakpoints

There are 4 breakpoints used across the site: small, medium, large and xlarge.
  • Small breakpoint: Small, scss variable: 640px (40em)
  • Small breakpoint: Medium, scss variable: 1024px (64em)
  • Small breakpoint: Large, scss variable: 1280px (80em)
  • Small breakpoint: xLarge, scss variable: 1920px (120em)
Breakpoints are usually applied through SCSS interpolation (#{}) and predefined variables with media arguments. For example, @media #{$medium-up}.
  • Medium up, scss variable: $medium-up ("only screen and (min-width: 40.0625rem)")
  • Medium down, scss variable: $medium-down ("only screen and (min-width: 64rem)")
  • Large up, scss variable: $large-up ("only screen and (min-width: 64.0625rem)")
  • xLarge up, scss variable: $xlarge-up ("only screen and (min-width: 80.0625rem)")
  • xxLarge up, scss variable: $xxlarge-up ("only screen and (min-width: 120.0625rem)")

Grid Preview

XXLarge grid midpoint width: 2880px

  • This box takes up 3 columns, resize your browser to see other breakpoints.
  • The XXL grid consists of 12 columns. It never falls below 1921px, including the left and right-hand margins.
  • At 2880px wide, each column is 211px. The margins are 64px. Like all other sizes, the gutters are 20px wide. Vertical rhythm and spacing are also 20px.

XLarge grid midpoint width: 1824px

  • This box takes up 5 columns, resize your browser to see other breakpoints.
  • The XL grid consists of 12 columns. It never exceeds 1920px and never falls below 1441px, including the left and right-hand margins.
  • At 1824px wide, each column is 80px. The margins are 50px. Like all other sizes, the gutters are 20px wide. Vertical rhythm and spacing are also 20px.

Large grid midpoint width: 1280px

  • This box takes up 4 columns, resize your browser to see other breakpoints.
  • The large grid consists of 12 columns. It never exceeds 1440px and never falls below 1025px, including the left and right-hand margins.
  • At 1280px wide, each column is 80px. The margins are 50px. Like all other sizes, the gutters are 20px wide. Vertical rhythm and spacing are also 20px.

Medium grid midpoint width: 768px

  • This box takes up 6 columns, resize your browser to see other breakpoints.
  • The medium grid consists of 12 columns. It never exceeds 1024px and never falls below 641px, including the left and right-hand margins.
  • At 768px wide, each column is 40px. The margins are 34px. Like all other sizes, the gutters are 20px wide. Vertical rhythm and spacing are also 20px.

styleguide.grid.size.title.maximum

  • styleguide.grid.size.boxWidth
  • styleguide.grid.size.description.1.largest
  • styleguide.grid.size.description.2