Responsiveness
A responsive layout makes dynamic changes to the appearance of a product in response to the size of the screen.
Responsiveness provides a fluid and flexible layout that adapts to screen size and offers an optimized experience.
A responsive design changes the layout of elements on the screen (including hiding/showing some elements) based on the size of the screen, e.g. a design will reflow as you resize the browser window to ensure the application remains usable.
A responsive layout is made up of a set of consistently proportioned columns, separated by gutters, and flanked by margins.
Basic layout grids are included in the design system to provide a starting point for designing any user interface.
The gutters and margins are set using --salt-spacing-300 across all densities. The number of columns and their widths vary depending on the density and breakpoint set. Find all you need to know about densities on the Density foundation
| Token | High density (px) | Medium | Low | Touch |
|---|---|---|---|---|
--salt-spacing-300 | 12 | 24 | 36 | 48 |
- Gutters - The gutter is the space between columns.
- Margins - Left and right spacing on the screen are margins.
- Columns - Columns divide the content of the page into various numbers of columns depending on the breakpoint.
In responsive design, a breakpoint is the width at which a layout will adapt in order to provide the best possible user experience.
The number of columns in a layout varies dependent on the breakpoint and the density chosen for that breakpoint. For each combination, the margin and gutter size remains constant, whereas the width of each column will vary as a percentage of the overall width.
| Breakpoint | Width (pixels) | Columns | Margin size | Gutter size |
|---|---|---|---|---|
| Extra Small | 0 - 599 | 2 | --salt-spacing-300 | --salt-spacing-300 |
| Small | 600 - 959 | 4 | --salt-spacing-300 | --salt-spacing-300 |
| Medium | 960 - 1279 | 6 | --salt-spacing-300 | --salt-spacing-300 |
| Large | 1280-1919 | 8 | --salt-spacing-300 | --salt-spacing-300 |
| Extra Large | >1920 | 12 | --salt-spacing-300 | --salt-spacing-300 |
| Breakpoint | Width (pixels) | Columns | Margin size | Gutter size |
|---|---|---|---|---|
| Extra Small | 0 - 599 | 2 | --salt-spacing-300 | --salt-spacing-300 |
| Small | 600 - 959 | 4 | --salt-spacing-300 | --salt-spacing-300 |
| Medium | 960 - 1279 | 6 | --salt-spacing-300 | --salt-spacing-300 |
| Large | 1280-1919 | 8 | --salt-spacing-300 | --salt-spacing-300 |
| Extra Large | >1920 | 12 | --salt-spacing-300 | --salt-spacing-300 |
| Breakpoint | Width (pixels) | Columns | Margin size | Gutter size |
|---|---|---|---|---|
| Extra Small | 0 - 599 | 1 | --salt-spacing-300 | --salt-spacing-300 |
| Small | 600 - 959 | 2 | --salt-spacing-300 | --salt-spacing-300 |
| Medium | 960 - 1279 | 4 | --salt-spacing-300 | --salt-spacing-300 |
| Large | 1280-1919 | 6 | --salt-spacing-300 | --salt-spacing-300 |
| Extra Large | >1920 | 8 | --salt-spacing-300 | --salt-spacing-300 |
| Breakpoint | Width (pixels) | Columns | Margin size | Gutter size |
|---|---|---|---|---|
| Extra Small | 0 - 599 | 1 | --salt-spacing-300 | --salt-spacing-300 |
| Small | 600 - 959 | 2 | --salt-spacing-300 | --salt-spacing-300 |
| Medium | 960 - 1279 | 4 | --salt-spacing-300 | --salt-spacing-300 |
| Large | 1280-1919 | 6 | --salt-spacing-300 | --salt-spacing-300 |
| Extra Large | >1920 | 8 | --salt-spacing-300 | --salt-spacing-300 |
We appreciate your thoughts and feedback on any content in the Salt foundations. Please contact us if you have any comments or questions.