Designrendszer építése

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.

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

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:

/* 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.