Small screens
Touch density is recommended for mobile and tablet devices to ensure secure touch targets and achieve the best mobile experience. Salt doesn’t recommend mixing densities within a single product, except for dynamically switching to Touch density in mobile and tablet views.
The number of columns and the size of gutters and margins in Salt’s breakpoints are designed to optimize the layout of Salt components in a desktop environment. Salt’s standard breakpoints don't consider small mobile and tablet screen sizes.
To effectively use Touch density on small screens, we recommend using alternative spacing tokens for gutters and margins across the Touch density breakpoints.
| Breakpoint | Width (pixels) | Columns | Margin size | Gutter size |
|---|---|---|---|---|
| Extra small | 0-599 | 1 | --salt-spacing-100 | --salt-spacing-100 |
| Small | 600-959 | 2 | --salt-spacing-200 | --salt-spacing-200 |
| 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 |
When breakpoint changes to Small or Extra Small, the margin and gutter size becomes smaller. This ensures more content can be displayed as the screen size becomes smaller.
*For XL and L breakpoints, a centered content area with a max width of 1280px can improve the reading experience of your content.
For more information on how to adjust typography and spacing for designing with Touch Density on smaller screens, please refer to this blog post. (Internal users only)
Use the Salt Provider component to control the density used when your application is displayed on a specific device.
We appreciate your thoughts and feedback on any content in the Salt foundations. Please contact us if you have any comments or questions.