Breakpoints
We have 6 breakpoints, when a layout no longer fits on screen, we introduce smaller breakpoints. Specific Columns, Gutters and Margins are available without each breakpoint. These are available through Figma Foundations as Grid Styles.
|
Name |
Scale |
Max width |
Columns |
Gutters |
Margins |
|---|---|---|---|---|---|
|
Small Mobile |
320-359px |
Fluid |
4 |
24px |
16px |
|
Mobile |
360-512px |
Fluid |
4 |
24px |
16px |
|
Small Tablet |
513-768px |
Fluid |
4 |
24x |
24px |
|
Tablet |
769-1024px |
Fluid |
12 |
24px |
32px |
|
Desktop |
1025-1280px |
Fluid, Max 1224px |
12 |
24px |
48px |
|
Desktop Large |
1281px-∞ |
Fluid |
12 |
24px |
48px |
Columns
We design with 12 columns, as it's easily devisable by 2, 3, 4, and 6. Content spans whole column widths, which won't have defined pixel value in responsive layouts.
Gutters
The empty space between columns, this separates content. If the gap is too great, the perception is content might be be linked.
Margins
The empty space to the left-and-right of the screen. Nothing goes in this area, it acts as intentional white space so text doesn't touch the edge of a display. This typically increases as screen sizes become larger.
Quick start for designers
You don't need to design every breakpoint, search Layout Grid Quick Start in Figma to get these following frames with grids for free. These are the agreed fixed values for Product Designers.
Not in Backpack code
There are many ways to do Columns and Gutters in code, some of which are already live across different parts of Skyscanner. For this reason we won't be offering Columns or Gutters as part of Backpack. Each squad will continue to setup this part of the grid as they see fit.
Furthermore, there will be no grid component made available. Squads should use either flexbox or css-grid to implement the designs using the defined backpack tokens.
