Menu icon Foundation
How to use Motion Ui

Hello all,

I have followed the instructions on how to use motion ui with an existing foundation project, but i have had no luck getting it to work the instructions can be found here. http://foundation.zurb.com/sites/docs/motion-ui.html

Using the terminal with cd /myfoundationprojectfolder i ran $ npm install motion-ui --save-dev

which installed the motion-ui folder within the node_modules folder.

then i opened my gulpfile.js and added the snippet to the bottom (see below)

then i added @import 'motion-ui' to my app.scss . and my terminal keeps giving me the error "Error: @import directive requires a url or quoted path
on line 47 of stdin
>> @import motion-ui;
"

and i have had no luck getting it to work. could someone tell me what i am doing wrong?

var gulp = require('gulp');
var $    = require('gulp-load-plugins')();

var sassPaths = [
  'bower_components/foundation-sites/scss',
  'bower_components/motion-ui/src'
];

gulp.task('sass', function() {
  return gulp.src('scss/app.scss')
    .pipe($.sass({
      includePaths: sassPaths
    })
      .on('error', $.sass.logError))
    .pipe($.autoprefixer({
      browsers: ['last 2 versions', 'ie >= 9']
    }))
    .pipe(gulp.dest('css'));
});

gulp.task('default', ['sass'], function() {
  gulp.watch(['scss/**/*.scss'], ['sass']);
});

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

         

Motion UI

Hello all,

I have followed the instructions on how to use motion ui with an existing foundation project, but i have had no luck getting it to work the instructions can be found here. http://foundation.zurb.com/sites/docs/motion-ui.html

Using the terminal with cd /myfoundationprojectfolder i ran $ npm install motion-ui --save-dev

which installed the motion-ui folder within the node_modules folder.

then i opened my gulpfile.js and added the snippet to the bottom (see below)

then i added @import 'motion-ui' to my app.scss . and my terminal keeps giving me the error "Error: @import directive requires a url or quoted path
on line 47 of stdin
>> @import motion-ui;
"

and i have had no luck getting it to work. could someone tell me what i am doing wrong?

var gulp = require('gulp');
var $    = require('gulp-load-plugins')();

var sassPaths = [
  'bower_components/foundation-sites/scss',
  'bower_components/motion-ui/src'
];

gulp.task('sass', function() {
  return gulp.src('scss/app.scss')
    .pipe($.sass({
      includePaths: sassPaths
    })
      .on('error', $.sass.logError))
    .pipe($.autoprefixer({
      browsers: ['last 2 versions', 'ie >= 9']
    }))
    .pipe(gulp.dest('css'));
});

gulp.task('default', ['sass'], function() {
  gulp.watch(['scss/**/*.scss'], ['sass']);
});

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

         
Rafi Benkual over 3 years ago
Harout over 3 years ago

Hello @Rafi Benkual the instructions are asking me to add a snippet into the config.rb, but this file has been removed for foundation 6. i am using the command "foundation watch" to compile scss through the terminal. Shouldn't the snippet be added to the gulpfile.js instead?

Rafi Benkual over 3 years ago

With Gulp you'll just want to make sure the path is set up as a variable like so:

var PATHS = {
  assets: [
    'src/assets/**/*',
    '!src/assets/{!img,js,scss}/**/*'
  ],
  sass: [
    'bower_components/foundation-sites/scss',
    'bower_components/motion-ui/src/'