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.


_10$breakpoints: (
_10  "phone":         320px,
_10  "phonemid":      375px,
_10  "tablet":        768px,
_10  "notebook":      1280px,
_10  "desktop":       1440px,
_10);

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")}`