For laying out Threshold interfaces to achieve easy responsiveness and scaling, we use a 12 column grid for tablet and desktop screens. For mobile, we use a 4 column grid.
In the Threshold product, there's an expandable and collapsible sidebar. When there’s a side menu or sidebar, offset the grid so as not to not include the space occupied by the menu to ensure the interface area is centered in the rest of the screen.
On desktop and tablet screens, opening the sidebar expansion will adjust the content of the screen.
On mobile, the menu is at the top of the screen, and will open over top of page content.
The following are the screenwidth breakpoints that we design for in the Threshold responsive system. These are based on Chakra breakpoints.
Based on Chakra breakpoint 2XL - 1536px (96em)
Based on Chakra breakpoint XL - 1280px (80em)
Based on Chakra breakpoint L - 992px (62em)
Based on Chakra breakpoint M - 768px (48em)
Based on Chakra breakpoint S - 480px (30em)