Globális osztálykezelő

A Globális osztálykezelő az újrafelhasználható CSS-osztályok központi karbantartási helye. Más, mint az elemen lévő osztályválasztó: az elempanelen osztályt rendelsz hozzá egy konkrét elemhez, és azon az elemen szerkeszted. Az osztálykezelőben az egész osztálykönyvtárat kezeled: egyedi CSS-t szerkesztesz, rendezel, importálsz, exportálsz, zársz, törölsz és áttekintesz.

Akkor használd, ha több mint néhány újrafelhasználható osztályod van, vagy oldalakon, sablonokon és importált elrendezéseken átívelő designrendszert tartasz karban. Az elem szintű munkafolyamat (osztály hozzárendelése és stílusozása szerkesztés közben) a Globális CSS-osztályok fejezetben van.

Az osztálykezelő megnyitása

Kattints a szerkesztő eszköztárán a Stíluskezelő ikonra, majd válaszd az Osztályok lapot.

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

A bal oldalon a Kategóriák oszlop áll (Mind és Kategorizálatlan), mellette az Osztályok listája, alul az Új osztálynév … mező az új osztályhoz. A fejlécben a keresőmezők, a Rendezés és a Szűrés látszik, a jobb felső sarokban pedig a kuka, az exportálás és az importálás ikonja.

Az osztálykezelőt a Bricks → Beállítások → Általános → A globális osztálykezelő letiltása beállítással lehet kikapcsolni. A hozzáférés jogosultságfüggő is: lehet, hogy valaki használhatja a szerkesztőt, de nem nyithatja meg az osztálykezelőt, nem hozhat létre, szerkeszthet, törölhet, zárolhat osztályokat, és nem másolhat osztálystílusokat.

Mit tárol az osztálykezelő

A globális osztály webhelyszintű rekord. Tartalmazhat:

• osztályazonosítót,
• osztálynevet,
• stílusbeállításokat,
• töréspontonkénti egyedi CSS-t,
• egyedi szelektorokat és pszeudoállapot-beállításokat,
• kategóriát.

A Bricks nyilvántartja a zárolás állapotát, a kuka és visszaállítás adatait, valamint az importütközések metaadatait is, hogy az osztálykezelő biztonságosan tudja védeni és feloldani az osztályokat.

Az osztályt használó elemek az osztályra hivatkozást tárolnak. Ezért számítanak az importok és az ütközések: a név az, amit látsz, de a Bricks-nek az elemhivatkozásokat is helyesen kell leképeznie.

Osztálykezelő és elemszintű osztályválasztó

Az elemszintű osztályválasztót akkor használd, ha:

• osztályt akarsz hozzáadni a kijelölt elemhez,
• osztályt akarsz eltávolítani a kijelölt elemről,
• az aktív osztályt kijelölve az elemvezérlőkkel szerkeszted a stílusát,
• elemspecifikus pszeudoállapotokkal és egyedi szelektorokkal dolgozol.

Az osztálykezelőt akkor használd, ha:

• osztályt hoznál létre vagy neveznél át konkrét elem kijelölése nélkül,
• egy kiválasztott osztály egyedi CSS-ét szerkesztenéd,
• osztályokat rendeznél kategóriákba,
• osztályokat nevezel át vagy duplikálsz tömegesen,
• több osztályt zársz vagy oldasz fel,
• osztályokat tennél kukába, állítanál vissza vagy törölnél véglegesen,
• osztályokat exportálnál és importálnál,
• használatot, ütközéseket és importált osztályokat néznél át.

Osztályok létrehozása és szerkesztése

Az új osztály létrehozásához az osztálylista alján lévő Új osztálynév … mezőbe írd be a nevet, és nyomj Enter-t.

Ha egy vagy több osztályt kijelölsz, a jobb oldali szerkesztőoszlopban:

• átnevezhetsz egy osztályt,
• tömegesen átnevezhetsz több osztályt keresés-csere, előtag vagy utótag segítségével,
• duplikálhatod az osztályokat keresés-csere, előtag vagy utótag segítségével,
• kategóriát rendelhetsz a kijelölt osztályokhoz,
• zárolhatod vagy feloldhatod a kijelölt osztályokat.

Átnevezéskor és duplikáláskor a Bricks megvizsgálja az ismétlődő neveket, és kihagyja azokat, amelyek ütköznének.

Egyedi CSS egy osztályhoz

Az osztály egyedi CSS-ét közvetlenül az osztálykezelőben szerkesztheted, nem kell előbb keresned egy elemet, amely használja.

Jelölj ki egy osztályt, és a szerkesztőoszlopban megnyílik az Egyedi CSS szerkesztő. A kijelölt osztályra a %root% jelöléssel hivatkozhatsz:

%root% {
  color: firebrick;
}

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

A szerkesztő feletti töréspont-navigációval minden reszponzív töréspontra külön CSS-t adhatsz meg, egy jelző mutatja, hol van érték. A módosítások szerkesztés közben megjelennek a vászon előnézetében, a Stíluskezelő mentés gombján lévő jelző pedig azt mutatja, hogy az osztályon mentetlen változtatás van.

Kattints a Stíluskezelő mentés gombjára, hogy az osztállyal együtt elmentsd a CSS-t. Ha be van kapcsolva a globális osztályok szinkronizálása, az egyedi CSS változásai ugyanazokon az ütközésvizsgálatokon esnek át, mint az osztályok többi módosítása.

Átnevezés vagy duplikálás megőrzi az egyedi CSS-t. Ha a tárolt CSS-ben szerepel a korábbi osztálygyökér-szelektor, a Bricks átírja az új névre. A Bricks által kezelt osztálybeállításokon kívül írt CSS-t nem módosítja.

Kategóriák

A kategóriák segítenek a nagy osztálykönyvtárak rendezésében. Önmagukban nem változtatják a CSS-kimenetet, csak szervezési réteg a szerkesztőben.

Lehetőségeid:

• kategóriák létrehozása,
• átnevezése,
• átrendezése,
• az osztálylista szűrése kategória szerint,
• kategóriák exportálása a hozzájuk tartozó osztályokkal.

Ha egy osztálynak nincs kategóriája, vagy a tárolt kategória már nem létezik, a Bricks kategorizálatlannak tekinti.

Keresés, rendezés és szűrők

Az osztálykezelő fejlécével szűkítheted a listát szerkesztés vagy exportálás előtt. Elérhető szűrők:

• szöveg szerinti bevonás és kizárás (Név (Bevonás) és Név (Kizárás)),
• betűrendbe rendezés,
• ezen a webhelyen használt,
• ezen a webhelyen nem használt,
• ezen az oldalon használt,
• ezen az oldalon nem használt,
• van stílusa,
• nincs stílusa,
• zárolt,
• nem zárolt.

A használati szűrők takarításhoz hasznosak, de törlés előtt gondosan nézd át az eredményt: egy osztály lehet, hogy az aktuális oldalon nem használt, máshol viszont igen.

Osztályok zárolása

A zárolás megvédi az osztályokat a véletlen módosítástól. A zárolt osztály továbbra is a könyvtár része, és ahol a jogosultságok engedik, hozzárendelhető, de a stílusai és az egyedi CSS-e nem szerkeszthető, amíg fel nem oldod.

Ha a kijelölésben zárolt osztály is van, a Bricks az átnevezést és a törlést is letiltja az egész kijelölésre. Átnevezés, kukába helyezés vagy végleges törlés előtt oldd fel a zárolást.

Zárolást alapvető designrendszer-osztályokhoz érdemes használni, például elrendezési burkolókhoz, gombalapokhoz, tipográfiai osztályokhoz vagy generált segédosztályokhoz, amelyeket nem szabad könnyelműen módosítani. A zárolás jogosultságfüggő: aki nem kapott zárolási/feloldási jogot, nem módosíthatja a zár állapotát.

Kuka, visszaállítás és végleges törlés

Az osztály törlése az aktív listából a kukába helyezi. A kukában lévő osztályokat a kuka nézetből visszaállíthatod.

Visszaállításkor a Bricks megpróbálja az osztályt a korábbi helyére tenni. Ha már létezik ugyanilyen nevű osztály, a visszaállított osztályt átnevezheti, hogy elkerülje a névütközést.

A végleges törlés eltávolítja az osztályt a kukából. Csak akkor használd, ha biztos vagy benne, hogy az osztályt nem kell visszaállítani.

Osztályok exportálása és importálása

Az osztálykezelővel osztályokat exportálhatsz és importálhatsz, így több Bricks-projekten át tartható egységes stíluskeretrendszer.

Exportálás

Két lehetőséged van:

1. Összes exportálása: kattints a kezelő tetején az exportálás ikonra, hogy az aktuális osztálykönyvtárat exportáld.
2. Kijelöltek exportálása: jelölj ki egy vagy több osztályt, és kattints az osztályok oszlopában az exportálás ikonra.

Az export tartalmazza a kategóriák metaadatait is azoknál az osztályoknál, amelyek kategóriába tartoznak.

Importálás

Az importálási felugró ablakba húzz be egy exportált osztályokat tartalmazó JSON-fájlt.

Importütközések

Importáláskor a Bricks osztályazonosító és osztálynév alapján keresi az ütközéseket.

Ütközés lehet, ha:

• az importált osztály azonosítója megegyezik egy helyi osztályéval, de az adatai eltérnek,
• az importált osztály neve megegyezik egy helyi osztály nevével,
• egy sablon vagy beillesztett elrendezés olyan osztályra hivatkozik, amely helyben már létezik.

A globális osztályok importkezelőjének beállításától függően a Bricks:

• az új osztályokat automatikusan hozzáadja, és csak az ütközéseket mutatja áttekintésre,
• megkér az új osztályok áttekintésére,
• kihagyja az ütköző osztályokat,
• megkér az új és az ütköző osztályok áttekintésére,
• az importált osztályazonosítókat a meglévő helyi osztályazonosítókra képezi le, hogy a beszúrt elemek érvényes osztályhivatkozást tartsanak meg.

Az import áttekintésekor elfogadhatsz, elutasíthatsz, átnevezhetsz, duplikálhatsz, kategorizálhatsz, zárolhatsz, vagy megjelölhetsz egy ütköző osztályt úgy, hogy felülírja a helyit.

Ha importáláskor kezelni akarod az ütközéseket, vagy az új osztályokat rendeznéd a hozzáadás előtt, az Osztályok importkezelője fejezetben találod a részleteket.

Sablon- és beillesztési importok

A sablonok, távoli sablonok, másolt elemek és átalakított elrendezések globális osztályokat is hozhatnak magukkal.

Amikor a Bricks olyan tartalmat szúr be, amely importált osztályokra hivatkozik, az elem osztályhivatkozásainak érvényesnek kell maradniuk. Ha az importált osztály megegyezik egy meglévővel, a Bricks leképezheti az importáltat a meglévőre. Ha eltér, az osztály az import-áttekintési folyamaton mehet át.

Ezért számít az importok áttekintése: egy osztály elfogadása módosíthatja az osztálykönyvtárat, a leképezés pedig azt eredményezheti, hogy a beszúrt tartalom egy meglévő helyi osztályt használ újra.

A generált CSS életciklusa

A Bricks nem ad ki minden osztályrekordot minden oldalon, csak mert létezik az osztálykezelőben.

A globális osztály CSS-e azokra az osztályokra készül, amelyeket az aktuális megjelenített környezetben elemek használnak. A Bricks elemtípusonként is generál osztály-CSS-t, hogy az elemspecifikus vezérlők a megfelelő szelektorokat állíthassák elő.

A Globális osztályok CSS-ének kimenete az Osztálykezelő sorrendjében beállítás (Bricks → Beállítások, Egyéb rész) a generált osztály-CSS-t az osztálykezelőben látható sorrendbe állíthatja. Ez az azonos specificitású osztályfelülírásokat érinti, és nem okozza, hogy a nem használt osztályok CSS-t adjanak ki.

Ennek gyakorlati következményei:

• egy nem használt osztály létezhet az osztálykezelőben anélkül, hogy az oldalon frontend CSS-t adna ki,
• a stílus nélküli osztály hozzárendelhető, de lehet, hogy nem ad ki hasznos CSS-t,
• egy osztály eltérő szabályokat adhat ki attól függően, milyen elemtípusok használják,
• ha a webhely külső CSS-fájlokat használ, az osztályváltozások miatt a Bricks-nek újra kell generálnia a CSS-fájlokat.

Ütközésérzékelés mentéskor

Ha be van kapcsolva a globális osztályok szinkronizálása/ütközésvizsgálata, a Bricks észreveszi, ha egy másik felhasználó a szerkesztői munkameneted betöltése után módosított globális osztályokat.

A mentési folyamat jelezheti:

• a másik felhasználó által hozzáadott osztályokat,
• a másik felhasználó által módosított osztályokat,
• a másik felhasználó által törölt vagy kukába tett osztályokat,
• valódi ütközéseket, amikor a te és a másik munkamenet is ugyanazt az osztályt módosította.

A folytatás előtt oldd fel az értesítést. Ez védi a csapatban használt közös osztályrendszereket.

Jó gyakorlatok

• Használj érthető osztályneveket, amelyek a célt írják le, nem csak a megjelenést.
• Tartsd zárolva az alapvető osztályokat, ha már stabilak.
• Nagy rendszerekhez használj kategóriákat: elrendezés, tipográfia, gombok, kártyák, segédosztályok, komponensek.
• Ne törölj osztályt kizárólag az aktuális oldal használati szűrője alapján.
• Ügyfélwebhelyeken elfogadás előtt nézd át az importokat.
• A segédosztályok legyenek kicsik és kiszámíthatók.
• Kerüld, hogy több osztály ugyanazt a tulajdonságot ellentétesen állítsa.

Hibaelhárítás

Az osztály az osztálykezelőben van, de nincs látható hatása

Nézd meg, hozzá van-e rendelve elemhez, van-e stílusa, és nem írja-e felül az elemazonosító stílusa vagy egyedi CSS.

Nem tudok szerkeszteni egy osztályt

Lehet, hogy az osztály zárolva van, a felhasználói szerepköröd nem rendelkezik a szükséges jogosultsággal, vagy az osztálykezelő ki van kapcsolva.

Visszaállítottam egy osztályt, és megváltozott a neve

Ez akkor fordulhat elő, ha már létezik ugyanilyen nevű osztály. Nevezd át a visszaállított osztályt, ha más elnevezési szokásra van szükséged.

Az importált tartalom nem úgy néz ki, mint a forráswebhelyen

Ellenőrizd, hogy az importált osztályokat elfogadtad, leképezted helyi osztályokra, vagy elutasítottad. Nézd meg azt is, hogy a szükséges változókat, színpalettákat vagy sablonstílusokat is importáltad-e.