To’rli tizim va modullilik

1) Nega panjara

• dizayn va ishlab chiqishni tezlashtiradi (umumiy til: «12 ustunli, gutter 24»),
• kognitiv yuklamani kamaytiradi (tekis ritm, barqaror chiziqlar),
• sahifalar orasidagi komponentlarning ko’chiruvchanligini oshiradi,
• «mikroverstkasiz» modulli kutubxona qurish imkonini beradi.

2) Setkaning bazaviy elementlari

Konteyner - kontentning maksimal kengligi, markazlashtirilgan hudud.
Ustunlar - modullarni joylashtirish uchun vertikal mintaqalar.
Gutter - ustunlar orasidagi gorizontal oraliq.
Margin - konteynerning chap/oʻng tomonidagi tashqi maydonchalar.
Row/Track - gorizontal yoʻnaltiruvchi (CSS Grid - satrlar/treklar).
Baseline - bosmaxonaning vertikal paneli.

Tavsiya etilgan vertikal ritm: 8-pt (ba’zan nuanslar uchun 4-pt), o’lcham va cheklovlar birligi 4/8 marta.

3) Breykpointlar va konteynyerlar

• Rastr konteyner (fix. max-width) katta ekranlarda, fluid - mobil.
• Gutter katta tanaffuslarga qarab silliq kattalashishi mumkin.
• Ustunlar - 4/6/8/12 «asosiy to’plam» sifatida.

4) Modullilik va zichlik

Modul - ustunlar 1..N va bir necha marta balandlikni egallagan kontent bloki.

• Comfort (dashbordlar, oʻqish): kattaroq shriftlar, 16-24 cheklovlar.
• Compact (jadvallar, profi-mode): + 0/ − 1 px shriftlari, 4/ − 8 − vertikal cheklovlar, satr balandligi (8 marta).

Komponentlar kamida ikkita zichlik presetiga ega bo’lishi kerak.

5) Bosmaxona va baseline-setka

Asosiy line- height (masalan, 24 px) ni tanlang va elementlarning balandligini sinxronlashtiring (40/48/56 px tugmalari).
Sarlavhalar vertikal ritmlarni mustahkamlaydi: sekundlar ustiga/ostiga 8 marta.
Piktogrammalarni matn ustiga tekislang.

6) Joylashtirish namunalari

6. 1 Kartochkalar (cards)

Toʻr: mozaika (fiks. ) yoki kolonochnaya (kartochka = N kolonka).
Yuklash paytida «sakrash» ni oldini olish uchun kontentning minimal balandligi; skeleton kartochka doirasida.
Ichki padding: breykpindga qarab 16/20/24.

6. 2-jadvallar

Butun kenglik uchun konteyner; gorizontal skrollda birinchi ustun/shlyapani muzlatib qo’yamiz.
Kataklar - bazeline-karrali; son ustunlarini razryadlar/o’nlik bo’yicha tekislaymiz.
XS - agar ustunlar juda koʻp boʻlsa, gorizontal skroll oʻrniga «karta satrlari» (stacked layout).

6. 3 Shakllar

Bir ustunli XS/SM, ikki yoki uch ustunli MD + (tablar/seksiyalar mantig’ini hisobga olgan holda).
Yorliq + yorliq + xelp-matn umumiy modulga joylashtiriladi (balandligi 8 karra).

6. 4 Dashbordlar

Barqarorlik uchun belgilangan treklar va bulutlar (areas) bilan grid.
Vidjetlar ustunlarda minimal va maksimal kenglikka ega; balandliklar - bazeline karralari.
Resayzda - ustunlar soni o’zgaradi, vidjetlarni o’zboshimchalik bilan bo’lmasin.

7) Moslashuvchanlik, auto-layout va xulq-atvor

Toʻrdan oldingi tarkib: toʻr tarkibni sindirish oʻrniga unga moslashadi.

• Kartochkalar/roʻyxatlar uchun constraints (left/right/center) va auto-layout dan foydalaning.
• XS/SM/MD/LG uchun komponent variantlarini qoʻllab-quvvatlang.

• Qismlar darajasida - CSS Grid (maydonlar, ustunlar, satrlar).
• Komponentlar ichida - Flex (oʻqlar, boʻshliqlar balansi).

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) Chekinishlar va tokenlar

Oʻlchamlarni dizayn tizimiga kiriting.

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

• Komponentlarning ichki cheklovlari - «space» dan.
• Konteynerlarning tashqi maydonlari -’gutter ’/’ margin’dan.
• Elementlarning balandligi - 8 (40/48/56) marta.

10) Modulli komponentlar

• har bir breykpindda qancha ustunni egallashini bilish;
• eng kam/eng ko’p o’lchamlarga ega bo’lishi;
• «sehrli» piksellarga bog’liq bo’lmaslik uchun - faqat tokenlar;
• ichki toʻrni (sarlavha, kontent, futer) baseline’da saqlash.

11) Tasvirlar va mediaproporsiyalar

Preview va kartochkalar uchun aspect-ratio (masalan, 16/9, 4/3, 1/1) ni oʻrnating.

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

XS’da faqat reklama uchun full-bleed’dan foydalaning, qolgan konteyner konteynerga amal qiladi.
Rasmdagi matn faqat ploshka/overlelarda, kontrast AA ≥.

12) RTL va mahalliylashtirish

Grid yo’nalishi:’dir = «rtl’i’: dir (rtl)’- chegara/ikonkalar uchun to’g» ri yo’l.
Jadvallardagi ustunlar tartibi va «yopishqoq» sohalar (frozen columns) - oynani hisobga oling.
Satrlar uzunligi va ko’chirmalar modullarning balandligini o’zgartirishi mumkin - zaxirani qo’ying.

13) iGaming xususiyatlari

Promo-zonalar va bannerlar: yirik modulli alohida grid; matn doimo ploshkada, mas’ul bildirishnomalar uchun AAA kontrasti (18 +, limitlar, xavflar).
Yetakchilar/reytinglar: birinchi ustunli va sticky-shapkali jadvallar, jadval raqamlari (tabular-nums), satrlarning balandligi 8 karrali.
O’yinchilar/operatsiyalar dashbordlari: vidjetlar (sessiyalar, depozitlar, RTP, Net Deposits) 12-gridda 3-6 ustunni egallaydi; kaskadni MD/SM ga qayta tiklash.
Turnir kartochkalari: 3 × N (LG), 2 × N (MD), 1 × N (SM/XS) kartochkalar setkasi; CTA doimiy joyda.

14) Ochiqlik va diqqat

Fokus halqalari ritmni buzmasligi kerak: outline-offset yoki ichki psevdo elementni qoʻshing.
Bosishning eng kichik o’lchamlari: 44 × 44 (mob.) / 32 × 32 (desktop).
Faqat joylashtirish orqali maʼnoni kodlamang; matn belgilari va aria atributlarini saqlang.

15) Unumdorlik

Gridlarning chuqurligini kamaytiring: 1 ta asosiy grid + ichki flekslar.
Yuzlab kartochkalarda og’ir soyalar/niqoblardan qoching; roʻyxatlardagi «yassi» uslublardan foydalaning.
Media tarkibini dangasa yuklash; belgilangan nisbatlar CLS oldini oladi.

16) Antipatternlar

«Ta’mga ko’ra to’r» ning har bir sahifasida mutanosiblik paydo bo’ladi.
Gutter o’zboshimchalik bilan seksiyalar bo’yicha o’zgaradi.
Kelishilmagan zichliklar (bitta ekranda ham «kompakt», ham «qulaylik»).
Magik kengliklarga bog’liq bo’lgan komponentlar (ustunlar/tokenlarsiz).
Mobaylda gorizontal skrollli jadvallar muqobil tartibsiz.
Rasmdagi matn ploshkasiz va kontrast nazoratisiz.

17) QA-chek-varaq

Tuzilmasi

• Ustun/konteyner/marginalar breykpindlarga mos keladi.
• Gutter sahifa ichida barqaror.
• Balandlik va chekka 8.

Komponentlar

• Ustunli kengliklar (XS.. XL) va min/max aniqlangan.
• Ichki toʻrlar bazeline bilan kelishilgan.

Jadvallar/shakllar

• Sticky-shapka/birinchi ustun; XS stacked rejimi.
• Shakl maydonlari bas; yorliq/xelp-matn «sakrab tushmaydi».

A11y

• Fokus uslublari ritmni buzmaydi; eng kam ≥ bosish zonalari.

Performance

• Media bloklar tufayli CLS mavjud emas; dangasa yuklash yoqilgan.

18) Dizayn-tizimdagi tokenlar va hujjatlar

• ’container’,’columns’,’gutter’,’space’, baseline;
• joylashtirish namunalari (kartochkalar/jadvallar/shakllar/dashbordlar);
• zichlik presetalari (Comfort/Compact) va ularning komponentlarga ta’siri;
• CSS Grid/Flex va Figma-stillari/leyautlari uchun kod-snippetlar.

Qisqacha xulosa

To’r - dizayn va ishlab chiqish o’rtasidagi shartnomadir. Breykpointlar, konteynerlar, ustunlar va 8-pt ritmni qayd qiling, token va sxemalarni rasmiylashtiring, zichlik variantlarini, moslashuvchanlikni va qulaylikni ta’minlang. Keyin sahifalar oldindan aytib bo’lmaydigan darajada kattalashtiriladi, komponentlar qayta ishlatiladi va buyruq tezroq va barqaror ishlaydi.