Ako som už spomenul v predchádzajúcom článku, existuje viacero CSS frameworkov, ktoré nám developerom uľahčujú prácu s gridom a RWD (Responsive Web Design). Ja osobne preferujem Zurb Foundation. Ako sa využívajú techniky gridu s RWD, sa dozviete v tomto článku.

Na začiatok trocha teórie: v starších verziách Foundation sa grid skladal z “float gridu”. To znamená, že umiestnenie stĺpcov sa robilo štýlom “float: left”. Dnes od verzie 6.1 je vo Foundation dostupný “flex grid”. Bežný smrteľník (návštevník) si na stránke rozdiel nevšimne, no flexbox ponúka oveľa väčšie množstvo úprav a aj podľa názvu vieme, že je flexibilný. Síce flexbox spadá pod CSS3 a teda staré prehliadače ho nebudú podporovať, jedná sa o tak staré verzie prehliadačov (a IE < 10), že v dnešnej dobe to môžeme kľudne zanedbať. Od verzie 6.4 vytvorili nový grid - XY Grid, no o tom možno inokedy.

Moderné weby, hlavne s dobrým RWD, sa dnes nezaobídu bez gridu. Ale čo to ten grid vlastne je? Jedná sa o štruktúru rozloženia webstránky, ktorý by mal byť vybavený funkciou správania sa pri iných rozlíšeniach. Často (aspoň v mojom prípade) sa používa 12-stĺpcový grid. Teda celý web možeme “rozsekať” na 12 častí. Samozrejme, že nie každá časť musí byť nutne jedna dvanástina veľkosti, ale tiež napríklad jedna polovica a dve štvrtiny a podobne.

Grid si môžeme aj vizuálne predstaviť. Vezmime do úvahy, že nasledujúci obrázok je široký ako veľkosť vášho počítača. Zelené zvislé čiary predstavujú to, aké máme k dispozícií rozloženie. Vyšrafované časti predstavujú naše stĺpce a číslo v nich akú veľkosť budú mať v danom riadku. Každý riadok musí mať triedu row a každý stĺpec triedu columns. Bez toho grid fungovať nebude.

Ekvivalent toho, ako by vyzeralo zapísané HTML:

Hlavnou podstatou je to, aby súčet veľkostí v jednom riadku bol 12. Ak prekročíme tento limit (napríklad s veľkosťami 6 + 7), tak stĺpec s veľkosťou 7 nám “skočí” do ďalšieho riadku. Pre predstavu, vyzeralo by to takto:

Ak však súčet týchto veľkostí bude menší než 12 (napríklad veľkosti 2 + 3 + 4), tak nám na konci riadku pribudne prebytočná medzera:

Súčet iný než 12 sa celkom bežne vyskytuje. Zabrániť takémuto rozbitému gridu môžeme pomocou zarovnávacích tried na riadok (.row). Dostupné sú možnosti:

align-left (štandardne) - zarovná stĺpce doľava
align-right - zarovná stĺpce doprava
align-center - zarovná stĺpce na stred
align-justify - zarovná stĺpce do okrajov riadka
align-top - zarovná stĺpce vertikálne z hora (pokiaľ majú stĺpce rozdielne výšky)
align-bottom - zarovná stĺpce vertikálne na dol
align-stretch - nastaví všetkým stĺpcom v riadku rovnakú výšku podľa najvyššieho

Príklad použitia align-center:

Kompletný zoznam zarovnaní z dokumentácie Foundation nájdete tu.

Foundation poskytuje veľmi dobre navrhnutú štruktúru gridu a intuitívnu stavbu RWD. Ako som ukázal v predchádzajúcich ukážkach, tak je navyše možné stĺpce rozdeliť na to, akú veľkosť budú mať pri mobile, malých monitoroch a väčších monitoroch. Príkladom je aj tento blog, ktorý práve čítate, kde v strede máte obsah a na pravej strane je ukážka podobných článkov. Pri počítačoch s väčším rozlíšením sa zobrazia vedľa seba, no na mobiloch sa pravá strana zobrazí na konci stránky pod článkom.

Určite ste si všimli, že triedy stĺpcov som aj v ukážkovom kóde zapísal štýlom small-[veľkosť]. Je to z toho dôvodu, že trieda small-* bude platiť pre všetky veľkosti zariadení. Existujú ďalšie 2 možnosti tried a to: medium-* a large-*. Medium je pre stredné zariadenia a large pre všetky ostatné väčšie zariadenia. Pre správnu funkčnosť RWD odporúčam používať viaceré triedy. Najlepšie je začínať od small-*, pretože táto trieda bude vždy platiť na všetkých zariadeniach. Ak doplníme medium-* a šírka obrazovky je minimálne taká, akú potrebuje medium, tak prepíše small. Rovnako to platí aj pri large. Zoberme si nasledujúci príklad zápisu HTML:

Výsledok na rôznych zariadeniach bude vyzerať nasledovne:

Môžete si vyskúšať aj reálnu ukážku RWD na tomto odkaze.

Ak nezadáte triedu veľkosti stĺpca, tak si stĺpec zoberie zvyšnú šírku riadku. Ak nevyplníte veľkosti ani jednému stĺpcu, tak si šírku spravodlivo rozdelia. Napríklad keby sme chceli 5 rovnako veľkých stĺpcov a máme k dispozícií 12-stupňový grid, tak by sme to nedokázali urobiť (pretože 12 ÷ 5 nie je celé číslo). Nasledujúci príklad ukazuje riešenie:

Výsledok bude taký, že sa stĺpce nasledovne rozdelia:

Snáď vám môj článok priniesol niečo nové. Pokiaľ by ste mali otázky, môžete nám napísať dolu v komentároch, budem sa snažiť vám správne odpovedať. V druhej časti môjho článku sa budem znova venovať stĺpcom a ich správaniu v RWD.