Before selecting a layout, review these guidelines:
- Know your use case. Understand how the information on the page will be used.
- Prioritize your content. Organize your content to highlight the most important information.
- Group related content together. Make it efficient for users to work with the content.
Grid
Grids provide a foundation to positioning elements consistently across different device sizes and help to arrange content into structured propositions. Without a grid, layouts would create unpredictable experiences and feel unordered.
By default, we use the industry standard of a 12 Column grid. As the viewports decrease in size, a 12 Column grid is easily dividable into an 8 and 4 column grid. We can organise content sections into evenly spaced vertical columns and divide the given area into half, thirds, fourths, sixths.
Breakpoints
A breakpoint defines a set of screen sizes with distinct layout needs, where the design adapts to fit the screen size and orientation within that range. We have worked with our developer team to come up with the list below that we work to - they don't cater to every possible device or use case. Rather, they serve as a reliable and uniform starting point that can be used for most devices.
Our standard breakpoint sizes
| Breakpoint | Token | Viewport (px) | Container offset (px) | Gutters (px) |
|---|---|---|---|---|
| xs (Extra Small) | breakpoints-xs | <572px | 16 | 16 |
| sm (Small) | breakpoints-sm | 572 – 831px | 16 | 16 |
| md (Medium) | breakpoints-md | 832 – 991px | 16 | 32 |
| lg (Large) | breakpoints-lg | 992 – 1171px | 16 | 32 |
| xl (Extra Large) | breakpoints-xl | 1172 – 1439px | 16 | 32 |
| xxl (Extra, ex Large) | breakpoints-xxl | 1440px + | 16 | 32 |
Containers
Containers form an essential element of our standard layouts as they hold, cushion, and arrange the content to fit within a specific device or viewport.
Depending on the requirement of the product we may need to create more complex layouts that require nested containers. For example, we might use a large container to hold the main content of a page and then use nested containers to hold smaller sections of content within that main container.
Our containers have a mandatory 16px padding on each edge that creates a minimum space between content and the browser.
Our standard container sizes
A visual of our container sizing.