diff --git a/adaptive-layout-requirements.checklist.md b/adaptive-layout-requirements.checklist.md index 6baa778..0805127 100644 --- a/adaptive-layout-requirements.checklist.md +++ b/adaptive-layout-requirements.checklist.md @@ -12,8 +12,8 @@ ## 1. Брейкпоинты - [ ] Все якорные брейкпоинты созданы в виде отдельных фреймов - - Mobile, Tablet, Laptop, Desktop (диапазоны соблюдены) -- [ ] Границы диапазонов трактуются единообразно (например: `Mobile < 768`, `Tablet ≥ 768`) + - Mobile, Mobile Wide, Tablet, Laptop, Desktop (диапазоны соблюдены) +- [ ] Границы диапазонов трактуются единообразно (например: `Mobile ≤ 479`, `Mobile Wide 480–767`, `Tablet 768–1023`, `Laptop 1024–1439`, `Desktop ≥ 1440`) - [ ] Фреймы логически и визуально связаны - [ ] Дополнительные фреймы есть только при изменении сетки, навигации или структуры контента @@ -62,7 +62,7 @@ ## 6. Типографика - [ ] Используются Text Styles (`H1 / H2 / Body / Caption / Button` или принятый набор) - [ ] Используются только бесплатные шрифты (предпочтительно Google Fonts) -- [ ] Есть коллекция Variables для типографики и Modes под брейкпоинты (например: Mobile/Tablet/Laptop/Desktop — как принято в проекте) +- [ ] Есть коллекция Variables для типографики и Modes под брейкпоинты (например: Mobile/Mobile Wide/Tablet/Laptop/Desktop — как принято в проекте) - [ ] Text Styles используют переменные типографики (минимум размер и line-height; при необходимости letter-spacing) - [ ] На фреймах установлен корректный Mode для соответствующего брейкпоинта - [ ] Ограничение количества строк соблюдено там, где это критично diff --git a/adaptive-layout-requirements.full.md b/adaptive-layout-requirements.full.md index 3adfcc2..ab35fc6 100644 --- a/adaptive-layout-requirements.full.md +++ b/adaptive-layout-requirements.full.md @@ -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. Многострочный текст: переносы и ограничения diff --git a/adaptive-layout-requirements.short.md b/adaptive-layout-requirements.short.md index 82822d5..b9c908a 100644 --- a/adaptive-layout-requirements.short.md +++ b/adaptive-layout-requirements.short.md @@ -20,12 +20,14 @@ ## 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| +| Версия | Базовая ширина | Диапазон (CSS 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 в Figma. - Количество брейкпоинтов **может корректироваться** (визуальная иерархия, контент, сетка, навигация). @@ -76,7 +78,7 @@ - Только через **Text Styles** (семантика: `H1 / H2 / Body / Caption / Button`) - Только бесплатные шрифты (предпочтительно **Google Fonts**) - Значения типографики (минимум размер и line-height) — через **Variables** -- Адаптация между брейкпоинтами — через **Modes** в Variables (Mobile/Tablet/Laptop/Desktop) +- Адаптация между брейкпоинтами — через **Modes** в Variables (Mobile/Mobile Wide/Tablet/Laptop/Desktop) - Для ключевых текстов определены правила: wrap/truncate и max lines ---