Globális osztályok

A sablonstílusok az elemek alapértelmezéseit kezelik. A globális osztályok viszont igény szerint alkalmazható segédstílusok: szöveg középre igazítása, árnyék, gombváltozatok. Ez a fejezet kicsit mélyebb; ha sietsz, csak futtasd át, és térj vissza, amikor a projektjeid ismétlődővé válnak.

Mi az a globális osztály?

A CSS-osztály stílusok gyűjteménye, amit bármely elemre alkalmazhatsz. Ahelyett, hogy minden elemet külön stílusoznál, egyszer létrehozod az osztályt, és ott használod, ahol kell. Példa: a .shadow-large osztály árnyékot ad. Ugyanazt az árnyékot rátehetsz gombokra, képekre, kártyákra anélkül, hogy újra meg kellene adnod.

A globális osztályok a Bricks-ben vizuálisan épülnek, és egy kattintással újrahasználhatók. Nélkülözhetetlenek a skálázható, karbantartható webhelyekhez: egységességet adnak, és gyorsítják a munkát.

Miért számít?

Ha 20 gombod van az oldalon osztály nélkül, mindegyiket külön stílusozod, és minden változtatást 20-szor kell elvégezned. Osztállyal:

1. egyszer létrehozod a .btn-primary osztályt,
2. mind a 20 gombra alkalmazod,
3. ha változik a stílus, egyszer szerkeszted az osztályt,
4. mind a 20 gomb automatikusan frissül.

Példa: két címsornak ugyanolyan kék színe és vastag betűje legyen. Osztály nélkül mindkettőt külön stílusozod, és ha a kékből lila lesz, minden címsort meg kell keresni. Osztállyal létrehozod a .heading-blue osztályt (kék szín, 700-as vastagság), mindkettőre rátéve egy kattintással, és később az osztályt szerkeszted: minden használó elem azonnal frissül.

Az első globális osztály

Előkészítés

1. Hozz létre egy új oldalt, vagy nyiss meg egy meglévőt.
2. Adj hozzá két Címsor elemet.

Az osztály létrehozása

1. Jelöld ki az első címsort.
2. A bal oldali panel tetején látod az elem nevét és alatta az azonosító mezőt (például #brxe-abc123).
3. Kattints erre az azonosító mezőre.
4. A megjelenő beviteli mezőbe írd: heading-feature.
5. Nyomj Enter-t, vagy kattints a mentés (floppy) ikonra.

A mező most .heading-feature feliratot mutat (ponttal, ami azt jelzi, hogy osztály, nem azonosító). Mostantól minden stílus, amit erre a címsorra beállítasz, az osztályba kerül, nem csak erre az elemre.

Az osztály stílusozása

A kijelölt, osztállyal ellátott címsornál:

1. A Tipográfia résznél a Betűméret legyen 32.
2. A Betűvastagság legyen 700.
3. A Szín legyen élénk kék (#0066ff).
4. A Térköz résznél a Lenti margó legyen 20.

Ezek a stílusok a .heading-feature osztályban vannak tárolva.

Az osztály alkalmazása másik elemre

1. Jelöld ki a második címsort.
2. Kattints a panel tetején lévő azonosító mezőre.
3. Kezdd el gépelni: heading-feature.
4. A legördülő automatikus kiegészítésben megjelenik az osztály.
5. Válaszd ki, vagy nyomj Enter-t.

A második címsor azonnal megegyezik az elsővel: ugyanaz a méret, vastagság, szín és térköz, semmit nem kellett újra megadnod.

Az osztály módosítása mindenhol átvezetődik: jelöld ki bármelyik címsort (mindkettő használja az osztályt), állítsd a színt lilára (#9333ea), és mindkét címsor azonnal frissül.

Azonosító- és osztálystílusok különbsége

Alapból, ha kijelölsz egy elemet és stílust adsz neki, az az elem egyedi azonosítójához kerül, és csak az adott elemre hat. Ha globális osztályt hozol létre és alkalmazol, a stílusok az osztályba kerülnek, és minden azt használó elem örökli őket.

Fontos: az azonosító stílusai felülírják az osztály stílusait (CSS-specificitás). Ha egy elemre osztályt teszel, majd ugyanazon az elemen egyedi stílust is megadsz, az egyedi stílus nyer.

Jó gyakorlat: a közös stílusokhoz használj globális osztályt, az elemspecifikus (azonosítós) stílust pedig csak egyedi, egyszeri módosításokhoz.

Segédosztály-rendszer építése

A segédosztályok kicsi, egycélú osztályok, amelyeket kombinálhatsz.

Szövegigazítás

Hozd létre ezt a három osztályt:

.text-center

1. Hozz létre egy Címsor elemet.
2. Add hozzá a text-center osztályt.
3. A Tipográfia résznél a Szöveg igazítása legyen Közép.
4. Töröld a címsort (csak az osztály létrehozásához kellett).

.text-left: ugyanígy, a Szöveg igazítása legyen Bal.

.text-right: ugyanígy, a Szöveg igazítása legyen Jobb.

Így bármely szöveget középre igazíthatsz a .text-center osztállyal.

Térközosztályok

Az egységes térközökhöz hozz létre lenti margó osztályokat:

• .mb-sm: a Lenti margó 16.
• .mb-md: a Lenti margó 32.
• .mb-lg: a Lenti margó 48.

Ha szeretnéd, ugyanezt a felső margóhoz is megteheted (.mt-sm, .mt-md, .mt-lg). A margóértékek gépelése helyett csak az osztályt alkalmazod.

Gombváltozatok

.btn-outline

1. Adj hozzá egy Gomb elemet.
2. Alkalmazd a btn-outline osztályt.
3. A Stílus résznél távolítsd el a háttérszínt (legyen átlátszó).
4. A Szegély résznél adj 2px folytonos szegélyt #0066ff színnel.
5. A szövegszín legyen #0066ff.
6. A belső margó legyen 12 fent és lent, 24 balra és jobbra.
7. A Szegélysugár legyen 8.

.btn-ghost

1. Hasonló az outline-hoz, de szegély nélkül.
2. Csak szövegszín és belső margó.
3. Finom lebegtetési hatás: a :hover állapotnál adj hátteret.

Az osztályok cseréjével azonnal váltogathatod a gombváltozatokat.

A globális osztályok kezelése

Az összes osztály megtekintése

Nyomd meg a Cmd/Ctrl + . billentyűket a Stíluskezelő megnyitásához (vagy kattints az eszköztár Stílusok ikonjára), és lépj az Osztályok lapra. Itt:

• láthatod az összes globális osztályt,
• szerkesztheted, átnevezheted vagy törölheted őket,
• kereshetsz konkrét osztályra,
• megnézheted, hol használod az osztályokat,
• exportálhatod és importálhatod őket.

Osztály szerkesztése

1. Az Osztályok lapon keresd meg a szerkesztendő osztályt.
2. Kattints a szerkesztés (ceruza) ikonra.
3. Módosítsd a stílusokat a panelen.
4. Az osztályt használó összes elem azonnal frissül.

Nem használt osztályok törlése

A kezelő megmutatja, mely osztályokat hol használod. Ha egy osztályt sehol nem használsz, nyugodtan törölheted, hogy a könyvtár tiszta maradjon.

Valós példa: különböző elemek azonos stílusa

Egy céloldalon a hero, a funkciók és a vélemények címsorának is ugyanolyan kék árnyalatúnak és vastagságúnak kell lennie. Osztály nélkül mindhármat külön stílusozod. Osztállyal létrehozod a .heading-accent osztályt, és mindhárom címsorra ráteszed.

Később az ügyfél lilát kér a kék helyett. Osztály nélkül mindhárom címsort egyenként át kell írnod, és könnyű valamelyiket kihagyni. Osztállyal a .heading-accent színét egyszer módosítod, és mindhárom frissül, kb. 10 másodperc alatt. Ez a módszer több száz elemre és több tucat oldalra is skálázódik.

Osztályok kombinálása

Egy elemre több osztályt is rakhatsz, így a stílusokat összeállíthatod. Például a .heading-feature és a .text-center együtt a feature címsor stílusát (szín, vastagság, méret) és a középre igazítást is adja. Ez a moduláris megközelítés a lehető legnagyobb rugalmasságot adja minimális ismétléssel.

Álosztályok: lebegtetés és más állapotok

A globális osztályok támogatják az álszelektorokat: :hover, :focus, :active és mások. Lebegtetési hatás létrehozása:

1. Hozd létre a .btn-primary osztályt.
2. Stílusozd az alapállapotot (háttér: kék, szöveg: fehér).
3. Az Állapot legyen :hover.
4. Sötétítsd a háttérszínt.
5. Adj hozzá finom nagyítást (a haladó vezérlők Átalakítás részénél).

Mostantól minden .btn-primary osztályú gomb ugyanígy viselkedik, és csak egyszer kellett megadnod.

A skálázást segítő haladó funkciók

• Változók: a Stíluskezelő Változók lapján CSS-változókat (színek, térközskálák, betűméretek) adhatsz meg, amelyekre az osztályokban hivatkozhatsz. A változó módosítása minden azt használó osztályt frissít.
• Komponensek: teljes elrendezéseket (nem csak stílusokat) alakíthatsz újrahasználható, szinkronizált blokkokká. Olyanok, mint a globális osztályok a szerkezetre, tartalomra és stílusra.

Ezek ugyanarra az elvre épülnek: egyszer meghatározod, mindenhol használod, globálisan frissíted. Előbb a globális osztályokat sajátítsd el, utána fedezd fel ezeket.

Összefoglalás

Most már tudod, hogyan hozz létre és alkalmazz globális osztályokat, hogyan építs segédosztályokat szövegigazításhoz, térközhöz és gombstílusokhoz, hogyan kezeld őket a Stíluskezelőben, hogyan használj álszelektorokat, és mi a különbség az azonosító- és az osztályalapú stílus között.