Grid
Clear layouts allow users to understand and navigate content quickly and easily. Use these guidelines to create intuitive web layouts.
Overview
The Forge responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts. Forge layouts are built on a 12 column grid, with columns, gutter, and margin.
Parts
Gutter
Gutters are the spaces between columns. They help separate content.
Use 16px or 24px between columns as standard gutters.
Margin
Margins are the space between content and the left and right edges of the screen.
Margin widths are defined as fixed values at each breakpoint range. To better adapt to the screen, the margin width can change at different breakpoints. Wider margins are more appropriate for larger screens, as they create more whitespace around the perimeter of content.
On a small tablet this layout grid uses 24px margins.
On a small tablet this layout grid uses 16px margins.
Responsive breakpoints
Forge provides responsive layouts based on the following column structures. Layouts using 4-column, 8-column, and 12-column grids are available for use across different screens, devices, and orientations. Each breakpoint range determines the number of columns, and recommended margins and gutters, for each display size.
| Breakpoint range | Window | Columns | Margins / gutters |
|---|---|---|---|
| 360 - 599 | xsmall | 4 | 16 |
| 600-719 | small | 8 | 16 |
| 720-839 | small | 8 | 24 |
| 840-1023 | small | 12 | 24 |
| 1024 - 1439 | medium | 12 | 24 |
| 1440 - 1919 | large | 12 | 24 |
| 1920+ | xlarge | 12 | 24 |
Content max-width
Max-widths are recommended for desktop apps to create focus on a page and facilitate cognitive fluency and readability (Baymard Institute, “Typographie”, E. Ruder; Song, Hyunjin, and Norbert Schwarz; How Cognitive Fluency Affects Decision Making, UX Matters).
Your app's max width will depend on its content.
| Content type | Recommnded max-width | Content examples |
|---|---|---|
| Simple, single column | 960px | Detail views, data tables, steppers / process screens |
| Multi column | 1040px | Dashboards, complex detail pages |
| Complex layouts | 1280px | Complex or back office dashboard screens, data heavytables |
No. White space can be a great tool to balance design elements, create room to breathe, lower the perceived density of content, feature elements on the page to stand out, and guide the eye to create focus. Overall, designs with more white space are quicker to mentally process and understand, perceived as “less busy,” and are generally more aesthetically pleasing (The power of white space, IDF).
The 4px grid
Forge components are built on an 4px grid. Our minimum unit of 4 x 4 pixels drives how column layouts are determined, how elements are designed, and how components interact with each other.
Grid systems are used to create layouts with a uniform and consistent structure. The goal is to yield predictable flexibility with the least amount of assets and rules.