Menu icon Foundation

Designer

My Posts



My Comments

John Rush commented on Joshua Smith's post 7 days

Hi Josuah,
I know it's been a while since you asked but it could help other people so here's my hint:
Try to enable PHP layouts and partials: from your project folder, edit node_modules/panini/lib/ loadLayouts.js and loadPartials.js files.
Also, you must add the .php extension when you add a PHP partial.
Hope it will help

John Rush commented on Nick Jacobs's post about 2 months

@Negativefix your link's actually pointing at this thread.

John Rush commented on Nick Jacobs's post about 2 months

Hi Nick,
I think the app.js import doesn't include the jQuery.headroom.js required for jQuery support.
import Headroom from 'headroom.js'
One solution might be to initialize the JavaScript plugin within the app.js file. Open the app.js file in the assets → js folder. After Foundation is initialized, we’ll initialize the plugin:
$(document).foundation();

$("#header").headroom({/options here/});
 
I use a different method to import external plug-in. I add a new path category into the config.yml file:
entriesvendor:
- "node_modules/headroom.js/dist/headroom.min.js"
Then I add a new function into gulpfile.babel.js file:
function javascript_vendor() {
return gulp.src(PATHS.entriesvendor)
.pipe(named())
.pipe($.sourcemaps.init())
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest(PATHS.dist + '/assets/js/vendor'));
}
Finally I add the new function into the gulp 'build' task:
gulp.task('build',
gulp.series(clean, gulp.parallel(pages, sass, javascript, javascript_vendor, images, copy), styleGuide));
Note: don't forget to import your "vendor" .js files in every page.
Now, I've tried using jQuery for headroom with this method, including headroom.js and jQuery.headroom.js and this actually doesn't work for me. However this is maybe just me. Maybe it will work for you.
 
Sources: https://zurb.com/university/lessons/adding-on-to-a-great-foundation.

John Rush commented on John Rush's post about 1 year

Oh yes ! It works perfectly thank you.
So I just changed the header-sticky data-top-anchor like this:
<div class="header_sticky sticky" data-sticky data-top-anchor="header:bottom" data-margin-top="0">

Posts Followed

  • 2
    Replies
  • PHP Partials?

    By Joshua Smith

    PHPpanini

    I am trying to use a php partial an have Panini flatten it to my regular files, which are php too. Each time Gulp runs I get an error that states that the php partial could not be located. Here is the error: &nbsp; Panini: rendering error ocurred. {... (continued)

    Last Reply by John Rush 7 days ago



Following

    No Content

Followers

My Posts

My Comments

You commented on Joshua Smith's post 7 days

Hi Josuah,
I know it's been a while since you asked but it could help other people so here's my hint:
Try to enable PHP layouts and partials: from your project folder, edit node_modules/panini/lib/ loadLayouts.js and loadPartials.js files.
Also, you must add the .php extension when you add a PHP partial.
Hope it will help

You commented on Nick Jacobs's post about 2 months

@Negativefix your link's actually pointing at this thread.

You commented on Nick Jacobs's post about 2 months

Hi Nick,
I think the app.js import doesn't include the jQuery.headroom.js required for jQuery support.
import Headroom from 'headroom.js'
One solution might be to initialize the JavaScript plugin within the app.js file. Open the app.js file in the assets → js folder. After Foundation is initialized, we’ll initialize the plugin:
$(document).foundation();

$("#header").headroom({/options here/});
 
I use a different method to import external plug-in. I add a new path category into the config.yml file:
entriesvendor:
- "node_modules/headroom.js/dist/headroom.min.js"
Then I add a new function into gulpfile.babel.js file:
function javascript_vendor() {
return gulp.src(PATHS.entriesvendor)
.pipe(named())
.pipe($.sourcemaps.init())
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest(PATHS.dist + '/assets/js/vendor'));
}
Finally I add the new function into the gulp 'build' task:
gulp.task('build',
gulp.series(clean, gulp.parallel(pages, sass, javascript, javascript_vendor, images, copy), styleGuide));
Note: don't forget to import your "vendor" .js files in every page.
Now, I've tried using jQuery for headroom with this method, including headroom.js and jQuery.headroom.js and this actually doesn't work for me. However this is maybe just me. Maybe it will work for you.
 
Sources: https://zurb.com/university/lessons/adding-on-to-a-great-foundation.

You commented on John Rush's post about 1 year

Oh yes ! It works perfectly thank you.
So I just changed the header-sticky data-top-anchor like this:
<div class="header_sticky sticky" data-sticky data-top-anchor="header:bottom" data-margin-top="0">

Posts Followed


Following

  • No Content

Followers