0

I can't get Zurb Foundation to work correctly in Padrino. The stylesheets are compiled and loaded, but the Foundation modules don't work.

http://intense-falls-2845.herokuapp.com/

is a haml version of

http://foundation.zurb.com/templates/marketing.html

, but neither the dropdown menu nor the orbit slider are working. the project was generated using:

$ padrino g project PadrinoFoundation -e haml -c compass -s jquery -b

$ padrino g plugin camorra

$ bundle install

with some editing to app/app.rb (create a route), app/stylesheets/application.scss (remove compass references to blueprint) and app/views/application.haml (layout, read below).

these can be viewed below:

(route) https://github.com/bcsantos/PadrinoZurbFoundation/blob/master/app/app.rb

(stylesheet) https://github.com/bcsantos/PadrinoZurbFoundation/blob/master/app/stylesheets/application.scss

(layout) https://github.com/bcsantos/PadrinoZurbFoundation/blob/master/app/views/application.haml

(whole repository) https://github.com/bcsantos/PadrinoZurbFoundation

concerning the layout, i used https://github.com/CIRCUITLLC/foundation_templates_haml/blob/master/haml/marketing.html.haml but being new to haml i may have made mistakes. hopefully if someone points me in the right direction i can figure things out.

any ideas about what's wrong?

thanks for reading.

bcsantos
  • 2,635
  • 5
  • 21
  • 22

1 Answers1

0

Several things I noticed while inspecting your page:

  • A 404 error when loading Modernizr: Your page is trying to load Modernizr from /javascripts/modernizr.js but the file is actually in /javascripts/vendor/modernizr.js (in the vendor folder).

  • Missing Foundation JavaScript plugins: Your page is loading /javascripts/foundation/foundation.js but it only contains the Foundation core and none of the plugins (the top bar dropdown menus and Orbit slider are implemented as plugins). The file you want to load appears to be /javascripts/foundation.js (one level up).

  • Missing data- attributes to trigger plugins: The top bar and Orbit slider plugins are activated by data- attributes in the HTML (you can find these attributes in the source for http://foundation.zurb.com/templates/marketing.html). You'll need to add these attributes to your view.

I'm not sure if these changes are sufficient to get your page working, but they appear to be necessary for any further debugging.

Update: Now there is a ReferenceError: jQuery is not defined JavaScript error, triggered from the Foundation library. According to Foundation's JavaScript setup instructions, jQuery and FastClick need to be loaded before the Foundation script(s). (I'd also follow that documentation and load jQuery first, followed by FastClick, then Foundation.)

As an aside, all the major browsers now have developer tools built-in. I suggest exploring the developer tools for your browser of choice; they will save you a lot of time and effort :-)

Jeffery To
  • 11,836
  • 1
  • 27
  • 42
  • @AudioVisualCode do these fixes address your problem? – Jeffery To Mar 03 '14 at 07:52
  • sorry, i've been very busy during the last few days. i'll get back to you asap. thanks for your reply. – bcsantos Mar 03 '14 at 12:42
  • hello again, i updated https://github.com/bcsantos/PadrinoZurbFoundation/blob/master/app/views/application.haml to include data attributes, and fixed the broken javascript links. still no menu or slider interaction. http://intense-falls-2845.herokuapp.com/ edit: could this have to something to do with useragent data attributes, which are present in http://foundation.zurb.com/templates/marketing.html ? – bcsantos Mar 03 '14 at 13:07
  • working! thanks. i'll document this when i have the time. cheers. – bcsantos Mar 03 '14 at 14:54
  • If this solved your problem, it would be great if you accepted this answer (click on the checkmark next to the answer) as well - thanks! – Jeffery To Mar 03 '14 at 15:53