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ý.