System siatki i modułowość

1) Dlaczego oczko

• przyspiesza projektowanie i rozwój (wspólny język: „12 kolumn, rynna 24”),
• zmniejsza obciążenie poznawcze (nawet rytm, stabilne linie),
• Zwiększa przenośność komponentów między stronami
• pozwala zbudować bibliotekę modułową bez „mikrolaying”.

2) Podstawowe elementy oczek

Pojemnik - maksymalna szerokość zawartości, powierzchnia środkowa.
Kolumny - pionowe obszary do układania modułów.
Rynna - przestrzeń pozioma między kolumnami.
Margines - pola zewnętrzne po lewej/prawej stronie zbiornika.
Wiersz/tor - prowadnica pozioma (w siatce CSS - linie/tory).
Linia podstawowa - pionowa siatka typograficzna.

Zalecany rytm pionowy: 8-pt (czasami 4-pkt dla niuansów), jednostki wielkości i indentów są wielokrotnościami 4/8.

3) Punkty przełomowe i pojemniki

• Pojemnik rastrowy (naprawić. maksymalna szerokość) na dużych ekranach, płyn - na telefonie komórkowym.
• Rynna może płynnie zwiększyć się do dużych punktów przełomowych.
• Kolumny - 4/6/8/12 jako „rdzeń”.

4) Modułowość i gęstość

Moduł - blok treści zajmujący 1..N kolumny i wielokrotności wysokości wyjściowej.

• Komfort (deski rozdzielcze, odczyt): większe czcionki, tiret 16-24.
• Kompaktowe (tabele, pro-tryb): czcionki + 0/− 1 px, indenty pionowe − 4/− 8, wysokość rzędu jest ustalona (wielokrotność 8).

Elementy muszą mieć dwa ustawienia o minimalnej gęstości.

5) Typografia i siatka bazowa

Wybierz podstawową wysokość linii (na przykład 24 px) i zsynchronizuj wysokość elementów (przyciski 40/48/56 px są wielokrotnościami linii wyjściowej).
Pozycje kotwiczą rytmy pionowe: powyżej/poniżej tiret są wielokrotnościami 8.
Wyrównać ikony do wysokości tekstu.

6) Szablony układu

6. 1 Karty

Siatka: mozaika (fix. szerokość karty) lub kolumna (karta = kolumny N).
Minimalna wysokość zawartości, aby uniknąć „skakania” podczas załadunku; szkielet wewnątrz karty.
Wyściółka wewnętrzna: 16/20/24 w zależności od punktu podziału.

6. 2 Tabele

Pojemnik o pełnej szerokości; zamrozić pierwszą kolumnę/nakrętkę podczas przewijania poziomego.
Komórki są od początku krotne; kolumny liczbowe są wyrównywane cyframi/przecinkami.
Na XS - „układ ułożony” zamiast poziomego przewijania, jeśli jest zbyt wiele kolumn.

6. 3 Formularze

Jednokolumna na XS/SM, dwu- lub trzykolumnowa na MD + (z uwzględnieniem logiki kart/sekcji).
Pole + etykieta + pomoc tekst pasuje do wspólnego modułu (wysokości są wielokrotności 8).

6. 4 Deski rozdzielcze

Siatka ze stałymi torami i chmurami (obszary) dla stabilności.
Widżety mają minimalne i maksymalne szerokości w kolumnach; wysokość jest wielokrotnością linii wyjściowej.
Przy odsprzedaży - liczba kolumn zmienia, nie podzielić widżety arbitralnie.

7) Adaptacja, automatyczny układ i zachowanie

Zawartość przed siatką: Siatka dostosowuje się do zawartości, a nie łamie ją.

• Użyj ograniczeń (lewo/prawo/centrum) i automatycznego układu dla kart/list.
• Obsługa opcji komponentów dla XS/SM/MD/LG (zmiana okładzin, zamówienie gniazda).

• Na poziomie sekcji - Siatka CSS (obszary, kolumny, wiersze).
• Wewnątrz elementów - Flex (osie, równowaga przestrzeni).

8) CSS Grid/Flex - warsztat

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) Tiret i żetony

Przechwytywanie wagi w systemie projektowania.

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

• Wewnętrzne tiret komponentów pochodzą z „przestrzeni”.
• Pola zewnętrzne pojemników pochodzą z „rynny ”/„ marginesu”.
• Wysokość elementu to wielokrotność 8 (40/48/56).

10) Elementy modułowe

• Wiedzieć, ile kolumn zajmuje na każdym przełomie;
• mają wymiary minimalne/maksymalne;
• nie zależą od „magicznych” pikseli - tylko żetony;
• utrzymać wewnętrzną siatkę (tytuł, treść, stopka) na linii podstawowej.

11) Obrazy i porcje mediów

Naprawić proporcje (np. 16/9, 4/3, 1/1) do podglądów i kart.

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

Na XS użyj pełnego krwawienia (obraz wokół krawędzi) tylko dla promo, reszta zawartości podąża za pojemnikiem.
Tekst obrazu - tylko na poślizgach/nakładkach, kontrast ≥ AA.

12) RTL i lokalizacja

Lusterka kierunku siatki: 'dir =' rtl' oraz 'dir (rtl)' - części dla indentów/ikon.
Kolejność kolumn i zamrożone kolumny w tabelach - rozważyć lustrowanie.
Długość linii i transferów może zmienić wysokość modułów - ułożyć zapasy.

13) Specyfika iGaming

Obszary promo i banery: oddzielna siatka z dużymi modułami; tekst jest zawsze na tablicy, kontrast AAA dla powiadomień krytycznych (18 +, limity, ryzyko).
Lidery/oceny: tabele ze stałą pierwszą kolumną i lepkim nagłówkiem, numery tabelaryczne (numery tabelaryczne), wysokość rzędu to wielokrotność 8.
Deski rozdzielcze graczy/operacji: widżety (sesje, depozyty, RTP, depozyty netto) zajmują 3-6 kolumn na 12-siatce; przebudowa kaskady na MD/SM.
Karty turniejowe: siatka kart 3 × N (LG), 2 × N (MD), 1 × N (SM/XS); CTA w stałym miejscu.

14) Dostępność i koncentracja

Pierścienie ostrości nie powinny łamać rytmu: dodać obrys-offset lub wewnętrzny pseudo-element.
Minimalny rozmiar kliknięcia: 44 × 44 (mobilny )/32 × 32 (pulpit).
Nie kodować znaczenia tylko przez umieszczenie; Zapisz etykiety tekstowe i atrybuty aria.

15) Wydajność

Zmniejszyć głębokość siatki gniazdowania: 1 główna sekcja siatki + elastyki wewnątrz.
Unikaj ciężkich cieni/masek na setkach kart; Użyj płaskich stylów w listach.
Leniwe obciążenie zawartości mediów; stałe proporcje zapobiegają CLS.

16) Antypattery

„Siatka do smaku” konsystencja → kruszy się na każdej stronie.
Rynna różni się arbitralnie według sekcji.
Niespójne gęstości (zarówno kompaktowe, jak i komfortowe w jednym ekranie).
Magiczne elementy zależne od szerokości (brak kolumn/żetonów).
Stoły z poziomym przewijaniem na telefonie komórkowym bez alternatywnego układu.
Tekst na obrazku bez umiera i kontroli kontrastu.

17) Lista kontrolna QA

Struktura

• Kolumny/kontener/marginesy odpowiadają punktom granicznym.
• Rynna jest stabilna w obrębie strony.
• Wysokość i tiret są wielokrotnościami 8.

Komponenty

• Szerokości kolumn (XS.. XL) i min/max są zdefiniowane.
• Sieci wewnętrzne są dostosowane do poziomu odniesienia.

Tabele/formularze

• Naklejka/pierwsza kolumna; tryb ułożony na XS.
• Pola formularza są wielokrotnościami linii bazowej; etykieta/pomoc tekst nie „skakać”.

A11y

• Style ostrości nie łamią rytmu; strefy kliki ≥ minimalne.

Wydajność

• Brak CLS ze względu na bloki medialne; leniwe obciążenie jest włączone.

18) Żetony i dokumentacja w systemie projektowym

• wartości „pojemnik”, „kolumny”, „rynna”, „przestrzeń”, linia podstawowa;
• przykłady układów (karty/tabele/formularze/deski rozdzielcze);
• ustawienia gęstości (Comfort/Compact) i ich wpływ na elementy;
• snippety kodowe do stylów/układów CSS Grid/Flex i Figma.

Krótkie podsumowanie

Grid to umowa między projektowaniem a rozwojem. Przechwytywanie punktów przełomowych, kontenerów, głośników i 8-pkt rytmu, żetonów projektowych i szablonów układów, zapewniają opcje gęstości, adaptację i dostępność. Następnie skala stron przewidywalnie, komponenty są ponownie używane, a polecenie jest szybsze i bardziej stabilne.