# Stíluskezelő

> A Stíluskezelő lapjai: sablonstílusok, osztályok, változók, színek, tipográfia, térközök, keretrendszer-import és beállítások egy helyen.

A **Stíluskezelő** a Bricks központi helye a tervezési alapelemek és az újrahasználható stíluseszközök kezeléséhez. Egyetlen felületen fogja össze a sablonstílusokat, az osztályokat, a változókat, a színeket, a skálákat és az importált CSS-t.

A cél, hogy a színekről, térközökről, tipográfiáról és elrendezési szabályokról egy helyen dönts, és ne különböző paneleken kelljen keresgélned.

![A Stíluskezelő a Színek lappal](./kepek/funkciok-stiluskezelo-attekintes.webp)

*A Stíluskezelő a Színek lappal* (https://minta-bolt.hu/racs-teszt/?bricks=run)

A képen a Stíluskezelő ablaka látszik: bal oldalon a lapok számozott listája, jobbra az aktív lap (itt a **Színek**).

## Megnyitás és vezérlők

- A szerkesztő eszköztárán a **Stíluskezelő** ikonnal, vagy a `CMD + .` (macOS), illetve `CTRL + .` (Windows/Linux) billentyűkkel nyitod meg és zárod be.
- A lapok között a pozíciójuknak megfelelő számbillentyűkkel válthatsz (1-től).
- A fejlécben van egy teljes képernyős gomb, és egy kapcsoló, amellyel laponként megjelenítheted vagy elrejtheted a vászon előnézetét.
- Az előnézet az éppen szerkesztett oldalt mutatja, valós időben frissül, követi a töréspontváltást, és átméretezhető.

## A lapok

A helyi felületen kilenc lap van, ebben a sorrendben:

| Lap | Mire való |
| --- | --- |
| **Sablonstílusok** (1) | Az HTML-elemek és a Bricks-elemek globális alapstílusai |
| **Osztályok** (2) | Újrahasználható globális CSS-osztályok |
| **Változók** (3) | CSS egyéni tulajdonságok, tervezési tokenek |
| **Színek** (4) | Színrendszer CSS-változókra építve |
| **Tipográfia** (5) | Folyékony betűméret-skála |
| **Térközök** (6) | Folyékony térköz-skála |
| **Keretrendszer** (7) | Külső CSS importálása osztályokká és változókká |
| **Beállítások** (8) | Színmód és skálabeállítások |
| **Böngésző** (9) | A Bricks böngészője (lásd a [Böngésző](https://hub.hellowp.io/hu/plugins/bricks-child/funkciok-bongeszo/) fejezetet) |

### Sablonstílusok

A sablonstílusok az HTML-elemek és a Bricks-elemek globális alapértelmezett stílusait adják meg. Tipikus felhasználásuk:

- alap tipográfia a címsorokhoz és a törzsszöveghez;
- alapértelmezett gomb- és űrlapstílusok;
- globális színek és térközök;
- reszponzív alapértékek;
- globális hover és fókusz állapotok.

A sablonstílusok feltételekhez köthetők: érvényesíthetők az egész webhelyen, bizonyos sablonokon vagy oldalakon. Támogatják a töréspontokat és a pszeudoosztályokat, így az interakciós viselkedés is központilag megadható.

### Osztályok

Az osztálykezelőben olyan újrahasználható CSS-osztályokat hozol létre, amelyeket bármely elemre ráteszel. Akkor használd, ha:

- egy stílust több elemen is használsz;
- a stílus nem globális alapérték;
- másolgatás helyett következetes újrahasználatot szeretnél.

Az osztályok kategóriákba rendezhetők, zárolhatók, és használat vagy állapot szerint szűrhetők. A sablonstílus az alapértelmezést adja, az osztály pedig az elemeket egy konkrét viselkedésbe kapcsolja be.

### Változók

A változókezelőben CSS egyéni tulajdonságokat adsz meg, amelyek tervezési tokenként működnek. Jellemzően ezekre használják:

- színek;
- térköz-értékek;
- betűméretek;
- elrendezési méretek;
- újrahasznált számértékek.

A számok ismételgetése helyett a `var(--változó-neve)` formával hivatkozol rájuk, és a változó módosítása mindenhol frissíti az értéket. A változók CSS-ből vagy JSON-ból importálhatók, kategóriákba csoportosíthatók és átnevezhetők.

### Színek

A színkezelő a CSS-változókra épít színrendszert. Minden szín változóként tárolódik, és opcionálisan:

- lehet világos és sötét módú értéke;
- generálhat árnyalat- és átlátszósági változatokat;
- generálhat segédosztályokat.

A részleteket a [Színkezelő](https://hub.hellowp.io/hu/plugins/bricks-child/funkciok-szinkezelo/) fejezet írja le.

### Tipográfia

A **Tipográfia** lap folyékony betűméret-skálát generál CSS-változókkal és `clamp()` függvénnyel. Betűméretek kézi beállítása helyett ezeket adod meg:

- az alapméretet;
- a skála arányát;
- a legkisebb és legnagyobb képernyőszélességet.

Ezekből a Bricks változókat állít elő, amelyek simán skálázódnak a mobil és az asztali nézet között. A skála akkor hasznos, ha

- következetes hierarchiát szeretnél;
- töréspontok nélküli, reszponzív méretezést akarsz;
- kevesebb önkényes betűméret-döntést szeretnél hozni.

A lépéseket nevezheted pólóméretekkel (t-shirt), számokkal vagy egyéni nevekkel. A generált változókat közvetlenül vagy segédosztályokon át használhatod. A kézi mód lehetővé teszi, hogy pontos szabályozás kedvéért felülírd a kiszámított értékeket. A skála vezérlőit és a sablonstílusban való használatot a [Folyékony tipográfia](https://hub.hellowp.io/hu/plugins/bricks-child/stilusok-folyekony-tipografia/) fejezet írja le.

### Térközök

A **Térközök** lap ugyanazzal a skálaalapú rendszerrel generál folyékony értékeket a margókhoz, belső térközökhöz és hézagokhoz. Minden érték egy `clamp()` értékű CSS-változó, amely simán nő a kis és a nagy képernyő között, így egyetlen változó kiválthat egy padding-értéket és annak töréspont-felülírásait. Ha a változókat egyszer beállítod egy sablonstílusban (például minden szakaszon), az oldalak térközei egységesek maradnak.

Generálhatsz segédosztályokat is, például `gap-m` vagy `p-l` formában, de csak azt érdemes, amit tényleg használsz. A skála létrehozását, a lépések hozzáadását és a változók sablonstílusban való használatát a [Folyékony térközök](https://hub.hellowp.io/hu/plugins/bricks-child/stilusok-folyekony-terkozok/) fejezet írja le.

### Keretrendszer

A **Keretrendszer** lap külső CSS-t importál, és Bricks-osztályokká és -változókká alakítja. Képes:

- feldolgozni az osztályszabályokat;
- kigyűjteni a `:root` változóit;
- szándék szerint kategorizálni a stílusokat;
- előtagot adni az ütközések elkerülésére.

![A Keretrendszer lap a CSS-beillesztő szerkesztővel](./kepek/funkciok-stiluskezelo-keretrendszer.webp)

*A Keretrendszer lap a CSS-beillesztő szerkesztővel* (https://minta-bolt.hu/racs-teszt/?bricks=run)

A képen a CSS-szerkesztő és a **CSS feldolgozása** gomb látszik: ide illeszted be a keretrendszer vagy a saját stíluslapod CSS-ét.

Főleg CSS-keretrendszerek átvételére vagy meglévő egyéni stíluslapok behozatalára használható. Minden importot átnézhetsz, mielőtt hozzáadnád. A folyamatot az [Osztályimportáló](https://hub.hellowp.io/hu/plugins/bricks-child/stilusok-osztaly-import/) fejezet részletezi.

### Beállítások

A **Beállítások** lap azt szabályozza, hogyan készülnek a tipográfiai és térköz-skálák, és melyik színmód az alapértelmezett.

![A Stíluskezelő Beállítások lapja](./kepek/funkciok-stiluskezelo-beallitasok.webp)

*A Stíluskezelő Beállítások lapja* (https://minta-bolt.hu/racs-teszt/?bricks=run)

A képen az **Alapértelmezett mód** választó és a **Skálák** csoport látszik.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Alapértelmezett mód** | Melyik színmóddal induljon az oldal: **Világos**, **Sötét** vagy automatikus (a rendszerbeállítást követi) | Világos |
| **HTML-betűméret** | Az `rem` számításhoz használt HTML-betűméret | 62.5% (1rem = 10px) |
| **Minimális képernyőszélesség (px)** | A skálák alsó képernyőszélessége | 360 |
| **Maximális képernyőszélesség (px)** | A skálák felső képernyőszélessége | 1440 |

Az **Alapértelmezett mód** alatt a felület javaslata, hogy tegyél a fejlécbe vagy láblécbe egy **Kapcsoló - Mód** elemet, hogy a látogatók válthassanak a világos és a sötét mód között. A HTML-betűméret és a két szélességi érték a tipográfiai és a térköz-skálákat egyaránt érinti.

A **Beállítások** lapon a fejlécben importálás és exportálás gomb is van a stílusadatokhoz.