Şəbəkə sistemi və modulluq

1) Niyə Mesh

• dizayn və inkişaf sürətləndirir (ümumi dil: «12 sütun, gutter 24»),
• bilişsel yükü azaldır (düz ritm, sabit xətlər),
• səhifələr arasında komponentlərin dözümlülüyünü artırır,
• «mikroverstka» olmadan modul kitabxana qurmağa imkan verir.

2) Əsas şəbəkə elementləri

Konteyner - maksimum məzmun eni, mərkəzləşdirilmiş sahə.
Sütunlar - modulları yerləşdirmək üçün şaquli sahələr.
Gutter - sütunlar arasında üfüqi boşluq.
Margin - konteynerin sol/sağ kənar sahələri.
Row/Track - üfüqi kılavuz (CSS Grid - sətir/trek).
Baseline - şaquli mətbəə şəbəkəsi.

Tövsiyə olunan şaquli ritm: 8-pt (bəzən nüanslar üçün 4-pt), ölçü vahidləri və girintilər 4/8 dəfədir.

3) Breakpoint və konteynerlər

• Raster konteyner (fiks. max-width) böyük ekranlarda, fluid - mobil.
• Gutter böyük breakpoint rəvan artıra bilər.
• Sütunlar - «əsas dəst» kimi 4/6/8/12.

4) Modulluq və sıxlıq

Modul - 1..N sütun və ikiqat baseline hündürlükləri əhatə edən məzmun bloku.

• Comfort (dashboard, oxu): daha böyük şriftlər, 16-24 girintilər.
• Compact (cədvəllər, profi-mode): şriftlər + 0/ − 1 px, şaquli girintilər − 4/ − 8, sətir hündürlükləri sabit (8 dəfə).

Komponentlərin ən azı iki sıxlıq preseti olmalıdır.

5) Mətbəə və baseline-mesh

Əsas xətt yüksəkliyini seçin (məsələn, 24 px) və elementlərin hündürlüklərini sinxronlaşdırın (40/48/56 px düymələri).
Başlıqlar şaquli ritmləri düzəldir: 8-dən yuxarı/aşağı girintilər.
İkonları mətnin başlığı ilə bərabərləşdirin.

6) Düzən şablonları

6. 1 Kartlar (kartlar)

Mesh: mozaika (fiks. kart eni) və ya sütun (kart = N sütun).
Yükləmə zamanı «atlama» qarşısını almaq üçün minimum məzmun hündürlüyü; skeleton kart daxilində.
Daxili padding: 16/20/24 nöqtəsindən asılı olaraq.

6. 2 cədvəllər

Bütün eni üçün konteyner; üfüqi skrolla ilk sütunu/papağı dondurun.
Hüceyrə - baseline-qat; ədədi sütunları boşalma/onluq üzrə bərabərləşdiririk.
XS - çox sütun varsa, üfüqi skroll əvəzinə «kart sətirləri» (stacked layout).

6. 3 Formalar

XS/SM-də tək sütunlu, MD + -də iki və ya üç sütunlu (tablar/bölmələrin məntiqi nəzərə alınmaqla).
Sahə + etiket + help mətni ümumi modula sığır (8 qat hündürlük).

6. 4 Daşbordlar

Sabit izlər və buludlar (areas) sabitlik üçün grid.
Widget 'lar sütunlarda minimum və maksimum enə malikdir; hündürlük - baseline qat.
Resaise zamanı - sütunların sayı dəyişir, widgetları özbaşına parçalamırıq.

7) Adaptasiya, avtomatik layout və davranış

Şəbəkənin qarşısındakı məzmun: şəbəkə məzmuna uyğunlaşır, onu sındırmır.

• Kartlar/siyahılar üçün constraints (left/right/center) və auto layout istifadə edin.
• XS/SM/MD/LG üçün komponent variantlarını dəstəkləyin.

• Bölmələr səviyyəsində - CSS Grid (sahələr, sütunlar, sətirlər).
• Komponentlər daxilində - Flex (oxlar, boşluqlar balansı).

8) CSS Grid/Flex - praktikum

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) Girintilər və tokenlər

Dizayn sistemində miqyasları qeyd edin.

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 }
}

• Komponentlərin daxili boşluqları 'space' -dandır.
• Konteynerlərin xarici sahələri - 'gutter '/' margin' -dən.
• Elementlərin hündürlüyü - 8 (40/48/56) dəfədir.

10) Modul komponentləri

• hər fasilə nöqtəsində nə qədər sütun tutduğunu bilmək;
• minimum/maksimum ölçüləri var;
• «sehrli» piksellərdən asılı deyil - yalnız tokenlər;
• baseline daxili grid (başlıq, məzmun, futer) saxlamaq.

11) Şəkillər və mediaproporsiyalar

Preview və kartlar üçün aspect-ratio (məsələn, 16/9, 4/3, 1/1) qeyd edin.

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

XS-də yalnız promo üçün full-bleed (kənarlarda şəkil) istifadə edin, qalan məzmun konteyneri izləyir.
Şəkildəki mətn - yalnız qıvrım/overley, kontrast ≥ AA.

12) RTL və lokalizasiya

Grid istiqaməti güzgüyə çevrilir: 'dir = "rtl' və ': dir (rtl)' -dəyişmələr/ikonalar üçün düzgün.
Cədvəllərdə sütun sırası və «yapışqan» sahələr (frozen columns) - güzgü nəzərə alın.
Sətir uzunluğu və ötürmələr modulların hündürlüyünü dəyişə bilər - ehtiyat qoyun.

13) iGaming xüsusiyyətləri

Promo zonalar və bannerler: böyük modulları ilə ayrı bir grid; mətn həmişə spot, AAA əks məsuliyyətli bildirişlər üçün (18 +, limitlər, risklər).
Liderlər/reytinqlər: sabit birinci sütun və sticky-papaq ilə cədvəllər, cədvəllər (tabular-nums), sətir hündürlükləri 8 dəfədir.
Oyunçular/əməliyyatlar Dashboard: widgets (seanslar, depozitlər, RTP, Net Deposits) 12-grid 3-6 sütun tutur; MD/SM-də kaskad yenidən qurulması.
Turnirin kartları: 3 × N (LG), 2 × N (MD), 1 × N (SM/XS) kart şəbəkəsi; Daimi yerdə CTA.

14) Əlçatanlıq və diqqət

Focus halqaları ritmi pozmamalıdır: outline-offset və ya daxili pseudo element əlavə edin.
Minimum klik ölçüsü: 44 × 44 (mob.) / 32 × 32 (masaüstü).
Yalnız yerləşdirmə ilə mənanı kodlamayın; mətn etiketlərini və aria atributlarını saxlayın.

15) Performans

Grid daxili dərinliyini azaltın: 1 əsas grid bölməsi + daxili flekslər.
Yüzlərlə kartda ağır kölgələrdən/maskalardan çəkinin; siyahılarda «düz» üslubları istifadə edin.
Media məzmununun tənbəl yüklənməsi; sabit nisbətlər CLS qarşısını alır.

16) Antipattern

«Zövqə görə şəbəkə» → hər səhifəsində dağılır.
Gutter bölmələrdə özbaşına dəyişir.
Razılaşdırılmamış sıxlıqlar (bir ekranda həm «kompakt», həm də «rahatlıq»).
Magic enindən asılı komponentlər (sütunsuz/tokensiz).
Alternativ düzən olmadan mobil üzərində üfüqi skroll ilə cədvəllər.
Splash və kontrast nəzarəti olmadan görüntüdə mətn.

17) QA-çek siyahısı

Struktur

• Sütunlar/konteyner/margins fasilə nöqtələrinə uyğundur.
• Gutter səhifə daxilində sabitdir.
• Hündürlük və girintilər 8 dəfədir.

Komponentlər

• Müəyyən sütun eni (XS.. XL) və min/max.
• Daxili mesh baseline ilə razılaşdırılmışdır.

Cədvəllər/formalar

• Sticky papaq/birinci sütun; XS stacked rejimi.
• Form sahələri baz; etiket/help mətn «atlama» deyil.

A11y

• Fokus üslubları ritmi pozmur; klik zonaları minimum ≥.

Performans

• Media bloklarına görə CLS yoxdur; tənbəl yükləmə daxildir.

18) Dizayn sistemində tokenlər və sənədləşmə

• 'container', 'columns', 'gutter', 'space', baseline;
• yerləşdirmə nümunələri (kartlar/cədvəllər/formalar/daşbordlar);
• sıxlıq presetləri (Comfort/Compact) və onların komponentlərə təsiri;
• CSS Grid/Flex və Figma stilləri/leauts üçün kod snippets.

Qısa xülasə

Mesh dizayn və inkişaf arasında bir müqavilədir. 8-pt breyk nöqtələrini, konteynerləri, dinamikləri və ritmi düzəldin, tokenləri və düzən şablonlarını düzəldin, sıxlıq, uyğunlaşma və əlçatanlıq variantlarını təmin edin. Sonra səhifələr proqnozlaşdırıla bilən şəkildə ölçülür, komponentlər yenidən istifadə olunur və komanda daha sürətli və daha sabit işləyir.