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:
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
.
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:
The following dependencies are at your disposal:
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">