Responsive
Breakpoints and container widths. The system does not lay your pages out — it gives the same numbers to every component that has to know when it is narrow, so that a table and a sidebar agree on what «narrow» means.
Layout: containers
| Token | Value |
|---|---|
--gr-container-max--gr-container-max | 1280px |
--gr-container-max-2xl--gr-container-max-2xl | 1440px |
--gr-container-padding-mobile--gr-container-padding-mobile | 16px |
--gr-container-padding-tablet--gr-container-padding-tablet | 24px |
--gr-container-padding-desktop--gr-container-padding-desktop | 32px |
Layout: breakpoints
| Token | Value |
|---|---|
--gr-bp-sm--gr-bp-sm | 640px |
--gr-bp-md--gr-bp-md | 768px |
--gr-bp-lg--gr-bp-lg | 1024px |
--gr-bp-xl--gr-bp-xl | 1280px |
--gr-bp-2xl--gr-bp-2xl | 1536px |
Role descriptions ship with the package in Russian and are not shown here yet. Translating them is a decision of its own — see ADR-0003.
Source: @feugene/granularity 0.41.0, tokens/*.json