Z mobilu
Dizajn vždy začína mobilom — desktop pridáva, neuberá.
Grid systém
12-stĺpcový CSS Grid s breakpoints pre mobile, tablet a desktop.
Základná mriežka
Príklad 12-stĺpcovej mriežky
1
2
3
4
5
6
7
8
9
10
11
12
Mriežka používa grid-template-columns: repeat(12, 1fr) s 32px gap-om.
Bežné rozloženia
Štyri kombinácie, ktoré uvidíte na Totemic stránkach
span 12 — full width
span 6
span 6
span 4
span 4
span 4
3
3
3
3
span 8 — obsah
span 4 — sidebar
Breakpointy
Tri základné prahy, na ktorých sa mriežka prelomuje
| Breakpoint | Šírka | Stĺpce | Gap | Container |
|---|---|---|---|---|
| Mobile | < 640px | 4 | 16px | 100% |
| Tablet | 640–1024px | 8 | 24px | 720px |
| Desktop | > 1024px | 12 | 32px | 1180px |
Pravidlá
Tri princípy pre prácu s gridom
Bez floats
Žiadne floats ani Bootstrap stĺpce — len natívny CSS Grid.
Konzistencia
Container má vždy max-width 1180px na desktope — nikdy nie viac.