Системаи шабака ва модулият

1) Чаро фикрию

• тарроҳӣ ва рушдро суръат мебахшад (забони умумӣ: "12 сутун, партов 24"),
• сарбории маърифатиро коҳиш медиҳад (ҳатто ритм, хатҳои устувор),
• Пурборкунии ҷузъҳои байни саҳифаҳо
• ба шумо имкон медиҳад, ки китобхонаи модулиро бидуни "microlaying" созед.

2) Унсурҳои асосии фикрию

Контейнер - паҳнои максималии мундариҷа, майдони марказӣ.
Сутунҳо - майдонҳои амудӣ барои ҷойгиркунии модулҳо.
Gutter - фазои уфуқӣ байни сутунҳо.
Маржа - майдонҳои беруна ба чап/рости контейнер.
Сатр/Пайгирӣ - дастури уфуқӣ (дар CSS Grid - хатҳо/роҳҳо).
Базавӣ - шабакаи типографии амудӣ.

Ритми амудии тавсияшаванда: 8-pt (баъзан 4-pt барои нюанс), воҳидҳои андоза ва шохисҳо зарби 4/8 мебошанд.

3) Нуқтаҳо ва контейнерҳо

• Контейнери растер (ислоҳ). максимум) дар экранҳои калон, моеъ - дар мобилӣ.
• Gutter метавонад ба осонӣ ба нуқтаҳои калон афзоиш ёбад.
• Сутунҳо - 4/6/8/12 ҳамчун "маҷмӯи аслӣ".

4) Модулият ва зичӣ

Модул - блоки мазмуне, ки 1..N сутунҳо ва мултипликатори баландиҳои базавӣ ишғол мекунад.

• Тасаллӣ (панели панел, хониш): ҳуруфҳои калонтар, ҳуруфҳои 16-24.
• Паймон (ҷадвалҳо, про-режим): ҳуруфҳо + 0/ − 1 px, нишонаҳои амудӣ − 4/ − 8, баландии сатр собит аст (зарбҳои 8).

Компонентҳо бояд ду пешгӯи зичии ҳадди аққал дошта бошанд.

5) Типография ва шабакаи ибтидоӣ

Баландии асосии сатрро интихоб кунед (масалан, 24 px) ва баландии элементҳоро ҳамоҳанг созед (тугмаҳо 40/48/56 px мултипликатори асосӣ мебошанд).
Сарлавҳаҳо ритми амудиро лангар медиҳанд: дар боло/поён индентҳо мултипликатори 8 мебошанд.
Нишонаҳоро ба баландии матн ҳамоҳанг созед.

6) Қолибҳои тарҳ

6. 1 корт

Шабака: мозаика (ислоҳ). паҳнои корт) ё сутун (корт = N сутунҳо).
Ҳадди аққали мундариҷа барои пешгирӣ кардани "ҷаҳидан" ҳангоми боркунӣ; скелет дар дохили корт.
Пуркунии дохилӣ: 16/20/24 вобаста ба нуқтаи бозист.

6. 2 Ҷадвалҳо

Контейнери бари пурра; ҳангоми ҳаракат ба таври уфуқӣ сутун/сарпӯши аввалро ях кунед.
Ҳуҷайраҳо яклухт мебошанд; сутунҳои рақамӣ бо рақамҳо/даҳҳо ҳамоҳанг карда мешаванд.
Дар XS - "тарҳбандии часпонидашуда" ба ҷои ҳаракатҳои уфуқӣ, агар сутунҳо аз ҳад зиёд бошанд.

6. 3 Шакл

Як сутун дар XS/SM, ду ё се сутун дар MD + (бо назардошти мантиқи ҷадвалҳо/бахшҳо).
Field + label + матни кӯмак ба модули умумӣ мувофиқат мекунад (баландӣ мултипликатори 8 мебошанд).

6. 4 панели панелҳо

Шабака бо пайраҳаҳои собит ва абрҳо (минтақаҳо) барои субот.
Виджетҳо дар сутунҳо ҳадди аққал ва ҳадди аксар доранд; баландӣ мултипликатори базавӣ мебошанд.
Ҳангоми бозсозӣ - шумораи сутунҳо тағир меёбад, виджетҳоро худсарона тақсим накунед.

7) Мутобиқшавӣ, тарҳбандии худкор ва рафтор

Мундариҷа дар назди шабака: Шабака на ба шикастани он, ба мундариҷа мутобиқ мешавад.

• Маҳдудиятҳо (чап/рост/марказ) ва тарҳбандии худкорро барои кортҳо/рӯйхатҳо истифода баред.
• Параметрҳои компонентро барои 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 }
}

• Нишонаҳои дохилии ҷузъҳо аз 'фазо' мебошанд.
• Майдонҳои берунии контейнерҳо аз 'gutter '/' margin' мебошанд.
• Баландии элементҳо мултипликатори 8 (40/48/56) мебошанд.

10) Ҷузъҳои модулӣ

• бидонед, ки барои ҳар як нуқта чанд сутун лозим аст;
• андозаҳои ҳадди аққал/максималӣ доранд;
• аз пикселҳои "сеҳрнок" вобаста нест - танҳо нишонаҳо;
• шабакаи дохилиро (унвон, мундариҷа, пой) дар заминаи аввал нигоҳ доред.

11) Тасвирҳо ва қисмҳои ВАО

Таносуби таносубро ислоҳ кунед (масалан, 16/9, 4/3, 1/1) барои пешнамоиш ва кортҳо.

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

Дар XS, хунро пурра истифода баред (расм дар атрофи кунҷҳо) танҳо барои таблиғ, боқимондаи мундариҷа контейнерро пайгирӣ мекунад.
Матни тасвир - танҳо дар слипҳо/рӯйпӯшҳо, контрасти ≥ АА.

12) RTL ва маҳаллисозӣ

Самти шабака: 'dir = "rtl" ва': dir (rtl) '-rules барои indents/icons.
Тартиби сутун ва сутунҳои яхкардашуда дар ҷадвалҳо - оинаҳоро баррасӣ кунед.
Дарозии хатҳо ва интиқолҳо метавонанд баландии модулҳоро тағир диҳанд - саҳҳомиро гузоранд.

13) Хусусиятҳои IGaming

Минтақаҳои Promo ва баннерҳо: шабакаи алоҳида бо модулҳои калон; матн ҳамеша дар табақ аст, баръакси AAA барои огоҳиҳои интиқодӣ (18 +, маҳдудиятҳо, хатарҳо).
Роҳбарон/рейтингҳо: ҷадвалҳо бо сутуни аввалини собит ва сарлавҳаи часпанда, рақамҳои ҷадвалӣ (ҷадвалҳо), баландии сатрҳо мултипликатори 8 мебошанд.
Панели бозингарон/амалиётҳо: виджетҳо (сессияҳо, амонатҳо, RTP, амонатҳои холис) 3-6 сутунро дар 12 шабака ишғол мекунанд; барқарорсозии каскад дар MD/SM.
Кортҳои мусобиқа: шабакаи кортҳои 3 × N (LG), 2 × N (MD), 1 × N (SM/XS); CTA дар ҷои доимӣ.

14) Дастрасӣ ва фокус

Ҳалқаҳои фокус набояд ритмро вайрон кунанд: илова кардани контур-офсет ё унсури псевдо-дохилӣ.
Андозаи минималии ангуштзанӣ: 44 × 44 (мобилӣ )/32 × 32 (мизи корӣ).
Танҳо бо ҷойгиркунӣ рамзгузорӣ накунед; Нигоҳ доштани нишонаҳои матнӣ ва хусусиятҳои aria.

15) Иҷро

Чуқурии торҳои лона кам кунед: 1 қисмати асосии шабака + чандирҳо дар дохили.
Дар садҳо кортҳо сояҳо/ниқобҳои вазнинро пешгирӣ кунед; Услубҳои ҳамворро дар рӯйхатҳо истифода баред.
Боркунии танбалии мундариҷаи ВАО; таносуби собит CLS-ро пешгирӣ мекунад.

16) Антипаттернҳо

Мувофиқати "Шабака ба бичашед" → дар ҳар як саҳифа пора мешавад.
Гуттер аз рӯи қисмат худсарона фарқ мекунад.
Зичии номувофиқ (ҳам паймон ва ҳам тасаллӣ дар як экран).
Ҷузъҳои аз паҳнои сеҳрнок (сутунҳо/нишонаҳо нестанд).
Ҷадвалҳо бо ҳаракатҳои уфуқӣ дар мобилӣ бидуни тарҳбандии алтернативӣ.
Матн дар тасвир бе мурдан ва назорати контраст.

17) Рӯйхати назоратии QA

Сохтор

• Сутунҳо/контейнер/маржа ба нуқтаҳо мувофиқанд.
• Гуттер дар дохили саҳифа устувор аст.
• Баландӣ ва нишонаҳо мултипликатори 8 мебошанд.

Компонентҳо

• Паҳнои сутун (XS.. XL) ва min/max муайян карда шудаанд.
• Шабакаҳои дохилӣ бо замина мутобиқ карда шудаанд.

Ҷадвалҳо/шаклҳо

• Сутуни часпак/сутуни аввал; режими часпонидашуда дар XS.
• Майдонҳои шакл мултипликатори заминавӣ мебошанд; матни тамғакоғаз/ёрӣ "ҷаҳида" нест.

A11y

• Услубҳои фокус ритмро вайрон намекунанд; минтақаҳои clique ≥ ҳадди аққал.

Иҷро

• CLS бо сабаби блокҳои ВАО; боркунии танбал фаъол аст.

18) Токенҳо ва ҳуҷҷатгузорӣ дар системаи тарроҳӣ

• қиматҳои 'контейнер', 'сутунҳо', 'партов', 'фазо', базавӣ;
• намунаҳои тарҳҳо (кортҳо/ҷадвалҳо/шаклҳо/панелҳо);
• прессҳои зичӣ (Comfort/Compact) ва таъсири онҳо ба ҷузъҳо;
• порчаҳои код барои сабкҳои/тарҳҳои CSS Grid/Flex ва Figma.

Хулосаи мухтасар

Grid шартнома байни тарроҳӣ ва рушд аст. Гирифтани нуқтаҳо, контейнерҳо, баландгӯякҳо ва ритми 8-пт, нишонаҳои тарроҳӣ ва қолабҳои тарроҳӣ, имконоти зичӣ, мутобиқшавӣ ва дастрасиро таъмин мекунанд. Сипас миқёси саҳифаҳо пешгӯӣ мешавад, ҷузъҳо дубора истифода мешаванд ва фармон тезтар ва устувортар аст.