Globális változók kezelője

A Globális változók kezelőjében újrahasználható CSS-változókat (custom property) hozhatsz létre és tarthatsz karban. Olyan értékekhez érdemes változót használni, amelyeknek egységesnek kell maradniuk vezérlőkben, osztályokban, sablonokban és oldalakon: térközméretek, betűméretek, lekerekítések, elrendezési szélességek, színek, árnyékok vagy bármilyen ismétlődő tervezési érték.

Például ahelyett, hogy a clamp(1rem, 2vw, 1.5rem) értéket több vezérlőbe is beírnád, hozz létre egy text-m nevű változót, és mindenhol var(--text-m) értéket használj.

A változókezelő megnyitása

Kattints a szerkesztő eszköztárán a Stíluskezelő ikonra, majd válaszd a Változók lapot. A Kategóriák oszlop a Mind és Kategorizálatlan mellett a saját kategóriáidat sorolja fel. A Színkezelő színpalettái is itt vannak, SZÍNEK jelvénnyel, mert minden palettaszín egyben CSS-változó is.

https://minta-bolt.hu/home/?bricks=run

A képen a Sugár kategória négy változója látszik névvel és értékkel; felül a keresés, a rendezés és a szűrés mezői.

A változókezelőt kikapcsolhatod: Bricks → Beállítások → Általános → CSS-változók kezelőjének kikapcsolása. A változóválasztóban az érték megjelenítését a Bricks → Beállítások → Szerkesztő részben rejtheted el (Változó legördülő: érték elrejtése).

A változók működése

A globális változók a Bricks webhelyszintű adatai. Egy változónak van:

• belső azonosítója,
• neve, a kezdő -- nélkül tárolva,
• értéke,
• opcionálisan kategóriája.

A weboldalon a Bricks -- előtaggal CSS custom property-ként írja ki a változókat:

:root {
  --text-m: clamp(1rem, 2vw, 1.5rem);
}

Vezérlőben vagy CSS-mezőben így hivatkozz rá:

var(--text-m)

A Bricks csak azokat a változókat írja ki, amelyeknek van nevük és nem üres az értékük.

Változó létrehozása

1. Nyisd meg a Stíluskezelő → Változók lapot.
2. Ha akarod, jelöld ki a kategóriát, amelybe a változó kerüljön. Az új változó a kijelölt kategóriába kerül. Új kategóriához írd a nevét az Új kategória neve mezőbe a lista alatt, és nyomj Entert: az új kategória azonnal kijelölődik.
3. Az Új változónév mezőbe írj nevet a kezdő -- nélkül, például space-m. A -- előtagot a Bricks teszi hozzá.
4. Az Érték mezőbe írd az értéket, például clamp(1rem, 2vw, 2rem).
5. Nyomj Entert, vagy kattints a sor végén lévő mentés ikonra.
6. A Stíluskezelő eszköztárán kattints a Mentés gombra, hogy a változtatások elmentődjenek.

Ha olyan nevet illesztesz be, amely ---szal vagy var(--...) formában kezdődik, a Bricks a tárolt névvé alakítja. A változónevek egyediek lehetnek. A Bricks azt is megakadályozza, hogy a név ütközzön a Színkezelő változóalapú színeivel.

Változók használata a vezérlőkben

Sok szerkesztővezérlőn van változóválasztó: a mező végén lévő kis CSS ikon. Nyisd meg, és válassz egy változót, hogy beszúrja az aktív vezérlőbe.

A választó keresőmezővel rendelkezik, és kategóriák szerint csoportosítja a változókat, a Kategorizálatlan és a színpaletták is megjelennek. Egy csoportot megnyitva látod a benne lévő változókat.

A választó var(--név) hivatkozást illeszt be. Ha egy vezérlő oldalai össze vannak kapcsolva (például a Keret → Sugár négy sarka), az egyik oldalra választott változó az összes kapcsolt oldalt beállítja. A var(--név) kézzel is beírható minden olyan vezérlőbe, amely CSS-értéket fogad.

A változók használhatók:

• elem azonosítós stílusokban,
• globális osztályok stílusaiban,
• sablonstílusokban,
• oldalbeállításokban,
• egyéni CSS-mezőkben,
• más, a Bricks által kezelt, CSS-értéket elfogadó stílusbeállításokban.

Frissítés, átnevezés, duplikálás és törlés

Egy változóra kattintva kijelölöd: a neve és az értéke ekkor helyben szerkeszthető, a módosítás után nyomj Entert. Ugyanarra a sorra újra kattintva a kijelölés megszűnik.

Több változó kijelöléséhez kattints az elsőre, és Shift lenyomásával az utolsóra, vagy használd a lista fejlécében a mindent kijelölő jelölőnégyzetet. Több kijelölt változónál a lista mellett megnyílik a Szerkesztés panel három lappal:

• Átnevezés: a kijelölt változókat egyszerre nevezheted át a Keresés, Csere erre, Előtag hozzáadása vagy Utótag hozzáadása mezővel. Az Előnézet az Átnevezés gomb előtt megmutatja az új neveket.
• Kategorizálás: a kijelölt változókat áthelyezi egy kategóriába. Válaszd ki a kategóriát, és kattints a Frissítés gombra. A lap akkor jelenik meg, ha már van legalább egy kategória.
• Duplikálás: másolatot készít a kijelölt változókról.

A lista fejlécében ikonok is vannak a kijelölt változók exportálására, a kukába helyezésre és a kijelölés megszüntetésére. A változók sorrendjét húzással változtathatod.

https://minta-bolt.hu/home/?bricks=run

A képen a card-shadow és a card-shadow-hover van kijelölve, a jobb oldali panelen az Átnevezés lap látszik az Előnézet résszel.

Változó átnevezésekor a Bricks a builder adataiban a var(--régi-név) hivatkozásokat var(--új-név) alakra frissíti. Ez a szerkesztőben és mentéskor is lefut.

Kategóriák

A kategóriák csak a kezelőben és a választóban rendezik a változókat, a változó nevét önmagukban nem változtatják. Lehetőségeid:

• kategória létrehozása,
• átnevezése,
• átrendezése,
• a változók szűrése kategória szerint,
• a kategóriák exportálása a kijelölt változókkal.

Ha egy változónak nincs kategóriája, vagy a kategóriája már nem létezik, a Bricks kategorizálatlannak kezeli.

https://minta-bolt.hu/home/?bricks=run

A képen a Mind kategória a Default színpaletta 18 változóját mutatja a színmintákkal; saját változó még nincs.

Keresés, rendezés és használati szűrők

A kezelő fejlécében szűkítheted a listát:

• Név (Bevonás): csak azokat a változókat mutatja, amelyeknek a nevében szerepel a beírt szöveg.
• Név (Kizárás): elrejti azokat, amelyeknek a nevében szerepel a szöveg. Kombinálhatod a kettőt, például shadow bevonva és hover kizárva.
• Rendezés: ábécésorrendbe rendezi a listát.
• Szűrés: csak az Ezen az oldalon használt vagy Ezen az oldalon nem használt változókat mutatja. A kiválasztott szűrő címkeként jelenik meg a mezőben, a törlés ikonjával eltávolíthatod.

A használati szűrők a takarításban segítenek, de törlés előtt ellenőrizd az eredményt: egy változó lehet, hogy az aktuális oldalon nincs használatban, máshol viszont igen.

Skálák és segédosztályok

A Stíluskezelő skálái változókategóriákat használnak: egy tipográfiai vagy térközskála olyan változókategória, amelyhez skálabeállítások tartoznak. Egy skála például ilyen változókat hozhat létre:

text-xs, text-s, text-m, text-l, space-xs, space-s, space-m, space-l

A skálakategóriák segédosztály-mintákat is megadhatnak. Például:

Osztálynév: text-*
CSS-tulajdonság: font-size

A text-m nevű változóhoz a Bricks ebből ezt az osztályt készítheti:

.text-m {
  font-size: var(--text-m);
}

Ha az osztálymintában nincs *, a Bricks a skálalépés nevét fűzi a minta végére. A generált segédosztályok a Stíluskezelő CSS-kimenetének részei, és a szerkesztő előnézetében is megjelennek.

CSS-kimenet

A nem üres értékű globális változók :root CSS custom property-ként kerülnek a kimenetbe.

A Bricks külön Stíluskezelő CSS-fájlt is generál, ha a Stíluskezelő releváns adatai megváltoznak. Ebben szerepelhet:

• a színpaletta-változók,
• a színek segédosztályai,
• a skálakategóriák változói,
• a skálakategóriákból generált segédosztályok.

Ha ez a fájl létezik, a Bricks betölti a weboldalon. Ha a fájl generálása fájljogosultság, gyorsítótár-beállítás vagy más környezeti probléma miatt nem sikerül, generáld újra a Bricks CSS-fájljait, és ellenőrizd a webhely fájljogosultságait.

Változók exportálása és importálása

Exportálással és importálással ugyanazt a változókészletet több Bricks-webhelyen is használhatod.

Exportálás

Két módja van:

1. Összes exportálása: kattints a kezelő tetején az exportálás gombra az összes változó és kategória exportálásához.
2. Kijelöltek exportálása: jelölj ki egy vagy több változót, és kattints a változók oszlopában a kijelöltek exportálása ikonra. A kijelöltek exportja a használt kategóriákat is tartalmazza.

Importálás

Háromféleképpen importálhatsz:

• JSON-fájllal: az importálási ablakba húzd be az exportált változókat tartalmazó JSON-fájlt. A Bricks azokat a változókat adja hozzá, amelyek név szerint még nem léteznek. Ha a fájl kategóriákat is tartalmaz, azokat is importálhatja, amelyek név szerint még nincsenek meg.

• Kézi szövegbevitel: a változókat beírhatod egy szövegmezőbe. Ez gyors módja annak, hogy gyermektémából, saját bővítményből, stíluslapról vagy kódrészletből áthozd őket. A formátum pontosvesszővel elválasztott CSS-változódefiníciók listája:

  --bricks-color-primary: #ffd64f;
  --bricks-color-secondary: #fc5778;
  --bricks-text-dark: #212121;

  A kézi importálás szintén csak a név szerint még nem létező változókat adja hozzá.

• Távoli sablonból: távoli sablon beszúrásakor a Bricks felkínálhatja a változók importálását a távoli forrásból. A változókat név szerint párosítja, az újakat importálhatja, a már létező, azonos nevű helyi változókat nem duplikálja. A távoli sablon változókategóriái nem importálódnak, ezért az importált változók kategorizálatlanul jelenhetnek meg.

Jó gyakorlatok

• A változókat cél szerint nevezd el: space-m, radius-card, text-step-2.
• Ismétlődő értékekhez használj változót, ne minden egyszeri értékhez.
• Az érték legyen érvényes CSS abban a vezérlőben, ahol használni fogod.
• Tipográfiai és térközrendszerekhez a skálából generált változókat részesítsd előnyben.
• Éles webhelyen, sok egyéni CSS mellett ne nevezz át változókat gondatlanul.
• Nagyobb változómódosítás után generáld újra a Bricks CSS-fájljait, és nézd át a fontos sablonokat.

Hibaelhárítás

A változó nem jelenik meg a választóban. Ellenőrizd, hogy a változó létezik-e, érvényes-e a neve, és hogy az adott vezérlő támogatja-e a változó beszúrását.

A változó létezik, de nem ír ki CSS-t. Nézd meg, van-e értéke: a Bricks kihagyja az üres értékű változókat.

Átnevezés után a változó régi neve még megvan az egyéni CSS-ben. A Bricks a saját kezelésű var(--régi-név) hivatkozásokat frissíti. A külső stíluslapokat, a gyermektéma CSS-ét, a saját bővítmények CSS-ét és a Bricksen kívüli kézi kódot magadnak kell átírnod.

Az importált változók kategorizálatlanok. A távoli sablonokból történő importálás nem hozza át a kategóriákat. A JSON-importálás átviheti őket, ha a fájl tartalmaz kategóriákat, és jóváhagyod a kategóriák importálását.

Hiányoznak a segédosztályok. Ellenőrizd, hogy a változókategória skála-e, be vannak-e állítva a skálához a segédosztályok, és hogy a Bricks létre tudja-e hozni és be tudja-e tölteni a Stíluskezelő CSS-fájlját.