Using Zurb's Foundation via NPM install

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.

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"

I think you misunderstood something about NodeJS. NodeJS in a website is the backend like PHP, ASP or Ruby.

Foundation Framework is a CSS framework, so it's for the client, the frontend.

To use it in a website running by NodeJS, just put the library that you downloaded in Zurb website in the public directory and use it in your views like this :

<link rel="stylesheet" href="styles/foundation.css">

You may be able to pull in the foundation code. git://github.com/ch1c0t/bower-foundation-css.git OR git://github.com/mmcgahan/sass-foundation.git. Bower is a client side package manager similar to npm, but for the client. http://bower.io/

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.