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šnom článku sa dozviete niečo málo o Gridu960. Určite sa každý z vás, kto kódovali stránku podľa nejakej vopred nakreslenej šablóny, stretol s tým, že musel merať šírku daných boxov / elementov na stránke, čo je strašne neefektívne z hľadiska času. Vďaka zrýchlenie a zjednodušenie práce je tu Grid960. Aby som tu nehovoril ako je grid super, tak si už povieme čo to teda je. Jedna sa o css framework k rozvrhnutie layoutu stránky. Jeho filozofia je založená na tzv. Mriežke, aj keď ako mriežka nevyzerá. Z druhej časti názvu môžeme odvodiť číslo 960, ktoré symbolizuje max. Šírku stránky v px. Prečo práve 960px? To preto, že stránky s touto šírkou sa pohodlne zobrazí na všetkých bežne používaných displejoch (podľa štatistiky).

Vo frameworku existujú 3 druhy mriežok, ktoré môžu tvoriť 12, 16 a alebo 24 stĺpcový layout stránok. Toto číslo má ešte jednu výhodu a to veľký počet deliteľov. Je možné stránku rozdeliť na viac rovnako širokých časti. Jednou z ďalších veľkých výhod prečo je grid používaný, je dôvod symetria. Vďaka ktorej ľudské podvedomie rozhoduje, či je jeden z dizajnu lepší ako druhý (štúdia vedcov). Uvedieme si príklad symetria a gridu960: ,, Máte za úlohu nakresliť na papier kocku s hranou 5 cm, v 3D zobrazenie, s neviditeľnými hranami, ceruzkou, pomocou akéhokoľvek spôsobu ". V našom príklade je grid960 tzv. Pomyslenie pravítko a uhlomer. Myslím si, že nie je potrebné povedať, že pri použití pravítka a uhlomeru nakreslíte presnejšie kocku ako od ruky. Tým nechcem podceňovať grafiky, ktorí vám nakreslí presnú kocku vďaka svojmu nadaniu. Ale je to ten rovnaký rozdiel keď potom porovnávate dva designy z čoho jeden je symetrický a druhý nie je. Kocka nakreslená pomocou pravítka a uhlomera vyzerá predsa lepšie ako od ruky. Koniec psychológie a ideme sa pozrieť na to, ako ten grid vyzerá.

grid12 - Profesionálny webdesign v CSS 3
Z obrázku možno ľahko odvodiť logiku frameworku ktorá je postavená na, v našom prípade, ružových stĺpcoch. Tie sú symetrické a majú medzi sebou rovnaké odsadenie. Ak je dizajn od web-dizajnéra nakreslený s využitím gridu960, potom nemusíme poznať šírku daného boxu / elementu v px, ale postačí nám vedieť cez koľko stĺpcov zasahuje. Aké jednoduché, že. Pri kódovaní sa môžu vyskytnú veci, pri ktorých nie je možné použiť grid960, ale z väčšej časti je to verný pomocník.

Motivácia

Je čas na motivačný ukážku:

ukazka - Profesionálny webdesign v CSS 3
Z obrázku môžeme vidieť, kde všade je grid použitý. Či už je to logo produktu, ktoré zaberá 2 stĺpce alebo následná fotka produktu, zaberajúci 4 stĺpce a alebo menu, ktoré zaberá 8 stĺpcov atď.

Aplikácie

Ak sa rozhodnete grid používať, tak navštívte stránku Oficiálne stránky gridu a stiahnite si baličiek v .rar formáte. Pri extrakcii v ňom nájdete zložky: code-> css a v nej potrebnej .css súbory. Zvyšné súbory slúži pre web-designerov. Súbory k frameworku začínajúcich 960_ počet-stĺpcov _col.css zvyšné súbory reset.css a text.css sú dodatkové súbory k frameworku, využitie alebo nie je na vás. Hlavne nás budú zaujímať súbory 960_ počet-stĺpcov _col.css, poprípade minifikované verzie ktoré nájdete v priečinku min. Pri vytváraní nového projektu vytvoríme priečinok s názvom projektu (bez diakritiky). Do nej vytvoríme zložku css, ktorá bude obsahovať príslušný 960_ počet-stĺpcov _col.css. Ten nám bude slúžiť na rozloženie stránky a súbor style.css do ktorého budeme zapisovať zvyšné css stránok. Nasleduje vytvorenie súboru index.html do ktorého hlavičky nalinkuje css štýly.

<link rel="stylesheet" href="css/960_počet-sloupců_col.css" />
<link rel="stylesheet" href="css/style.css" />

V tejto fáze už môžeme tvoriť rozloženie stránky. Každý obalový prvok (väčšinou div) s využitím gridu960 začína triedou vo formáte container_ počet-slopců pr:

<div class=“container_12“>

</div>

Do vnútra tohto divu sa píšu ďalšie prvky s danými triedami ktorými sú:

  • grid_číslo - Určuje šírku boxu / elementu kde číslo je šírka v stĺpcoch gridu.
  • suffix_číslo - Určuje odsadenie doprava ďalšieho boxu / elementov, číslo určuje šírku stĺpcov odsadenie.
  • prefix_číslo - Určuje odsadenie zľava tohto boxu / elementov, číslo určuje šírku stĺpcov odsadenie.
  • clear - Zruší grid system. Je to ako pri floatování. Keď potrebujete zrušiť float, tak vložíte prvok s hodnotou clear: both; a začínate zľava s tzv. čistou plochou.

Čas na malé ukážky:

<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ýsledok:

Profesionálny webdesign v CSS 3

Pri používaní gridu nesmie súčet číslic v .containeru_ číslo prekročiť toto číslo. Táto ukážka používa 12 stĺpcový layout. 12> = 4 + 4 +4 táto podmienka musí platiť! Inak nedosiahnete vytúž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ýsledok:

Profesionálny webdesign v CSS 3
Díky třídě suffix_3 nám vznikla 3 sloupcová mezera.

To by do ľahkého úvode o gridu960 stačilo. Nabudúce si povieme niečo o ďalších triedach a nástrojoch, ktoré sú späté s gridem960.


 

Všetky články v sekcii
Profesionálny webdesign v CSS 3
Článok pre vás napísal Neaktivní Účet
Avatar
Užívateľské hodnotenie:
Ešte nikto nehodnotil, buď prvý!
Aktivity