Layout
We use the Bootstrap Layout, Container and Grid System.
To understand in more detail the layout and grid system, review the following documentation:
Layout & Grid
The layout is where all the elements of communication come together. A good layout requires careful planning and use of composition, which relies on principles such as hierarchy, scale, proportion, contrast, harmony, rhythm, repetition, and many more.
In the lab we use Bootstrap 5 as the basis for building our design, a powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system.
Grid Options
.container-*| Name | Breakpoints | Max Width | |
|---|---|---|---|
Extra extra large (xxl) |
>= 1400px | 1320px | |
Extra large (xl) |
>= 1200px | 1140px | Desktop |
Large (lg) |
>= 992px | 960px | |
Medium (md) |
>= 768px | 720px | |
Small (sm) |
>= 576px | 540px | Mobile |
Extra small (xs) NONE |
< 576px | none (auto) |
Grid Gutter Widths
.row .g-*
| Name | Width | Class | |
|---|---|---|---|
| Gutter 0 | 0 | row g-0 | |
| Gutter 1 | 4px | row g-1 | |
| Gutter 2 | 8px | row g-2 | |
| Gutter 3 | 12px | row g-3 | |
| Gutter 4 | 16px | row g-4 | Mobile |
| Gutter 5 | 20px | row g-5 | |
| Gutter 6 | 24px | row g-6 | |
| Gutter 7 | 28px | row g-7 | |
| Gutter 8 | 32px | row g-8 | |
| Gutter 9 | 36px | row g-9 | |
| Gutter 10 | 40px | row g-10 | |
| Gutter 11 | 44px | row g-11 | |
| Gutter 12 | 48px | row g-12 | Desktop |
| Gutter 12 | 48px | row g-12 | Desktop |
| Gutter 13 | 52px | row g-13 | |
| Gutter 14 | 56px | row g-14 |