Open menu
Hero 1

Můj frontend devstack

Každý kvalitní frontend by měl při vývoji být založen na kvalitním a vyladěným devstacku.

Co je to vlastně ten frontend devstack?

Frontend devstack je balíček nástrojů, které se používají pro efektivní práci při vývoji. V mém případě obsahuje taky předepsané soubory, které se na každém webu opakují. Jde například o hlavičku stránky, ktemirá je vesměs všude stejná, jen se mění pár hodnot.

Jak vypadá můj devstack?

Můj devstack je postaven na Gulpu. Do Gulpu jsem samozřejmě přihodil některé pluginy, které dělají mou práci efektivnější.

Mé pluginy v Gulpu:

  • gulp-stylus - překládá mi Stylus do normálního CSS.
  • gulp-autoprefixer - automaticky mi do CSS přidává prefixy pro různé prohlížeče. Např. -webkit-
  • gulp-imagemin - plugin pro optimalizaci obrázků
  • browser-sync - aktualizuje stránku po změnách v předem nadefinovaných souborech
  • gulp-php2html - překládá mi php v šablonách, tady lze nahradit klasickým Apache, akorát nebude překládat šablony do souborů *.html
  • gulp-spritesmith - vytváří sprite z obrázků v předem nadefinované složce a následně pro tyto obrázky vytváří třídy v CSS nebo v nějakém preprocesoru (záleží na nastavení šablony pro generování)
  • gulp-iconfont - vytváří z SVG souborů font, je důležité aby měly SVG soubory stejné rozměry, k tomu patří taky plugin gulp-iconfontCSS, který podle šablony vytváří CSS nebo kód preprocessoru (opět záleží na šabloně)

Předepsané soubory v devstacku:

  • part/head.php - hlavička, důležité meta tagy, připojení css apod.
  • part/footer.php - načtení CSS, ukončení tagu body
  • styles/grid.styl - vykradený grid systém z Bootstrapu
  • styles/fast-class.styl - rychlé třídy, např. .r {float: right}
  • styles/util/btn.styl - základní šablona pro button
  • styles/index.styl - proměnné pro základní barvy, .container, body, importování souboru imports.styl
  • styles/imports.styl - importy ze složek
  • box/header.styl - základní šablona pro .box-header

Doufám, že je můj frontend devstack pro vás inspirativní. Pokud si myslíte, že něco dělám špatně nebo byste se chtěli na něco zeptat, neváhejte mě kontaktovat na: david@davidslanina.cz.