Menu icon Foundation

Developer

My Posts



My Comments

powellian commented on Martin's post 9 months

@Giuseppina De Guglielmo
Thanks, I've applied that and done a bunch of other stuff, as noted in my post above and all is working fine now. Hopefully some documentation will appear to make this all clearer!

powellian commented on Martin's post 9 months

@Negativefix
Thanks for that, works fine. I hadn't looked in Gulp, couldn't see the wood for the trees.
What is frustrating is that in app.js I was previously running it with 'foundation-explicit-pieces' instead of the whole of 'foundation-sites' loading:
 
That's how I prefer to roll it so I can then optimise the JS but this broke webpack when trying to integrate Owl, so I reversed that and it worked.
@Zurb @yetinauts any chance you have a look at that please ;)
Also I've broken the files out in modular fashion, taking Owl out of app.js. So here's how I'm loading Owl now:

app.js:
import $ from 'jquery';
import whatInput from 'what-input';

window.$ = $;

import Foundation from 'foundation-sites';
// If you want to pick and choose which modules to include, comment out the above and uncomment
// the line below
// import './lib/foundation-explicit-pieces';

$(document).foundation();

/**
* Project files:
* */
import './ka-modules/ka-loader';

./ka-modules/ka-loader
import './carousels/homepage-carousel';
./carousels/homepage-carousel
import $ from 'jquery';
import 'imports-loader?jQuery=jquery!owl.carousel';

$('#homepage-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
// items: 10,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
console.log("#homepage-carousel");
And it all works fine.
@Negativefix thanks for your steer! Have learnt from this one.

powellian commented on Martin's post 9 months

@Giuseppina De Guglielmo - or anyone else ...
Where did you add that exactly?
I'm grappling with the exact same issue. I've tried it in various styles in webpack.config.js (but 'let' tells me poss that's the wrong location). I've added it to 'app.js' but nothing works so far.
I have npm installed imports-loader so everything is in place. I just need to know exactly where to add that 'webpackConfig' object.
Thanks.

powellian commented on Seth Hoveland's post 11 months

In terms of this:
"The dropdown initializes and seems to work fine, but will not close when the href is clicked a second time - it will only close if I select something in the body"
Sorry I don't have the answer, I am having the exact same issue in 6.3.1 and there's a lot of it about. Hopefully if enough of us shout about it somebody (a Yetinaut?) will hear us and offer a solution!
I've tried it with all the obvious data-* options including:data-close-on-click="true"data-close-on-click-inside="true"anddata-close-on-click-inside="false" (i've seen it posted that the 'false' flag here worked for some)
No joy anywhere with these.

powellian commented on Doug Macklin's post about 1 year

For this problem in Fdn 6.x I just worked the following.
In your containing element add a new class (shown BEM style here):
<ul class="orbit-container orbit--modal">
In your css/scss/whatever do the following:
.orbit--modal {
height: auto !important;
}
It's a hack and I hate to use '!important' but it works (tested thus far in Chrome, FF, Safari, IE>=10 (not using below 10)).
I couldn't get any of the JS hacks to work in v6.x

powellian commented on Tom Elliott's post about 1 year

I feel it is best to leave the original _settings.scss file intact so there's a simple overwrite as/when there is an upgrade. So what I do is make a new file - _settings-overrides.scss - and add any overrides in that.
What made me scratch my head was where to place this file and I had to experiment as the obvious placement, at the bottom of the list, lead to all sorts of variable conflicts. However, I found that the following, right at the top of '_app.scss' works:
@import 'settings';
// Site bespoke:
@import "settings-overrides";

@import 'foundation';
@import 'motion-ui';

powellian commented on E. Smythe's post about 1 year

Doing this economically has been foxing me for a while. What I wanted to do was just have one file - say '_settings-overrides' which just has copies of the relevant variable etc I wanted to affect. I didn't want to copy the whole '_settings' files as that just felt inefficient and could be problematic when it came time to upgrade. 
I spent too long messing around with the @import positioning of the '_settings-overrides.scss' file and wondering why it wasn't making any effect.
So after loads of fiddling about and scratching my head I stumbled across this:

create: '_settings-overrides.scss'
in 'app.scss' import 'settings-overrides' directly after '@import settings' - i.e. line 3 or 4

So then in '_settings-overrides.scss' I only need to copy and override the relevant variable from the original '_settings' file - it can be a very lean file. That way '_settings' doesn't need to be touched and it can easily be replaced when it comes to upgrade time.

powellian commented on powellian's post about 1 year

 Hi Rafi,
Thanks for getting back on this, it's great news on all fronts and that progress post is one I've been following.
Will there be documentation for the 6.3.x-6.4 upgrade? I imagine this will be a fairly convoluted upgrade and I'm quite possibly going to be mid-project when it hits with currently a 6.3.1 build.

powellian commented on Rafi Benkual's post almost 2 years

In ref to a sticky nav tut @rafi kindly posted to me and SO post I raised, I am just not getting Magellan/Sticky Nav to work in the Zurb cli template. **The SO post explains the problem fully so I feel there's no need to repeat it here.
I've followed the responses to the SO and the Codepen to the word but it's just not working and I am getting the following console log: 
Uncaught TypeError: Cannot read property 'top' of undefined [foundation.sticky.js:81]
To attempt a fix I've re-installed the Fdn CLI via npm but no joy.
It would appear all is in place for Sticky to work - I can see it registers in the DOM but it doesn't add the required sticky classes to the wrapping element.
Tbh I don't know what else to try now so can anyone advise please? I can only assume it is somehow related to the CLI install.
Thanks in advance.

powellian commented on Ettiene Grobler's post almost 2 years

Groundhog?

Posts Followed




  • 4
    Replies
  • Styling Top Bar With SASS

    By Tom Elliott

    top-bar

    I am trying to style a simple test Top Bar. I am using 6.3.1, project created May 29, using basic template. I am clearly missing something about the SASS setup. Do I need to put the overrides into the main body of _settings, replacing the standard assign... (continued)

    Last Reply by Val Ery about 1 year ago






Following

    No Content

Followers

My Posts

My Comments

You commented on Martin's post 9 months

@Giuseppina De Guglielmo
Thanks, I've applied that and done a bunch of other stuff, as noted in my post above and all is working fine now. Hopefully some documentation will appear to make this all clearer!

You commented on Martin's post 9 months

@Negativefix
Thanks for that, works fine. I hadn't looked in Gulp, couldn't see the wood for the trees.
What is frustrating is that in app.js I was previously running it with 'foundation-explicit-pieces' instead of the whole of 'foundation-sites' loading:
 
That's how I prefer to roll it so I can then optimise the JS but this broke webpack when trying to integrate Owl, so I reversed that and it worked.
@Zurb @yetinauts any chance you have a look at that please ;)
Also I've broken the files out in modular fashion, taking Owl out of app.js. So here's how I'm loading Owl now:

app.js:
import $ from 'jquery';
import whatInput from 'what-input';

window.$ = $;

import Foundation from 'foundation-sites';
// If you want to pick and choose which modules to include, comment out the above and uncomment
// the line below
// import './lib/foundation-explicit-pieces';

$(document).foundation();

/**
* Project files:
* */
import './ka-modules/ka-loader';

./ka-modules/ka-loader
import './carousels/homepage-carousel';
./carousels/homepage-carousel
import $ from 'jquery';
import 'imports-loader?jQuery=jquery!owl.carousel';

$('#homepage-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
// items: 10,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
console.log("#homepage-carousel");
And it all works fine.
@Negativefix thanks for your steer! Have learnt from this one.

You commented on Martin's post 9 months

@Giuseppina De Guglielmo - or anyone else ...
Where did you add that exactly?
I'm grappling with the exact same issue. I've tried it in various styles in webpack.config.js (but 'let' tells me poss that's the wrong location). I've added it to 'app.js' but nothing works so far.
I have npm installed imports-loader so everything is in place. I just need to know exactly where to add that 'webpackConfig' object.
Thanks.

You commented on Seth Hoveland's post 11 months

In terms of this:
"The dropdown initializes and seems to work fine, but will not close when the href is clicked a second time - it will only close if I select something in the body"
Sorry I don't have the answer, I am having the exact same issue in 6.3.1 and there's a lot of it about. Hopefully if enough of us shout about it somebody (a Yetinaut?) will hear us and offer a solution!
I've tried it with all the obvious data-* options including:data-close-on-click="true"data-close-on-click-inside="true"anddata-close-on-click-inside="false" (i've seen it posted that the 'false' flag here worked for some)
No joy anywhere with these.

You commented on Doug Macklin's post about 1 year

For this problem in Fdn 6.x I just worked the following.
In your containing element add a new class (shown BEM style here):
<ul class="orbit-container orbit--modal">
In your css/scss/whatever do the following:
.orbit--modal {
height: auto !important;
}
It's a hack and I hate to use '!important' but it works (tested thus far in Chrome, FF, Safari, IE>=10 (not using below 10)).
I couldn't get any of the JS hacks to work in v6.x

You commented on Tom Elliott's post about 1 year

I feel it is best to leave the original _settings.scss file intact so there's a simple overwrite as/when there is an upgrade. So what I do is make a new file - _settings-overrides.scss - and add any overrides in that.
What made me scratch my head was where to place this file and I had to experiment as the obvious placement, at the bottom of the list, lead to all sorts of variable conflicts. However, I found that the following, right at the top of '_app.scss' works:
@import 'settings';
// Site bespoke:
@import "settings-overrides";

@import 'foundation';
@import 'motion-ui';

You commented on E. Smythe's post about 1 year

Doing this economically has been foxing me for a while. What I wanted to do was just have one file - say '_settings-overrides' which just has copies of the relevant variable etc I wanted to affect. I didn't want to copy the whole '_settings' files as that just felt inefficient and could be problematic when it came time to upgrade. 
I spent too long messing around with the @import positioning of the '_settings-overrides.scss' file and wondering why it wasn't making any effect.
So after loads of fiddling about and scratching my head I stumbled across this:

create: '_settings-overrides.scss'
in 'app.scss' import 'settings-overrides' directly after '@import settings' - i.e. line 3 or 4

So then in '_settings-overrides.scss' I only need to copy and override the relevant variable from the original '_settings' file - it can be a very lean file. That way '_settings' doesn't need to be touched and it can easily be replaced when it comes to upgrade time.

You commented on powellian's post about 1 year

 Hi Rafi,
Thanks for getting back on this, it's great news on all fronts and that progress post is one I've been following.
Will there be documentation for the 6.3.x-6.4 upgrade? I imagine this will be a fairly convoluted upgrade and I'm quite possibly going to be mid-project when it hits with currently a 6.3.1 build.

You commented on Rafi Benkual's post almost 2 years

In ref to a sticky nav tut @rafi kindly posted to me and SO post I raised, I am just not getting Magellan/Sticky Nav to work in the Zurb cli template. **The SO post explains the problem fully so I feel there's no need to repeat it here.
I've followed the responses to the SO and the Codepen to the word but it's just not working and I am getting the following console log: 
Uncaught TypeError: Cannot read property 'top' of undefined [foundation.sticky.js:81]
To attempt a fix I've re-installed the Fdn CLI via npm but no joy.
It would appear all is in place for Sticky to work - I can see it registers in the DOM but it doesn't add the required sticky classes to the wrapping element.
Tbh I don't know what else to try now so can anyone advise please? I can only assume it is somehow related to the CLI install.
Thanks in advance.

You commented on Ettiene Grobler's post almost 2 years

Groundhog?

Posts Followed

Following

  • No Content

Followers

  • No Content