Stíluskezelő

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.

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

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

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.