Small viewports
Responsive design utilizes breakpoints to adapt layouts across various screen sizes and orientations, from Extra Small (XS) to Extra Large (XL). This approach ensures content remains readable and accessible, enhancing user experience by allowing layouts to fluidly adjust across mobile, tablet, and desktop devices.
For responsive web design, Salt recommends using 5 breakpoints, from Extra Small to Extra Large, to effectively accommodate mobile, tablet, and desktop devices.
*Small and XS is only relevant if using Touch Density on smaller screens.
| Breakpoint | Device | Width (pixels) | Columns | Spacing (margin, gutter, padding) | Fixed grid width | Density |
|---|---|---|---|---|---|---|
| Extra large | Desktop | >1920 | Density dependent | --salt-spacing-300, -200, -100 | 1280px, centered | HD,MD,LD |
| Large | Desktop | 1280-1919 | Density dependent | --salt-spacing-300, -200, -100 | 1280px, centered | HD,MD,LD |
| Medium | Desktop | 960-1279 | Density dependent | --salt-spacing-300, -200, -100 | 100% | HD,MD,LD |
| Small | Tablet, mobile landscape | 600-959 | 2 | --salt-spacing-300, -200, -100 | 100% | TD |
| Extra small | Mobile | 0-599 | 1 | --salt-spacing-300, -200, -100 | 100% | TD |
*Density dependent means the number of columns in a layout changes based on the chosen breakpoint and its density. 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.
Touch Density is recommended for mobile and tablet devices to achieve the best mobile experience and ensure secure touch targets. However, it's not recommended to mix densities within a single product, except for using Touch Density in mobile and tablet views. When breakpoint changes to Small or Extra Small spacing becomes smaller.
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)
*Desktop follows Salt standard header spacing while Touch Density devices go down to header spacing 200, 100. To learn more about the spacing between headers, please refer to the forms pattern page.
We appreciate your thoughts and feedback on any content in the Salt foundations. Please contact us if you have any comments or questions.