Scouring the Internets for hours on end, I found it incredibly difficult to find a solid example of somebody using ZURB’s fabulous Foundation 5 in a Node.js project. Could it even be done? Do I really have to install ruby? What’s going on? What is Grunt anyway?

Of everything I found that looked semi-helpful, I always hit stumbling blocks because of installation craziness on my Windows machine. Uggggh. What to do?

Luckily, Windows 8.1 comes with Hyper-V, so I set up an Ubuntu VM, and within hours had my very own flashy new development environment, and it made the whole process that much easier. Windows for development? Unless you’re using .NET, I don’t recommend. I went through a bunch of guides and examples to eventually get my Node.js project up and running, Foundation included! Here is my trimmed down versionn of how it’s done:

Install Yeoman

npm install -g yo

Install Express generator

npm install -g express-generator

Create an new express project. I chose these options for this project:

yo express
[?] Select a version to install: Basic
[?] Select a view engine to use: Jade
[?] Select a css preprocessor to use (Sass Requires Ruby): Node-Sass
[?] Select a build tool to use: Grunt

Include ZURB Foundation in the project using bower

bower install --save zurb/bower-foundation

Add the Foundation scss file to the Express grunt task. In Gruntfile.js, add the following foundation.css line into the sass section:

 
    sass: {
      dist: {
        files: {
          'public/css/foundation.css': 'public/components/foundation/scss/style.scss',
          'public/css/style.css': 'public/css/style.scss'
        }
      }
    }

Now running grunt sass will compile the Foundation CSS
Be sure to include the Foundation CSS and JS files in views/layout.jade

doctype html
html(lang='en')
  head
    meta(charset='UTF-8')
    meta(name='viewport', content='width=device-width')
    title= title
    block css
      link(rel='stylesheet', href='/css/foundation.css')
      link(rel='stylesheet', href='/css/style.css')
    block js
      script(src='/components/modernizr/modernizr.js')
      script(src='http://localhost:35729/livereload.js')
  body
    block content
    script(src='/components/jquery/dist/jquery.min.js')
    script(src='/components/foundation/js/foundation.min.js')

Bingo! Now you can start using Foundation classes in your jade template files and have things layed out nice and pretty!

I found that in order to use some Foundation features, such as the ‘offcanvas’ navigation menu, I had to trigger a reflow to make Foundation check the DOM for any elements and re-apply any listeners to them.

$(document).ready(function() {
  $(document).foundation('offcanvas', 'reflow');
});

To deploy locally, simply run grunt, that’s it! For deploying to Heroku, I’ll be documenting that process soon…