V předchozí kapitole bylo zmíněno, jakým způsobem lze upravovat CSS vlastnosti elementů pomocí @media. Právě na tomhle principu jsou založeny následující frameworky. Využití je relativně jednoduché. Stačí pouze připojit k webové stránce požadovaný soubor a na základě zvoleného frameworku dodržet určitou strukturu a využít požadované třídy. 

grid

Kromě responzibility mohou poskytnout CSS frameworky také grafickou úpravu ovládacích prvků, standartizaci typografie, umožní užití modálních oken, responzibilní menu aj. 

Bootstrap

Jedná se o volně dostupný CSS framework, který je možné rozšířit o případné JS komponenty.  

container - vystředí obsah. Po 100% šířku obsahu lze použít třídu container-fluid.

row - vymezení řádku pro potomky. Potomci disponují třídou určenou pro buňky, jejich součet by neměl přesáhnout hodnotu 12, jinak dojde k zalomení posledního prvku.

Ve výchozí hodnotě dochází k přizpůsobování obsahu, protože má vlastnost display: flex;.

col - třídy buněk jsou nejkomplikovanějších částí, protože právě tyto třídy zajišťují stěžejní část responzibility. Prostým přidáním číselného údaje (1 až 12) lze definovat, jakou část z řádu bude buňka zabírat. Např. třída col-4 zabere tedy 4 dílky ze 12. 

Tyto třídy je možné využít také pro specifikování rozsahu elementů na různá zařízení:

    • col-sm-X - třída upravující velkost prvku na malých zařízeních.
    • col-md-X - třída upravující velikost prvku pro středně velká zařízení.
    • col-lg-X - třída upravující velikost prvku pro velká zařízení.
    • col-xl-X - třída pro extrémně velká zařízení. 

Elementy mohou disponovat kombinacemi výše uvedených tříd col. Více informací ke Bootstrap gridu naleznete v oficiální dokumentaci. 

W3.CSS

Jednodušší alternativa pro systém Bootstrap. Je založená čistě na CSS, není potřeba JS ani jQuery balíčků. Je založena na stejném principu využití kontejnerů (w3-container), řádků (w3-row) a buněk (w3-col). Současně je i využíván grid pro až 12 buněk, jen jsou rozdíly ve třídách pro buňky.

Oproti Bootstrapu nezajistí třída w3-container vycentrování obsahu, slouží zde pouze jako wrapper. Za tímto účelem se využívá třída w3-content, která prvku současně nastaví maximální šířku 980px.

Třídy buněk

Lze využít zjednodušený zápis, který má již předdefinované vykreslování pro všechny velikosti zařízení. Jedná se o:

  • w3-quarter
  • w3-half
  • w3-third
  • w3-twothird

Vymezení buňky pro různé velikosti monitoru je:

  • s1 až s12
  • m1 až m12
  • l1 až l12

Pozor! Tyto třídy je nutné zapsat i s w3-col.

Celkový součet všech částí při přesahu 12 částí způsobí zalomení posledního elementu na nový řádek. 

Více informací k W3.CSS naleznete v oficiální dokumentaci. 

Naposledy změněno: pondělí, 9. listopadu 2020, 13.34