Композиция и сетки

Оболочка SkiMobile занимает всю доступную ширину, без фиксированного максимума. Край страницы — clamp(1rem, 3.125vw, 2.5rem) плюс safe areas по физическим сторонам. Фотографии, каталоги, панели и сетки используют пространство экрана; проза ограничена 68ch для чтения.

Обязательное правило для всех публичных страниц: первый экран, основные секции, каталоги, списки вакансий и общая композиция форм заполняют всю ширину общего page-container / site-shell. Не добавляйте вложенную центрированную обёртку с max-width: 1200, 1280, 1360, 1440 px или иным фиксированным пределом. Ограничивайте длину строки отдельного абзаца, а не ширину страницы. Исключение — только по прямому запросу владельца.

Колонки — 4 при ширине контейнера меньше 32rem, 8 от 32rem, 12 от 64rem. При стандартном тексте это 512 и 1024 px. Составная композиция разделяется от 42rem. Это пороги места для содержимого, а не названия устройств. Брендбук сохраняет навигацию слева от 1024 px и диалог на меньшей ширине.

Единица ритма — 0,25rem. Шкала: 4, 8, 12, 16, 24, 32, 48, 64 и 96 px при 100% текста. Внутри группы используются близкие значения; самостоятельные разделы получают больший промежуток. Семантические роли page-gutter, layout-gap, layout-panel-padding и layout-section-space применяются вместо случайных чисел.

Комфортная плотность — стандарт. Компактная подходит для рабочих списков; свободная — для презентационного блока. Плотность меняет интервалы и внутренние поля, сохраняя размер текста, фокус и области действий от 44 × 44 px. Пользовательское увеличение шрифта имеет приоритет над желанием вместить больше данных.

Первый смысл короткий и конкретный: что получает гость. Затем условия и одно главное действие. Выравнивание — по началу строки, общая ось объединяет заголовок, текст и кнопку. Акцент выделяет приоритет, нейтральная поверхность поддерживает содержимое. Красный сохраняет критическую роль; логотип использует собственную палитру.

Шесть композиций: первый экран 7:5, каталог auto-fit, статья 8:4, бронирование 8:4, услуга 5:7 и кабинет auto-fit. Соотношения применяются при достаточной ширине. На узком контейнере блоки следуют в смысловом порядке, без перестановки через order или grid-auto-flow: dense.

Внешняя страница управляет оболочкой и навигацией. Компонент получает layout-context с container-type: inline-size; его внутренние колонки реагируют на доступное место через @container. Карточки используют auto-fit и minmax(min(100%, 16rem), 1fr). Эта сетка остаётся самостоятельной основой при вложении в узкую панель.

minmax(0, 1fr), min-inline-size: 0 и перенос длинных значений предотвращают переполнение. Изображения используют aspect-ratio или размеры width/height до загрузки. Subgrid выравнивает заголовок, описание и завершающую строку карточек; запасной вариант — auto / 1fr / auto. Жёсткая высота текста не используется.

Поддержка определяется возможностями, а не названием браузера. Сначала работает обычный поток, затем подключается расширение через @supports. Rem, логические оси и семантические токены сохраняют независимость системы от размера окна и конкретной библиотеки компонентов. Browser matrix в библиотеке проверяет доступность синтаксиса в текущем браузере.

Container units усиливают локальную адаптацию. svh подходит для устойчивой высоты первого экрана; dvh — для панелей, следующих за видимой областью, с запасным vh. Anchor positioning, View Transitions и scroll-driven animation применяются только как дополнительные улучшения после проверки клавиатуры, фокуса и уменьшенного движения. Навигация и содержимое доступны при отсутствии любого эффекта.

Визуальный порядок совпадает с DOM и клавиатурой. Основной текст остаётся полным при 200% увеличении и изменении интервалов. Ошибки, загрузка, пустые результаты и отсутствие соединения получают место в композиции рядом с соответствующим действием. Длинный текст переносится; обрезка не скрывает цену, условия или важное предупреждение.

Sticky-блок не перекрывает фокус и заголовки. Если высоты недостаточно, содержимое прокручивается в обычном потоке. Фиксированная мобильная панель резервирует место и safe-area-inset-bottom; экранная клавиатура не закрывает обязательные поля. Скролл остаётся нативным. Изменение размера контейнера не запускает анимацию всей страницы.

Изображения ниже первого экрана загружаются по мере необходимости; размер зарезервирован. Тяжёлые эффекты и JavaScript для измерения не определяют раскладку. content-visibility допускается для длинных независимых списков после проверки поиска, якорей и фокуса. В брендбуке измерение показывает параметры образца, а перестроение выполняет CSS.

Веб-сетка использует rem и доступную ширину; печать — физический размер и поля в мм. A4 — 210 × 297 мм, A5 — 148 × 210 мм, визитка — 90 × 50 мм. Вылеты и технологические поля согласуются с типографией: исходная спецификация 3 мм вылета и безопасное поле от 5 мм. Векторные сетки 320/768/1440 — цифровые эталоны, их не выдают за печатный формат.

На любом носителе сохраняются смысл, условия, контакт и охранное поле логотипа. Экранные кнопки заменяются понятным контактом или QR с подписью. Для печати убираются интерфейсные органы управления, сохраняется весь текст и предотвращается разрыв карточки. Цветовые профили и файлы шрифтов берутся из разделов «Цвета» и «Шрифты».

1. Проверить 320, 390, 768, 1280, 1920 px и широкий экран. Оболочка занимает ширину экрана, горизонтальное переполнение отсутствует, направляющие и текст не сжимаются трансформацией.
2. Проверить RU/EN, обе темы, увеличение текста до 200%, длинное слово и изменённые интервалы. Основное действие и условия остаются видимыми; область нажатия от 44 px.
3. Пройти клавиатурой, проверить фокус, порядок чтения, reduced motion, открытие сохранённого раздела офлайн и реальный файл скачивания. Затем сверить Chromium, Firefox и WebKit; отдельно проверить носитель или печатный образец перед тиражом.

Layout 1.0 содержит общий CSS, реестр JSON, шесть автономных HTML-композиций RU/EN, SVG-сетки 4/8/12 и инструкции. Версия, размер и SHA-256 указаны у каждого файла. JSON использует собственную схему skimobile-layout-1; полный комплект включает исходный реестр и воспроизводимый генератор.

Изменение начинается в shared/layout, затем обновляются экспорт и брендбук. Новый шаблон получает название, смысловой порядок, узкое состояние, порог расширения и проверку длинного содержимого. Порог не меняется ради одного макета; новая возможность браузера внедряется с независимым базовым поведением и проверками.

Applications 1.0 продолжает сетку в документах, социальных карточках и навигации. Печатный мастер задаётся в размере обреза; безопасная область — не меньше 5 мм, вылет обычно 3 мм и уточняется у типографии. Цифровые профили не задают размер печатного носителя.

Композиция сохраняет полезный текст и условия даже без фотографии. Перед добавлением изображения проверьте кадрирование, контраст и отсутствие важного объекта под текстом. Не растягивайте макет непропорционально для нового формата.