Amanoba Logo
Back to Course

Spacing mint nyelvtan

Day 12 of 30 · The Playbook 2026 – Mesterkurzus Designereknek

Spacing scale-t hozol létre, ami ritmust és konzisztenciát ad minden komponenshez.

Tanulási cél

  • Spacing skála (4/8/12/16/24/32) és használati szabályok.
  • Vertikális ritmus (margin-top/bottom) egységesítése.
  • Komponensekhez token hozzárendelés (pl. kártya padding md, szekció lg).
  • „Ne használj véletlen px-értékeket” szabály bevezetése.

Miért fontos

  • Spacing adja a vizuális nyugalmat vagy sűrűséget.
  • Következetlenség = vizuális zaj.
  • Gyorsabb build: ismert padding/gap tokenek.

Magyarázat

  • Alap egység: 4 vagy 8.
  • Tokenek: space.xs=4, sm=8, md=12/16, lg=24, xl=32.
  • Vertikális ritmus: heading utáni margin-top/bottom fix értékek.

Példák

Rossz: 5, 7, 11 px-ek vegyesen.

Jó: Csak tokenből választott spacing, komponens-dokumentációval.

Gyakorlat (vezetett, 10-15 perc)

  1. Hozd létre a spacing tokeneket és írd mellé a használatot (pl. section padding xl, kártya padding md).
  2. Állíts be heading utáni margin szabályokat.
  3. Alkalmazd egy layoutra, és jelöld a forrás tokeneket.

Gyakorlat (önálló, 5-10 perc)

Auditálj egy meglévő oldalt, cseréld tokenre az elszórt értékeket.

Önellenőrzés

  • Spacing skála létezik.
  • Vertikális ritmus dokumentálva.
  • Random px-ek felszámolva.

Opcionális mélyítés