Тор жүйесі және модульділігі

1) Не үшін тор

• дизайн мен әзірлеуді жеделдетеді (жалпы тіл: «12 баған, gutter 24»),
• когнитивтік жүктемені азайтады (бірқалыпты ырғақ, тұрақты сызықтар),
• беттер арасындағы компоненттердің ауыспалылығын арттырады,
• «микроверкасыз» модульдік кітапхана құруға мүмкіндік береді.

2) Тордың негізгі элементтері

Контейнер - мазмұнның ең үлкен ені, орталықтандырылған аумақ.
Бағандар - модульдерді орналастыруға арналған тік аумақтар.
Gutter - бағандар арасындағы көлденең аралық.
Margin - контейнердің сол/оң жақ сыртқы өрістері.
Row/Track - көлденең бағыттаушы (CSS Grid - жолдар/тректер).
Baseline - баспахананың тік торы.

Ұсынылатын тік ырғақ: 8-pt (кейде нюанстар үшін 4-pt), өлшем бірліктері мен шегіністер 4/8 еселенеді.

3) Брейкпоинттер мен контейнерлер

• Растрлық контейнер (фикс. max-width) үлкен экрандарда, fluid - ұялы телефондарда.
• Gutter үлкен брейкпоинттерге қарай біртіндеп ұлғая алады.
• Бағандар - 4/6/8/12 «негізгі жиынтық» ретінде.

4) модульділігі және тығыздығы

Модуль - баған 1..N және еселі baseline-биіктікті қамтитын контент блогы.

• Comfort (дашбордтар, оқу): үлкен қаріптер, 16-24 шегіністер.
• Compact (кестелер, профи-mode): + 0/ − 1 px қаріптері, 4/ − 8 − тік шегіністер, жолдардың биіктігі бекітілген (8 есе).

Компоненттерде кем дегенде екі тығыздық пресеті болуы тиіс.

5) Типографика және baseline-тор

Негізгі line-height (мысалы, 24 px) таңдаңыз және элементтердің биіктігін синхрондаңыз (40/48/56 px бірнеше baseline батырмалары).
Тақырыптар тік ырғақтарды бекітеді: есенің үстінен/астынан шегіністер 8.
Иконаларды мәтіннің қисық биіктігіне қарай тегістеңіз.

6) Орналасу үлгілері

6. 1 Карточкалар (cards)

Тор: мозаика (фикс. карточканың ені) немесе бағаншалы (карточка = N бағаншалар).
Жүктеу кезінде «секіруді» болдырмау үшін мазмұнның ең аз биіктігі; skeleton карточка шегінде.
Ішкі padding: брейк пунктіне байланысты 16/20/24.

6. 2 кестелер

Контейнердің барлық ені; көлденең сырғанау кезінде бірінші бағанды/қалпақты мұздатамыз.
Ұяшықтар - baseline-еселі; сандық бағандарды разрядтар/ондық бойынша теңестіреміз.
XS - егер бағандар тым көп болса, көлденең скролл орнына «карта жолдары» (stacked layout).

6. 3 пішіндері

Бір бағаналы XS/SM, екі немесе үш бағаналы MD + (табалар/секциялар логикасын ескере отырып).
Өріс + лейбл + хелп-мәтін жалпы модульге салынады (биіктігі 8 еселенген).

6. 4 Дашбордтар

Тұрақтылық үшін бекітілген тректері және бұлттары бар грид (areas).
Виджеттердің ең кіші және ең үлкен ені бағаналарда болады; биіктіктер - еселі baseline.
Ресайзер кезінде бағандардың саны өзгереді, виджеттерді өз еркімен бөлшектемейміз.

7) Бейімділік, auto-layout және мінез-құлық

Тордың алдындағы мазмұн: тор мазмұнды сындырмай, мазмұнға бейімделеді.

• Карточкалар/тізімдер үшін constraints (left/right/center) және auto-layout пайдаланыңыз.
• XS/SM/MD/LG құрамдас бөлігінің опцияларын қолдаңыз (паддингтер, слот реті өзгереді).

• Секциялар деңгейінде - CSS Grid (аудандар, бағандар, жолдар).
• Компоненттердің ішінде - Flex (біліктер, бос орындар балансы).

8) CSS Grid/Flex - практикум

css
.container {
max-width: 1280px; margin: 0 auto; padding: 0 16px;
display: grid; gap: 24px;
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.col-4 { grid-column: span 4; }
@media (max-width: 1199px) {
.container { grid-template-columns: repeat(8, 1fr); gap: 20px; }
.col-4 {grid-column: span 8; }/full-width card/
}
@media (max-width: 839px) {
.container { grid-template-columns: repeat(6, 1fr); gap: 16px; }
}
@media (max-width: 599px) {
.container { grid-template-columns: repeat(4, 1fr); }
}

css
.dashboard {
display: grid; gap: 24px;
grid-template:
"kpi kpi chart chart" auto
"tbl tbl chart chart" 1fr / 1fr 1fr 1fr 1fr;
}
.kpi  { grid-area: kpi; }
.chart { grid-area: chart; }
.tbl  { grid-area: tbl; }
@media (max-width: 1199px) {
.dashboard { grid-template:
"kpi" auto "chart" auto "tbl" 1fr / 1fr; }
}

9) Шегіністер мен токендер

Масштабты дизайн жүйесінде белгілеңіз.

json
{
"space": { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24, "2xl": 32, "3xl": 48 },
"container": { "sm": 584, "md": 808, "lg": 1152, "xl": 1320 },
"gutter": { "sm": 16, "md": 20, "lg": 24, "xl": 32 },
"columns": { "xs": 4, "sm": 6, "md": 8, "lg": 12 }
}

• Компоненттердің ішкі шегіністері - 'space'.
• Контейнерлердің сыртқы жиектері - 'gutter '/' margin' -ден.
• Элементтердің биіктігі - 8 (40/48/56) еселенген.

10) Модульдік компоненттер

• әр брейкпоинтте оның қанша баған алатынын білу;
• ең аз/ең көп мөлшерде болуы;
• «сиқырлы» пикселдерге тәуелді болмау - тек токендер;
• ішкі торды (тақырып, контент, футер) baseline-де ұстау.

11) Бейнелер және медиапропорциялар

Превью және карточкалар үшін aspect-ratio (мысалы, 16/9, 4/3, 1/1) белгілеңіз.

css
.media { aspect-ratio: 16 / 9; object-fit: cover; }

XS-те тек промо үшін full-bleed (шеттеріндегі суретті) пайдаланыңыз, қалған мазмұн контейнерге тиесілі.
Суреттегі мәтін - тек плашкаларда/сүйретпелерде, контраст ≥ AA.

12) RTL және оқшаулау

Грид-бағыт айналанады: 'dir = «rtl»' и ': dir (rtl)' - шегіністер/иконалар үшін ереже.
Бағандардың реті және кестелердегі «жабысқақ» аумақтар (frozen columns) - айналауды ескеріңіз.
Жолдар мен тасымалдардың ұзындығы модульдердің биіктігін өзгертуі мүмкін - қор қойыңыз.

13) iGaming ерекшелігі

Промо-аймақтар мен баннерлер: ірі модульдері бар жеке грид; мәтін әрқашан плашкада, жауапты хабарламалар үшін AAA контрасты (18 +, лимиттер, тәуекелдер).
Көшбасшылар/рейтингтер: бірінші баған мен sticky-қалпағы бар кестелер, кестелік сандар (tabular-nums), жолдардың биіктігі еселенген 8.
Ойыншылардың/операциялардың дашбордтары: виджеттер (сессиялар, депозиттер, RTP, Net Deposits) 12-бағанда 3-6 баған алады; каскадты MD/SM-ге қайта қою.
Турнир карточкалары: 3 × N (LG), 2 × N (MD), 1 × N (SM/XS) карточкалар торы; CTA тұрақты орында.

14) Қол жетімділік және фокус

Фокус сақиналары ырғақты бұзбауы керек: outline-offset немесе ішкі псевдоэлемент қосыңыз.
Басудың ең кіші өлшемдері: 44 × 44 (моб.) / 32 × 32 (десктоп).
Мәнді тек орналастырумен кодтамаңыз; мәтін белгілерін және aria төлсипаттарын сақтаңыз.

15) Өнімділік

Гридтердің ішкі тереңдігін төмендетіңіз: 1 негізгі секция гриді + ішіндегі флекстер.
Жүздеген карточкалардағы ауыр көлеңкелерден/маскалардан аулақ болыңыз; тізімдерде «жазық» мәнерлерді пайдаланыңыз.
Медиаконтентті жалқау қотару; тіркелген пропорциялар CLS болдырмайды.

16) Антипаттерндер

«Дәміне қарай тор» → әр бетінде консистенттік шашырайды.
Gutter секциялар бойынша ерікті түрде өзгереді.
Келісілмеген тығыздықтар (бір экранда «компакт» және «комфорт»).
Магиялық еніне байланысты компоненттер (бағансыз/токенсіз).
Мобайлдағы көлденең скролы бар кестелер баламалы орналасусыз.
Бейнедегі мәтін плашкасыз және контрасты бақылаусыз.

17) QA-чек парағы

Құрылым

• Бағандар/контейнер/маргиналар брейкпоинттерге сәйкес келеді.
• Gutter бет ішінде тұрақты.
• Биіктіктер мен шегіністер еселенген 8.

Компоненттер

• Бағандық ені (XS.. XL) және min/max анықталған.
• Ішкі торлар baseline бағдарламасымен келісілген.

Кестелер/пішіндер

• Sticky-бас/бірінші баған; stacked режимі XS.
• Baseline еселік пішіндерінің өрістері; лейбл/хелп-мәтін «секірмейді».

A11y

• Фокус-стильдер ырғақты бұзбайды; ең аз ≥ басу аймақтары.

Көрініс

• Медиа блоктарға байланысты CLS жоқ; жалқау қотару қосылды.

18) Дизайн-жүйедегі токендер мен құжаттама

• 'container', 'columns', 'gutter', 'space', baseline мәндері;
• орналастыру мысалдары (карточкалар/кестелер/нысандар/дашбордтар);
• тығыздық пресеттері (Comfort/Compact) және олардың компоненттерге әсері;
• CSS Grid/Flex және Figma-стильдер/лейауттар үшін код-сниппеттер.

Қысқаша түйіндеме

Тор - бұл дизайн мен әзірлеу арасындағы шарт. 8-pt брейк-пункттерін, контейнерлерін, бағандарын және ырғағын бекітіңіз, орналасу белгілері мен үлгілерін ресімдеңіз, тығыздық, бейімделу және қол жетімділік нұсқаларын қамтамасыз етіңіз. Сонда беттер болжамды түрде кеңейтіледі, компоненттер қайта пайдаланылады, ал команда жылдам және тұрақты жұмыс істейді.