# Sablonstílusok

> Webhelyre érvényes alapstílusok beállítása a Stíluskezelőben, például a szekciók egységes térközei.

A sablonstílusok a webhely közös arculati szabályai: meghatározzák, hogyan néz ki alapból minden elem. A CSS-t a Bricks írja meg helyetted. Ahelyett, hogy kézzel írnál egy `section { padding: 80px 16px; }` szabályt, vizuálisan egyszer beállítod, és az mindenhol érvényes lesz.

Ha az első oldalad hős szekciójának több térköz kell, ne minden szekcióhoz külön add meg a belső margót: ez lassú és következetlen. Állíts be inkább egy globális szabályt.

## Sablonstílus létrehozása

1. Kattints a **Stílusok** ikonra az eszköztáron (vagy nyomd meg a `Cmd/Ctrl + .` billentyűket).
2. A sablonstílusok legördülő listájába írd be az új stílus nevét.
3. Kattints a **Létrehozás** ikonra.

Ezzel megnyílik a Stíluskezelő, a Bricks központi felülete az arculat kezeléséhez. Több lapja van: sablonstílusok, osztályok, változók, színek, tipográfia, térközök, keretrendszer és beállítások. Most a sablonstílusokra figyelj, a többihez akkor térj vissza, amikor szükséged lesz rájuk.

## Egységes szekciótérközök

Azt szeretnéd, hogy minden szekció belső margója és sortávolsága egységes legyen.

1. A sablonstílusok panelén nyisd meg az **Elem → Szekció** részt.
2. A belső margót (padding) állítsd be: fent `80`, lent `80`, balra `16`, jobbra `16`.
3. A sortávolságot (row gap) állítsd `32`-re.

Figyeld a vásznat: a hős szekció azonnal megkapja az új térközöket, pedig magához a szekcióhoz nem nyúltál, csak a globális szabályt módosítottad. Innentől minden új szekció automatikusan ilyen térközökkel jön létre.

## Érvényesítés a teljes weboldalon

Mentés előtt a stílus csak a szerkesztőben látszik. Hogy az egész webhelyen élő legyen:

1. A sablonstílusok panelén nyisd meg a **Feltételek** részt.
2. Add hozzá a feltételt (**Feltétel hozzáadása**).
3. Válaszd a **Teljes weboldal** lehetőséget.
4. Kattints a **Mentés** gombra az eszköztáron.

Ha több sablonstílus feltétele is illik az aktuális oldalra, a **Bricks → Beállítások → Általános** lapon a sablonstílusok betöltési módja dönt arról, melyik érvényesül (lásd a beállítások fejezetét).

## Miért érdemes így dolgozni

- **Skálázhatóság:** ha később 100 px belső margó kell a szekcióknak, egyszer módosítod a sablonstílusban, és az egész webhely frissül.
- **Következetesség:** nem kell emlékezned, hogy 60 vagy 80 képpont volt-e: a Bricks gondoskodik róla.

Röviden a három szint:

- A sablonstílusok az egész webhely észszerű alapértékeit adják.
- A globális osztályok újrahasználható mintákat adnak, amelyeket igény szerint alkalmazol.
- Az elemenkénti egyedi stílus ritka kivételekre való.

A tervezési döntések nagy részének a sablonstílusokban és az osztályokban a helye: így marad a webhely kiszámítható és könnyen módosítható.

A következő lépés a sablonok: velük olyan fejlécet építesz, amely minden oldalon megjelenik.