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

readme.md

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

Installation

To use this template, your computer needs:

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

Setup

To set up the template, first download it.

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

cd projectName
yarn

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:

http://localhost:8000

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.

SEE EXAMPLE


Mixins

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

Avatar

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)

Tablesaw