🎉 We are thrilled to introduce FastStore v2. If you are looking for documentation of the previous version of FastStore, please refer to FastStore v1.

Grid & Layout

Padding, Container, Gaps and Breakpoints definitions.


Global TokenValue


Global TokenValue


Global TokenValue


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