Importing Foundation 6 Motion-UI into Sage

I’m new to sage and this method of WordPress development, and am loving it so far.

I’m having a difficult time understanding how to integrate Foundation 6’s ‘Motion UI’ into my sage site so that I can animate (hide/show) my foundation based mobile menu.

Here’s what I’m trying to use: Responsive Navigation | Foundation for Sites 6 Docs

Based on the news in this thread: http://foundation.zurb.com/forum/posts/36247-responsive-toggle-menu-sample-does-not-work
I can’t use the menu-toggle feature unless Motion-UI is imported.

Here’s what I’ve tried:

  • Importing the foundation.responsiveToggle.js file by putting it in the ‘assets/scripts/’ folder > adding the wp_enqueue_script to setup.php, then including the code in manifest.js in the ‘assets’ folder:

“foundation.responsiveToggle.js”: {
“vendor”: [
“scripts/foundation.responsiveToggle.js”
]
},

bower install motion-ui --save-dev

Then the Motion UI Install page says you’re supposed to include the following, somehow:

gulp.src(‘./src/scss/app.scss’)
.pipe(sass({
includePaths: [‘node_modules/motion-ui/src’]
}));

I’m not sure how or where to include that, or where the next line of code should show up:

@import ‘motion-ui’

I appreciate whatever help can be provided. Let me know if I should be importing this using a different method. Again, the whole point is to just get the mobile menu to show/hide the nav content, which it doesn’t do, out of the box, from what I can tell.

It sounds like you should familiarize yourself with the asset-builder/manifest.json to help you out here. I’m not sure exactly how you’re wanting to do this but you’re on the right track.

After running bower install motion-ui --save (not --save-dev) you can see that motion-ui has been added to your bower.json under “dependencies”. Then underneath your dependencies you can override which files you want to actually use, maybe something such as:

bower.json

"dependencies": {
  "foundation-sites": "^6.2.0",
  "motion-ui": "^1.2.2"
},
"overrides": {
  "foundation-sites": {
    "main": [
      "./scss/foundation.scss",
      "./js/foundation.core.js",
      "./js/foundation.util.box.js",
      "./js/foundation.util.keyboard.js",
      "./js/foundation.util.mediaQuery.js",
      "./js/foundation.util.motion.js",
      "./js/foundation.util.nest.js",
      "./js/foundation.util.touch.js",
      "./js/foundation.util.triggers.js",
      "./js/foundation.responsiveMenu.js",
      "./js/foundation.responsiveToggle.js",
      "./js/foundation.reveal.js",
      "./js/foundation.toggler.js"
    ]
  },
  "motion-ui": {
    "main": [
      "./src/motion-ui.scss",
      "./dist/motion-ui.js"
    ]
  }
}

So that prepares the files to be combined/concatenated with gulp. But we can define what files go together in our manifest.json, such as:

manifest.json

"dependencies": {
"main.js": {
  "files": [
    "scripts/main.js"
  ],
  "bower": [
    "foundation-sites",
    "motion-ui"
  ],
  "main": true
},
"main.css": {
  "files": [
    "styles/main.scss"
  ],
  "main": true
},

If you noticed I only defined what to do with the JS files. This is because Sage uses wiredep which will inject any SASS dependencies directly into your main.scss. If you run gulp at this point you should see both Foundation and MotionUI are now included in main.scss.

1 Like