Ú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ů.

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.

Barvy

Barvy

Grid

Grid

Ikony

Ikony

Kontrast

Kontrast

Responzivita

Responzivita

Rozestup

Rozestup

Témata

Témata

Typografie

Typografie

Vyvýšení

Vyvýšení

Vzory

Některé postupy jsou již dlouhodobě ověřeny a staly se z nich best-practices.

Načítání

Načítání

Stav

Stav

Rozšířené styly

Rozšířené styly

Komponenty

Využijte již existující komponenty. V galerii naleznete jejich strukturu a možnosti nastavení.

Button

Button

Card

Card

Checkbox

Checkbox

Dialog

Dialog

Dropdown

Dropdown

Radio Button

Radio Button

Tabs

Tabs