Design bloků

Obsah stránky je canvas – plocha, na kterou skládáte bloky a symboly. Každý prvek na canvasu můžete nastylovat: označíte ho a vpravo se otevře panel Design (vedle záložky Properties, kde jsou nastavení konkrétního bloku).

Co panel Design nabízí

Positioning – umístění prvku (Position) a margin i padding (vnější a vnitřní odsazení).
Layout – jak se prvky uvnitř bloku poskládají (podrobně níže).
Typography – písmo, velikost, řez a styl, řádkování, zarovnání a transformace textu.
Appearance – průhlednost (Opacity) a přetečení obsahu (Overflow).
Border – rámeček: tloušťka, barva a zaoblení.
Background – pozadí: barva nebo obrázek.

Rozvržení: kdy použít co

Nejdůležitější volba je, jak se prvky uvnitř bloku poskládají. Nemusíte znát HTML – stačí vědět, čeho chcete dosáhnout:

Block (pod sebou) – prvky jdou jeden pod druhým, každý přes celou šířku. Hodí se na běžný obsah: nadpis, odstavec a obrázek pod sebou. Výchozí volba.
Flex (v řadě) – prvky se seřadí vedle sebe do řádku (nebo do sloupce) a pružně se přizpůsobí. Hodí se, když chcete pár prvků vedle sebe: logo + menu, řádek tlačítek, ikona + text.
Inline (v textovém toku) – prvky tečou za sebou jako slova ve větě. Hodí se na drobné prvky uvnitř textu, třeba štítek vedle nadpisu.
Grid (mřížka) – prvky se rozloží do pravidelné mřížky se sloupci a řádky. Hodí se na výpisy: karty, galerie nebo produkty – typicky „3 karty vedle sebe“.

Možnosti u gridu (a flexu)

Sloupce (Columns) – kolik sloupců má mřížka mít (např. 3 karty vedle sebe = 3 sloupce). U flexu místo toho určujete směr (řádek, nebo sloupec).
Řádky (Rows) – kolik řádků; často se dopočítají samy podle počtu prvků.
Mezery (Gap) – odstup mezi prvky, zvlášť vodorovně a svisle (na panelu např. 16). Drží prvky pěkně od sebe.
Zarovnání – jak prvky zarovnat v rámci řádku nebo buňky (nahoru / na střed / dolů a vlevo / na střed / vpravo).

Složité komponenty a výjimky

Kombinací těchto voleb poskládáte přímo na stránce i složitější komponenty a layouty.

Výchozí vzhled (typografie, barvy) se přebírá ze styleguide. Přes panel Design ale můžete styl u konkrétního prvku přetížit (override) a udělat výjimku. Používejte to uvážlivě – kde to jde, držte se tokenů ze styleguide, ať web zůstává jednotný.