ქსელის სისტემა და მოდულარობა

1) რატომ არის ბადე

• აჩქარებს დიზაინსა და განვითარებას (საერთო ენა: „12 სვეტი, გუტერი 24“),
• ამცირებს კოგნიტურ დატვირთვას (გლუვი რიტმი, სტაბილური ხაზები),
• ზრდის კომპონენტების ტოლერანტობას გვერდებს შორის,
• საშუალებას გაძლევთ შექმნათ მოდულური ბიბლიოთეკა „მიკროტალღების“ გარეშე.

2) ქსელის ძირითადი ელემენტები

კონტეინერი არის შინაარსის მაქსიმალური სიგანე, ცენტრირებული რეგიონი.
სვეტები - ვერტიკალური რეგიონები მოდულების განთავსებისთვის.
Gutter არის ჰორიზონტალური უფსკრული სვეტებს შორის.
მარგინი - გარე ველები კონტეინერის მარცხენა/მარჯვნივ.
Row/Track არის ჰორიზონტალური სახელმძღვანელო (CSS Grid- ში - ხაზები/ბილიკები).
Baseline არის ვერტიკალური სტამბის ქსელი.

რეკომენდებული ვერტიკალური რიტმი: 8-pt (ზოგჯერ 4-pt ნიუანსებისთვის), ზომისა და უკან დახევის ერთეულები მრავლდება 4/8.

3) ბრეიკპოინტები და კონტეინერები

• Rastram კონტეინერი (fix. max width) დიდ ეკრანებზე, fluid - მობილური.
• Gutter შეიძლება შეუფერხებლად გაიზარდოს დიდი ბრეიკპოინტებით.
• სვეტები - 4/6/8/12, როგორც „მთავარი ნაკრები“.

4) მოდულარობა და სიმკვრივე

მოდული არის შინაარსის ბლოკი, რომელიც იკავებს 1.. N სვეტებს და მრავალჯერადი ბასელინის სიმაღლეებს.

• კომფორტი (დაშბორდები, კითხვა): უფრო დიდია, ვიდრე შრიფტები, უკან დახევა 16-24.
• კომპაქტური (ცხრილი, პროფილის რეჟიმი): შრიფტები + 0/− 1 px, ვერტიკალური გადახრა − 4/− 8, სტრიქონების სიმაღლე ფიქსირდება (მრავლობითი 8).

კომპონენტებს უნდა ჰქონდეთ ორი სიმკვრივის პრესეტა.

5) სტამბა და სასადილო ბადე

შეარჩიეთ ძირითადი line height (მაგალითად, 24 px) და სინქრონიზაცია მოახდინეთ ელემენტების სიმაღლეებზე (ღილაკები 40/48/56 px baseline).
სათაურები აფიქსირებს ვერტიკალურ რიტმებს: უკან დახევა/8-ზე მეტჯერ.
მოათავსეთ ხატები ტექსტის წვეთებით.

6) განლაგების შაბლონები

6. 1 ბარათები

ქსელი: მოზაიკა (ფიქსი. ბარათის სიგანე) ან სვეტი (ბარათი = N სვეტები).
მინიმალური შინაარსის სიმაღლეები დატვირთვის დროს „ნახტომების“ თავიდან ასაცილებლად; სკელეტონი ბარათში.
შიდა padding: 16/20/24, ბრეიკპოინტიდან გამომდინარე.

6. 2 ცხრილი

კონტეინერი მთელ სიგანეზე; გაყინეთ პირველი სვეტი/ქუდი ჰორიზონტალური ფერდობზე.
უჯრედები - ბასელინი მრავალჯერადი; ჩვენ ვათანაბრებთ ციფრულ სვეტებს კატეგორიებში/ათეულში.
XS- ზე - ჰორიზონტალური ფრჩხილების ნაცვლად „ბარათების ხაზები“ (stacked layout), თუ ძალიან ბევრი სვეტი არსებობს.

6. 3 ფორმა

ერთსართულიანი ბორბლები XS/SM, ორმაგი ან სამსაფეხურიანი MD + - ზე (ტაბების/სექციების ლოგიკის გათვალისწინებით).
ველი + ეტიკეტი + ჰელფის ტექსტი ჯდება საერთო მოდულში (სიმაღლეები 8).

6. 4 დაშბორდი

მაკიაჟი ფიქსირებული ტრეკებითა და ღრუბლებით (areas) სტაბილურობისთვის.
ვიჯეტებს აქვთ მინიმალური და მაქსიმალური სიგანე სვეტებში; სიმაღლეები - მრავალჯერადი ბასელინი.
რეცესიის დროს - სვეტების რაოდენობა იცვლება, ჩვენ თვითნებურად არ გავაფორმებთ ვიჯეტებს.

7) ადაპტაცია, ავტო-ლაივი და ქცევა

შინაარსი ქსელის წინ: ბადე ადაპტირებულია შინაარსთან და არ არღვევს მას.

• გამოიყენეთ constraints (მარცხენა/მარჯვენა/ცენტრი) და 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) სურათები და მედია ორგანიზაციები

ჩაწერეთ ასპექტი (მაგალითად, 16/9, 4/3, 1/1) წინასწარ და ბარათებისთვის.

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

XS- ზე გამოიყენეთ full-bleed (სურათი კიდეებზე) მხოლოდ პრომო, დანარჩენი შინაარსი მიჰყვება კონტეინერს.
სურათზე განთავსებული ტექსტი მხოლოდ windshields/overles, AA- ს კონტრასტია.

12) RTL და ლოკალიზაცია

მაკიაჟის მიმართულება სარკეა: 'dir = „rtl“' და ': dir (rtl)' - მართავდა უკან დახევას/ხატებს.
სვეტების შეკვეთა და ცხრილებში „წებოვანი“ ადგილები - გაითვალისწინეთ მარცვლეული.
ხაზების სიგრძემ და გადაცემებმა შეიძლება შეცვალოს მოდულის სიმაღლეები - დააწესეთ რეზერვი.

13) iGaming სპეციფიკა

სარეკლამო ზონები და ბანერები: ცალკეული მაკიაჟი დიდი მოდულებით; ტექსტი ყოველთვის არის ტირილზე, AAA- ს კონტრასტი პასუხისმგებლობის შეტყობინებებისთვის (18 +, ლიმიტები, რისკები).
ლიდერები/რეიტინგები: ცხრილები ფიქსირებული პირველი სვეტით და sticky ქუდით, ცხრილის ნომრები (tabular-nums), ხაზების სიმაღლე მრავლდება 8-ით.
მოთამაშეთა/ოპერაციების დაშბორდები: ვიჯეტები (სესიები, ანაბრები, RTP, Net Deposits) იკავებენ 3-6 სვეტს 12 გრადუსზე; კასკადის აღდგენა MD/SM- ზე.
ტურნირების ბარათები: ბარათის ქსელი 3 × N (LG), 2 × N (MD), 1 × N (SM/XS); CTA მუდმივ ადგილზეა.

14) ხელმისაწვდომობა და ყურადღება

ფოკუსის რგოლები არ უნდა დაარღვიოს რიტმი: დაამატეთ outline offset ან შიდა ფსევდო ელემენტი.
დაწკაპუნების მინიმალური ზომები: 44 × 44 (მობ.) / 32 × 32 (დესკტოპი).
არ დაშიფროთ მნიშვნელობა მხოლოდ განთავსებით; შეინარჩუნეთ ტექსტური ეტიკეტები და aria ატრიბუტები.

15) პროდუქტიულობა

შეამცირეთ გრიდების ინვესტიციის სიღრმე: 1 განყოფილების მთავარი მაკიაჟი + ფრჩხილები შიგნით.
მოერიდეთ მძიმე ჩრდილს/ნიღბებს ასობით ბარათზე; გამოიყენეთ „ბრტყელი“ სტილები სიებში.
მედიის შინაარსის ზარმაცი დატვირთვა; ფიქსირებული პროპორციები ხელს უშლის CLS- ს.

16) ანტიპატერები

„ბადე გემოვნებით“ თითოეულ გვერდზე თანმიმდევრულობა იშლება.
გუტერი თვითნებურად იცვლება სექციებში.
არაკოორდინირებული სიმკვრივეები (ერთ ეკრანზე, როგორც „CD“, ასევე „კომფორტი“).
კომპონენტები, რომლებიც დამოკიდებულია ჯადოსნურ სიგანეებზე (სვეტების/ტოქსენების გარეშე).
მაგიდები ჰორიზონტალური სკრილით მობილზე ალტერნატიული განლაგების გარეშე.
ტექსტი გამოსახულების გარეშე და კონტრასტის კონტროლი.

17) QA ჩეკის სია

სტრუქტურა

• სვეტები/კონტეინერები/მარგინები შეესაბამება ბრეიკპოინტებს.
• გუთერი სტაბილურია გვერდის შიგნით.

სიმაღლეები და უკან დახევა 8 - ზე მეტია.

კომპონენტები

• განისაზღვრება სვეტების სიგანე (XS.. XL) და min/max.
• შიდა ბადეები შეთანხმებულია ბასელინთან.

ცხრილი/ფორმა

• Sticky ქუდი/პირველი სვეტი; stacked რეჟიმი XS- ზე.
• ფორმების ველები მრავალჯერადია; ეტიკეტი/ჰელპის ტექსტი არ „გადახტა“.

A11y

• ფოკუს სტილები არ არღვევს რიტმს; დაწკაპუნების ზონები მინიმალურია.

შესრულება

• არ არსებობს CLS მედია ბლოკების გამო; ზარმაცი დატვირთვა ჩართულია.

18) ნიშნები და დოკუმენტაცია დიზაინის სისტემაში

• მნიშვნელობები 'container', 'columns', 'gutter', 'space', baseline;
• განლაგების მაგალითები (ბარათები/ცხრილი/ფორმა/დაშბორდი);
• სიმკვრივის შეფუთვები (Comfort/Compact) და მათი გავლენა კომპონენტებზე;
• Snippets კოდი CSS Grid/Flex და Figma steel/Leyauts.

მოკლე რეზიუმე

ქსელი არის ხელშეკრულება დიზაინსა და განვითარებას შორის. დააფიქსირეთ ბრეიკპოინტები, კონტეინერები, სვეტები და 8-pt რიტმი, შეადგინეთ ნიშნები და განლაგების შაბლონები, უზრუნველყოთ სიმკვრივის ვარიანტები, ადაპტირება და წვდომა. შემდეგ გვერდები პროგნოზირებულია, კომპონენტები ხელახლა გამოიყენება, გუნდი კი უფრო სწრაფად და სტაბილურად მუშაობს.