Breakpoints
Responsive design utilizes breakpoints to adapt UI layouts and optimize presentation of information across different application resolutions and orientations. This approach enhances user experience by ensuring content remains readable and accessible.
Salt’s breakpoints and column counts are optimized for the layout of Salt components across each density in desktop and web environments. This helps to ensure that application layout is fit-for-purpose, whether for data-heavy or content-light applications.
Learn more about Salt densities in the Density foundation documentation.
For guidance on breakpoints and column layouts for mobile and tablet devices, see the Small screens documentation.
| Breakpoint | Width (px) | 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 (px) | 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 (px) | 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 (px) | 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 |
Use the Salt Provider component to control the breakpoints you use in your application. Salt provides default breakpoints in its core foundation.
We appreciate your thoughts and feedback on any content in the Salt foundations. Please contact us if you have any comments or questions.