Responzivní třídy

Responzivní třídy jsou určené k menším zásahům do obsahu, za účelem dosažení lepšího zobrazení na různých typech zařízení. Třídy se aplikují v pokročilém nastavní sekcí nebo bloků.

Zobrazení obsahu pro určitý typ zařízení

Jsou situace, kdy chcete zobrazit speciální obsah pouze na určitém typu zařízení. Za tímto účelem jsou v připravené následující třídy, které toto omezení umožňují:

Název třídy Popis
only-mobile zobrazí obsah pouze na mobilu
only-mobile-tablet zobrazí obsah pouze na mobilu a tabletu
only-tablet zobrazí obsah pouze na tabletu
only-tablet-desktop zobrazí obsah pouze na tabletu a desktopu
only-desktop zobrazí obsah pouze na desktopu

Třídy lze použít na sekce i na běžné bloky. Zobrazení obsahu se určuje podle rozlišení, nikoliv podle zařízení na kterém se na web koukáme, může nastat situace kdy například tablet má větší rozlišení než je běžné a bude brán jako desktop a zobrazí se mu obsah pro desktop.

V administraci se obsah zobrazí vždy, správné použití třídy je tedy vidět až na frontendu.

Pozn. pro vývojáře: u tříd zmíněných výše se používají breakpointy @screen-md, @screen-lg a jejich "max" varianty.

Tip: Třída se nemusí nutně používat pouze na sekce

Třídu lze použít na sekce i samotné bloky.

Pozor!

Duplikací obsahu můžete porušit některé SEO pravidla – například dva nadpisy H1 na stránce. Třídy je dobré používat tak, aby obsah nebyl duplikován.

Změna pořadí prvků na mobilu

Na mobilu občas potřebujeme vyměnit pořadí prvků v layoutu který máme na desktopu/tabletu. Například na webu používáme layout "cik-cak" kdy měníme pořadí obrázku a textu mezi sekcemi/řádky.  Na mobilu kde je lineární layout (vše pod sebou) by se ale zobrazil "obrázek, text, text,obrázek" což nechceme. Můžeme tedy použít třídy, only-mobile a only-tablet-desktop, mnohem lepší řešení je ale použít grid třídy které se vloží na sekci.

Název třídy Popis
grid-reverse zobrazí obsah každého řádku obráceně
grid-reverse-even zobrazí obsah každého sudého řádku obráceně
grid-reverse-odd zobrazí obsah každého lichého řádku obráceně

Pozn. pro vývojáře: u tříd zmíněných výše se používají breakpointy @layout-breakpoint-max

Zalomení vnořeného gridu

Na malých obrazovkách je někdy třeba zalomit sloupce ve vnořeném gridu. Pro toto máme speciální třídy:

Název třídy Popis
nested-grid-column-mobile Zalomí sloupce ve vnořeném gridu pod sebe. Platí v rozmezí 0 - @screen-md (720 px)

Zarovnání textu

Třídy pro případ, kdy potřebuji změnit zarování textu pro menší breakpointy.

Název třídy Popis
align-sm-X X = right, center, left. Platí v rozmezí 0 - @screen-md (720 px)
align-md-X X = right, center, left. Platí v rozmezí @screen-md – @screen-lg (720 px - 993 px)

Příklad: Položku mám na desktopu zarovnanou doprava, ale na telefonu potřebuji zarovnání na střed. Lze tedy použít třídu align-sm-center.

Formuláře 

Formuláře od verze 2.30 hlídají, aby měla jejich políčka dostatečné rozměry. Pokud by byl formulář vložený do úzkého gridu a ještě by měl dva sloupce, snadno by docházelo ke špatnému zobrazení na front-endu. Proto jsou nově k dispozici třídy, které vynutí zobrazení v gridu vedle sebe, přestože jsou políčka užší, než dovoluje náš systém. 

Pro tablet (defaultně od 641px do 992px):  

Název třídy Popis
form-md-force-grid vynutí zobrazení ve sloupcích, přestože je políčko užší

Pro desktop (defaultně od 992px):  

Název třídy Popis
form-lg-force-grid vynutí zobrazení ve sloupcích, přestože je políčko užší

Sekce s preferovaným sloupcem (2.34)

V některých případech (většinou sekce obrázek/text) chceme preferovat jeden sloupec aby se např. text nadpisu na menších rozlišeních nezalamoval po jednom slově. Pro tyto účely nám slouží třídy grid-prefer

Pro tablet a menší displaye (defaultně od 641px do 861px):  

Název třídy Popis
grid-prefer-first preferuje první sloupec řádku
grid-prefer-last preferuje poslední sloupec řádku

Dřívější "rozbití" gridu (2.34)

Může se stát že "sestavený grid", většinou při použití více sloupců vedle sebe nevypadá hezky na menších rozlišeních a chceme aby základní grid přestal fungovat již dříve. K tomu nám slouží třída grid-only-ml. Třída se nastavuje na sekci, a "rozbíjí" základní grid na rozlišeních nižších než je 861px

Vyzkoušejte si, co jste se právě naučili