Work in progress:

• [ ] Guidelines on when/how to use the grid? E.g. page vs. component layout, intrinsic/content based layout.
• [ ] engineering handover helpful? Add "you can spec using S, M, L... breakpoints"?
• [ ] ft-app grid?

Use the grid to layout elements of a page, to aid a sense of cohesion as a user navigates around and between products.

• Our baseline grid is 4px, which our typography and spacing also builds upon.
• Our grid system consists of:
  • 12 columns, of equal size
  • 5 layouts (breakpoints) to support devices of various sizes
  • gutters of variable width, that adjust according to the current layout
  • a maximum page width of 1220px, by default

Layouts

The layouts of our grid system are as follows. It can be helpful to reference these layouts to revaluate a design at varying screen-sizes (viewports).

• Default 240px - …
• Small (S) 490px - 739px
• Medium (M) 740px - 979px
• Large (L) 980px to 1219px
• Extra large (XL) 1220px

However, it is important not to make assumptions about the devices our users are using or the most common screen-size, as these change. It is better to focus on the content of your design and adapt as needed when the space available to the design changes, rather than waiting to hit a specific breakpoint.

Gutters

Our grid gutters are 10px, then 20px on large (L) devices and above.