/foundation-zurb-template

Official ZURB Template for Foundation for Sites.

Primary LanguageCSS

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

Finally, run yarn 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 yarn run 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