gromov/figma-adaptive-standards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sync

Browse Source
This commit is contained in:
S. Gromov
2026-01-13 16:46:32 +03:00
parent af78b83cc4
commit c8318bdf1d
3 changed files with 22 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
adaptive-layout-requirements.full.md
View File

@@ -58,19 +58,20 @@
## 2. Брейкпоинты и адаптивность
### 2.1. Якорные брейкпоинты (база)
| Версия | Базовая ширина | Диапазон |
|---------|----------------|---------------|
| Mobile | 375 px | 320 – 768 px |
| Tablet | 768 px | 768 – 1024 px |
| Laptop | 1024 px | 1024 – 1440 px|
| Desktop | 1440 px | 1440 – 1920 px|
| Версия | Базовая ширина | Диапазон |
|-------------|----------------|---------------|
| Mobile | 375 px | 360 – 479 px |
| Mobile Wide | 560 px | 480 – 767 px |
| Tablet | 992 px | 768 – 1023 px |
| Laptop | 1280 px | 1024 – 1439 px|
| Desktop | 1640 px | 1440 – 1920 px|
Требования:
- Каждый брейкпоинт — отдельный **Frame** (Screen Frame).
- Диапазоны рассматриваются как **интервалы ресайза**: макет должен работать от min до max.
- Все брейкпоинты должны быть **логически и визуально связаны**: типографика, сетка, шаги отступов и компоненты должны «эволюционировать», а не пересобираться хаотично.
> Примечание про границы: пересечение на значении 768/1024/1440 трактуется как «порог» — допустимы оба варианта, но в проекте должно быть принято единое правило (например: `Mobile < 768`, `Tablet ≥ 768`).
> Примечание про границы: диапазоны заданы без пересечений. Пороговые значения: 480/768/1024/1440. Пример правила: `Mobile ≤ 479`, `Mobile Wide 480–767`, `Tablet 768–1023`, `Laptop 1024–1439`, `Desktop ≥ 1440`.
### 2.2. Когда допустимо менять список брейкпоинтов
Базовый набор можно корректировать **только** при объективной необходимости:
@@ -253,7 +254,7 @@ Text Styles должны быть **семантическими** (а не «п
Обязательная структура:
- есть коллекция Variables для типографики (например: `Typography`);
- в коллекции заведены Modes под брейкпоинты (например: `Mobile`, `Tablet`, `Laptop`, `Desktop` — в точности как принято в проекте);
- в коллекции заведены Modes под брейкпоинты (например: `Mobile`, `Mobile Wide`, `Tablet`, `Laptop`, `Desktop` — в точности как принято в проекте);
- для каждого семантического стиля (`H1/H2/Body/...`) определены переменные минимум для:
- `font-size`;
- `line-height`;
@@ -261,7 +262,7 @@ Text Styles должны быть **семантическими** (а не «п
Обязательное правило применения:
- Text Styles используют эти переменные как значения типографики;
- у каждого фрейма экрана выставлен корректный Mode (Mobile/Tablet/Laptop/Desktop), чтобы типографика внутри фрейма соответствовала брейкпоинту;
- у каждого фрейма экрана выставлен корректный Mode (Mobile/Mobile Wide/Tablet/Laptop/Desktop), чтобы типографика внутри фрейма соответствовала брейкпоинту;
- любые отличия от токенов (если они вообще допускаются) должны быть подписаны: **что изменено**, **зачем** и **как это ведёт себя** на min/max диапазона и при длинном контенте.
### 5.3. Многострочный текст: переносы и ограничения