Layout

layout.css řeší výhradně konstrukci stránky – kontejner a sloupcová rozložení. Nepatří sem vzhled konkrétních komponent (o tom je Komponenty) ani navigace (Navigace).

Kontejner

Hlavní obsahový kontejner má na desktopu maximální šířku 1200 px, je vycentrovaný a na menších zařízeních se přizpůsobuje dostupné šířce.

<div class="site-container">
    ...
</div>

.site-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

Povolená rozložení

DIV.cz používá pouze čtyři základní typy rozložení. Nové stránky nevytvářejí vlastní šířky ani sloupce podle konkrétního obsahu.

1. Jeden sloupec

Jednoduchý obsah bez postranního panelu.

2. Dva sloupce

Hlavní obsah a pravý doplňkový panel.

<div class="layout-two-col-main">
    <div>...</div>
    <aside>...</aside>
</div>

3. Levé menu + obsah

Používá dokumentace – viz levé menu v levém sloupci této stránky.

4. Tři části

Levá navigace, hlavní obsah a pravý doplňkový panel. Třetí sloupec vzniká pouze tehdy, pokud přináší skutečný obsahový význam – ne proto, že „by se tam něco hodilo“.

<div class="layout-three-col-main">
    <aside>...</aside>
    <div>...</div>
    <aside>...</aside>
</div>

Na mobilu (≤ 768 px) se všechna vícesloupcová rozložení zalamují do jednoho sloupce ve stejném pořadí, v jakém jsou v HTML – viz Responzivita.

Maximální šířka

Standardní desktopový obsah má šířku 1200 px. Komponenta uvnitř stránky si nikdy svévolně nedefinuje vlastní pevnou šířku jen proto, aby seděla na jedné konkrétní obrazovce.

width: 1173px;
max-width: 1040px;
margin-left: 37px;