тор системасы жана модулдук

1) Эмне үчүн тор

• дизайн жана иштеп чыгууну тездетет (жалпы тил: "12 колонка, gutter 24"),
• когнитивдик жүктү азайтат (тегиз ритм, туруктуу сызыктар),
• барактардын ортосундагы компоненттердин чыдамдуулугун жогорулатат,
• "микроверсиз" модулдук китепкананы курууга мүмкүндүк берет.

2) Негизги тор элементтери

Контейнер - мазмундун максималдуу туурасы, борборлоштурулган аймак.
Колонкалар - модулдарды жайгаштыруу үчүн тик аймактар.
Gutter - мамычалардын ортосундагы горизонталдык аралык.
Margin - контейнердин сол/оң сырткы талаалар.
Row/Track - горизонталдык жол (CSS Grid - саптар/тректер).
Baseline - тик тор.

Сунушталган тик ритм: 8-pt (кээде нюанстар үчүн 4-pt), өлчөмдөрү жана чегинүү бирдиктери 4/8 эсе көп.

3) Breakpoint жана контейнерлер

• Растровый контейнер (фикс. max-width) чоң экрандарда, fluid - мобилдик.
• Gutter акырындык менен чоң breakpoint көбөйтө алат.
• Колонкалар - 4/6/8/12 "негизги топтому" катары.

4) модулдук жана тыгыздыгы

Модуль - 1..N колонкаларды жана бир нече жолу негизги бийиктиктерди ээлеген мазмун блогу.

• Comfort (dashboard, окуу): ири ариптер, 16-24 чегинүү.
• Compact (таблицалар, профи-режим): шрифттер + 0/ − 1 px, вертикалдуу чегинүүлөр − 4/ − 8, саптардын бийиктиги (8 жолу).

компоненттери, жок эле дегенде, эки басым тыгыздыгы болушу керек.

5) типография жана baseline-тор

Негизги сызык-бийиктикти (мисалы, 24 px) тандаңыз жана элементтердин бийиктигин синхрондоңуз (px 40/48/56 baseline).
Аталыштар тик ритмдерди бекемдейт: 8 эсе жогору/төмөн чегинүү.
Сөлөкөттөрдү тексттин бийиктиги боюнча тегиздөө.

6) макет үлгүлөрү

6. 1 карталар (карталар)

тор: мозаика (fix. туурасы) же колонка (карта = N колонка).
жүктөп жатканда "секирип" качуу үчүн мазмундун минималдуу бийиктиги; skeleton карта ичинде.
Ички padding: 16/20/24 брейк-пунктуна жараша.

6. 2 Таблицалар

бүт туурасы контейнер; туурасынан скролл менен биринчи тилке/баш тоңдуруп.
Клеткалар - baseline-эсе; сандык мамычаларды разряддар/ондуктар боюнча теңдейбиз.
XS боюнча - "карта саптары" (stacked layout) ордуна горизонталдык скролл, мамычалар өтө көп болсо.

6. 3 түрлөрү

XS/SM боюнча бир тизгиндүү, MD + боюнча эки же үч тизгиндүү (таблолордун/секциялардын логикасын эске алуу менен).
Талаа + белги + хелп-текст жалпы модулуна туура келет (8 эсе бийиктиги).

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

туруктуулук үчүн белгиленген жолдор жана булуттар (areas) менен Grid.
Widget колонка минималдуу жана максималдуу туурасы бар; бийиктиги - baseline эсе.
Ресайзде - колонкалардын саны өзгөрөт, виджеттерди өзүм билемдик менен бөлбөйм.

7) Adaptivity, 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) модулдук компоненттери

• билүү үчүн, ал ар бир брейк-пунктунда канча мамычаларды талап кылат;
• минималдуу/максималдуу өлчөмдөрү бар;
• "сыйкырдуу" пикселдерге көз каранды эмес - токендер гана;
• Базелинде ички торду (баш, мазмун, футер) сактоо.

11) Сүрөттөр жана медиа порциялар

Алдын ала жана карталар үчүн aspect-ratio (мисалы, 16/9, 4/3, 1/1) бекитүү.

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

XS боюнча full-bleed (четинен сүрөт) гана промо үчүн колдонуңуз, калган мазмун контейнерге ылайык келет.
Сүрөттөгү текст - плашкаларда/ашыктарда гана, контраст ≥ AA.

12) RTL жана локалдаштыруу

Grid багыты күзгү болуп саналат: '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) Жеткиликтүүлүк жана фокус

Focus шакек ритмин бузууга тийиш эмес: outline-offset же ички psevdo элемент кошуу.
Басуунун минималдуу өлчөмдөрү: 44 × 44 (моб.) / 32 × 32 (десктоп).
жайгаштыруу менен гана маанисин коддоого болбойт; текст белгилерин жана aria атрибуттарын сактоо.

15) аткаруу

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

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

Ар бир баракта "даамы боюнча тор" → консистенттүүлүк чачырап кетет.
Гуттер секциялар боюнча өзүм билемдик менен өзгөрөт.
макулдашылбаган тыгыздыгы (бир экранда жана "компакт", жана "сооронуч").
сыйкырдуу туурасы көз каранды компоненттери (колонкалар/белгилер жок).
Мобайл боюнча горизонталдуу скролл менен таблицалар эч кандай альтернативалуу жайгаштыруу.
Сүрөттөгү текст плашкасыз жана контрастты көзөмөлдөбөйт.

17) QA-чек тизмеси

Түзүлүшү

• Колонкалар/контейнер/маргиналдар брейкпоинттерге туура келет.
• Gutter бет ичинде туруктуу.
• Бийиктиктер жана чегинүүлөр 8 эсе көп.

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

• Аныкталган тилке туурасы (XS.. XL) жана min/max.
• Ички торлор baseline менен макулдашылган.

Таблицалар/формалар

• Sticky-калпак/биринчи тилке; XS боюнча stacked режими.
• Form талаалары baseline; белги/хелп текст "секирип" эмес.

A11y

• Фокус стилдери ритмди бузбайт; басуу зоналары ≥ минималдуу.

Спектакль

• Жок CLS, анткени медиа блоктор; жалкоо жүктөө кирет.

18) Дизайн системасындагы токендер жана документтер

• 'container', 'columns', 'gutter', 'space', baseline маанилери;
• макеттердин мисалдары (карточкалар/таблицалар/формалар/дашборддор);
• тыгыздыгы Presets (Comfort/Compact) жана компоненттерине алардын таасири;
• CSS Grid/Flex жана Figma-стили/Leauts үчүн код-сниппеттер.

Кыскача резюме

Сетка - бул дизайн менен иштеп чыгуунун ортосундагы келишим. Брейк-пункттарды, контейнерлерди, динамиктерди жана 8-pt ыргагын оңдоп, токендерди жана макеттердин шаблондорун кооздоп, тыгыздык, ыңгайлуулук жана жеткиликтүүлүк варианттарын камсыз кылуу. Андан кийин барактар ​ ​ алдын ала масштабдалат, компоненттер кайра колдонулат жана команда тезирээк жана туруктуураак иштейт.