Сетка УКС / MOS
Маппинг дизайн-сеток UKS (Landing / Sidebar / Dashboard) на LMS MOS. Ширины shell/usable — SoT в LAYOUT_WIDTHS.md: 800 / 1084 / 864 / 1148, aside 264, gap 20.
Профиль курсов (лонгрид): Landing.
Frame --two: Sidebar (aside 264).
Dashboard (24 col): не page shell MOS — только справочно для плотных админ-UI.
UKS кратко
Section titled “UKS кратко”| Профиль | ≥1280 | 1024 | 768 | ~360 |
|---|---|---|---|---|
| Landing | 12 cols; gutter 20–24; после 1440 растут боковые поля | 8 | 4 | 2 |
| Sidebar | 12 + aside 264 fixed | 12 (без strip) | 12 | 4 |
| Dashboard | 24 | 12 | 12 | 4 |
Принципы: целое число колонок; контент на границе колонки; offset ≥ gutter; БЕ 8px; гибрид max-width + full-bleed фон.
MOS ↔ UKS
Section titled “MOS ↔ UKS”| MOS | px / поведение | UKS |
|---|---|---|
| Shell standard / wide | 864 / 1148 | Landing @1280 content band + page offset 32 |
| Usable / prose / inner | 800 / 800 / 1084 | 12×72 + 11×20 = 1084 |
Frame narrow |
prose 800 | текстовая колонка (= 1084 − 20 − 264) |
Frame wide |
inner 1084 | широкая контентная полоса |
Frame two |
800 + 20 + aside 264 | Sidebar UKS |
Frame full / alignfull |
100vw breakout | декорации / фон вне сетки |
| Page offset (shell padding) | 32 desktop / 16 mobile | UKS offset ≥ gutter |
| Internal gap (section / columns / frame-two) | --grid-landing-gutter: 20 / 20 / 16 / 16 |
Landing gutter |
Section is-layout-grid |
default 2 col ≥768, 1 <768 | внутренний грид, не 12 CSS-tracks |
| Columns block | flex, stack <768 | 2–N целых долей |
Математика @1280
Section titled “Математика @1280”col = 72, gutter = 20inner = 12×72 + 11×20 = 1084prose + gap + aside = 800 + 20 + 264 = 1084shell wide = 1084 + 32×2 = 1148shell standard = 800 + 32×2 = 864Кап shell 1148 (вместо растяжения на 1440/1920): поля браузера растут сами вне shell.
Инструменты автора
Section titled “Инструменты автора”| Задача | MOS |
|---|---|
| Узкий текст лонгрида | Frame narrow |
| Широкий блок / карточки в ряд | Frame wide или Section grid / Columns |
| Текст + боковая колонка | Frame two |
| Фон / cover на весь экран | Frame full или alignfull |
| 2+ равные колонки внутри секции | Section is-layout-grid или Columns |
Span (дизайн 12 → реализация)
Section titled “Span (дизайн 12 → реализация)”Page не рисует 12 CSS-колонок. Дизайн-span переводится так:
| Landing span (desktop 12) | Практика MOS | px @1084 |
|---|---|---|
| 12 / 12 | 100% колонки / frame wide | 1084 |
| 9 / 12 | ~prose-adjacent | 808 |
| 8 / 12 | grid 2×≈ / column ~67% | 716 |
| 6 / 12 | grid 2 col или column 50% | 532 |
| 4 / 12 | grid 3 col или ~33% | 348 |
| 3 / 12 | ≈ aside track | 256 (aside token 264 fixed) |
| 8 / 12 @1024 (из 8) | полная ширина usable / 100% | — |
| 4 / 4 @768 | полная ширина; stack | — |
| 2 / 2 @360 | полная ширина; 1 col grid | — |
Токены числа колонок (дизайн-справка + remaps): --grid-landing-cols = 12 / 8 / 4 / 2.
Токены
Section titled “Токены”Источник: wp2lms-turbo-blocks-mos/assets/src/styles/base/tokens.css.
--grid-landing-cols*— 12 / 8 / 4 / 2--grid-landing-gutter*— 20 / 20 / 16 / 16 (внутренние gaps)--spacing-layout-gutter(-md)— page offset 16 / 32--max-width-layout-prose|standard|inner|aside|content— 800 / 864 / 1084 / 264 / 1148
Брейкпоинты
Section titled “Брейкпоинты”MOS: <768 · 768 · 1024 · ≥1280 (shell/desktop также 1148).
UKS 1440/1920 не добавляем: вне shell поля браузера растут сами.
Dashboard
Section titled “Dashboard”Не внедрять как page grid. Если понадобится плотный админ-UI — отдельный профиль, не лонгрид.