Sablonstílusok

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.