Адаптивность
Точки останова и ширины контейнеров. Система не раскладывает ваши страницы — она даёт одни и те же числа всем компонентам, которым нужно знать, что стало узко, чтобы таблица и боковая панель понимали «узко» одинаково.
Раскладка: контейнеры
| Токен | Значение | Роль |
|---|---|---|
--gr-container-max--gr-container-max | 1280px | Максимальная ширина layout-контейнера для контентных страниц и shell-структур. |
--gr-container-max-2xl--gr-container-max-2xl | 1440px | Максимальная ширина layout-контейнера для контентных страниц и shell-структур. |
--gr-container-padding-mobile--gr-container-padding-mobile | 16px | Горизонтальный контейнерный отступ для соответствующего breakpoint-сценария. |
--gr-container-padding-tablet--gr-container-padding-tablet | 24px | Горизонтальный контейнерный отступ для соответствующего breakpoint-сценария. |
--gr-container-padding-desktop--gr-container-padding-desktop | 32px | Горизонтальный контейнерный отступ для соответствующего breakpoint-сценария. |
Раскладка: брейкпоинты
| Токен | Значение | Роль |
|---|---|---|
--gr-bp-sm--gr-bp-sm | 640px | Foundation breakpoint sm для адаптивных layout-решений. |
--gr-bp-md--gr-bp-md | 768px | Foundation breakpoint md для адаптивных layout-решений. |
--gr-bp-lg--gr-bp-lg | 1024px | Foundation breakpoint lg для адаптивных layout-решений. |
--gr-bp-xl--gr-bp-xl | 1280px | Foundation breakpoint xl для адаптивных layout-решений. |
--gr-bp-2xl--gr-bp-2xl | 1536px | Foundation breakpoint 2xl для адаптивных layout-решений. |
Источник: @feugene/granularity 0.41.0, tokens/*.json