Layout

Responzivní grid dynamicky upravuje rozvržení stránky podle velikosti zobrazení. Použití mřížky nám umožňuje zachovat konzistenci napříč našimi produkty a platformami.

Mobilní layout

Canvas

Při navrhování se začíná nastavením Canvasu.

8px margin po stranách
16px margin nahoře a dole
16px vertikální gap – pro oddělení bloků na Canvasu

Container

Obsahové komponenty mají vlastní padding.

12px margin po stranách
16px margin nahoře a dole

Grid

Pro content se používá dynamický flex grid, který se přizpůsobuje aktuálnímu screenu od mobilního po desktop rozlišení. Proto je nestandardně 12 sloupcový, neboť se nepoužívájí media-query. Lze si ho zapnout ve stylu – Mobile Base

Desktop layout

Canvas

Při navrhování se začíná nastavením Canvasu.

24px margin po stranách
32px margin nahoře a dole
32px vertikální gap – pro oddělení bloků na Canvasu

Container

Obsahové komponenty mají vlastní padding.

24px margin po stranách
32px margin nahoře a dole
24px pro horizontální oddělení
32px pro vertikální oddělení

Grid

Breakpointy

Na webu používáme šest breakpointů pro maximální škálovatelnost a kontrolu nad rozvržením a komponentami. Tyto breakpointy jsou xs (0-560px), sm (561-768px), md (769-1024px), lg (1025-1366px), xl (1367-1440px), xxl (1441px+).

Navrhování

Pro návrhy postačí dvě velikosti: malá (390px) a velká (1920px). Pokud si to situace vyžaduje, lze navrhovat i pro jiné breakpointy.

4px baseline

Používáme proporcionální systém ukotvený na sudých čísel. Optimální hodnotou jsou násobky 4px. Viz tokeny pro spacing.