How to add foundation with bower?

#1

I want to use foundation in my middleman project, is a brand new project.

On the middleman documentation they say:

Sprockets supports Bower, so you can add your Bower components path directly:

  sprockets.append_path File.join root, 'bower_components'

So i added that code above to my config.rg

Then they say:

To make your bower controlled assets - images, fonts etc. - available within your application, you need to import them using sprockets.import_asset
so i added in my config.rb this:

sprockets.import_asset 'foundation'

Then i try to see if foundation is working, so I added this to my index.html:

<a href="#" class="button">Default Button</a>

I have also required in all.js foundation like this:

//= require foundation.js
//= require_tree .

And on the all.css like this:

@import "foundation";

But i get this error:

 x GET http://localhost:4567/stylesheets/foundation 
all.js:704 Uncaught ReferenceError: jQuery is not defined

My bower_components folder is in the root folder, where the source folder is too.

Any ideas what is wrong ? Thanks

#2

I think you are missing to initiate foundation in your app.js.

$(document).foundation();

Also I recommend you to have a look to this template.
It helped me a lot to change between Foundation and Bootstrap
https://github.com/wearehanno/riggings

Let me know if that helped.