Grid

Base-8 Grid

The base-8 fluid grid is as the name suggests based on spaces that are multiples of 8px horizontally and vertically. It is fully fluid (up to specified maximums) to provide the optimal presentation of the content at any width.

It is content-driven, device-agnostic, and fully fluid, which allows designers to optimize the content layout at key breakpoints.

Key Features

  • Six responsive breakpoints (XS, S, M, L, XL, XXL)
  • Twelve fluid columns for M, L, XL, XXL
  • Four fluid columns for S
  • Two fluid columns for XS
  • Fixed margins and gutters across all breakpoints

Responsive Breakpoints

SizeViewportColumnsGuttersMargins
XS0-479px28px8px
S480-679px48px8px
M680-959px1216px16px
L960-1167px1216px16px
XL1168-1359px1216px16px
XXL1360px-1456px1216px16px

Designing with Base-8

Designers can use the grid to provide the optimal presentation of their content whether data tables, paragraph copy, galleries, or media. Thus, they may not always need to design every breakpoint.

The recommended design widths below use column widths that are divisible by eight.

Recommended Design widths

SizeViewportRecommended Design Widths
XS0-479px392px
S480-679px584px
M680-959px784px
L960-1167px976px
XL1168-1359px1168px
XXL1360px-1456px1360px

Max widths

The max width of applications such as Simulcast and MMR should be determined by the needs of the content.

SizeViewportContent Type
XS0-479pxAll content types
S480-679pxAll content types
M680-959pxAll content types
L960-1167pxMax for Content pages
XL1168-1359pxMax for Listing pages
XXL1360px-1456pxMax for Landing pages
Paragraphs of body text should not exceed a comfortable reading width, generally no more than 700px when viewing a desktop monitor from a typical distance.