Layout
Ensures content to be appropriately rendered in all screen sizes.
Overview
A layout includes a set of rules for space, grid and navigation adapted for most mediums and browsers.
We currently support 3 breakpoint sizes sm, md, lg
The md breakpoint will be soon deprecated.
Apply only sm and lg sizes
How to use it
Apply spacing tokens around the main area, accordingly to the breakpoint size
Grids are meant to provide a simple design guidance. A web grid with flex and other css behaviours are not included.
sm and smaller
Columns: 4
Gutter: 16px
sm
Columns: 12
Gutter: 16pxCenter the grid when a max-width has been set up for the page.
Recommended values are
600pxor800pxto increase readability.
600px
800pxFor larger screen sizes, apply
1440pxas a max width to center the grid. Avoid❌ In the example below, the entire container of cards would require to take the grid fully centred.
1440pxApply the accurate components to each breakpoint
The top-bar for sm or smaller breakpoints
The app-bar and drawer above sm and larger breakpoints
Best practices
Get mobile first
Start designing for smaller screens to increase scalability for larger screens
Pixel perfect does not exist
Focus on the surfaced information by relying on harmonic spacing and fluid layouts
Let it breathe
Use space to provide room to digest information and time to think
Last updated
Was this helpful?