Foundations

Layout

Widths, breakpoints, chrome heights, margins and layers of the page

How each page divides its space. Everything is mobile first, so values only change upwards, with min-width.

Content widths

--content-14401440px

Maximum width of any page

--content-960960px

Wide blocks on the Home

--content-720720px

Running text, about 70 characters per line

Base0 → 479

Mobile480 → 767

Tablet768 → 1023

Header810

Desktop1024 → 1439

Wide1440 →

BaseMobileTabletDesktopWide

Header 810

048076810241440

The Header switches at 810, not 768, because at 768 the navigation did not fit beside the logo.

--header-height64 → 80 px

The top bar

--subheader-height57 px

The playground breadcrumb bar

--sidebar-width240 px

The playground side menu

--page-gutter20 → 24 px

The side margin

--page-end48 → 64 → 80 px

The space before the Footer

--z-header3

Always on top

--z-nav2

Navigation and the drawer

--z-raised1

Anything raised above the page