Official ZURB Template for Foundation for Sites.
Clone or download
Latest commit 4e9bef8 Oct 16, 2018

ZURB WebApp Template

devDependency Status

Please open all issues with this template on the main Foundation for Sites repo.

This is the official ZURB Template for use with Foundation for Sites. We use this template at ZURB to deliver static code to our clients. It has a Gulp-powered build system with these features:

  • Handlebars HTML templates with Panini
  • 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:

  • NodeJS (Version 6 only, Tested with 6.11.4)
  • Git


To set up the template, first download it.

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

cd projectName

Now cd to your project name and run npm start or foundation watch to run Gulp. Your finished site will be created in a folder called dist, viewable at this URL:


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

Panini Helpers

We've added a Panini helpers for per-page or per-layout styles.



We've added a few handy mixins for maintainable repeated code and faster development:


Container Border

Flex Mixins

Additional Project Dependencies

The following dependencies are at your disposal:

SVG Injector

Inject an SVG by using an img tag with the .inject-me class like so:

<img src="{{root}}assets/img/think.svg" class="inject-me" alt="think icon">

Slick Carousel

AOS (Animate on Scroll)