Sűrűségmódok és reszponzivitás
Day 13 of 30 · The Playbook 2026 – Mesterkurzus Designereknek
Levegős / kényelmes / tömör módokat definiálsz, és töréspontonként szabályozod a térközt és a tipót.
Tanulási cél
- 3 sűrűségmód: levegős / kényelmes / tömör.
- Token-alapú váltás (gap, padding, tipó méret) breakpointra vagy user settingre.
- Reszponzív tipó és spacing táblázat.
- Dokumentált példák: táblázat, kártyarács, form.
Miért fontos
- B2B és dashboard: gyakran dense mód kell.
- Mobilon levegős, desktopon hatékonyabb sűrűség.
- Következetlen sűrűség = káosz.
Magyarázat
- Mód váltás: space token vált, tipó méret vált.
- Airy: space.lg, tipó +1; Dense: space.sm/md, tipó -1.
- Alkalmazási szabály: nagy adatsűrűség → dense, marketing → airy.
Példák
Rossz: Ugyanaz a spacing mindenhol, táblázat túl levegős.
Jó: Dashboard dense mód: kisebb padding, kisebb gap, tipó -1; marketing airy.
Gyakorlat (vezetett, 10-15 perc)
- Hozz létre sűrűség táblát: airy/comfort/dense → spacing/tipó értékek.
- Állíts be példákat: táblázat dense, kártya comfort, hero airy.
- Dokumentáld a váltási szabályt (hol melyik mód).
Gyakorlat (önálló, 5-10 perc)
Implementálj egy komponenst két sűrűségi módban, screenshotold összevetve.
Önellenőrzés
- Sűrűség táblázat létezik.
- Példák dokumentálva.
- Váltási szabály megvan.
Opcionális mélyítés
- Fluent density: https://fluent2.microsoft.design/styles/layout#density
- Material responsive guidance: https://m3.material.io/foundations/layout/overview