Installing Foundation on a bare Ubuntu 14.04 system

• Broadly based on: foundation.zurb.com/…sass.html

Purpose of tools and their dependencies

• Bower
  • Function: to keep web assets up to date
    • Updates local versions of CSS, JS and HTML (i.e. Foundation) from Git repo
  • Dependencies:
    • installed with npm
    • which depends on node.js
    • requires Git to operate
  • Drupal zurb_foundation usage
    • there are files .bowerrc and bower.json but it is not clear what they are used for.
      (There is a reference to the folder bower_components which is not part of the theme, but is part of a standard Foundation installation.)
  • Update everything by going to the root directory and running:
    bower --allow-root update
• Grunt
  • Function: to run tasks
    • runs libsass. Can also minify JS, CSS and images
  • Dependencies:
    • installed with npm
    • which depends on node.js
    • needs libsass to do it’s main job
  • Drupal zurb_foundation usage
    • There is a Gruntfile.js which appears to compile sass as well as do other things.
• Gulp (alternative to Grunt)
• Foundation (gem)
  • Function: to create foundation instance (project)
    • used once at the beginning
  • Dependencies:
    • installed with gem
    • requires Ruby & Git to operate
  • Drupal zurb_foundation usage
    • not used. Instead do:
      • install module
      • create subtheme
      • use npm to install dependencies (see README.txt)
• www.soholaunch.com/Blog.php?i… —Helpful blog post

Full installation (non Drupal)

apt-get install -y nodejs npm git         # npm is node.js package manager
ln -s /usr/bin/nodejs /usr/bin/node
npm install -g bower grunt-cli
gem install sass
gem install foundation

SITE=/home/zurb
mkdir -p $SITE
chmod 777 $SITE
#exit from superuser

PROJ=zurb_proj   #project name
cd $SITE
foundation new $PROJ --libsass      #will fail if run as root
cd $PROJ
grunt build

Other resources

• Install a different version of node.js www.digitalocean.com/…4-server
• Good walk through installing a gulp-based system: www.revsys.com/…elopment-setup
• Getting started with SASS: foundation.zurb.com/…sass.html
• Switching from Grunt to Gulp

Drupal zurb_foundation theme

• Difference between 4 and 5: www.drupal.org/…omment-9790885