Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Ú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á.

grid12 - CSS3 zdrojákoviště
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:

ukazka - CSS3 zdrojákoviště
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:

CSS3 zdrojákoviště

Při používání gridu nesmí součet číslic v .containeru_čís­lo 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:

CSS3 zdrojákoviště
Díky třídě suffix_3 nám vznikla 3 sloupcová mezera.

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.


 

Všechny články v sekci
CSS3 zdrojákoviště
Článek pro vás napsal Neaktivní Účet
Avatar
Uživatelské hodnocení:
12 hlasů
Aktivity