Začněte ikonami

Jako minimum vždy dodržujte počet 3 a maximální počet 5 ikon. Vždy si připravte jak stroke tak filled sadu ikon. Fill verze většinou využijete jako aktivní state.

Upravte velikosti

Ikony vždy připravte ve velikosti 24 px a ve formátu svg kvůli škálovatelnosti. A zároveň ikony vždy musí být uvnitř kontejneru, aby se dodržela velikost a nerozbíjelo se to tím, že jedna ikona je na výšku a jiná na šířku.

Labely

Popisky ikon volte ve velikosti fontu 10 - 12 px. Odsazení ikon od labelu +/- 2 px.

Vytvoříme hlavní kontejner navbaru

Výška bude 48 px, 56 px, 64 px. Šířka bude dle zvoleného rozlišení displaye.

Kontejner rozdělíme na části

Kontejner rozdělíme dle počtu icon. V našem případě to bude maximální počet ikon, což je 5. Tedy šířka (x) bude na pět částí (x/5).

Vložení ikon a labelů

Do každé části vložíme ikony s popiskem a vycentrujeme jak vertikálně tak horizontálně.

Vytvoříme všechny states

Každé ikoně vytvoříme aktivní hover.

A to je vše :) Držme se těchto pravidel :) Tak zase příště :)