Layout Grids are the collective term for breakpoints, margins, columns and gutters. They help build consistent designs, and form a familiar experience for travellers.
Table of contents
- Breakpoint and Margins
- For Engineers
- For Designers
- Grid Styles in Figma
- What is, and isn't in Backpack
When layouts no longer work on screen, we introduce breakpoints. We have 6 breakpoints.
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.
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.
The empty space between columns, this separates content. If the gap is too great, the perception is content might be be linked.
Breakpoint and Margins
|Name||Scale||Margins||Scale in rems|
|Desktop Large||1281px +||48px||80.063rem +|
Backpack breakpoints on Web are available as mixins in Sass or in the BpkBreakpoint component.
- To use Backpack breakpoints in Sass, have a look at our Sassdoc breakpoints mixins page
- To use the BpkBreakpoint component, have a look at our BpkBreakpoint component page
Layout grid margins are meant to be used as the empty space to the left-and-right of the screen. You should be using these in the form of tokens. For a full list of layout grid margin tokens, have a look at our tokens page.
If you're designing new screens, we can use Columns and Gutters in addition to set Breakpoints and Margins. These are available through Figma Foundations as Grid Styles.
Grid Styles in Figma
|Name||Scale||Column Type||Columns||Gutters||Margins||Max Width|
|Desktop Large||1281px +||Stretch||12||24px||48px||Fluid, or 1224px|
What is, and isn't in Backpack
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.