Overview
Sage responsive design guidelines help you create flexible, device-agnostic layouts using Design System components. Read about our responsive approach here before learning how to use Layout (flexbox) and Spatial markup in your designs.
Adopt a small-space-first approach
- Consider the available space rather than the screen size or device type.
- For each component that you use on your page, start with the smallest space the component fits in.
- Select the appropriate component breakpoint for the space.
- Stretch the component until the design breaks, select a new breakpoint, and design for the larger space.
- Define a maximum width when it no longer makes sense for the component to scale beyond a certain size.
- Use grids at component and layout level to create spatial relationships between content. Nest the grids if necessary.
- Use the smallest number of grid columns to create visual ratios for content. For example:
- For a 2-column layout with a 2:1 ratio, use a 3-column grid.
- For a 2-column layout with a 3:2 ratio, use a 5-column grid.
- For a 3-column layout with a 1:4:1 ratio, use a 6-column grid.
- Grids can have different column counts and ratios at different breakpoints.
- Use rem-based padding inside columns instead of gutters between grid columns.
- Use tables for tabular data only.
- Use tables when the user needs to scan columns for comparison.
- Allow horizontal scrolling.
- For wide tables, lock a label column on the left for reference.
- As an alternative to a table, use tiles or cards to lay out each row of data in the available space.
- Where possible, use a list instead of a table.
Until container queries are available, the layout automatically responds to screen size only. You can still set breakpoints for components based on how they fit into the overall layout.
Use grids
Create responsive tables
Consider the following when designing small-space-first tables:
