Folyékony térközök

A folyékony térközskála a fix padding-, margó- és hézagértékeket CSS-változókkal váltja ki, amelyek a képernyővel együtt nőnek. Minden változó clamp() értéket használ: kis képernyőn a minimumát, nagy képernyőn a maximumát, a kettő között pedig sima átmenetet. Egyetlen térközváltozó helyettesíthet egy padding-értéket és a töréspontonként külön megadott értékeket.

A folyékony térközök elérése

Nyisd meg a Stíluskezelőt a szerkesztő eszköztárán, majd a bal oldali menüben válaszd a Térközök lapot. Itt hozhatsz létre és szerkeszthetsz térközskálákat.

A minimális és maximális képernyőszélességet, valamint az rem-számításhoz használt HTML-betűméretet egyszer, a Stíluskezelő beállításaiban kell megadni, és ez minden térköz- és tipográfiai skálára érvényes (alapérték: 360px és 1440px).

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

A képen a bal oldali panelen a skála vezérlői, jobbra a --space-2xs-től lefelé a lépések listája látszik a minimális és maximális értékükkel és egy arányos sávval.

Térközskála létrehozása

Minden térközskála egy változókategória. Írd be a skála nevét (például Térköz) a Skála neve mezőbe, és kattints a Létrehozás gombra. Az új skála ezekkel a beállításokkal indul:

• Változóelőtag: space-
• Skála típusa: Póló, hét lépéssel 2xs-től 2xl-ig
• Alapvonal-lépésköz: m
• Minimum (Mobil): alapméret 16px, skálaarány 1,25
• Maximum (Asztali gép): alapméret 20px, skálaarány 1,333

Ezekkel a beállításokkal a space-m kis képernyőn 16px, nagy képernyőn 20px, a többi lépést pedig a skálaarány segítségével ebből számolja ki a Bricks.

Az előtag, a skála típusa, az alapvonal-lépésköz és az arányok ugyanúgy működnek, mint a tipográfiai skálagenerátorban. Az egyes vezérlők leírását a Folyékony tipográfia fejezetben találod.

Változók generálása

A skálabeállítások változásai előbb a listában jelennek meg előnézetként. Kattints a Változók újragenerálása gombra, hogy a kategória változóit létrehozd vagy frissítsd (függőben lévő változtatás nélkül a gomb felirata Változók generálása).

A generálás lecseréli a kategória összes változóját, és ha a kategóriában már vannak változók, a Bricks megerősítést kér. Amíg a lépések száma és a skála típusa nem változik, a nevek is ugyanazok maradnak, így a designban minden var(--space-l) az új értéket veszi fel.

A generált változók minden térköz- és méretvezérlő változóválasztójában megjelennek, kategóriájuk szerint csoportosítva.

Nagyobb lépések hozzáadása szakaszkitöltéshez

Az alapbeállításokkal a legnagyobb lépés, a space-2xl nagyjából 47px-nél ér véget. Ez általában túl kevés egy szakasz kitöltésének.

Vidd az egeret a lista utolsó sora fölé, és kattints a + gombra, hogy nagyobb lépést adj hozzá (3xl, majd 4xl, 5xl és így tovább). Az alapbeállításokkal a space-5xl kis képernyőn nagyjából 61px, nagy képernyőn 112px. Ha kisebb lépést szeretnél, az első sor fölé víve add hozzá. A legkisebb vagy legnagyobb lépés eltávolításához vidd az egeret az első vagy utolsó sor fölé, és kattints a − gombra.

Térköz használata sablonstílusban

Ha minden szakasznak ugyanazt a kitöltést szeretnéd adni, ne külön-külön állítsd be, hanem egyszer, a sablonstílusban: Sablonstílusok → a sablonstílusod → Elemek → Szakasz → Kitöltés.

Minden oldalnak külön változóválasztója van. Ha az ellentétes oldalak összekapcsolása be van kapcsolva, a felső érték beállítása az alsót, a bal oldalé a jobbot is beállítja. Használhatod például a var(--space-5xl) értéket fent és lent, a var(--space-l) értéket pedig az oldalakon. Ugyanebben a sablonstílusban a Tároló csoportnak saját kitöltése, sor- és oszloptávolsága van.

Ha később az egész oldalt szűkebbé vagy tágasabbá akarod tenni, a sablonstílusban lépj egy másik lépésre, például a var(--space-5xl) értékről a var(--space-4xl) értékre. Minden szakasz, amely követi a sablonstílust, minden oldalon frissül.

Kitöltés törlése az elemeken

Az elemen közvetlenül, akár töréspontra megadott kitöltés elsőbbséget élvez a sablonstílussal szemben. Töröld azokról a szakaszokról, amelyeknek követniük kell a sablonstílust.

Több szakasz egyidejű törléséhez jelöld ki őket a Szerkezet panelen. Kattints az elsőre, majd Shift lenyomásával a legutolsóra, hogy a köztük lévőket is kijelöld, vagy tartsd lenyomva a CMD (macOS) vagy CTRL (Windows/Linux) billentyűt, és kattintással adj hozzá egyes elemeket. A panel ekkor tömeges szerkesztésre vált, és mutatja a kijelölt elemek számát. Egy mező törlése az összes kijelölt elemen törli. Ha a szakaszoknak töréspontra is van saját kitöltésük, válts arra a töréspontra, és ott is töröld.

Az az elem, amelynek szándékosan el kell térnie, ne beírt értéket kapjon, hanem ugyanazon skála másik lépését.

Segédosztályok

A lista alatt a térközskálából segédosztályokat is generálhatsz, például gap-m vagy p-l nevűeket. Csak azokat generáld, amelyeket ténylegesen használsz.