Breakpoints

Responsive design utilizes breakpoints to adapt layouts across various screen sizes, orientations and web browsers 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.

Desktop devices: On desktop, any density can be applied based on content need. This flexibility allows designers to select the most suitable density, whether for data-heavy or content-light applications.

Mobile and tablet devices: For these devices, touch density is recommended. It ensures optimal touch targets, facilitating easier interaction with the interface using fingers.

Learn more about Salt densities in the density foundation.

BreakpointWidth (px)ColumnsMargin sizeGutter size
Extra Small0 - 5992--salt-spacing-300--salt-spacing-300
Small600 - 9594--salt-spacing-300--salt-spacing-300
Medium960 - 12796--salt-spacing-300--salt-spacing-300
Large1280-19198--salt-spacing-300--salt-spacing-300
Extra Large>192012--salt-spacing-300--salt-spacing-300
BreakpointWidth (px)ColumnsMargin sizeGutter size
Extra Small0 - 5992--salt-spacing-300--salt-spacing-300
Small600 - 9594--salt-spacing-300--salt-spacing-300
Medium960 - 12796--salt-spacing-300--salt-spacing-300
Large1280-19198--salt-spacing-300--salt-spacing-300
Extra Large>192012--salt-spacing-300--salt-spacing-300
BreakpointWidth (px)ColumnsMargin sizeGutter size
Extra Small0 - 5991--salt-spacing-300--salt-spacing-300
Small600 - 9592--salt-spacing-300--salt-spacing-300
Medium960 - 12794--salt-spacing-300--salt-spacing-300
Large1280-19196--salt-spacing-300--salt-spacing-300
Extra Large>19208--salt-spacing-300--salt-spacing-300
BreakpointWidth (px)ColumnsMargin sizeGutter size
Extra Small0 - 5991--salt-spacing-300--salt-spacing-300
Small600 - 9592--salt-spacing-300--salt-spacing-300
Medium960 - 12794--salt-spacing-300--salt-spacing-300
Large1280-19196--salt-spacing-300--salt-spacing-300
Extra Large>19208--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.