Při navrhování se začíná nastavením Canvasu.
Obsahové komponenty mají vlastní padding.
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
Při navrhování se začíná nastavením Canvasu.
Obsahové komponenty mají vlastní padding.
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 – Desktop Base
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+).
Pro návrhy postačí dvě velikosti: malá (390px) a velká (1920px). Pokud si to situace vyžaduje, lze navrhovat i pro jiné breakpointy. Bežným příkladem je navrhování pro tabletovou šířku (768px)
Používáme proporcionální systém ukotvený na sudých čísel. Optimální hodnotou jsou násobky 4px. Viz tokeny pro spacing.
