Using Zurb's Foundation via NPM install

Question

I'm fairly new to using nodejs and npm, so please excuse any naivety. I want to use Foundation in my latest project and use npm to get it installed. This has worked and my node_modules now contains the foundation dir.

How do I now use Foundation in my markup? I have a /public dir which contains my views, but surely it would be bad practise to point references to the node_modules dir? Do I create a custom route in app.js to files within the foundation dir? I'm not sure what the best practise is?

Help appreciated.

Answer 1

You need register foundation as a stylus plugin. If you are using connect or express try something like this:

var express = require('express'),
    stylus = require('stylus'),
    app = express();

app.use(stylus.middleware({
    compile: function (str, path) {
        return stylus(str)
            .set('filename', path)
            .use(require('foundation')());
    }
}));

Then in your styl file you can

@import "foundation"

Answer 2

Installing Foundation with npm

npm install foundation-sites

Then, copy Foundation's files to your web server and reference it with a <link> tag.

Installing Foundation with Bower

bower install foundation

Then, copy Foundation's files (or the entire bower_components directory) to your web server and reference it with a <link> tag.

---

Foundation's GitHub page and their Getting Started page has more information on the different ways to set up Foundation.