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 all densities, ensuring responsive design for desktop as well as mobile and other smaller devices. This helps ensure your application layout is fit-for-purpose, whether for data-heavy or content-light use cases.
| Breakpoint | Width (px) | Columns |
|---|
| Extra Small | 0 - 599 | 2 |
| Small | 600 - 959 | 4 |
| Medium | 960 - 1279 | 6 |
| Large | 1280 - 1919 | 8 |
| Extra Large | >1920 | 12 |
| Breakpoint | Width (px) | Columns |
|---|
| Extra Small | 0 - 599 | 2 |
| Small | 600 - 959 | 4 |
| Medium | 960 - 1279 | 6 |
| Large | 1280 - 1919 | 8 |
| Extra Large | >1920 | 12 |
| Breakpoint | Width (px) | Columns |
|---|
| Extra Small | 0 - 599 | 1 |
| Small | 600 - 959 | 2 |
| Medium | 960 - 1279 | 4 |
| Large | 1280 - 1919 | 6 |
| Extra Large | >1920 | 8 |
| Breakpoint | Width (px) | Columns |
|---|
| Extra Small | 0 - 599 | 1 |
| Small | 600 - 959 | 2 |
| Medium | 960 - 1279 | 2 |
| Breakpoint | Width (px) | Columns |
|---|
| Extra Small | 0 - 599 | 1 |
| Small | 600 - 959 | 2 |
| Medium | 960 - 1279 | 4 |
| Large | 1280 - 1919 | 6 |
| Extra Large | >1920 | 8 |
We appreciate your thoughts and feedback on any content in the Salt foundations. Please contact us if you have any comments or questions.