Responsive design tokens that power Atomix's 12-column grid system, ensuring consistency across all device sizes.
Control your layout transitions with standardized screen widths.
Token Name | Value | Variable |
|---|---|---|
| Breakpoint XS | 0 | var(--atomix-breakpoint-xs) |
| Breakpoint SM | 576px | var(--atomix-breakpoint-sm) |
| Breakpoint MD | 768px | var(--atomix-breakpoint-md) |
| Breakpoint LG | 992px | var(--atomix-breakpoint-lg) |
| Breakpoint XL | 1200px | var(--atomix-breakpoint-xl) |
| Breakpoint XXL | 1440px | var(--atomix-breakpoint-xxl) |
Defining the white space between columns for structured rhythm.
Token Name | Value | Variable |
|---|---|---|
| Spacing 2 | 0.5rem (8px) | var(--atomix-spacing-2) |
| Spacing 3 | 0.75rem (12px) | var(--atomix-spacing-3) |
| Spacing 4 | 1rem (16px) | var(--atomix-spacing-4) |
| Spacing 6 | 1.5rem (24px) | var(--atomix-spacing-6) |
| Spacing 8 | 2rem (32px) | var(--atomix-spacing-8) |
| Spacing 20 | 5rem (80px) | var(--atomix-spacing-20) |
| Spacing 24 | 6rem (96px) | var(--atomix-spacing-24) |
| Spacing 28 | 7rem (112px) | var(--atomix-spacing-28) |
| Spacing 32 | 8rem (128px) | var(--atomix-spacing-32) |
| Spacing 36 | 9rem (144px) | var(--atomix-spacing-36) |
| Spacing 40 | 10rem (160px) | var(--atomix-spacing-40) |
| Spacing 44 | 11rem (176px) | var(--atomix-spacing-44) |
| Spacing 48 | 12rem (192px) | var(--atomix-spacing-48) |
| Spacing 60 | 15rem (240px) | var(--atomix-spacing-60) |
| Spacing 64 | 16rem (256px) | var(--atomix-spacing-64) |
| Spacing 80 | 20rem (320px) | var(--atomix-spacing-80) |
| Spacing 200 | 50rem (800px) | var(--atomix-spacing-200) |
Preview how 12-column layouts respond and utilize gutters.
Tip: Use .u-gap-{0-90} to customize gutter spacing dynamically.