Grid & Layout
Padding, Container, Gaps and Breakpoints definitions.
Padding
| Global Token | Value |
|---|---|
--fs-grid-padding | var(--fs-spacing-3) |
Container
| Global Token | Value |
|---|---|
--fs-grid-max-width | var(--fs-spacing-3) |
Gaps
| Global Token | Value |
|---|---|
--fs-grid-gap-0 | var(--fs-spacing-1) |
--fs-grid-gap-1 | var(--fs-spacing-2) |
--fs-grid-gap-2 | var(--fs-spacing-3) |
--fs-grid-gap-3 | var(--fs-spacing-4) |
--fs-grid-gap-4 | var(--fs-spacing-5) |
Breakpoints
The following tokens are used as a mirror for the breakpoint system, and they can be used to create a component that has a width related to it (see Modal --fs-modal-max-width as an example).
⚠️
We do not recommend to change theses tokens, if you want to override these sizing system, check the Mixins & Breakpoints page.
$breakpoints: (
"phone": 320px,
"phonemid": 375px,
"tablet": 768px,
"notebook": 1280px,
"desktop": 1440px,
);| Global Token | Value |
|---|---|
--fs-grid-breakpoint-phone | #{map-get($breakpoints, "phone")} |
--fs-grid-breakpoint-phonemid | #{map-get($breakpoints, "phonemid")} |
--fs-grid-breakpoint-tablet | #{map-get($breakpoints, "tablet")} |
--fs-grid-breakpoint-notebook | #{map-get($breakpoints, "notebook")} |
--fs-grid-breakpoint-desktop | #{map-get($breakpoints, "desktop")} |