Příklad ke školení CSS v Alza.cz

Autor: Martin Michálek, martin@vzhurudolu.cz

Instalace projektu

Ověřte si, zda v příkazové řádce máte:

Git: git -v
NPM a celý Node.js ekosystém: npm -v

Instalujte konkrétní projekt:

# naklonování projektu
git clone https://github.com/machal/alza-example-1.git

# skok do adresáře
cd alza-example-1

# instalace závislostí
npm install

# spuštění Gruntu - otevře okno prohlížeče s projektem
npx grunt

Závislosti řešíme pomocí NPM

Vývojářské (Grunt a pluginy i uživatelské závislosti (jQuery a jeho pluginy) spravujeme pomocí NPM. Viz konfigurák package.json.

Sestavování pomocí Grunt.js

Důležité úlohy:

grunt - spustí vše a nastartuje vývojový server, otevře prohlížeč s nastartovanou synchronizací a pustí hlídání změn

Konfigurace je v Gruntfile.js.

Struktura stylů

src/less/index.less – index stylů
src/less/core/ – základy pro CSS: pomocné třídy…
src/less/ui/ – komponenty uživatelského rozhraní
src/less/layout/ – rozložení stránky

Kompilujeme pomocí Grunt.js a PostCSS. Výsledkem je soubor css/index.css.

Javascript

js/index.js – zdroj
js/script.min.js – výsledný kompilát

Zdroje fotek

About

Languages

Language:HTML 61.5%Language:CSS 24.8%Language:JavaScript 13.7%