Menu icon Foundation

Developer | Minneapolis, MN

My Posts


  • NEW
  • Link to open tab from within tab

    By Sensaetions

    tabscodepen

    Hello @Zurb and community, I want to be able to link to a tab from within a tab. How can I set that up so that when I click on a link within one tab and have it display its targeted tab? In my experience, even when I am able to get them to work in Chrom... (continued)



  • 1
    Reply
  • How to unstick sticky component

    By Sensaetions

    stickysiteszurb

    Hello, I am using Foundation 6.4 and love the sticky component. However, I have been unable to find a way to make my element sticky for small screens, and NOT sticky for large screens. I know there is an option to make an element become sticky starting a... (continued)

    Last Reply by cs joshi 9 months ago



  • 14
    Replies
  • SVG sprites

    By Sensaetions

    svgsvg spritefoundation sites

    I've looked and didn't find a way to use the Foundation for Sites stack to minimize and generate SVG sprites from individual svg files. Is this something that's already built into Foundation? Or do I need to create my own gulp task to minimize and genera... (continued)

    Last Reply by gossip lanka 5 months ago


  • NEW
  • Generating SVG sprites

    By Sensaetions

    svgfoundation-sitessvg sprites

    Hello, I love Foundation 6, especially with the addition of the XY grid! I've looked and didn't find a way to use the Foundation for Sites stack to minimize and generate SVG sprites from individual svg files. Is this something that's already built ... (continued)


My Comments

Sensaetions commented on Sensaetions's post about 1 year

@Michael, thank you very much for your attempt to find a solution to my question about creating SVG sprites within Foundation 6.4. For some reason, I can't get your solution to work for me.
I'm curious if you're able to find a solution to use gulp-svgstore instead of gulp-svg-sprite? The reason being so is that I need to implement the svg sprite with the <svg><use> method. It seems that gulp-svg-sprite doesn't support this option?
Also, which Foundation version are you using? I noticed that you've defined variables for svg-sprite and plumber. I understand Foundation 6.4 uses load-plugins and defines all plugins variables into a $ dollar sign.
In other words, wouldn't function would be adapted as (notice the $ dollar sign in front of plumber and svgSprite)?
function sprite() {
return gulp.src(svgGlob, {cwd: baseDir})
.pipe($.plumber())
.pipe($.svgSprite(config)).on('error', function(error){ console.log(error); })
.pipe(gulp.dest(outDir));
}

Sensaetions commented on Martin's post about 1 year

What I've noticed is that this undefined variable error only appears to be affecting plugins that are written using self-invoking scripts. Does anyone have a reason why that would be the case? How can this be resolved?
Also, it appears that this happens to plugins that doesn't have an ES6 export option. What is Zurb the recommendation on using plugins that doesn't have ES6 support? How can we still include non-ES6 plugins in our projects?

Sensaetions commented on Sensaetions's post about 1 year

Thanks Rafi for the reply. I would like to keep the data variables in a single file (especially since the data content are of the same type). I have used the #ifpage helper and see that it's written like so on this page: https://github.com/zurb/panini/blob/master/helpers/ifPage.js
I know that there's #ifequal helper as well, but that doesn't seem to work to look for css classes. I'm curious if this example can be written into a custom handelbars helper to look for <section> tags or use css classes? Can you provide an example of how this could work or be written?
 

Sensaetions commented on Martin's post about 1 year

Does anyone have a progress update on this issue? I've ran into the same issue as Jonathan Davis. I'm able to import the Owl Carousel 2 plugin into my app.js file. However, there is an error Cannot read property 'fn' of undefined because Owl Carousel uses $.fn.owlCarousel = function (option) when adding next/prev elements, so this error causes all of Foundation scripts to stop functioning. How does this get resolved?
app.js:23544 Uncaught TypeError: Cannot read property 'fn' of undefined
at app.js:23544
at Object.typeof (app.js:23578)
at __webpack_require
_ (app.js:20)
at Object.<anonymous> (app.js:25520)
at webpack_require (app.js:20)
at Object.defineProperty.value (app.js:14482)
at webpack_require (app.js:20)
at Object.<anonymous> (app.js:25614)
at webpack_require (app.js:20)
at _typeof (app.js:66)

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on Sensaetions's post about 1 year

@Michael, thank you very much for your attempt to find a solution to my question about creating SVG sprites within Foundation 6.4. For some reason, I can't get your solution to work for me.
I'm curious if you're able to find a solution to use gulp-svgstore instead of gulp-svg-sprite? The reason being so is that I need to implement the svg sprite with the <svg><use> method. It seems that gulp-svg-sprite doesn't support this option?
Also, which Foundation version are you using? I noticed that you've defined variables for svg-sprite and plumber. I understand Foundation 6.4 uses load-plugins and defines all plugins variables into a $ dollar sign.
In other words, wouldn't function would be adapted as (notice the $ dollar sign in front of plumber and svgSprite)?
function sprite() {
return gulp.src(svgGlob, {cwd: baseDir})
.pipe($.plumber())
.pipe($.svgSprite(config)).on('error', function(error){ console.log(error); })
.pipe(gulp.dest(outDir));
}

You commented on Martin's post about 1 year

What I've noticed is that this undefined variable error only appears to be affecting plugins that are written using self-invoking scripts. Does anyone have a reason why that would be the case? How can this be resolved?
Also, it appears that this happens to plugins that doesn't have an ES6 export option. What is Zurb the recommendation on using plugins that doesn't have ES6 support? How can we still include non-ES6 plugins in our projects?

You commented on Sensaetions's post about 1 year

Thanks Rafi for the reply. I would like to keep the data variables in a single file (especially since the data content are of the same type). I have used the #ifpage helper and see that it's written like so on this page: https://github.com/zurb/panini/blob/master/helpers/ifPage.js
I know that there's #ifequal helper as well, but that doesn't seem to work to look for css classes. I'm curious if this example can be written into a custom handelbars helper to look for <section> tags or use css classes? Can you provide an example of how this could work or be written?
 

You commented on Martin's post about 1 year

Does anyone have a progress update on this issue? I've ran into the same issue as Jonathan Davis. I'm able to import the Owl Carousel 2 plugin into my app.js file. However, there is an error Cannot read property 'fn' of undefined because Owl Carousel uses $.fn.owlCarousel = function (option) when adding next/prev elements, so this error causes all of Foundation scripts to stop functioning. How does this get resolved?
app.js:23544 Uncaught TypeError: Cannot read property 'fn' of undefined
at app.js:23544
at Object.typeof (app.js:23578)
at __webpack_require
_ (app.js:20)
at Object.<anonymous> (app.js:25520)
at webpack_require (app.js:20)
at Object.defineProperty.value (app.js:14482)
at webpack_require (app.js:20)
at Object.<anonymous> (app.js:25614)
at webpack_require (app.js:20)
at _typeof (app.js:66)

Posts Followed

Following

  • No Content

Followers