DS-GRUNT

Základní šablona a devstack.

CSS

Kompilaci do CSS řeší Grunt.js, je použit preprocesor SASS, autoprefixování a minifikace.

Základní struktura stylů

• css/styles.scss - základní struktura stylů, propojení na další části
  • css/base - základní vlastnosti a styly, nastavení, typografie
    • base/base - základní definice dokumentu a respo
    • base/fonts - definice a nastavení fontů
    • base/form - základní vzhled formulářových polí
    • base/helpers - pomocné styly
    • base/layout - vstupní layout a jednoduchá mřížka (flexbox)
    • base/print - tiskové styly, přebíjíme deklarace pro standardizaci
    • base/typography - vstupní vzhled nadpisů, odstavců...
    • base/variables - nastavení, barvy, kulaté rohy, breakpointy
  • css/components - jednotlivé komponenty stylů
  • css/libs - externí knihovny a styly

JavaScript

Spojování souborů a minifikaci řeší Grunt.js.

Další použité knihovny

• webfont.js - loader pro Google Fonts, asynchronní odložené načítání - https://github.com/typekit/webfontloader

Grunt

Grunt řeší spojování, generování a minifikaci SASS a JS souborů, optimalizaci obrázků, autoprefixování, atd.

Grunt - instalace

• stáhnout a nainstalovat Node.js - https://nodejs.org/en/ (nutný restart počítače po první instalaci)
• spustit konzoli a najít cestu k projektu (cd + přetáhnout adresář projektu)
• zadat npm install -g grunt-cli
• zadat npm install
• vytvoří se adresář "node_modules" který neverzovat a nezasahovat do něj
• po instalaci stačí zadat grunt který bude hlídat změnu souborů a generovat potřebné

Grunt - použití

• Před použitím je potřeba upravit lokální URL adresu v souboru Grunt.js.
• Základní task grunt provádí sledování změn, spojování CSS a JS souborů...
• Lze využít také tasky grunt makejs (spojí a minifikuje JS), grunt makecss (vygeneruje CSS z SASS souborů, spustí autoprefixer a minifikuje CSS) a grunt images optimalizuje obrázky.