readme.md

Foundation's ZURB stack including Twig (Twig.js) template engine and Vue.js progressive JS framework

This is a fork of the official ZURB Template for use with Foundation for Sites. People from ZURB use the intitial template to deliver static code to their clients. This fork has a Gulp-powered build system with these features:

• Defined coding styles using .editorconfig file
• Handlebars HTML templates with Panini replaced with:
  • Twig (Twig.js) template engine
  • Vue.js progressive JS framework
• Sass compilation and prefixing
• JavaScript module bundling with webpack
• Built-in BrowserSync server
• For production builds:
  • CSS compression
  • JavaScript compression
  • Image compression

Installation

To use this template, your computer needs:

• NodeJS (0.12 or greater)
• Git

To manually set up the template, first download it with Git:

git clone https://github.com/franklang/foundation-zurb-template

Then open the folder in your command line, and install the needed dependencies:

cd projectname
npm install

Usage

Finally, run npm start to run Gulp. Your finished site will be created in a folder called dist, viewable at this URL:

http://localhost:8000

To create compressed, production-ready assets, run npm run build.

Further documentation

• Official EditorConfig documentation. EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs.
• Official Foundation 6 for sites documentation and the Starter projects > Zurb template section.
  • In-depth description of the Zurb template: Front-end Development Kickstarter: All about the ZURB Template by Kevin Ball from ZURB.
• Official Twig documentation.
  • JS implementation of the Twig Templating Language on GitHub. See Twig.js implementation details wiki page for a list of supported filters/functions/tags/tests.
  • gulp-twig package on npmjs.com
  • Frontend Templating with Gulp and Twig.js on analyticl.com's blog.
• Official Vue.js documentation.
  • Adding Vue.js to Foundation's ZURB Stack by Kevin Ball.
  • Setting up Vue 2 and Foundation 6 by Tommaso Marcelli.
• Directly injecting data to Vue apps with Symfony/Twig.

TODO's list

• Try Twig namespaced paths functionnality. See here for an example of implementation with Twig.js.
• Add custom data support for Twig.js templates (replacing ZURB starter's initial Panini custom data functionality).
• Add support for SVG icons.