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 Paninireplaced 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
To use this template, your computer needs:
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
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
.
- 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.
- 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.