Ú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
Nové rozšířené styly 👇
Hlavička DetailFramu Novinka
Container (omezení šířky obsahu a zarovnání na střed) Novinka
Větší velikost fontu Novinka
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
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.