Reguły układu dla Streak Survivor X — breakpointy, szerokość kontenera, siatka kolumnowa oraz pionowy rytm między nagłówkami, tekstem i sekcjami. Desktop-first (1440), z mobile 360–390 jako drugim filarem.
01 · Breakpoints
Projektujemy głównie na desktop 1440×1080. Treść zamknięta w kontenerze, reszta to równe marginesy boczne. Mobile bazuje na 360–390 px.
02 · Grid
12 kolumn na desktopie, 4 na mobile. Gutter (odstęp między kolumnami) trzymany na 24 / 16 px. Kolumny są elastyczne — liczy się liczba kolumn i gutter, nie sztywna szerokość.
03 · Vertical rhythm
Wartości pokazane między blokami to realne odstępy. Zasada: przestrzeń nad nagłówkiem > pod nim — nagłówek wiąże się ze swoją treścią, nie z poprzednią.
Lede / pierwszy akapit zaraz pod tytułem strony. Body L 17 px, line-height 1.5.
Tekst sekcji. Body 15 px, line-height 1.5. Kolejne akapity rozdzielamy mniejszym odstępem.
Drugi akapit tej samej myśli.
Podsekcja — nagłówek mocno przyklejony do treści.
Lede pod tytułem. Na mobile body 16 px dla czytelności.
Tekst sekcji. Body 15 px, line-height 1.5.
Drugi akapit.
Podsekcja na mobile.
04 · Sections
Główne sekcje strony rozdzielamy dużym, spójnym odstępem (opcjonalnie z linią 1px var(--line)). Większy blok (np. nowy rozdział) dostaje jeszcze więcej powietrza.
05 · Tokens
Wszystkie liczby w jednym miejscu — desktop i mobile obok siebie.
Layout
| Parametr | Desktop | Mobile |
|---|---|---|
| Breakpoint | 1440 ×1080 | 360–390 |
| Kontener | 1300 | 328–358 |
| Margines boczny | 70 | 16 |
| Kolumny | 12 | 4 |
| Gutter | 24 | 16 |
| Szer. kolumny | ≈ 86 | ≈ 70 |
Rytm pionowy
| Odstęp | Desktop | Mobile |
|---|---|---|
| H1 → body | 24 | 16 |
| H2 → body | 20 | 14 |
| H3 → body | 12 | 8 |
| ¶ → ¶ | 16 | 14 |
| nad H2 | 64 | 40 |
| nad H3 | 40 | 28 |
| sekcja → sekcja | 96 | 56 |
| duży rozdział | 120 | 64 |