The right way to integrate Zurb Foundation

Design
1

I can’t figure out the right way to integrate Zurb Fundation 6 framework with Ember JS. Is it possible ? Some Googling gave me ember-cli-foundation add-on but it does not work properly. I can do the same with Bootstrap 3.3.7 without problems. Any ideas or advises ? Thank you.

2

Perhaps try ember-cli-foundation-6-sass - npm

3

Installation failed as follows:

**➜ ** **frontend** ember install ember-cli-foundation-6-sass

Yarn: Installed ember-cli-foundation-6-sass

checker.assertAbove is not a function

TypeError: checker.assertAbove is not a function

    at Class.init (/Users/Serguei/projects/ruby/rails5-ember/frontend/node_modules/ember-cli-foundation-6-sass/node_modules/ember-cli-htmlbars/ember-addon-main.js:13:13)

    at Class.superWrapper [as init] (/Users/Serguei/projects/ruby/rails5-ember/frontend/node_modules/core-object/lib/assign-properties.js:34:20)

    at new CoreObject (/Users/Serguei/projects/ruby/rails5-ember/frontend/node_modules/core-object/core-object.js:9:15)

    at new Class (/Users/Serguei/projects/ruby/rails5-ember/frontend/node_modules/core-object/core-object.js:21:5)

    at new Class (/Users/Serguei/projects/ruby/rails5-ember/frontend/node_modules/core-object/core-object.js:21:5)

    at graph.each (/Users/Serguei/projects/ruby/rails5-ember/frontend/node_modules/ember-cli/lib/models/addons-factory.js:58:19)

    at Vertices.each (/Users/Serguei/projects/ruby/rails5-ember/frontend/node_modules/dag-map/dag-map.umd.js:197:13)

    at Vertices.walk (/Users/Serguei/projects/ruby/rails5-ember/frontend/node_modules/dag-map/dag-map.umd.js:125:14)

    at DAG.each (/Users/Serguei/projects/ruby/rails5-ember/frontend/node_modules/dag-map/dag-map.umd.js:68:24)

    at AddonsFactory.initializeAddons (/Users/Serguei/projects/ruby/rails5-ember/frontend/node_modules/ember-cli/lib/models/addons-factory.js:45:11)

An error occurred in the constructor for ember-cli-htmlbars at /Users/Serguei/projects/ruby/rails5-ember/frontend/node_modules/ember-cli-foundation-6-sass/node_modules/ember-cli-htmlbars

An error occurred in the constructor for ember-cli-foundation-6-sass at /Users/Serguei/projects/ruby/rails5-ember/frontend/node_modules/ember-cli-foundation-6-sass
4

I tried to use it in a Rails API application with Ember JS as front-end. Good news is that I got it installed in a pure Ember (ember-quickstart) project. Bad news is that the top bar is broken

5

Can’t help with this. Just saw somewhere this is the best addon for Zurb Foundation.

6

It seems like there is an issue with dropdown menu, the rest works as needed.

1 Like
7

I figured out what was the problem, - I had to use the add-on tags inside Ember temlpates, like {{#zf-dropdown-menu class=“vertical”}} and it worked. See GitHub - acoustep/ember-cli-foundation-6-sass for more examples of use.