Úvod do gridu960

HTML a CSS Profesionální webdesign Ú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
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
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_čí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:


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.


 

  Aktivity (1)

Článek pro vás napsal tomichi
Avatar
Autor se věnuje tvorbou webových stránek v jazycích PHP (Nette) a tvoří i grafické designy stránek ve volném čase fotografuje a nebo provozuje lyžování , jizdu na kole ...

Jak se ti líbí článek?
Celkem (9 hlasů) :
4.222224.222224.222224.22222 4.22222


 



 

 

Komentáře
Zobrazit starší komentáře (6)

Avatar
rainbof
Člen
Avatar
rainbof:

aha :)

 
Odpovědět 26.2.2013 15:48
Avatar
tomichi
Redaktor
Avatar
tomichi:

Děkuji za kritiku :)snad se někdo dozvěděl něco nového...

Odpovědět 26.2.2013 18:44
Dělte se o svou zkušenost, je to cesta jak dosáhnout nesmrtelnosti. Dalajláma
Avatar
KiRoS
Člen
Avatar
KiRoS:

Super článek :-)

Odpovědět 9.6.2013 13:19
Programování a informační technologie má budoucnost.
Avatar
Pavel Vosyka
Člen
Avatar
Pavel Vosyka:

Pěkný, akorát mi rozum tápal nad tímle, ale to je asi jen překlep...
místo:

<div class=“grid_6 suffix_3“ > class=“grid_3“</div>

toto:

<div class=“grid_3“ > class=“grid_3“</div>
:)
Odpovědět  +1 11.6.2013 14:26
"nikdy nepiš nic 2x"
Avatar
tomasmanhal
Člen
Avatar
tomasmanhal:

Rozhodně palec nahoru za tenhle článek! a těším se na další pokračování :-)

Odpovědět 26.10.2013 11:50
Kdyby nám dodali k životu zdrojový kód, vše by bylo jednodušší...
Avatar
vojtanosek
Člen
Avatar
vojtanosek:

Tak to vyzkouším.

 
Odpovědět 16.5.2015 11:43
Avatar
vojtanosek
Člen
Avatar
vojtanosek:

Docela složité.

 
Odpovědět  -1 16.5.2015 11:52
Avatar
tomasmanhal
Člen
Avatar
Odpovídá na vojtanosek
tomasmanhal:

Nic složitého na tom není. Máš pevně danou šířku webu rozdělenou na sloupce. Jednotlivé prvky na webu si poté pomocí počtu soupců šoupáš kam potřebuješ a zvětšuješ jejich šířku.

Dám příklad. Máš web rozdělený na 12 sloupců a budeš chtít někde udělat vedle sebe 3 odstavce. Každý odstavec tedy bude mít šířku 4 sloupců.

Zkus se podívat třeba na Bootstrap, ten funguje na stejném principu.

Odpovědět 16.5.2015 14:11
Kdyby nám dodali k životu zdrojový kód, vše by bylo jednodušší...
Avatar
vojtanosek
Člen
Avatar
vojtanosek:

Tak radši budu něco dělat s pixelama.

 
Odpovědět 16.5.2015 18:34
Avatar
Šimon Rataj
Člen
Avatar
Šimon Rataj:

Podle mě jsou lepší Bootstrap grids, je to tomu dost podobné.

Editováno 29. června 15:17
 
Odpovědět 29. června 15:16
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 16. Zobrazit vše