⚠️ After March 18, 2024, the FastStore documentation will be migrated to the Developer Portal. For more information, access the official release note.

Grid & Layout

Padding, Container, Gaps and Breakpoints definitions.

Padding

Global TokenValue
--fs-grid-paddingvar(--fs-spacing-3)

Container

Global TokenValue
--fs-grid-max-widthvar(--fs-spacing-3)

Gaps

Global TokenValue
--fs-grid-gap-0var(--fs-spacing-1)
--fs-grid-gap-1var(--fs-spacing-2)
--fs-grid-gap-2var(--fs-spacing-3)
--fs-grid-gap-3var(--fs-spacing-4)
--fs-grid-gap-4var(--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 TokenValue
--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")}