Spacing & Layout
Grid System
12-column grid on desktop, 4-column on mobile/tablet, with 24px gap.
.container max-width: 1128px (desktop), full width (mobile)
.container .row 12-column grid, 24px gap
.col-1 to .col-12 span columns on desktop
.col-1-sm to .col-4-sm override to 4-column mobile grid
Breakpoints
| Mixin |
Range |
@include mobile |
max-width: 540px |
@include tablet |
541px – 1024px |
@include mobiletablet |
max-width: 1024px |
@include tabletdesktop |
min-width: 541px |
@include desktop |
min-width: 1025px |
@include fullwidth_desktop |
min-width: 1400px |
Panel Spacing
- Desktop: 80px top/bottom padding
- Mobile/tablet: 48px top, 24px bottom/sides
- Internal gap between patterns: 24px
Padding Utilities
| Class |
Value |
.p-4 |
4px |
.p-8 |
8px |
.p-12 |
12px |
.p-16 |
16px |
.p-24 |
24px |
.p-32 |
32px |
.p-36 |
36px |
Flex Mixins
| Mixin |
Description |
@include flexcol($gap) |
Flex column with custom gap |
@include flexrow($gap) |
Flex row with custom gap |
@include flexcol16 |
Flex column, 16px gap |
@include flexcol8 |
Flex column, 8px gap |
@include flexrow24 |
Flex row, 24px gap |