Webové komponenty Rozloženie stránky
Obsah stránky umiestnite do stĺpcového dizajnu (ang. Grid). Návrh začnite vytvárať od najmenších veľkostí obrazovky a až potom ho prispôsobte väčším rozmerom.
Obsah:
Šírka strany
Predvolená maximálna šírka stránky je 1020 px (pixelov). Ak si to obsah nevyhnutne vyžaduje, je prijateľná aj širšia stránka. Myslite však na to, že používatelia s bežnými či menšími obrazovkami budú musieť obsah horizontálne posúvať.
Veľkosť obrazovky
Pri navrhovaní rozloženia obsahu stránky začnite s návrhom pre malé obrazovky (rozmiestnenie obsahu do jedného stĺpca). Následne optimalizujte stránku pre rôzne veľkosti obrazoviek. Obsah stránky umiestnite do predvoleného stĺpcového dizajnu. Aby ste vytvorili vizuálnu hierarchiu obsahu stránky, využite prázdny priestor medzi elementami.
Medzery a vonkajšie okraje
- medzery medzi jednotlivými prvkami sú zvyčajne 5 px, 10 px, 15 px alebo násobky 15 px
- vonkajšie okraje sú 15px pre menšie obrazovky a 30 px pre väčšie obrazovky
Šírka textových blokov
Pri vytváraní stránky pamätajte na to, že dlhé riadky textu znižujú jeho čitateľnosť, čiže všetky riadky s textom by nemali mať viac ako 70 až 80 znakov. Pre zamedzenie dlhých riadkov textu by mal obsah v stĺpci dosahovať maximálne dve tretiny šírky strany
Stĺpcový dizajn
Pre rozloženie obsahu na stránke použite preddefinovaný stĺpcový dizajn (ang. Grid).
Základné pomery stĺpcov sú:
- 1 stĺpec - na celú šírku stránky
- 2 stĺpce - polovice
- 3 stĺpce - tretiny
- 4 stĺpce - štvrtiny
- Na určenie hraničných bodov pre rôzne veľkosti obrazoviek (ang. Breakpoints) používajte media výrazy (ang. Media query) - nájdete ich na JDMES v tomto súbore frontend toolkit
Celá šírka (1 stĺpcový dizajn)
Obsah
<div class="grid-row">
<div class="column-full">
<p>Obsah</p>
</div>
</div>Polovice (2 stĺpcový dizajn)
Obsah
Obsah
<div class="grid-row">
<div class="column-one-half">
<p>Obsah</p>
</div>
<div class="column-one-half">
<p>Obsah</p>
</div>
</div>Tretiny (3 stĺpcový dizajn)
Obsah
Obsah
Obsah
<div class="grid-row">
<div class="column-one-third">
<p>Obsah</p>
</div>
<div class="column-one-third">
<p>Obsah</p>
</div>
<div class="column-one-third">
<p>Obsah</p>
</div>
</div>Dve tretiny / Jedna tretina
Obsah
Obsah
<div class="grid-row">
<div class="column-two-thirds">
<p>Obsah</p>
</div>
<div class="column-one-third">
<p>Obsah</p>
</div>
</div>Jedna tretina / Dve tretiny
Obsah
Obsah
<div class="grid-row">
<div class="column-one-third">
<p>Obsah</p>
</div>
<div class="column-two-thirds">
<p>Obsah</p>
</div>
</div>Štvrtiny (4 stĺpcový dizajn)
Obsah
Obsah
Obsah
Obsah
<div class="grid-row">
<div class="column-one-quarter">
<p>Obsah</p>
</div>
<div class="column-one-quarter">
<p>Obsah</p>
</div>
<div class="column-one-quarter">
<p>Obsah</p>
</div>
<div class="column-one-quarter">
<p>Obsah</p>
</div>
</div>