ucla / foundation-zurb-template

Official ZURB Template for Foundation for Sites.

UCLA's ZURB Foundation for Sites Template

This is based off of the official ZURB Template for use with the UCLA fork of Foundation for Sites. 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

Build Tools / Dependencies

To use this template, your computer needs:

• NodeJS (0.12 or greater)
• Git

To set up the template, first download it with Git (replacing projectname with the name of the desired install location to be created, if any):

git clone https://github.com/ucla/foundation-zurb-template projectname

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

cd projectname
npm install
bower install

Finally, run npm start to run Gulp. Your finished site will be created in a folder called dist, viewable at this URL:

http://localhost:8000

Framework

Since we're using a forked version of Zurb Foundation itself we'll just pull it in directly (for now!) as a Git Submodule and stick it in the bower_components directory to keep any pathing issues out of the way (yeah yeah, I kow).

You can Run npm start to run Gulp. Your finished site will be created in a folder called dist, viewable at this URL:

http://localhost:8000

Updating

After making sure you've pulled down the latest version from github, run npm install and bower install

Usage

Finally to run Gulp:

npm start

Your finished site will be created in a folder called dist, viewable at this URL: http://localhost:8000

To create compressed, production-ready assets:

npm run build