covertg / foundation-template

Boilerplate for Sass-based projects using Zurb Foundation with Bourbon y más

Foundation Sass template

This is a template to start your own Foundation project that uses:

• Autoprefixer for automatic vendor prefixes
• Bourbon for convenient mixins
• BrowserSync for livereload and synchronized testing
• CSSO and UglifyJS2 for minification
• Gulp to do all the things
• InstantClick to instantly load pages
• JSHint for JS linting

Requirements

You'll need to have the following items installed before continuing.

• Node.js: Use the installer provided on the NodeJS website.
• Bower: Run [sudo] npm install -g bower
• Gulp CLI: Run [sudo] npm install -g gulp
• Ruby 1.9+: Follow the directions on the community website.

Quickstart

git clone https://github.com/covertg/foundation-template.git
cd foundation-template
npm install && bower install

While you're working on your project, run:

gulp

And you're set! Gulp will build, watch for changes, and serve your files on localhost. Check the console output for more info.

Directory Structure

• src/: All your sources go here
• build/: All built files go here
• bower_components/foundation/scss/foundation/_settings.scss: Foundation-specific settings go here
• Gulpfile.js: Read through this for a sense of what's going on

Other Notes

• To build once for production, run: gulp build --type dist and gulp will build and optimize/minify your files.
• Replace the ">=" operators with "^" in package.json in the case of API updates or other package breakages.
• Currently, we are using a PR repo for autoprefixer because it's more up-to-date.
• NPM may seem to hang when installing ws (dependency of BrowserSync). Just give it some time.