Menu icon Foundation

Developer | Memphis, TN

My Posts






  • 1
    Reply
  • Where Should I be Adding Styles?

    By George S

    custom stylesheets

    Hi, I'm using foundation with libsass and grunt. I make most of my changes in settings.scss but I wondered if there was a recommended way to add custom styles. I usually create a style.scss file and import app.scss in to it; then I link to style.css o... (continued)

    Last Reply by Arturs Z almost 3 years ago


My Comments

George S commented on George S's post 6 months

Here's the commit where that value was changed. I read up on mutationObserver so I get why this was done now but I still can't decide on how to deal with my issue. It would be nice to be able to set that value to false in the context of the one component I'm having trouble with.

George S commented on George S's post over 1 year

Another update:
It seems that this is the proper way to do this however so this is what I'm trying now. I'm still running in to the same problem though. Equalizer works once, then just turns off on resize
var elem = new Foundation.Equalizer($(".news-snippet"), {
equalizeOnStack: false
});

George S commented on George S's post over 1 year

Also, not sure if this is still valid in Foundation 6 but $(document).foundation('equalizer', 'reflow'); just returns the following error:
foundation.min.js:1 Uncaught ReferenceError: We're sorry, 'equalizer' is not an available method for this element

George S commented on George S's post over 1 year

Thanks Brian; that did the trick!

George S commented on George S's post over 1 year

Sure, thanks for getting that codepen started :)

Here's the updated fork with the search form:
http://codepen.io/gpspake/pen/qbPmNp

The search form outside of the menu submits on enter but the one in the menu doesn't.

George S commented on George S's post almost 3 years

So here's how I fixed this. It's still probably not the ideal solution but it's good enough.

I actually used grunt to concatenate my uthscequalizer partial on to the end of the concatenated foundation.js file and place it in my js folder as uthsc.foundation.js

As part of the same task, I minify (uglify) that file in to uthsc.foundation.min.js

So at the end of the day, instead of pointing to the foundation.min.js file, I point to the uthsc.foundation.min.js file generated by grunt.

I separated the foundation tasks from the default tasks so that they don't run as part of the default build and watch tasks.

Here's my Grunt file
```
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),

    sass: {
        options: {
            includePaths: ['bower_components/foundation/scss']
        },
        dist: {
            options: {
                outputStyle: 'compressed'
            },
            files: {
                'css/uthsc.css': 'scss/uthsc.scss'
            }
        }
    },

    concat: {
        options: {
            separator: '\n'
        },

        dist: {
            src: ['js/scripts/*.js'],
            dest: 'js/uthsc.js'
        },

        foundation: {
            src: ['bower_components/foundation/js/foundation.js','js/scripts/uthsc.equalizer.js'],
            dest: 'js/uthsc.foundation.js'
        }
    },

    uglify: {
        options: {
            mangle: {
                except: ['jQuery', 'Backbone']
            }
        },

        dist: {
            files: {
                'js/uthsc.min.js': ['js/uthsc.js']
            }
        },

        foundation: {
            files: {
                'js/uthsc.foundation.min.js': ['js/uthsc.foundation.js']
            }
        }
    },

    watch: {
        grunt: {files: ['Gruntfile.js']},

        sass: {
            files: 'scss/**/*.scss',
            tasks: ['sass']
        },

        uglify: {
            files: 'js/scripts/**/*.js',
            tasks: ['concat','uglify']
        }
    }
});

//load tasks
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');

//foundation
grunt.registerTask('foundationConcatenate', ['concat:foundation']);
grunt.registerTask('foundationMinify', ['uglify:foundation']);
grunt.registerTask('foundation', ['foundationConcatenate','foundationMinify']);

//default
grunt.registerTask('concatenate', ['concat:dist']);
grunt.registerTask('minify', ['uglify:dist']);
grunt.registerTask('build', ['sass', 'concatenate', 'minify']);
grunt.registerTask('default', ['build', 'watch']);

};

George S commented on John Marshall's post almost 3 years

Ok, looks like the solution is here: https://github.com/zurb/foundation/issues/6106

I updated my sass gem but I didn' update package.json

Per gakimball
Go into your package.json and check what version of node-sass and grunt-sass you're using. Ideally it should be:
{
"node-sass" : "~1.2.3",
"grunt-sass": "~0.17.0"
}

Mine was out of date.

George S commented on John Marshall's post almost 3 years

Answer: Found here http://stackoverflow.com/a/25778642/1827642

I'm not sure what this will break but basically removing a couple instances of !global in _functions.scss did the trick.

If this is bad, I'm all for suggestions about other options...

If it helps at all:
Foundation 5.5.0 w sass 3.4.9

George S commented on John Marshall's post almost 3 years

Yep. I'm having the same issue. Exact same error.

Per the advice, I just updated to sass 3.4.9 (Previously 3.2.19) and I'm still getting the same error.

George S commented on Adam Powell's post almost 3 years

Cool!

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on George S's post 6 months

Here's the commit where that value was changed. I read up on mutationObserver so I get why this was done now but I still can't decide on how to deal with my issue. It would be nice to be able to set that value to false in the context of the one component I'm having trouble with.

You commented on George S's post over 1 year

Another update:
It seems that this is the proper way to do this however so this is what I'm trying now. I'm still running in to the same problem though. Equalizer works once, then just turns off on resize
var elem = new Foundation.Equalizer($(".news-snippet"), {
equalizeOnStack: false
});

You commented on George S's post over 1 year

Also, not sure if this is still valid in Foundation 6 but $(document).foundation('equalizer', 'reflow'); just returns the following error:
foundation.min.js:1 Uncaught ReferenceError: We're sorry, 'equalizer' is not an available method for this element

You commented on George S's post over 1 year

Thanks Brian; that did the trick!

You commented on George S's post over 1 year

Sure, thanks for getting that codepen started :)

Here's the updated fork with the search form:
http://codepen.io/gpspake/pen/qbPmNp

The search form outside of the menu submits on enter but the one in the menu doesn't.

You commented on George S's post almost 3 years

So here's how I fixed this. It's still probably not the ideal solution but it's good enough.

I actually used grunt to concatenate my uthscequalizer partial on to the end of the concatenated foundation.js file and place it in my js folder as uthsc.foundation.js

As part of the same task, I minify (uglify) that file in to uthsc.foundation.min.js

So at the end of the day, instead of pointing to the foundation.min.js file, I point to the uthsc.foundation.min.js file generated by grunt.

I separated the foundation tasks from the default tasks so that they don't run as part of the default build and watch tasks.

Here's my Grunt file
```
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),

    sass: {
        options: {
            includePaths: ['bower_components/foundation/scss']
        },
        dist: {
            options: {
                outputStyle: 'compressed'
            },
            files: {
                'css/uthsc.css': 'scss/uthsc.scss'
            }
        }
    },

    concat: {
        options: {
            separator: '\n'
        },

        dist: {
            src: ['js/scripts/*.js'],
            dest: 'js/uthsc.js'
        },

        foundation: {
            src: ['bower_components/foundation/js/foundation.js','js/scripts/uthsc.equalizer.js'],
            dest: 'js/uthsc.foundation.js'
        }
    },

    uglify: {
        options: {
            mangle: {
                except: ['jQuery', 'Backbone']
            }
        },

        dist: {
            files: {
                'js/uthsc.min.js': ['js/uthsc.js']
            }
        },

        foundation: {
            files: {
                'js/uthsc.foundation.min.js': ['js/uthsc.foundation.js']
            }
        }
    },

    watch: {
        grunt: {files: ['Gruntfile.js']},

        sass: {
            files: 'scss/**/*.scss',
            tasks: ['sass']
        },

        uglify: {
            files: 'js/scripts/**/*.js',
            tasks: ['concat','uglify']
        }
    }
});

//load tasks
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');

//foundation
grunt.registerTask('foundationConcatenate', ['concat:foundation']);
grunt.registerTask('foundationMinify', ['uglify:foundation']);
grunt.registerTask('foundation', ['foundationConcatenate','foundationMinify']);

//default
grunt.registerTask('concatenate', ['concat:dist']);
grunt.registerTask('minify', ['uglify:dist']);
grunt.registerTask('build', ['sass', 'concatenate', 'minify']);
grunt.registerTask('default', ['build', 'watch']);

};

You commented on John Marshall's post almost 3 years

Ok, looks like the solution is here: https://github.com/zurb/foundation/issues/6106

I updated my sass gem but I didn' update package.json

Per gakimball
Go into your package.json and check what version of node-sass and grunt-sass you're using. Ideally it should be:
{
"node-sass" : "~1.2.3",
"grunt-sass": "~0.17.0"
}

Mine was out of date.

You commented on John Marshall's post almost 3 years

Answer: Found here http://stackoverflow.com/a/25778642/1827642

I'm not sure what this will break but basically removing a couple instances of !global in _functions.scss did the trick.

If this is bad, I'm all for suggestions about other options...

If it helps at all:
Foundation 5.5.0 w sass 3.4.9

You commented on John Marshall's post almost 3 years

Yep. I'm having the same issue. Exact same error.

Per the advice, I just updated to sass 3.4.9 (Previously 3.2.19) and I'm still getting the same error.

You commented on Adam Powell's post almost 3 years

Cool!

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content