Folyékony tipográfia

A Folyékony tipográfia generátorral pontos és reszponzív betűméreteket hozhatsz létre CSS-változókként, clamp() használatával. A méretek a megadott minimum és maximum között simán skálázódnak, így a szöveg minden képernyőn és eszközön olvasható marad. A generátor leegyszerűsíti a betűméretek kezelését, miközben rugalmas és pontos marad.

A folyékony tipográfia elérése

Nyisd meg a Stíluskezelőt a szerkesztő eszköztárán, majd válaszd a Tipográfia lapot. Itt hozhatsz létre és szerkeszthetsz folyékony tipográfiai skálákat.

https://minta-bolt.hu/home/?bricks=run

A képen a bal oldali panelen a skála vezérlői, jobbra a lépések listája látszik a minimális és maximális méretükkel, mindegyik egy előnézeti szövegsorral.

Az általános skálabeállítások a Stíluskezelő beállításaiban vannak: az rem-számításhoz használt HTML-betűméret, valamint a minimális és maximális képernyőszélesség. A padding, margó és hézag értékekre vonatkozó térközskálák ugyanígy működnek a Térközök lapon, lásd a Folyékony térközök fejezetet.

Kategóriák

A Bricks korlátlan számú folyékony tipográfiai skálát enged a címsoroknak, a szövegnek és így tovább, kategóriákon keresztül. Minden kategória egy tipográfiai skála, és a skála összes beállítását magával tárolja.

Egyszerűen is kezdheted: hozz létre egy Headings és egy Text kategóriát a két skálához. Új skála létrehozásához a Skála neve mezőbe írd be a nevet, és kattints a Létrehozás gombra.

Folyékony tipográfiai változók

A változókat a jobb oldali skálagenerátorral hozhatod létre.

A skálamódosítások előnézete előbb a listában jelenik meg. Kattints a Változók újragenerálása gombra, hogy a kategória változóit létrehozd vagy frissítsd (ha nincs függőben lévő változtatás, a gomb felirata Változók generálása). A Stíluskezelő fejlécében lévő ikon, a „Változók újragenerálása és mentés”, mindkettőt egy lépésben elvégzi.

Generáláskor a kiválasztott kategória összes meglévő változója törlődik, és az újonnan létrehozottak veszik át a helyüket. Ha a kategóriában már vannak változók, a Bricks előbb megerősítést kér. A változók száma ugyanannyi marad, de a nevek és az értékek újragenerálódnak, vagyis a változónevekhez és -értékekhez kézzel hozzáadott módosítások elvesznek. Ha a lépések száma és a skála típusa változatlan, a nevek is ugyanazok maradnak, így minden hely, ahol változót használsz (például var(--heading-xl)), az új értéket kapja.

Skálavezérlők

Vezérlő	Mit csinál
Változóelőtag	A változónevek szerkezetét adja meg. Ha text-, a változók --text-m vagy --text-xl nevűek lesznek. Válassz egyedi, beszédes előtagot, hogy elkerüld az ütközéseket.
Skála típusa	A változók elnevezési módja: Póló, Numerikus vagy Egyedi.
Egyedi skála típusa	Csak Egyedi típusnál látszik. Saját skálaneveket adhatsz meg.
Alapvonal-lépésköz	A skála alapja. A kiindulási változó pontosan a megadott minimális és maximális betűmérettel egyezik, a többi lépést ehhez viszonyítva számolja.
HTML-betűméret	Az rem-alap a skálageneráláshoz.
Alapméret (px)	A minimum (mobil) és a maximum (asztali gép) csoportban külön-külön.
Képernyőszélesség (px)	A minimális és maximális képernyőszélesség.
Tipográfiai skála aránya	A szomszédos lépések közötti szorzó.

Skála típusa

Három lehetőség van:

1. Póló: pólóméretek szerinti nevek: 2xs, xs, s, m, l, xl, 2xl. Példa kimenet: --text-m.
2. Numerikus: számokat használ, tipikusan 1-től 6-ig. Példa kimenet: --text-4.
3. Egyedi: teljes kézi irányítás a névadás felett. Beírhatsz például small, medium, large, title neveket, így --text-medium lesz a változó.

Az Egyedi típusnál az új lépések neveit át kell írnod, vagy még jobb, ha az új értéket közvetlenül az egyedi skálához adod hozzá.

HTML-betűméret

A Stíluskezelő HTML-betűméret beállítása adja meg az rem-alapot a skálagenerálásnál. Megadhatod kifejezetten 10px-ben vagy 16px-ben, vagy automatikusra hagyhatod: ekkor a Bricks a sablonstílusokból próbálja kiolvasni az értéket, és ha nem sikerül, az alapértelmezéssel számol.

Alapméret és képernyőszélesség

A skálabeállításoknak két csoportja van: Minimum (Mobil) és Maximum (Asztali gép). Mindkettőnek saját alapmérete és tipográfiai skálaaránya van (alapértékek: 16px és 1,25, illetve 20px és 1,333). A két alapméret a baseline lépés minimális és maximális értékét adja, a többi lépés méretét a tipográfiai skála aránya számolja ki.

A minimális és maximális képernyőszélességet egyszer, a Stíluskezelő beállításaiban kell megadni, és minden skálára érvényes (alapérték: 360px és 1440px). A minimális szélességnél minden lépés a minimális méretét használja, a maximális szélességnél a maximálisat. E szélességeken kívül a betűméretek állandók.

Tipográfiai skála aránya

Az arány azt adja meg, hogy a betűméret mennyivel nő vagy csökken a szomszédos változóhoz képest. Ha az alap 16 px és az arány 1,5, az alap fölötti következő lépés 24 px. Az arányt a Bricks felfelé és lefelé is alkalmazza, így mindkét irányban egyenletes a skála. Mivel a minimumnak és a maximumnak saját aránya van, a nagyobb arány nagy képernyőn nagyobb kontrasztot ad a címsorok között, telefonon viszont kompakt marad. Az alapvonal alatti lépések nagy képernyőn jobban összehúzódnak, ezért a legkisebb lépéseknél a maximum érték a minimum alá is kerülhet.

Haladó esetben egyedi arányt is megadhatsz. Az egyedi értékekhez tartozó vezérlő csak az Egyedi opció kiválasztásakor jelenik meg, és pontos kézi irányítást ad arról, hogyan számolódik az egyes lépés.

Változók szerkesztése

A generált változók a középső panelen jelennek meg, és többféleképpen kezelheted őket.

Változók hozzáadása

Vidd az egeret az első vagy az utolsó lépés fölé a listában. A bal szélén megjelenik egy + gomb: az első sor fölé kisebb, az utolsó sor alá nagyobb lépést ad hozzá (például 3xl-t a 2xl után).

Az új lépést a megfelelő helyre szúrja be az alapvonal alatt vagy fölött, a változó neve és értéke automatikusan generálódik. Egyedi skálatípusnál a változónevet kézzel kell frissítened, vagy még jobb, ha az új értéket közvetlenül az egyedi skála definíciójához adod.

Változók törlése

A legkisebb vagy a legnagyobb lépés eltávolításához vidd az egeret az első vagy utolsó sor fölé, és kattints a − gombra. Az alapvonal lépést a Bricks nem engedi törölni, mert a többi lépés ettől függ.

Változók szerkesztése

A változók neve és értéke közvetlenül szerkeszthető, ha kijelölöd őket a középső oszlopban. A kézi módosítás csak a kijelölt változóra vonatkozik, és a számításokat nem érinti. Így finomhangolhatsz, miközben a skála egésze egységes marad.

A változók használata

A generált változók minden méretvezérlő változóválasztójában megjelennek, kategóriájuk szerint csoportosítva. Ha az azonos szintű címsorok egy méretet kapjanak az egész webhelyen, állítsd be őket a sablonstílusban: Sablonstílusok → a sablonstílusod → Tipográfia → Címsor H1 (H2, H3 …) → Tipográfia → Betűméret, majd válaszd ki a változót, például a H2-höz a var(--heading-xl) értéket.

Az elemen közvetlenül, akár töréspontra megadott betűméret elsőbbséget élvez a sablonstílussal szemben. Töröld ezeket az elemekről, amelyeknek követniük kell a sablonstílust. Ha egy elemnek szándékosan el kell térnie (például egy nagyobb hősszöveg), ne beírt értéket használj, hanem ugyanazon skála egy másik lépését válaszd.

Tipográfiai előnézet

A középső lista a skála minden lépését mutatja a minimális és maximális méretével, mindegyiket egy előnézeti szövegsorral. A skálabeállítások változásai azonnal látszanak a listában, de a változókba csak a Változók újragenerálása gombra kattintás után kerülnek.

A Stíluskezelő fejlécében lévő szem ikonnal be- és kikapcsolhatod a vászon előnézetét, így munka közben az oldalt is látod a Stíluskezelő mellett.