Quality gate
Адаптивность композиций
Переход композиции между desktop, tablet и mobile без механического сжатия компонентов.
Interactive preview
Композиция перестраивается, а не уменьшается
Выберите viewport: меняются порядок, плотность, sidebar и действия.
Hero
Понятный маршрут для семьи
Heading, lead, proof and action.
Media
Desktop · 12 columns · split hero · 3-up grid · sticky aside
Transformation rules
Что именно меняется между breakpoint
- 12 → 8 columns
- Navigation сокращается
- 3-up grid может стать 2-up
- Aside сужается или становится inline
- 8 → 4 columns
- Split hero становится single flow
- Media order определяется смыслом
- Sticky элементы возвращаются в поток
- No bidirectional scroll
- Touch targets остаются доступными
- Actions wrap без clipping
- Reading order сохраняется
Viewport matrix
Минимальная проверка
| Viewport | Grid | Navigation | Cards | Sticky |
|---|---|---|---|---|
| 320 | 4 / 16px | Drawer | 1-up | In-flow |
| 375 | 4 / 16px | Drawer | 1-up | Safe-area action optional |
| 768 | 8 / 20px | Compact | 2-up | Selective |
| 1024 | 8–12 / 24px | Full/compact | 2–3-up | Allowed |
| 1280–1920 | 12 / max widths | Full | 3–4-up | Allowed |
No overflow
Document-level horizontal scroll недопустим
Локальный overflow разрешён только внутри явно обозначенного comparison/table scroller с keyboard-доступом и визуальной подсказкой.