Návody

Responzivní třídy

9 minut

Responzivní utility třídy v solidpixels pro větší kontrolu zobrazení webu na jednotlivých zařízeních.

Obsah článku

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ů.

Skrývání obsahu pro určitý typ zařízení (2.51+)

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
hide-sm skryje obsah na rozlišení do 719px
hide-md skryje obsah od 720px - 860px
hide-ml skryje obsah od 860px - 992px
hide-lg skryje obsah od 993px - 1200px
hide-xl skryje obsah od 1201px - 1440px
hide-xxl skryje obsah od 1441px - 1800px
hide-hg skryje obsah na rozlišení od 1801px
hide-nav-sm skryje obsah na rozlišeních s mobilní hlavičkou
hide-nav-lg skryje obsah na rozlišeních s desktopovou hlavičkou

V administraci se obsah zobrazí vždy aby jej bylo možné editovat, 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řídy můžete aplikovat na sekce i samotné bloky.

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.

Zobrazení obsahu pro určitý typ zařízení (verze starší než 2.51)

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í:

Od verze 2.51 prosím používejte třídy pro skrývání obsahu z našeptávače tříd.

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.

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

Výpisy a galerie na mobilu a tabletu (2.31+) 

Pro galerii a výpisy jsou připravené třídy díky kterým lze určit počet položek na řádek, defaultně se na mobilu zobrazí jedna položka na řádek a to není vždy chtěné, proto máme tyto třídy díky kterým lze určit počet položek na různých zařízeních:

Pro mobil (defaultně do 480px):

Název třídy Popis
grid-sm-2 dvě položky na řádek
grid-sm-3 tři položky na řádek
grid-sm-4 čtyři položky na řádek

Pro větší mobil a užší tablet (defaultně od 481px do 640px): 

Název třídy Popis
grid-md-2 dvě položky na řádek
grid-md-3 tři položky na řádek
grid-md-4 čtyři položky na řádek

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

Název třídy Popis
grid-lg-2 dvě položky na řádek
grid-lg-3 tři položky na řádek
grid-lg-4 čtyři položky na řádek

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

Tip: Třídy lze kombinovat!

Třídy lze mezi sebou kombinovat, lze tedy nastavit třídu jak pro mobil, větší mobil tak pro tablet.
Např: grid-sm-2 grid-md-4 => mobil 2 fotky, velký mobil 4 fotky

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