Tor ulgamy we modullylygy

1) Näme üçin tor

• dizaýny we ösüşi çaltlaşdyrýar (umumy dil: "12 sütün, gutter 24"),
• aň-düşünjäni azaldýar (tekiz ritm, durnukly çyzyklar),
• sahypalaryň arasyndaky komponentleriň göterijiligini ýokarlandyrýar,
• "mikroverçsiz" modully kitaphana gurmaga mümkinçilik berýär.

2) Toruň esasy elementleri

Konteýner - mazmunyň iň ýokary ini, merkezleşdirilen meýdany.
Sütünler - modullary ýerleşdirmek üçin dik ýerler.
Gutter - sütünleriň arasyndaky gorizontal aralyk.
Margin - konteýneriň çep/sag tarapyndaky daşarky meýdançalar.
Row/Track - gorizontal ugrukdyryjy (CSS Grid - setirler/ýollar).
Baseline - tipografiýanyň dik tory.

Maslahat berilýän dik ritm: 8-pt (käwagt nuanslar üçin 4-pt), ölçegleriň we çyzyklaryň birlikleri 4/8 esse.

3) Breýkpointler we konteýnerler

• Raster konteýner (fiks. max-width) uly ekranlarda, fluid - jübi telefonlarynda.
• Gutter uly arakesmelere tarap ýuwaş-ýuwaşdan köpelip biler.
• Sütünler - 4/6/8/12 "esasy toplum" hökmünde.

4) Modullyk we dykyzlyk

Modul - sütünleriň 1..N we iki gezek baseline beýikligi eýeleýän mazmun bloky.

• Comfort (daşbordlar, okamak): has uly şriftler, 16-24 girişdeler.
• Compact (tablisalar, profi-mode): + 0/ − 1 px şriftleri, dik çyzyklar − 4/ − 8, setirleriň beýikligi (8 esse).

Komponentleriň azyndan iki sany dykyzlygy bolmaly.

5) Çaphana we baseline-tor

Esasy çyzyk beýikligini saýlaň (mysal üçin 24 px) we elementleriň beýikligini sinhronlaşdyryň (px 40/48/56 düwmeler).
Sözbaşylar dik ritmleri berkidýär: gatyşmalar kratyň üstünde/aşagynda 8.
Nyşanlary tekstiň beýikligine görä düzüň.

6) Ýerleşiş şablonlary

6. 1 Kartoçkalar (cards)

Tor: mozaika (fiks. kartoçkanyň ini) ýa-da sütünli (kartoçka = sütünleriň N).
Ýüklenende "böküşlerden" gaça durmak üçin mazmunyň iň pes beýikligi; kartoçkanyň içinde skeleton.
Içerki padding: 16/20/24 nokadyna baglylykda.

6. 2 Tablisalar

Tutuş giňlik üçin konteýner; gorizontal örtükde birinji sütüni/şlýapany doňdurýarys.
Öýjükler - baseline-esse; san sütünlerini kategoriýalara/onluk bilen deňleşdirýäris.
XS-de - eger sütünler gaty köp bolsa, gorizontal skrolyň ýerine "kartoçka setirleri" (stacked layout).

6. 3 Görnüşler

XS/SM-de bir sütünli, MD + -de iki ýa-da üç sütünli (tablaryň/bölümleriň logikasyny göz öňünde tutup).
Meýdan + bellik + help-tekst umumy modula gabat gelýär (beýikligi 8 esse).

6. 4 Daşbordlar

Durnuklylyk üçin kesgitlenen ýollar we bulutlar (areas) bilen grid.
Widjetleriň sütünlerde iň az we iň köp ini bar; beýikligi - baseline.
Resaisde - sütünleriň sany üýtgeýär, widjetleri özbaşdak bölmeýäris.

7) Uýgunlaşma, awto-layout we özüni alyp baryş

Toruň öňündäki mazmun: Tor mazmuny döwmän, oňa uýgunlaşýar.

• Kartoçkalar/sanawlar üçin constraints (left/right/center) we auto-layout ulanyň.
• XS/SM/MD/LG üçin komponentiň wariantlaryny saklaň.

• Bölümleriň derejesinde - CSS Grid (sebitler, sütünler, setirler).
• Komponentleriň içinde - Flex (oklar, boşluk balansy).

8) CSS Grid/Flex - tejribe

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) Girewler we bellikler

Ölçegi dizaýn ulgamynda düzüň.

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

• Komponentleriň içerki boşluklary 'space' -den.
• Konteýnerleriň daşky meýdançalary - 'gutter '/' margin' -den.
• Elementleriň beýikligi - 8 (40/48/56) esse.

10) Modully komponentler

• her arakesmede näçe sütün alýandygyny bilmek;
• iň pes/iň ýokary ölçeglere eýe bolmak;
• "jadyly" piksellere bagly däl - diňe bellikler;
• içerki tory (sözbaşy, mazmun, futer) baseline saklamak.

11) Şekiller we media proporsiýalary

Preview we kartoçkalar üçin aspect-ratio belläň (mysal üçin 16/9, 4/3, 1/1).

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

XS-de diňe mahabat üçin full-bleed (gyralary boýunça surat) ulanyň, galan mazmun konteýner tarapyndan yzarlanýar.
Suratdaky tekst - diňe kaskalarda/overlelarda, kontrast ≥ AA.

12) RTL we lokalizasiýa

Grid ugruna aýna düşýär: 'dir = "rtl' i ': dir (rtl)' -girişdeler/nyşanlar üçin dogry.
Sütünleriň tertibi we tablisalarda "ýelmeşýän" ýerler (frozen columns) - aýnany göz öňünde tutuň.
Setirleriň uzynlygy we göterijiler modullaryň beýikligini üýtgedip biler - ätiýaçlyk goýuň.

13) iGaming aýratynlyklary

Mahabat zolaklary we bannerler: uly modully aýratyn grid; teksti elmydama tekjede, jogapkär habarnamalar üçin AAA kontrast (18 +, çäkler, töwekgelçilikler).
Liderler/reýtingler: kesgitlenen birinji sütün we sticky-gapagy bolan tabular, tabular-nums sanlary, setirleriň beýikligi köp 8.
Oýunçylaryň/amallaryň daşbordlary: widjetler (sessiýalar, goýumlar, RTP, Net Deposits) 12-gridde 3-6 sütün eýeleýär; kaskadyň MD/SM-e üýtgedilmegi.
Ýaryşlaryň kartoçkalary: 3 × N (LG), 2 × N (MD), 1 × N (SM/XS) kartoçkalar tory; CTA hemişelik ýerde.

14) Elýeterlilik we üns

Fokus halkalary ritmi bozmaly däldir: outline-offset ýa-da içerki pseudo element goşuň.
Iň kiçi basma ölçegleri: 44 × 44 (mob.) / 32 × 32 (desktop).
Diňe ýerleşdirmek bilen many kodlamaň; tekst belliklerini we aria atributlaryny saklaň.

15) Öndürijilik

Gridleriň çuňlugyny azaldyň: 1 esasy bölüm grid + içindäki flexler.
Ýüzlerçe kartoçkalarda agyr kölegelerden/maskalardan gaça duruň; Sanawlarda "tekiz" stilleri ulanyň.
Media mazmunyny ýaltalyk bilen ýüklemek; kesgitlenen proporsiýalar CLS-iň öňüni alýar.

16) Antipatternler

"Tagamyna görä tor" → sahypalarynyň hersinde yzygiderlilik ýaýraýar.
Gutter bölümler boýunça özbaşdak üýtgeýär.
Ylalaşylmadyk dykyzlyklar (bir ekranda "kompakt" we "rahatlyk").
Jadyly giňliklere bagly komponentler (sütünsiz/belliksiz).
Mobilde gorizontal skrolly tablisalar.
Suratdaky tekst tekizsiz we kontrastly gözegçiliksiz.

17) QA-çek-sanawy

Gurluşy

• Sütünler/konteýner/marginler arakesmelere laýyk gelýär.
• Gutter sahypanyň içinde durnukly.
• Beýikligi we girelgeleri köp 8.

Komponentler

• Sütün giňligi (XS.. XL) we min/max kesgitlenildi.
• Içerki torlar baseline bilen ylalaşylýar.

Tablisalar/şekiller

• Sticky-hat/birinji sütün; stacked rejimi XS.
• Form meýdanlary krata baseline; bellik/help-tekst "bökmeýär".

A11y

• Fokus stilleri ritmi bozmaýar; iň az ≥ basylýan zolaklar.

Performans

• Media bloklary sebäpli CLS ýok; ýaltalyk ýüklendi.

18) Dizaýn-ulgamdaky bellikler we resminamalar

• 'container', 'columns', 'gutter', 'space', baseline;
• ýerleşiş mysallary (kartoçkalar/tablisalar/görnüşler/daşbordlar);
• dykyzlyk presetleri (Comfort/Compact) we olaryň komponentlere edýän täsiri;
• CSS Grid/Flex we Figma-stilleri/leauts üçin kod-snippetler.

Gysgaça gysgaça

Tor - dizaýn bilen işläp taýýarlamagyň arasyndaky şertnama. 8-pt aralyk nokatlaryny, konteýnerleri, sütünleri we ritmini düzüň, bellikleri we ýerleşiş şablonlaryny düzüň, dykyzlygyň, uýgunlaşmagyň we elýeterliligiň wariantlaryny üpjün ediň. Şonda sahypalar öňünden aýdylýan derejede ulalýar, komponentler gaýtadan ulanylýar we topar has çalt we durnukly işleýär.