Od verze TEAF 24.01 nasazujeme do MultiWebu nový design systém Spectro. Tuto dokumentaci posléze přesuneme pro jednotlivé verze pod adresy
V případě dotazů neváhejte kontaktovat oddělení UX/UI.
Úvod
MultiWeb Design je vizuální jazyk kloubící principy základů grafického rozhraní a moderní design zaměřený na čisté linie a kvalitní typografii.
Instalace
Potřebné styly vždy najdete v našich NPM balíčcích.
Naše NPM registry obsahují balíček create-multiweb-app, který zajišťuje také stažení stylů.
npx create-multiweb-app
O následnou kompilaci se pak stará balíček multiweb-template-styles s příkazy
npm run build
npm run watch
Struktura projektu
👾/
├── node_modules/
│ └── @tescosw/
│ └── multiweb-styles/ (zdrojové styly)
├── build/
│ ├── css/
│ ├── img/
│ └── fonts/
└── index.less (vlastní styly)
Vlastní styl můžete samozřejmě košatit dle libosti. Určitě je vhodnější rozdělit styly do více souborů a složek dle komponent nebo dle významu. Soubor index.less by měl soužit pouze pro import dílčích souborů.
Co je nového
📐 Třetí šablona pro hlavičku detailu Novinka
📝 Návod pro sjednocení designu našich nových formulářů Novinka
🤗 Příjemnější stylování ikon a jejich velikostí Vylepšení
🖋 Podpora typografie na vybraných komponentách Novinka
🎭 Customizace s přehledem Less proměnných Novinka
😋 Přidání ikon Update
📐 Šablony pro hlavičku detailu Novinka
🔝 Nový rozšířený styl pro sticky hlavičku
🌈 Kompetně nová barevná paleta
💙 Výchozí barevné schéma je čistě modré
Zhuštěné písmo globálně pro popisky
Přechod na CSS Custom Properties v části stylů 👇
Media queries metodou mobile first 👇
Responzivita: Změna proměnných
Předchozí verze
Níže naleznete verze, které se výrazněji odlišují v designu nebo v práci se styly. Pro verzi 21.01 a vyšší je platná současná dokumentace.
Styl
Konzistence, efektivita, aktuálnost. Využijte výchozího vzhledu, aplikujte připravené styly a vyvořete moderně vypadající aplikaci bez námahy.
Vzory
Některé postupy jsou již dlouhodobě ověřeny a staly se z nich best-practices.
Komponenty
Využijte již existující komponenty. V galerii naleznete jejich strukturu a možnosti nastavení.
