Menu icon Foundation

Developer

Engineering Lead at ZURB

My Posts


My Comments

Kevin Ball commented on Martin McGlade's post 6 days

Hey Martin - This is confusing a lot of folks, so I recorded a quick walkthrough video - let me know if this helps: https://www.youtube.com/watch?v=cc3eJ4_fUmw

Kevin Ball commented on Martin McGlade's post 12 days

Hi Martin,
Can you post a little more detail around how you're adding mixitup to your app.js? If you're using Foundation 6.4 and using the webpack enabled build, you'll want to make sure you're importing mixitup directly into the file. Looking at their docs, it looks like you should be able to just do this:
 
import mixitup from 'mixitup';
 
For more context around how the JavaScript works in newer versions of Foundation, check out the JavaScript portion of this comprehensive walkthrough of the ZURB template.

Kevin Ball commented on Rahul Sharma's post 12 days

Hi Rahul - if you're using foundation CLI, I'm guessing that you're installing the ZURB stack. If so, you'll want to put your file into the javascript folder, and then 'require' it into your app.js file, e.g.
import $ from 'jquery';

require('what-input');
window.$ = $;

// YOUR PLUGIN
require('./my-jquery-plugin');
For more detail, check out the javascript section of this comprehensive walkthrough of the ZURB stack.

Kevin Ball commented on Frank Wronson's post 15 days

It looks like the problem is you're trying to reinitialize, but the original item isn't there anymore, it has been replaced!  You can initialize foundation on any new content by grabbing it with jQuery and running the $.fn.foundation helper method on it... so if you're replacing the entire page, you'll probably want to do something like this:
Barba.Dispatcher.on('newPageReady', function() {

$(document).foundation();

});
 
 

Kevin Ball commented on Ralph Bolliger's post 15 days

You'll get one output per entry - that's the point of the entry! It's conceptually similar to how your app.scss file would work; a central clearing point that imports the code you need and then runs it. However, all of the files that are imported by that entry will be output into a single file.
If this is still confusing check out the JavaScript section of this walkthrough of the ZURB stack: https://zendev.com/2017/09/05/front-end-development-kickstarter-zurb-template.html#javascript

Kevin Ball commented on Matthew Andrianakos's post 18 days

In case it helps, I just published a thorough walkthrough of the ZURB stack - check out the JavaScript portion and see if it makes it clearer: Front-end Development Kickstarter: All about the ZURB Template
 

Kevin Ball commented on Pedro Polonia's post 4 months

Hi Pedro,
Sorry you're running into trouble... Can you confirm if you installed the 'ZURB template' or the 'basic template'? Currently the CLI looks for the ZURB template only...
The basic template doesn't come with any sort of mechanism for partials, so not sure it makes sense to do an automatic inclusion there.
If you're in the ZURB template, we need to dig a little more to see what's going on... the CLI is looking for the following directories to confirm if it is in the ZURB template:
['src/assets/scss/components', 'src/partials', 'src/assets/js']
Can you check if any or all of those are missing?
Regards,
Kevin

Kevin Ball commented on Daniel Codella's post 6 months

Could not be more excited about this. CSS Grid is AMAZING, and Foundation is going to make it so easy and accessible. This is going to take things to the next level!

Kevin Ball commented on Brett HOlcomb's post 9 months

Brett,
Thank you for the thorough writeup, it is definitely helpful. We're working on a refresh of the docs (and in particular getting started and installation will be a big part of that) right now, can we reach out to you to review and give feedback on them when we have a rough version in place?
Regards,
Kevin

Kevin Ball commented on Brett HOlcomb's post 9 months

Looking back through this question, it seems like at least a large part of the question is
"How do I get SCSS to work in my environment?" (Where the environments in question here are Netbeans and possibly PHPStorm).
And that question is being asked in the context of "How do I use the Foundation SCSS files in my environment".
Is that a correct interpretation Brett?
 
 
This is definitely not well answered in the current Foundation docs. Foundation as it stands does a reasonable job of answering the question "How do I use Foundation SCSS in a ruby environment", and a pretty good job of "How do I use Foundation SCSS in a node environment", and essentially nothing whatsoever for any other environment.
We should very definitely fix this. Unfortunately, I'm not super familiar with how to do this for either of the two environments mentioned in this thread... Brett would you be interested in taking a stab at it once you're pretty well set up? And/or did you find any particular resources that were especially helpful that we could reference or include?
 
-Kevin

Posts Followed

  • 3
    Replies
  • Foundation 6.4 + MixItUp

    By Martin McGlade

    npmwebpack

    Hi All,  Im trying to include mixitup 3 into foundation. - https://github.com/patrickkunka/mixitup/ Im having some issues instantiation the var in my app.js.       var containerEl = document.querySelector('.container'); &nbsp... (continued)

    Last Reply by Kevin Ball 6 days ago











Following

  • Brandon Arnold has no published posts

Followers

My Posts

My Comments

You commented on Martin McGlade's post 6 days

Hey Martin - This is confusing a lot of folks, so I recorded a quick walkthrough video - let me know if this helps: https://www.youtube.com/watch?v=cc3eJ4_fUmw

You commented on Martin McGlade's post 12 days

Hi Martin,
Can you post a little more detail around how you're adding mixitup to your app.js? If you're using Foundation 6.4 and using the webpack enabled build, you'll want to make sure you're importing mixitup directly into the file. Looking at their docs, it looks like you should be able to just do this:
 
import mixitup from 'mixitup';
 
For more context around how the JavaScript works in newer versions of Foundation, check out the JavaScript portion of this comprehensive walkthrough of the ZURB template.

You commented on Rahul Sharma's post 12 days

Hi Rahul - if you're using foundation CLI, I'm guessing that you're installing the ZURB stack. If so, you'll want to put your file into the javascript folder, and then 'require' it into your app.js file, e.g.
import $ from 'jquery';

require('what-input');
window.$ = $;

// YOUR PLUGIN
require('./my-jquery-plugin');
For more detail, check out the javascript section of this comprehensive walkthrough of the ZURB stack.

You commented on Frank Wronson's post 15 days

It looks like the problem is you're trying to reinitialize, but the original item isn't there anymore, it has been replaced!  You can initialize foundation on any new content by grabbing it with jQuery and running the $.fn.foundation helper method on it... so if you're replacing the entire page, you'll probably want to do something like this:
Barba.Dispatcher.on('newPageReady', function() {

$(document).foundation();

});
 
 

You commented on Ralph Bolliger's post 15 days

You'll get one output per entry - that's the point of the entry! It's conceptually similar to how your app.scss file would work; a central clearing point that imports the code you need and then runs it. However, all of the files that are imported by that entry will be output into a single file.
If this is still confusing check out the JavaScript section of this walkthrough of the ZURB stack: https://zendev.com/2017/09/05/front-end-development-kickstarter-zurb-template.html#javascript

You commented on Matthew Andrianakos's post 18 days

In case it helps, I just published a thorough walkthrough of the ZURB stack - check out the JavaScript portion and see if it makes it clearer: Front-end Development Kickstarter: All about the ZURB Template
 

You commented on Pedro Polonia's post 4 months

Hi Pedro,
Sorry you're running into trouble... Can you confirm if you installed the 'ZURB template' or the 'basic template'? Currently the CLI looks for the ZURB template only...
The basic template doesn't come with any sort of mechanism for partials, so not sure it makes sense to do an automatic inclusion there.
If you're in the ZURB template, we need to dig a little more to see what's going on... the CLI is looking for the following directories to confirm if it is in the ZURB template:
['src/assets/scss/components', 'src/partials', 'src/assets/js']
Can you check if any or all of those are missing?
Regards,
Kevin

You commented on Daniel Codella's post 6 months

Could not be more excited about this. CSS Grid is AMAZING, and Foundation is going to make it so easy and accessible. This is going to take things to the next level!

You commented on Brett HOlcomb's post 9 months

Brett,
Thank you for the thorough writeup, it is definitely helpful. We're working on a refresh of the docs (and in particular getting started and installation will be a big part of that) right now, can we reach out to you to review and give feedback on them when we have a rough version in place?
Regards,
Kevin

You commented on Brett HOlcomb's post 9 months

Looking back through this question, it seems like at least a large part of the question is
"How do I get SCSS to work in my environment?" (Where the environments in question here are Netbeans and possibly PHPStorm).
And that question is being asked in the context of "How do I use the Foundation SCSS files in my environment".
Is that a correct interpretation Brett?
 
 
This is definitely not well answered in the current Foundation docs. Foundation as it stands does a reasonable job of answering the question "How do I use Foundation SCSS in a ruby environment", and a pretty good job of "How do I use Foundation SCSS in a node environment", and essentially nothing whatsoever for any other environment.
We should very definitely fix this. Unfortunately, I'm not super familiar with how to do this for either of the two environments mentioned in this thread... Brett would you be interested in taking a stab at it once you're pretty well set up? And/or did you find any particular resources that were especially helpful that we could reference or include?
 
-Kevin

Posts Followed


Following

  • Brandon Arnold has no published posts

Followers

  • No Content