Skip to content
Základní šablona a devstack Grunt.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
img
js
.gitignore
Gruntfile.js
index.html
package.json
readme.md

readme.md

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

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.
You can’t perform that action at this time.