Foundation Global Styles overwrite Custom Styles of _settings.scss

[NRG-R9T]

I want to change the body-background color (as an example), but "_global.scss" overrites the custom changes in "_settings.scss" (with the default value of foundation). Since Global Styles should be left untouched (to update "/bower_components/" later), and the only way to get the color through was to write it as CSS into "style.scss", I had to figure out something more Sass-like.

"_global.scss" is imported at the top of "_settings.scss", and overwrites my changes. So I did copy the full content of "settings.scss" into a new file called "_customSettings.scss". I imported that into style.scss. the position there is just before "settings.scss", like this:

//
// IMPORTING STYLES
//

// import normalize
@import "../../bower_components/foundation/scss/normalize";

// import mixins
@import "mixins";

// Our Custom Settings for import foundation overrides (disabled _global.scss)
@import "customSettings";

// import foundation overrides
@import "settings";

// foundation.scss
@import "../../bower_components/foundation/scss/foundation";

// joints.scss
@import "joints";

then I deleted the import of "_global.scss" in the "customSettings", so it's not overwriting my changes there. "_global.scss" is still imported with the "settings" file, it seems to me that nothing gets broken - does anyone see a problem with that or can suggest a better fix?

[JeremyEnglert]

@NRG-R9T, thanks for bringing this up as it's actually something I've been working on as well.

If you remove the _global.scss from the _settings.scss file, you will lose access to some of your variables. For example, try using some of the included color variables like "$monsoon" in your settings.scss file (without the global styles being imported) - you'll get an error saying that variable has not been declared.

I actually opened a thread about this on the Foundation forum when I first noticed the issue:
http://foundation.zurb.com/forum/posts/21297-load-_settingsscss-before-or-after-foundationscss

However, it looks like you are correct - the global styles should not need to be imported into the settings file. Let me do some tests and then I will make this correction.

PS - I would love any other feedback you have. JointsWP 3 is in development and this type of feedback allows me to see how other developers are using the theme. May I ask what you use to compile Sass?

[NRG-R9T]

I figured out, that the styles get mixed up if I copy the full content of "settings" into "customSettings". The best solution at the moment for me is to add only those of my changes to "customSettings"; probably only those files that are overwritten in "settings" - I'll have to see. And I use my own color variables anyway.

At the moment, I still use Prepros to compile. It has a very easy UI to setup.

[JeremyEnglert]

Removing the global import from the settings file will fix this issue. I'll be pushing an update today.

[LeBearUK]

Hi,

I have just set up a new instance and was a little confused as to why the background colour was not being applied.

So I am OK to remove the following?

// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

//
@import "../../bower_components/foundation/scss/foundation/components/global";

[NRG-R9T]

you can't just remove the global settings (global.scss), because foundation defines some basic styles of all components there, just before the specific styles are applied in settings.scss. it's a bit of a a mess to find out, what style is defined in global.scss and settings.scss, before the actual stylesheet style.scss is called.
Anyway, I added a file named customSettings.scss to work with and typed there the overwrites of global styles (like $body-bg, $body-font-color and $body-font-family). This way you can preserve your changes in case of foundation updates.

1. create a new file named "customSettings.scss"
2. open style.scss
3. add @import "customSettings"; at the line above @import "settings"; (this will make shure it's initialized before global.scss is imported into settings.scss)
4. add your changes of "global.scss" to "customSettings.scss", (this will override the defined entry in global.scss. not pretty, but it works.)
5. done. your custom changes will be compiled to the final style.css, thanks to the hack in step 3.

[JeremyEnglert]

While @NRG-R9T method works, there is also an easier way.

Simply remove the Global import - this line:
@import "../../bower_components/foundation/scss/foundation/components/global";

More information can be found here:
http://foundation.zurb.com/forum/posts/21297-load-_settingsscss-before-or-after-foundationscss

FYI - This issue is fixed in JointsWP 3.

[JeremyEnglert]

This was fixed in JointsWP 3 - which is now live. Closing.

[7Ds7]

It seems that the problem still occurs in the latest master.

For example:

we have defined in JWP _settings.scss

$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

then in the bower_components/foundation/scss/components/_global.scss there is

$font-family-sans-serif: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif !default;

which overrides our previous setup

Strangely enough changing something like $row-width in our JWP settings file, does not reflect the changes on our compiled styles.css, even though i do not find it defined in _globals.scss Foundation file.

I am currently using the current master version of this branch, using the Foundation version "5.5.2" pulled from bower and using gulp watch to compile the styles.

[JeremyEnglert]

@7Ds7, I'm having a hard time replicating this. I'm attaching a screenshot that shows "gulp watch" running. I then changed the default font to "Times New Roman". Which then changed the font on the demo site.

[7Ds7]

@JeremyEnglert Thanks for the reply, i do not have problems replicating it although the debugging process leaves me to quite bizarre conclusions

I re-setup the project with a new clone from the repo, just to check if anything was wrong in the first place, but it seems that i hit the same strange behaviour. Although it seems that i found at least where the odd problem is, probably it is just on my end and nothing to do with JointsWP, although i leave my process here.

The fact is that gulp watch only works on the first run that i save a file, after that it keeps defaulting to the foundation setup. If i cancel the watch, and rerun gulp the JointsWP settings are used again with the assigned values.

Notice the font family changing to "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; (Foundation defaults) when changed "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; to "Times new Roman";

[7Ds7]

I must say that after a local installation everything works fine as regarding JointsWp. I still have problems on a remote machine, but by now i am pretty sure it is on my end so, this ticket can be closed again.

Sorry for the inconvenience and thanks for the reply ( and thank you for JointsWP as well )