Documentation
Feedback
Guides
Storefront Development

Storefront Development
Grid & Layout

Padding, Container, Gaps and Breakpoints definitions.

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.

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

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")}
Contributors
1
Photo of the contributor
+ 1 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
1
Photo of the contributor
+ 1 contributors
On this page