machal / space-example

Výchozí stav příkladu pro školení „Responzivní design“.

Příklad ke školení responzivního designu

Instalace projektu

Nejprve si musíte nainstalovat NPM a celý Node.js ekosystém.

Pak tento konkrétní projekt:

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

# přechod do adresáře
cd space-example

# instalace závislosti
npm install

# spuštění webu v prohlížeči hlavní Grunt úlohou
grunt

Struktura stylů

• src/less/index.less – hlavní LESS soubor
• src/less/base/ – komponenty pro textový, vertikální design
• src/less/components/ – pokročilejší komponenty uživatelského rozhraní
• src/less/core/ – pomocné funkce, mixiny…
• src/less/layout/ – layout stránky
• src/less/lib/ – knihovny

Gruntem kompilujeme do dist/css/style.css. Více o organizaci CSS.

Javascript

• src/js/index.js – hlavní JS soubor

Závislosti řešíme pomocí Browserify.

Závislosti

Vývojářské i uživatelské závislosti – NPM

Vývojářské závislosti (Grunt a pluginy, které potřebuje vývojář) ale i uživatelské závislosti (jQuery a pluginy, které potřebuje uživatel webu) spravujeme spravujeme pomocí Node Packages Managera. Viz konfigurák package.json.

Sestavování pomocí Grunt.js

Důležité tásky:

• grunt - spustí vše a nastartuje vývojový server, otevře prohlížeč s nastartovanou synchronizací a pustí hlídání změn
• Pro jednotlivé typy assetů se může hodit grunt img, grunt css, grunt js.

Viz Gruntfile.js.

---

Autor: Martin Michálek, [e-mail]

Určeno pro školení responzivního designu.