Úvod do gridu960
V dnešním článku se dozvíte něco málo o Gridu960. Určitě se každý z vás, kdo kódoval stránku podle nějaké předem nakreslené šablony, setkal s tím, že musel měřit šířku daných boxů/elementů na stránce, což je strašně neefektivní z hlediska času. Díky zrychlení a zjednodušení práce je zde Grid960. Abych tady nemluvil jak je grid super, tak si už řekneme co to tedy je. Jedna se o css framework k rozvržení layoutu stránky. Jeho filozofie je založena na tzv. mřížce, i když jako mřížka nevypadá. Z druhé části názvu můžeme odvodit číslo 960, které symbolizuje max. šířku stránky v px. Proč právě 960px? To proto, že stránky s touto šířkou se pohodlně zobrazí na všech běžně používaných displejích (podle statistiky).
Ve frameworku existují 3 druhy mřížek, které můžou tvořit 12, 16 a nebo 24 sloupcový layout stránek. Toto číslo má ještě jednu výhodu a to velký počet dělitelů. Je možné stránku rozdělit na více stejně širokých části. Jednou z dalších velkých výhod proč je grid používán, je důvod symetrie. Díky níž lidské podvědomí rozhoduje, zda je jeden z designu lepší než druhý (studie vědců). Uvedeme si příklad symetrie a gridu960: ,,Máte za úkol nakreslit na papír krychli o hraně 5 cm, ve 3D zobrazení, s neviditelnými hranami, tužkou, pomocí jakéhokoliv způsobu“. V našem příkladu je grid960 tzv. pomyslené pravítko a úhloměr. Myslím si, že není třeba říct, že při použití pravítka a úhloměru nakreslíte přesnější krychli než od ruky. Tím nechci podceňovat grafiky, kteří vám nakreslí přesnou krychli díky svému nadání. Ale je to ten stejný rozdíl když pak porovnáváte dva designy z čehož jeden je symetrický a druhý není. Krychle nakreslená pomocí pravítka a úhloměru vypadá přeci lépe než od ruky. Konec psychologie a jdeme se kouknout na to, jak ten grid vypadá.
Z obrázku lze lehce odvodit logiku frameworku která je postavena na, v našem
případě, růžových sloupcích. Ty jsou symetrické a mají mezi sebou
stejné odsazení. Pokud je design od web-designera nakreslen s využitím
gridu960, potom nemusíme znát šířku daného boxu/elementu v px, ale
postačí nám vědět přes kolik sloupců zasahuje. Jak jednoduché, že. Při
kódování se mohou vyskytnou věci, při kterých nelze použít grid960, ale
z větší části je to věrný pomocník.
Motivace
Je čas na motivační ukázku:
Z obrázku můžeme vidět, kde všude je grid použit. Ať už je to logo
produktu, které zaujímá 2 sloupce nebo následná fotka produktu,
zaujímající 4 sloupce a nebo menu, které zaujímá 8 sloupců atd.
Aplikace
Pokud se rozhodnete grid používat, tak navštivte stránku Oficiální stránky gridu a stáhněte si baliček v .rar formátu. Při extrakci v něm naleznete složky: code->css a v ní potřebné .css soubory. Zbylé soubory slouží pro web-designery. Soubory k frameworku začínající 960_počet-sloupců_col.css zbylé soubory reset.css a text.css jsou dodatkové soubory k frameworku, využití či nikoliv je na vás. Hlavně nás budou zajímat soubory 960_počet-sloupců_col.css, popřípadě minifikované verze které naleznete ve složce min. Při vytváření nového projektu vytvoříme složku s názvem projektu (bez diakritiky). Do ní vytvoříme složku css, která bude obsahovat příslušný 960_počet-sloupců_col.css. Ten nám bude sloužit k rozvržení stránky a soubor style.css do něhož budeme zapisovat zbylé css stránek. Následuje vytvoření souboru index.html do jehož hlavičky nalinkujeme css styly.
<link rel="stylesheet" href="css/960_počet-sloupců_col.css" /> <link rel="stylesheet" href="css/style.css" />
V této fázi už můžeme tvořit rozvržení stránky. Každý obalový prvek (většinou div) s využitím gridu960 začíná třídou ve formátu container_počet-slopců př:
<div class=“container_12“> </div>
Do vnitřku tohoto divu se píšou další prvky s danými třídami kterými jsou:
- grid_číslo - Určuje šířku boxu/elementu kde číslo je šířka ve sloupcích gridu.
- suffix_číslo - Určuje odsazení doprava dalšího boxu/elementů, číslo určuje šířku sloupců odsazení.
- prefix_číslo - Určuje odsazení zleva tohoto boxu/elementů, číslo určuje šířku sloupců odsazení.
- clear - Zruší grid system. Je to jako při floatování. Když potřebujete zrušit float, tak vložíte prvek s hodnotou clear:both; a začínáte zleva s tzv. čistou plochou.
Čas na malé ukázky:
<div class=“container_12“> <div class=“grid_4“>4</div> <div class=“grid_4“>4</div> <div class=“grid_4“>4</div> <div class=“clear“></div> </div>
Výsledek:
Při používání gridu nesmí součet číslic v .containeru_číslo překročit toto číslo. Tato ukázka používá 12 sloupcový layout. 12 >= 4 + 4 +4 tato podmínka musí platit! Jinak nedosáhnete kýženého výsledku.
<div class=“container_12“> <div class=“grid_6 suffix_3“ > class=“grid_6 suffix_3“</div> <div class=“grid_6 suffix_3“ > class=“grid_3“</div> <div class=“clear“></div> <div class=“grid_12“>big box</div> <div class=“clear“></div> </div>
Výsledek:
To by do lehkého úvodu o gridu960 stačilo. Příště si povíme něco o dalších třídách a nástrojích, které jsou spjaty s gridem960.
