Utilizing a responsive layout grid as a basis for design and development provides guidance for placement of components and consistency across devices enhancing user experience across multiple devices.
Terminology
Columns
Content on the page is placed within a 12-column responsive grid. Column width is defined by percentages, so it can change with the size of the grid.
Gutters
Gutters are the spaces between columns. They visually break up content and provide consistent spacing. Gutter widths are fixed values based on breakpoints.
Defining the Grid
Grids within an application can vary depending on the content of the feature. They always have a minimum number of columns defined for each breakpoint.
Breakpoints
Breakpoints are used to define layouts cohesively across multiple device sizes. They are based on minimum viewport widths and scale as the width changes to adjust to screen size.
| Breakpoint | Value (px/ rem) | Columns | Size (%) | Min Margin |
|---|---|---|---|---|
| X-Small | 320/ 20 | 4 | 25 | 4 |
| Small | 576/ 36 | 4 | 25 | 4 |
| Medium | 768/ 48 | 8 | 12.5 | 8 |
| Large | 992/ 62 | 12 | 8.3 | 8 |
| X-Large | 1200/ 75 | 12 | 8.3 | 8 |
| XX-Large | 1600/ 100 | 12 | 8.3 | 8 |
Nested Grids
Smaller grids can be nested within the main grid, when content within a region needs to be structured.
Grid with Panels or Rails
Panels and rails can offset the grid. The width of the component is used as the offset. On smaller screens panels and rails may float on top of the responsive grid. Panels and rails do not adhere to or use the responsive grid for element alignment inside them. They will be defined separately in the modules and layout sections.
Sizing Regions
Regions can house modules (or combinations of basic components) such as content, sidebars, headers, navigation, and footers. These elements should be consistent across products and will be defined in Modus in the modules and layout sections.
Spacing
Spacing is a vital part of visual hierarchy within regions. Spacing is used to align elements within smaller containers in the UI. Trimble uses a baseline spacing of 8px and its multiples (some elements can also utilize an x-small spacing of 4px).
| Spacing Scale | Value (px) | Value (rem) |
|---|---|---|
| X-Small | 4 | 0.25 |
| Small | 8 | 0.5 |
| Medium | 16 | 1 |
| Large | 24 | 1.5 |
| X-Large | 32 | 2 |
| XX-Large | 48 | 3 |