# Folyékony térközök

> Képernyőmérettel együtt növekvő térközskálák CSS-változókként: létrehozás, nagyobb lépések, használat sablonstílusban és tömeges törlés.

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`).

![A Térközök lap a Stíluskezelőben: a Térköz nevű skála `space-` előtaggal, Póló típussal, m alapvonallal és a lépések minimális és maximális értékével](./kepek/stilusok-folyekony-terkozok.webp)

*A Térközök lap a Stíluskezelőben: a Térköz nevű skála `space-` előtaggal, Póló típussal, m alapvonallal és a lépések minimális és maximális értékével* (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](https://hub.hellowp.io/hu/plugins/bricks-child/stilusok-folyekony-tipografia/) 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.