Drótváz sablonok

A drótvázak előre elkészített elrendezések, amelyekkel gyorsan építhetsz sablonokat és oldalakat. A szerkezetre, az elrendezésre és a működésre koncentrálnak: alig van bennük stílus, helyőrző szöveget használnak, és csak egy terület (például egy szakasz, rács vagy kártya) felépítését adják. Elsősorban új oldalakhoz valók, de meglévő webhelyen is használhatod őket.

A drótvázak osztályokra és változókra épülnek, hogy rugalmasak, karbantarthatók és bővíthetők legyenek. A legtöbbjüknél nincs stílus az elem azonosítóján (ID), viszont szinte minden elemhez tartozik osztály. Ha még nem dolgoztál osztályokkal vagy változókkal, előbb nézd át a globális osztályokat és a változókezelőt.

A drótvázakat a Sablonkönyvtár Böngésző ablakában éred el: a Sablonminták nézetben a forrás legördülő listájából válaszd a Drótvázak elemet. A lista a Bricks csoportban a Drótvázak és a Dizájnkészletek forrást kínálja a Saját sablonok mellett.

https://minta-bolt.hu/template/fo-fejlec/?bricks=run

A képen a forrás legördülő lista nyitva van: a Bricks csoportban a Drótvázak a drótváz sablonok forrása.

Előfeltételek

A drótvázak teljes értékű használatához kapcsold be a szükséges beállításokat.

Kötelező beállítások (Bricks → Beállítások → Általános):

1. Az SVG feltöltés (rendszergazdáknak) legyen bekapcsolva.
2. Az osztálykezelő és a változókezelő ne legyen kikapcsolva.

Választható beállítások:

Hol	Beállítás
Bricks → Beállítások → Teljesítmény	Az elem- és globálisosztály-láncolás kikapcsolása
Bricks → Beállítások → WooCommerce	Egyebek: a Bricks WooCommerce „Értesítés” elemének engedélyezése
Bricks → Beállítások → WooCommerce	Termékek: az „Akció” jelvény százalékra vagy szövegre állítása
Bricks → Beállítások → WooCommerce	AJAX-os kosárba helyezés engedélyezése

A drótvázak típusai

A drótvázakat alapból három szempont szerint rendezi a Bricks: sabloncsomag, sablontípus és sablon-címke. Ezekkel a szűrőkkel gyorsan megtalálod a megfelelőt.

Sabloncsomagok

A csomagok téma szerint csoportosítják a sablonokat. A Blog csomagban például cikk- és bejegyzés-elrendezések vannak, külön cikkkártyákkal, cikkszakaszokkal és cikkrácsokkal. A GYIK csomagban önálló harmonikák és GYIK-szakaszok találhatók. A csomagok közt van például a 404, az Avatárok, a Blog, a Kapcsolat, a Tartalom, a CTA-k, a GYIK és a Funkciók.

Sablontípusok

Minden drótvázhoz tartozik egy sablontípus. A típusok a WordPress sablonhierarchiájához hasonlók, és megmondják a WordPressnek, milyen sablonról van szó (például egy bejegyzés sablonja, archívum, WooCommerce-kosár). A legtöbb típus megjelenését a sablonfeltételekkel pontosan megadhatod. A szakasz típusú sablonokat kézzel szúrod be, hacsak nem rendeled egy kampóhoz (hook): a kampóval beszúrt szakaszsablonoknál is használhatsz feltételeket.

Néhány típus: fejléc, lábléc, egyedi, szakasz, archívum, felugró ablak, WooCommerce termékoldal, WooCommerce fiók rendelései. A típusok részletes leírását a Sablonok: típusok, feltételek, hozzárendelés fejezetben találod.

Sablon-címkék

A címkék a sablonok funkciója szerint rendeznek:

Címke	Jelentés
Egyedi	Egyetlen elem vagy kisebb elemcsoport, például egyéni lista, funkciókártya, kép-/médiacsoport, űrlap vagy bevezető, amelyet bárhol használhatsz.
Rács	Elrendezési rács (általában CSS grid vagy flexbox), amely egyedi sablonokat fog össze, például funkciókártyákat.
Szakasz	Egy szakasz, amely általában egy vagy több rácsot vagy önálló elrendezést tartalmaz.
Sablon	Teljes értékű sablon (a sablontípusok szerint), például bejegyzés, termék, archívum, fejléc, lábléc, 404.
Felugró ablak	Felugró ablak elrendezése. Technikailag ez is sablon, de külön címkét kapott, hogy könnyebb legyen megtalálni.

Felépítés és elrendezés

A legtöbb drótváz moduláris: több sablon van egyetlen sablonba építve. Egy olyan szakasz például, amelyben kártyákból álló rács van, összesen három sablon:

1. a kártya sablonja (címke: egyedi),
2. a kártyákat tartalmazó rács sablonja (címke: rács),
3. a rácsot a kártyákkal együtt tartalmazó szakasz sablonja (címke: szakasz).

Mindegyik külön sablonként is elérhető. A kártyát így más környezetben is használhatod, a kártyás rácsot pedig áthelyezheted egy másik szakaszba („mix and match”, azaz tetszés szerinti keverés).

Példa: „Feature Section 01”. Ez három sablont tartalmaz: az „Intro 01” (egyedi), a „Feature Grid 01” (rács) és a „Feature Card 01” (egyedi) sablont. Itt mindegyiknek ugyanaz a sorszáma (01), mert egy környezetben készültek. Előfordulhat eltérő vagy hiányzó sorszám is, ez nem befolyásolja a használatot.

Példa: „Feature Section 04”. Itt a „Content Wrapper” blokknak nincs sorszáma, vagyis csak ebben a sablonban létezik, külön sablonként nem. A „Media Group 04” viszont önálló sablonként is megvan, ezért máshol is felhasználható.

Szakasz vagy rács?

A weboldal minden oldalát szakaszokra kell osztani. A szakasz szemantikailag egy új témát jelent: a kezdőlap például állhat hős-, funkció-, bemutatkozó és CTA- vagy kapcsolati szakaszból. Szakaszt ne tegyél másik szakaszba.

A rácsok a szakaszokon belülre kerülnek. Ha tartalmilag összetartoznak, egy szakaszban több rács is lehet. Rossz példa, ha egy blogbejegyzés-rácsot és egy termékrácsot ugyanabba a szakaszba teszel: értelmi összefüggés nincs köztük, ezért külön szakaszba kerüljön mindkettő.

Módosíthatod a sablonokat?

Igen: hozzáadhatsz elemeket, és törölheted, ami nem kell. Érdemes a módosított sablont elmenteni a saját sablonjaid közé, hogy újra felhasználhasd. Ha ugyanazt a sablont újra importálod a sablonkönyvtárból, nem lesznek benne a szerkezeti módosításaid. Az importált osztályok és változók módosításai viszont megmaradnak az egész webhelyen, hacsak nem törlöd vagy nem írod felül őket az eredeti osztály újraimportálásával.

A sablonok csak kiindulópontok: nem készek, és nem illenek 100%-ban minden projekthez. Nyugodtan egészítsd ki őket saját szakaszokkal, rácsokkal és egyedi sablonokkal.

Stílus: sablonstílus, CSS-változók és színpaletta importálása

Drótváz importálásakor a Bricks megkérdezi, hogy importálod-e a hozzá tartozó CSS-változókat, sablonstílust és színpalettát.

CSS-változók

Mivel a drótvázak szinte kizárólag CSS-változókat használnak, a változók importálása erősen ajánlott. Ha a Bricks rákérdez, drótvázaknál válaszolj igennel, hacsak nem akarod szándékosan magad megfeleltetni vagy újra létrehozni a változókat. Nemmel is folytathatod az importálást, de a drótváz addig nem úgy néz ki, ahogy kell, amíg ezek a változók nem léteznek a webhelyeden.

Sablonstílus

A sablonstílus az alapbeállításokat tartalmazza: reszponzív betűméretek (a HTML 62,5%-os alapméretével), szakasz-térköz, tárolószélesség, hézagok és hasonlók. Ha már használsz saját sablonstílust, szükség esetén vidd át a beállításokat abba, a „brxwireframes” sablonstílust pedig hagyd meg feltétel nélkül, hivatkozásként. Ha még nincs saját sablonstíluson, ne felejts el feltételt rendelni a drótváz-sablonstílushoz: „teljes webhely”.

Színpaletta

Néhány sablonban színek is kellenek (átfedések, szegélyek, háttér- és szövegszínek). Erre 12 semleges színváltozó készült (--brxw-color-neutral-xxx), ezek „Bricks Wireframes” színpalettaként is elérhetők. Érdemes importálni a palettát: vizuális támpont a meglévő változókhoz, és gyorsan hozzárendelheted a színeket más elemekhez.

Stílus: osztályok, azonosítók és CSS-változók

Minden osztály és CSS-változó előtagja a brxw-, hogy ne ütközzön a meglévő osztályokkal és változókkal. A sablonok szinte minden eleméhez tartozik legalább egy osztály, amelynek elnevezése a BEM („Block Element Modifier”) módszert követi:

• Blokk: önálló szülőelem, például kártya, menü vagy rács. A blokkosztályban csak kötőjel van. Példa: .brxw-article-card-01
• Elem: a blokkon belüli gyermekelem, két alsóvonallal kapcsolódik a blokkhoz. Példa: .brxw-article-card-01__title
• Módosító: a blokk vagy elem egy változata, amely az állapotot vagy a megjelenést módosítja; két kötőjellel kapcsolódik. Példa: .brxw-article-card-01--dark

A BEM „blokk” és „elem” fogalma nem azonos a Bricks azonos nevű elemeivel. A BEM-blokkosztály bármilyen Bricks szülőelemen lehet (blokk, div, szakasz, tároló, navigációs menü, ikonlista), a BEM-elemosztály pedig a blokkon belüli bármilyen Bricks-elemen.

Példa: Article Card 01. Blokkosztálya .brxw-article-card-01, elemosztályai: __body, __title, __taxonomy, __text, __footer, __date, __author, __media-wrapper, __media.

Tudnivalók:

• Nem minden blokknak kell gyermekelem: létezhet önállóan is.
• Egy blokknak lehetnek más blokkok a gyermekei. Az „Article section 04” sablon szakaszeleme például önálló blokk (.brxw-article-section-04), és két másik blokkot tartalmaz: .brxw-intro-02 és .brxw-article-grid-04, amelyeknek maguknak is vannak elemeik.
• Elem nem létezhet szülőblokk nélkül: a .brxw-intro-02__title nem létezhet a .brxw-intro-02 nélkül.

Hol stílusozz: brxw-osztályon, saját osztályon vagy azonosítón?

Gondold át, hányszor és hol használod a sablont. A többször előforduló sablonoknál (ismételt szakasz, ciklusban lévő kártyák) az osztályra stílusozás jobb, mint az azonosítóra, mert az azonosító oldalanként csak egyszer szerepelhet.

• Meglévő brxw-osztályok: ez az alapmódszer. Az értékeket (például a rács oszlopainak számát) szabadon módosíthatod. Ha később ugyanazt a sablont újra beszúrod a sablonkönyvtárból, az automatikusan megkapja ugyanazt a stílust és a brxw-osztályra rögzített módosításaidat.
• Saját osztályok: a brxw-osztályok mellé saját osztályt is adhatsz egyéni stílusokkal, ami legtöbbször a meglévő értékeket is felülírhatja. Ha ugyanazt a sablont máshová is beszúrod a sablonkönyvtárból, a saját osztályokat kézzel kell újra hozzáadnod. Másik lehetőség, hogy a saját osztályokkal módosított sablont elmented a saját sablonjaid közé, és onnan használod.
• Azonosítók: néha az azonosítóra stílusozva írhatod felül az osztály stílusát. Ha ugyanazt a szakaszsablont kétszer teszed a kezdőlapra, és az osztálynak háttérszínt adsz, az mindkettőre vonatkozik; ha a másodiknak kivételesen másik színt akarsz, azt a szakasz azonosítójára stílusozva érheted el. Az azonosító mindig erősebb az osztálynál, ezért azonosítóra állított stílust osztállyal nem írhatsz felül, fordítva igen. Ha ugyanazt a sablont újra importálod, a szakasz nem tartalmaz azonosító-stílust, de megkapja a módosított osztálystílusokat.

Átnevezhetem a meglévő osztályokat?

Igen, de a blokk- és a gyermekelem-osztályokat is át kell nevezned (az osztálykezelőben). Ha ezután ugyanazt a sablont újra importálod, az már a te osztálynevedet és stílusmódosításaidat használja, vagyis az eredeti sablont többé nem importálhatod változtatás nélkül.

Ha meg akarod őrizni a változatlan újraimportálás lehetőségét, az átnevezés nem elég, mert az osztályoknak az adatbázisban ugyanaz az azonosítójuk marad. Ilyenkor az osztálykezelőben duplikáld az osztályokat (így új, egyedi azonosítót kapnak), rendeld hozzá az új osztályokat az elemekhez, és vedd le róluk a „régi” osztályokat.

Véletlenül töröltem egy brxw-osztályt. Visszaállítható?

Igen. Először nézd meg az osztálykezelő kukáját (jobb felül): ha az osztály még ott van, közvetlenül visszaállíthatod. Ha a kukát már kiürítetted, importáld újra a sablont. Mindkét esetben rendeld hozzá újra az osztályt azokhoz az elemekhez, amelyekről hiányzik, mert törléskor lekerül az elemekről.

CSS-változók

Ha egy brxw-osztályhoz (vagy a sablonstílus beállításához) érték tartozik, az néhány kivétellel CSS-változóként van megadva. A változókat és értékeiket a változókezelőben találod.

A CSS-változók előnye az újrahasznosíthatóság, a rugalmasság és az egyszerű karbantartás: központi értékek, amelyeket a CSS bármely eleme használhat. Ha például a rácsok hézagát növelni vagy csökkenteni akarod, elég a --brxw-grid-gap változó értékét módosítanod, és a változás minden rácsra érvényes, amelyik használja.

Változókategóriák

A változók a projekt „indításához” szükséges alapterületeket fedik le: CSS-rácsok, betűméretek, térközök, hézagok, szegélysugár és hasonlók. Ha további kategóriák vagy változók kellenek, a változókezelőben létrehozhatod őket.

Kategória	Példák	Mire való
Rácsok	--brxw-grid-1, --brxw-grid-2, …, --brxw-grid-12	CSS-rácsokban az oszlopok számának megadása
Térközök	--brxw-space-xs, --brxw-space-2xl …	margók, belső margók, szélességek, magasságok, hézagok
Tipográfia	--brxw-text-xs, --brxw-text-m, --brxw-text-2xl	9 (folyékony) betűméret xs-től 5xl-ig

Változóértékek

A brxw-változók a betűméretekhez, térközökhöz és szegélysugárhoz CSS clamp() függvényeket használnak: a függvény a nézetablak szélességétől függően egy minimum, egy előnyben részesített és egy maximum érték között számol. Így például mobilnézetben nem kell kézzel átállítanod a betűméretet vagy a belső margót, mert az automatikusan csökken vagy nő. A számítás alapja egy 320 képpontos minimális és egy 1440 képpontos maximális nézetablak-szélesség, ami a tipikus weboldalaknál jó kiindulópont.

Már használok keretrendszert (ACSS, Frames, CoreFramework). Használhatom a saját változóimat?

Igen, de számolj vele, hogy az értékeik valószínűleg eltérnek a brxw-változókétól. Mivel a keretrendszerek sok mindenben átfedik egymást, a meglévő változóidat megadhatod a brxw-változók értékeként. Így a drótváz-sablonokat a meglévő elrendezéshez és térközökhöz igazíthatod anélkül, hogy minden sablont külön szerkesztenél.

Példa ACSS-sel:

ACSS-változó	brxw-változó	Kiterjesztett brxw-változó
--container-gap: var(--space-xl)	--brxw-container-gap: var(--brxw-space-2xl)	--brxw-container-gap: var(--container-gap)
--grid-gap: var(--space-l)	--brxw-grid-gap: var(--brxw-space-l)	--brxw-grid-gap: var(--grid-gap)
--space-m: clamp(2rem, calc(1.09375vw + 1.65rem), 3.4rem)	--brxw-space-m: clamp(1.6rem, calc(0.36vw + 1.49rem), 2rem)	--brxw-space-m: var(--space-m)
--h2: clamp(2.592rem, calc(1.725vw + 2.04rem), 4.8rem)	--brxw-text-fluid-3xl: clamp(2.56rem, calc(1.04vw + 2.23rem), 3.73rem)	--brxw-text-3xl: var(--h2)

Példa Core Frameworkkel:

Core Framework változó	brxw-változó	Kiterjesztett brxw-változó
--space-m: clamp(…)	--brxw-space-m: clamp(1.6rem, calc(0.36vw + 1.49rem), 2rem)	--brxw-space-m: var(--space-m)
--radius-m: clamp(1rem, calc(-0.19vw + 1.26rem), 1.2rem)	--brxw-radius-m: clamp(1rem, calc(-0.18vw + 1.26rem), 1.2rem)	--brxw-radius-m: var(--radius-m)

Saját reszponzív értékek (clamp)

Ha a 320 és 1440 képpontos határoktól eltérő nézetablak-méreteket akarsz, a clamp()-ot használó változók értékeit (folyékony tipográfia, térköz, szegélysugár) újra kell generálni. Kézzel nem érdemes. A változókezelőbe beépített folyékony tipográfiai skála generátorral új szöveg- vagy térköz-változókat készíthetsz (folyékony tipográfia). A szegélysugár-változók egyedi minimum- és maximumértékűek, ezért nem alapértékből számolódnak.

Használhatsz külső generátorokat is, amelyek kész clamp() függvényt adnak (a fluid-type-scale.com, a utopia.fyi és a coreframework.com ingyenes generátorok). A generátortól függően a változó nevét/előtagját vagy ott állíthatod át, vagy később egy kódszerkesztőben.

Stílus: színpaletták

A legtöbb drótváz csak ott tartalmaz színt, ahol feltétlenül szükséges vagy hasznos (átfedés, szegély, háttér, szöveg). Erre egy semleges, szürke árnyalatú paletta készült, 12 színlépcsővel világostól sötétig, amelyet sablonimportáláskor importálhatsz.

A színek CSS-változók a változókezelőben (--brxw-color-neutral-25, --brxw-color-neutral-50, --brxw-color-neutral-100, …, --brxw-color-neutral-950), ahol módosíthatók. Ha egyáltalán nem akarsz előre megadott színeket használni, töröld a színváltozókat a változókezelőből. Saját palettához (elsődleges és másodlagos színekhez, vagy a semleges értékek cseréjéhez) külső színpaletta-generátorokat is használhatsz.

Egyéni CSS, JS és kód

Az egyéni CSS-t a sablonok lehetőleg kerülik, de egyes elrendezések vagy testreszabások nélküle nem lehetségesek. Egyéni JS-t vagy PHP-t csak ott használnak, ahol a használati eset megköveteli, és a kódot lehetőleg részletesen kommentelték. Ha a sablonban Kód elem van, ne felejtsd el engedélyezni a kód futtatását, és aláírni a kódot (Kód elem).

Gyakori kérdések

Miért nincs drótváz egy bizonyos kategóriához? A Bricks azért ad rugalmasságot, hogy pontosan azt építsd meg, amire szükséged van. Idővel újabb drótvázak jöhetnek, de bármely kategóriához vagy dizájnhoz készíthetsz saját drótvázat is.

Kérhetek új drótvázakat? Igen, a Bricks fejlesztői nyitottak az ötletekre, bár nem vállalják, hogy minden javaslatot megvalósítanak. Javaslatot e-mailben („Wireframes” tárggyal) vagy a fórum Feature Requests/Improvements kategóriájában tehetsz (a cím elé írd: „Wireframes”).

Kihez fordulhatok, ha hibát találok? E-mailben („Wireframes” tárggyal) vagy a fórum hibajelentési kategóriájában („Wireframes” címelőtaggal). Írd meg a sablon nevét és a hibát minél részletesebben.