Reszponzív szerkesztés

Ami nagy asztali képernyőn jól néz ki, kisebb eszközökön általában finomításra szorul: kisebb betűméret, margó és kitöltés, oszlopszélesség vagy oszlopok egymás alá törése, bizonyos elemek elrejtése.

A Bricks alapból négy töréspontot ad:

Töréspont	@media lekérdezés
Asztali	Alap töréspont
Tablet álló	< 992 px
Mobil fekvő	< 768 px
Mobil álló	< 478 px

Az alap töréspontra beállított stílusokat az összes többi töréspont örökli. Miután az alap (asztali) töréspontra elkészültél az oldallal, nézd meg és igazítsd a többi töréspontot is.

Egy töréspont stílusának megtekintéséhez és szerkesztéséhez kattints a töréspont ikonjára az eszköztár közepén, vagy használd a CMD/CTRL + B billentyűparancsot. A töréspont ikonok mellett szélesség (S), magasság (M) és nagyítás (%) mezők vannak.

Háttérvideó csak nagyobb töréspontokon

A Háttér vezérlőben a háttérvideóhoz tartozik egy lejátszás kezdete beállítás. Válaszd ki azt a legkisebb töréspontot, ahol a videó fusson. Ez alatt a szélesség alatt a Bricks a videóforrás hozzárendelése előtt leáll, így a natív háttérvideó-szkript nem tölti le az asztali videót.

Hogy kisebb képernyőn képet mutass:

1. Állítsd be a háttérvideót az elemen.
2. Állítsd a lejátszás kezdetét a legkisebb olyan töréspontra, ahol a videó lejátszódjon.
3. Állíts be háttérképet a kisebb töréspontra.

Egyéni töréspontok

Az egyéni töréspontok használatához előbb kapcsold be őket a Bricks → Beállítások → Általános → Egyéni töréspontok alatt. Bekapcsolás után a szerkesztő eszköztárában a hárompontos ikonra kattintva (az első töréspont ikon mellett) nyílik a töréspontkezelő.

Töréspont szerkesztése

A ceruza ikon megnyitja a kiválasztott töréspont szerkesztési beállításait. A szerkeszthető tulajdonságok:

Tulajdonság	Leírás
Címke	A töréspont ikonjára vitt egérnél jelenik meg az eszköztárban.
Szélesség (px)	A @media lekérdezés min-width/max-width értéke (az alap töréspont függvényében).
Szélesség (szerkesztő)	Erre a szélességre vált a szerkesztő, amikor átkapcsolsz a töréspontra.
Ikon	A töréspont ikonja az eszköztárban.
Alap töréspont	A töréspont beállítása alap töréspontnak.
Kulcs	Nem szerkeszthető; a töréspont beállításainak tárolására és azonosítására szolgál.

A leggyakoribb művelet az alapértelmezett (mobil) töréspontok szélességének testreszabása. Ha a „Tablet álló” egyéni szélessége például 1023 px, akkor a „Tablet álló” töréspontra beállított stílusok az 1024 px-nél keskenyebb eszközökre vonatkoznak.

Új töréspont létrehozása

Tetszőleges számú további egyéni töréspontot hozhatsz létre. Ajánlott előbb az alapértelmezett mobil töréspontok szélességét a kedvedre igazítani, mielőtt továbbiakat használsz. Az alapértelmezetteken felül ritkán kell egynél-kettőnél több további töréspont.

A töréspontkezelő fejlécében a „+” ikon megnyitja a töréspont-létrehozó űrlapot. Például egy „Large” nevű, 1400 px szélességű töréspont létrehozása után a Létrehozás gombra kattintva az új töréspont a töréspontkezelőben (egy „CUSTOM” címkével) és az eszköztárban is megjelenik. Mivel ez a legnagyobb, első töréspontként látszik; az asztali (alap) töréspont alapértelmezett szélessége 1279 px.

Egyéni töréspont szüneteltetése

A töréspontkezelő jobb oldalán lévő jelölőnégyzettel szüneteltethetsz bármelyik egyéni töréspontot. A szüneteltetés kihagyja a töréspont stílusainak generálását az előlapon, de megtartja az egész webhelyen beállított stílusokat, így nem kell őket egyenként törölni. Egy teljesen kiépített webhelyen ez akár ezres nagyságrendű beállítás.

Alapértelmezett töréspont visszaállítása

Az alapértelmezett töréspont értékeinek visszaállításához kattints a visszaállítás ikonra (a ceruza mellett).

Az összes töréspont visszaállítása

A töréspontkezelő fejlécében a fogaskerék ikon megnyitja a töréspontok visszaállítása műveletet. A gombra kattintva az összes töréspont-módosításod (alapértelmezett és egyéni egyaránt) törlődik az adatbázisból.

Az alap töréspont

Az alap töréspontnak nincs @media lekérdezése, ezért az alap töréspontra beállított stílusok minden képernyőszélességre érvényesek. Ezért látszanak alapból az „Asztali” töréspont stílusai az összes többi töréspontnál is, hacsak egy konkrét töréspontra nem adsz meg stílust: ilyenkor a töréspontspecifikus szabály elsőbbséget élvez az alap töréspont stílusával szemben.

A töréspont szerkesztésekor beállíthatod Alap töréspontként is. Ekkor az ezen az új alap töréspontnál beállított stílusokat a töréspontlánc felfelé és lefelé is örökli. Ha például a „Tablet álló” az alap töréspont, a töréspont ikonok melletti sárga pont, vonalak és nyilak szemléltetik a stílusöröklést.

Mobile-first tervezés

A Bricks-ben a stílusozás alapból a legnagyobb töréspontról halad lefelé: „Tablet álló”, majd „Mobil fekvő” és „Mobil álló”. Mobile-first megközelítéshez állítsd a legkisebb töréspontot alap töréspontnak. Ezt a töréspontkezelő fejlécében a „MOBILE FIRST” címke is jelzi. Ilyenkor a töréspontok sorrendje megfordul, és a legkisebbel kezdődik, így az oldalt a legkisebb töréspontról kiindulva tervezheted.

Bricks CSS-fájlok újragenerálása

Ha egy alapértelmezett töréspont szélességét testreszabod, a Bricks automatikusan frissíti azokat a Bricks CSS-fájlokat (például frontend.min.css), amelyek az adott töréspont médialekérdezéseit tartalmazzák. Ha az előlapon a töréspontszélességek nem megfelelően érvényesülnek, generáld újra a Bricks CSS-fájlokat a Bricks → Beállítások → Általános → Egyéni töréspontok alatti Regenerate CSS files gombbal.

Reszponzív vezérlőjelző

Ez a jelző megmutatja, mely vezérlők kaphatnak eltérő értéket a különböző töréspontokon. Hogy mikor jelenjen meg, a Bricks → Beállítások → Szerkesztő → Vezérlőpult → Reszponzív vezérlőjelző alatt állíthatod:

• Show if any value exists (alapértelmezett): akkor jelenik meg, ha a vezérlőnek bármely töréspontra van értéke.
• Show if non-base breakpoint value exists: csak akkor jelenik meg, ha a vezérlő értéke eltér az alap töréspontétól.
• Show on all responsive controls: minden reszponzív vezérlőn megjelenik, értéktől függetlenül.
• Disable: kikapcsolva.