Boxy
Zde jsou návody, jak boxy správně formátovat
https://www.loom.com/share/6294d5102715461ea2a94e8b1302c6ea
https://www.loom.com/share/d2811ce35da047bb83bba3bc27402829
- třída box-height-full vložená do každého boxu zajistí, že boxy v jednom řádku jsou stejně vysoké
- třída box-orange - box bude oranžový s bílým textem (neprojeví se v cms)
- u celého boxu se aktivuje hover pokud má box třídu is-clickable
Barevné čáry v boxech, třídy v nastavení boxu: is-bold is-color-xxxxx
- nephrite = nefritově zelená
- easy = žlutá
- pantheon = fialová
- inuvio = červeno oranžová
- orange
- asol = světle modrá
Responzivita
- Pro dokonalý vzhled na všech rozlišeních můžete stránky po úpravě kontrolovat pomocí inspectu (opt+cmd+i / f12) prověřit na rozlišeních 320px, 361px, 481px, 641px, 861, 993px
- Třída na každém boxu nebo na celé sekci box-height-full natáhne boxy na výšku řádku
- Tablet: třída pro sekci cols-md-2-1 cols-ml-2-1 změní sloupce na 2 + 1 a vycentruje je (sekce) - používá se při 3 sloupcích na desktopu
- ?? Tablet: třídy pro sekci cols-md-2 cols-ml-2 změní grid na 2 sloupce (sekce) - používá se při 4 sloupcích na desktopu
HELIOS Easy
Malá firma
Mějte rozjezd firmy pod kontrolou. Pohlídá za vás lorem ipsum i dolor samet.
HELIOS iNuvio
Střední firma
Mějte pod palcem rostoucí administrativu i potřeby firmy, které teprve přijdou.
HELIOS Nephrite
Velká firma
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis culpa
HELIOS Pantheon
Veřejný sektor
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis culpa
Modulem to nekončí
HELIOS usnadní běh firmy
HELIOS Easy
Rostoucí firma
Mějte rozjezd firmy pod kontrolou. Pohlídá za vás lorem ipsum i dolor samet.
HELIOS iNuvio
Střední firma
Mějte pod palcem rostoucí administrativu i potřeby firmy, které teprve přijdou.
HELIOS Nephrite
Velká firma
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis culpa
Oranžové boxy s ikonou a textem + zůžená sekce
Chips
- třída chips na boxu přidá malé texty v oválném rámečku
- třída .support-chips na boxu zmenší tlačítko, využívá se pro info o odstávce apod na stránce Podpora
Detaily, na kterých záleží.
- Měsíční přehled
- příjmy / výdaje
- Dlužníci
- Náklady
- Splatnost
- Lorem ipsum
- DPH
- Přehledy
- Exporty pro stát
- lorem
- ipsum
- dolor
- sit
- lorem
- ipsum
- dolor
- sit
- lorem
- ipsum
- dolor
- sit
- lorem
- ipsum
- dolor
- sit
- lorem
- ipsum
- dolor
- sit
- lorem
- ipsum
- dolor
- sit
Responzivita - sekce se 3 sloupci a s ikonou ve středu
- Tuto sekci potřebujeme na tabletu přeskládat, aby prostřední sloupec se zobrazil jako první: Pro změnu pořadí 2. sloupce máme třídu na sekci mobile-second-col-first
- Pro zalomení sloupců na md rozlišení máme col-md-1-centered
Jednotlivá oddělení pracují se stejnými informacemi a mohou tak zrychlit řadu ubíjejících procesů. Na klik.
Slider boxů
- box slider - třída na sekci, z boxů v sekci udělá slider
- box slider has-controls - 2 třídy na sekci, zařídí slider se šipkami. Šipky ale nedostaneme na mobil, takže do 641px jsou tečky, nad to šipky po stranách.