# Designrendszer építése

> Színek, méretskálák, változók, sablonstílus, globális osztályok és komponensek egymásra épülő rendszere egy mintaprojekten.

A designrendszer olyan döntések gyűjteménye, amelyeket egyszer hozol meg, és mindenhol újrahasznosítasz: a színek, a betűméretek, a térközök, az egyszerű elemek alapkinézete és az ismétlődő minták. A Bricks-ben ezek a **Stíluskezelőben**, egy sablonstílusban, a globális osztályokban és a komponensekben élnek. Ha ezek a helyükön vannak, egy új oldalhoz nem kell új stílus, és egyetlen érték átírása minden érintett oldalt frissít.

Ez a fejezet egy kis kávépörkölő weboldalán mutatja végig a folyamatot, egy tartalommal feltöltött, de még stílus nélküli oldalból kiindulva.

## A négy réteg

Minden réteg az alatta lévőre épül:

| Réteg | A Bricks-ben | Példa |
|---|---|---|
| Értékek | Színek és változók a Stíluskezelőben | `var(--brand)`, `var(--heading-xl)`, `var(--space-m)` |
| Szabályok | Sablonstílus | törzsszöveg, címsorok, gombok, szakaszok kitöltése |
| Osztályok | Globális osztályok | `.eyebrow` a címsor feletti kis címkére |
| Komponensek | Komponensek | egy terméktartó kártya |

A komponens osztályokat használ, az osztály változókat. Ha egy érték változik, minden, ami rá épül, vele megy.

![A Stíluskezelő megnyitva a szerkesztőben, a bal oldalon a rendszer részeivel](./kepek/stilusok-osztalykezelo.webp)

*A Stíluskezelő megnyitva a szerkesztőben, a bal oldalon a rendszer részeivel* (https://minta-bolt.hu/home/?bricks=run)

A bal oldali menüben (Sablonstílusok, Osztályok, Változók, Színek, Tipográfia, Térközök) találod a rendszer rétegeit, fentről lefelé nagyjából ebben a sorrendben dolgozol velük.

## Kiindulópont

A példa egy fejléc-sablonnal, egy lábléc-sablonnal és egy kész tartalmú kezdőoldallal indul. Semmi sincs stílusozva: alap betűk, alap színek, térköz nélkül. Elemenként is megstílusozhatnád, de egy második oldalnál mindent újra el kellene végezned, és kézzel kellene szinkronban tartanod a két oldalt. Az alábbi lépések ezért előbb minden döntést egy helyre visznek.

## 1. Színek

Nyisd meg a **Stíluskezelőt**, és válaszd a **Színek** lapot.

1. Hozz létre egy palettát a webhelyhez.
2. Add hozzá a márkaszínt, és nevezd el `brand`-nek, ne `orange`-nek. Ha később a márkaszín változik, a név akkor is helyes marad.
3. Kapcsold be a világos és a sötét árnyalatokat. A Bricks az alapszínből tíz-tíz lépést készít, és az alapszínről nevezi el őket: a `brand-d-1` egy lépéssel sötétebb a `brand`-nél, a `brand-l-9` halvány háttérszín.
4. Vedd fel a semleges színeket: `ink` a szövegnek, `ink-muted` a halkabb szövegnek, `paper` az oldal hátterének.
5. Add hozzá azokat a színeket, amelyek csak egy célt szolgálnak. A példában hat pasztellszín jut a termékkártyákra (`blush`, `butter`, `lilac`, `mint`, `sky`, `clay`).
6. A pasztellszíneknél kapcsold be a `background-color` segédosztályt. A Bricks ekkor minden színhez globális osztályt készít, például `bg-butter` néven.

Segédosztályt csak azokhoz a színekhez kapcsolj be, amelyeket osztályként is használni fogsz, mert minden bekapcsolt árnyalat egy új globális osztályt jelent.

## 2. Tipográfiai és térközskálák

A **Tipográfia** lapon hozz létre skálát a címsorokhoz:

1. A skála változóelőtagja legyen `heading-`.
2. Állíts be alapméretet és arányt a minimumhoz (mobil) és egy másik párt a maximumhoz (asztali gép). A példa mobilon 20 px-et és 1,25-ös arányt, asztali gépen 24 px-et és 1,5-ös arányt használ.
3. Generáld a változókat.

A Bricks minden lépésből `clamp()` értéket készít a `--heading-2xs` és a `--heading-2xl` között, így a címsor a képernyővel együtt nő, nem ugrál töréspontoknál. A számítás részletei a [Folyékony tipográfia](https://hub.hellowp.io/hu/plugins/bricks-child/stilusok-folyekony-tipografia/) fejezetben vannak.

Hozz létre egy második skálát `text-` előtaggal a törzsszöveg méreteihez.

A térközök ugyanígy működnek: a **Térközök** lapon hozz létre egy `space-` előtagú skálát `--space-2xs`-től `--space-2xl`-ig. Lásd a [Folyékony térközök](https://hub.hellowp.io/hu/plugins/bricks-child/stilusok-folyekony-terkozok/) fejezetet.

## 3. Változók és kategóriák

Néhány érték nem tartozik skálához. Vedd fel őket a **Változók** lapon, és minden csoportnak adj saját kategóriát:

| Kategória | Változó | Érték |
|---|---|---|
| Elrendezés | `container` | `1240px` |
| Forma | `radius-s` | `10px` (gombok) |
| Forma | `radius-m` | `24px` (kártyák) |

A skálák már saját kategóriában vannak, így a változóválasztó a lista növekedésével is áttekinthető marad. A változókat szerepük vagy lépésük szerint nevezd el (`radius-s`, `radius-m`), ne értékük szerint: a `radius-24` név abban a pillanatban hamis, ahogy átírod az értéket.

Az értékek addig nem csinálnak semmit, amíg valami fel nem használja őket, ezért az oldal a lépés után még ugyanúgy néz ki.

## 4. Sablonstílus

A sablonstílus az összes elem alapértelmezéseit adja meg, így az egyszerű címsoroknak, szövegeknek és gomboknak nem kell külön beállítás. Hozz létre egy sablonstílust (az újonnan létrehozott az egész webhelyre érvényes alapból), és állítsd be:

| Csoport | Beállítás | Érték |
|---|---|---|
| Tipográfia | Törzsszöveg | Figtree, `var(--text-m)`, `var(--ink)` |
| Tipográfia | Címsorok | Fraunces, `var(--brand)` |
| Tipográfia | H1 / H2 / H3 | `var(--heading-2xl)` / `var(--heading-l)` / `var(--heading-m)` |
| Elemek, Gomb | Háttér, szövegszín, szegélysugár | `var(--brand)`, `var(--brand-d-8)`, `var(--radius-s)` |
| Elemek, Szakasz | Kitöltés | `var(--space-2xl)` fent és lent, `var(--space-m)` balra és jobbra |
| Elemek, Tároló | Szélesség | `var(--container)` |
| Elemek, Tároló és Blokk | Sortávolság | `var(--space-s)` |

A tároló és a blokk sortávolsága egymás alatti címsoroknak és szövegeknek ad egyenletes közt egyetlen margó nélkül.

![A Sablonstílusok lap a Stíluskezelőben, ahol a sablonstílusokat kiválaszthatod vagy létrehozhatod](./kepek/stilusok-sablonstilusok.webp)

*A Sablonstílusok lap a Stíluskezelőben, ahol a sablonstílusokat kiválaszthatod vagy létrehozhatod* (https://minta-bolt.hu/home/?bricks=run)

A képen a **Sablonstílusok** lap látszik: itt választasz ki egy meglévő sablonstílust, vagy itt hozol létre újat.

Mentés után az egész oldal megváltozik, a fejléc és a lábléc sablon is. Válts mobil töréspontra: a címsorok és a szakaszkitöltés a képernyővel együtt kisebbek lesznek, töréspont-specifikus beállítás nélkül.

## 5. Osztályok

A sablonstílus a címsorokat, a szövegeket és a gombokat formázza. A címsor feletti kis címkét vagy a cím alatti halkabb sort nem ismeri: ezek minták, a mintákhoz pedig globális osztályok kellenek.

1. Jelöld ki a hősszakasz címsora feletti címkét, és add hozzá az `eyebrow` osztályt.
2. Stílusozd egyszer: `var(--text-s)`, nagybetűs, kis betűköz és `var(--brand-d-4)` szín.
3. Add hozzá ugyanezt az osztályt a többi címkéhez is.
4. Hozz létre egy `text-l` osztályt a bevezető bekezdésekhez és egy `text-muted` osztályt a halkabb szövegekhez.

Az osztályokat cél szerint, kisbetűvel és kötőjellel nevezd el. A `text-muted` akkor is értelmes marad, ha a szín megváltozik, a `grey-text` nem.

Az **Osztálykezelőben** tedd a három osztályt egy Tipográfia nevű kategóriába. Az elrendezési osztályok, például az alább szereplő `card-grid`, egy második, Elrendezés kategóriába kerülnek.

## 6. Komponensek

A kávékártya nyolcszor ismétlődik a kezdőoldalon, tehát komponens lesz.

1. Stílusozz előbb egyetlen kártyát: `var(--space-m)` kitöltés és `var(--radius-m)` szegélysugár. A változóválasztóban nyisd meg a Forma kategóriát, így gyorsan megtalálod a sugarat.
2. Az eredet kapja az `eyebrow` osztályt, az ízjegyek a `text-muted` osztályt, a név pedig a márkaszín egy sötétebb árnyalatát.
3. Kattints jobb gombbal a kártyára a Szerkezet panelen, válaszd a komponensként mentést, és nevezd el `Coffee card`-nak.
4. Vegyél fel tulajdonságot mindenhez, ami kártyáról kártyára változik (kép, eredet, név, ízjegyek, ár), és kösd mindegyiket a megfelelő elemhez.

A komponenseknek nincs szín tulajdonságtípusa, de van globális osztályok tulajdonsága. Hozz létre egyet `Color` néven, vegyél fel hozzá egy opciót minden pasztellszínhez, rendeld mindegyikhez a megfelelő `bg-*` osztályt, és kösd a tulajdonságot a kártya gyökérelemére. Így minden példány csak a tartalmát és egy színt kér.

A kártyák sorának is adj osztályt:

```css
/* card-grid: annyi oszlop, amennyi elfér, asztali gépen négy */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
gap: var(--space-m);
```

A számozott szakaszcímek és a kávézópanel ugyanígy komponens lesz: `Section head`, illetve `Feature panel`, utóbbinak egy `Style` opcióval (globális osztályok tulajdonsága) a halvány vagy erős háttérhez.

## 7. Új oldal építése

Egy új oldalon a fejléc és a lábléc eleve ott van, mert sablonok.

1. Adj hozzá egy címsort és egy bevezetőt. A sablonstílus miatt egyetlen beállítás nélkül megkapják a stílust.
2. Szúrj be egy `Section head` komponenst, majd egy Blokkot a `card-grid` osztállyal és `Coffee card` példányokkal. Töltsd ki a tartalmat, és válassz színt.
3. Adj hozzá egy `Feature panel` komponenst saját képpel és szöveggel.

Az oldalon nincs új stílus: minden a rendszerből jön.

## A márkaszín cseréje

Nyisd meg a **Színek** lapot, és írd át a `brand` színt. A Bricks újragenerálja belőle az árnyalatokat, és a címsorok, gombok, címkék és panelek minden oldalon, a fejlécben és a láblécben is követik.