Menu icon Foundation

My Posts


My Comments

Seth Hall commented on Paolo Visnoviz's post over 5 years

I am experiencing weird behavior with media queries as well.

Here is my import order.

@import "_settings.scss"
@import "foundation"
* which automatically @import "_global"

my custom _settings.scss is first because foundation relies on it.

foundation is next, which automatically imports _global.scss

My problem is this:

My custom media queries, which includes a media-query AND legacy code rewrite to adapt to my current project, are in _settings.scss, but the legacy code is first called in _global.scss, which means there are conflicts.

The legacy code appears in foundation/settings, which I copied and pasted into my _settings.scss to use the $variables in my custom rewrite, so in theory it should not be overridden in _global.scss, since it appears in foundation/_settings.scss.

Commenting out legacy code in _global.scss is a quick hack to fix, but will we broken/reversed upon Foundation update, so not ideal.

Anyway, I ramble :) Posting in hopes of helping the community.

Seth Hall commented on George's post over 5 years

It seems to me that if the docs do not say "Semantic Markup with Sass" on a particular element then a mixin is not available.

Seth Hall commented on Paolo Sax's post over 5 years

both row and panels have Sass mixins. Maybe it has to do with your @import order.

In my opinion, the upgrade from 4 to 5 is a pain, to say the least, with markup and sass changes, although legacy code is supported I believe.

Seth Hall commented on Anita Graham's post over 5 years

As far as I can tell, Foundation 5 does provide mixins in the docs.

under "Semantic Markup with Sass" you will see the button mixin - http://foundation.zurb.com/docs/components/buttons.html

but under Accordion there are no mixins available - http://foundation.zurb.com/docs/components/accordion.html

I take this to mean some components have mixins and others don't.

The sass for the mixins are spread throughout the appropriate files within components directory.
ex. grid mixins are in _grid.scss, button mixins are in _buttons.scss etc...

Seth Hall commented on Seth Hall's post over 5 years

Thanks Rafi. That was it. A few ems sprinkled on top of my settings :)

Changing to rem solved it.

Seth Hall commented on Seth Hall's post over 5 years

@import "settings";
@import "foundation";

I am using Compass with Grunt.

https://github.com/gruntjs/grunt-contrib-compass

The annoying thing is that I upgraded a project a few months ago and got it working fairly quickly. I am referencing that project, but still can't get rid of the rem/em error.

Seth Hall commented on Preben Hertzberg Sandquist's post over 5 years

I am experiencing and wondering the same thing.

I guess manual override is the solution.

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on Paolo Visnoviz's post over 5 years

I am experiencing weird behavior with media queries as well.

Here is my import order.

@import "_settings.scss"
@import "foundation"
* which automatically @import "_global"

my custom _settings.scss is first because foundation relies on it.

foundation is next, which automatically imports _global.scss

My problem is this:

My custom media queries, which includes a media-query AND legacy code rewrite to adapt to my current project, are in _settings.scss, but the legacy code is first called in _global.scss, which means there are conflicts.

The legacy code appears in foundation/settings, which I copied and pasted into my _settings.scss to use the $variables in my custom rewrite, so in theory it should not be overridden in _global.scss, since it appears in foundation/_settings.scss.

Commenting out legacy code in _global.scss is a quick hack to fix, but will we broken/reversed upon Foundation update, so not ideal.

Anyway, I ramble :) Posting in hopes of helping the community.

You commented on George's post over 5 years

It seems to me that if the docs do not say "Semantic Markup with Sass" on a particular element then a mixin is not available.

You commented on Paolo Sax's post over 5 years

both row and panels have Sass mixins. Maybe it has to do with your @import order.

In my opinion, the upgrade from 4 to 5 is a pain, to say the least, with markup and sass changes, although legacy code is supported I believe.

You commented on Anita Graham's post over 5 years

As far as I can tell, Foundation 5 does provide mixins in the docs.

under "Semantic Markup with Sass" you will see the button mixin - http://foundation.zurb.com/docs/components/buttons.html

but under Accordion there are no mixins available - http://foundation.zurb.com/docs/components/accordion.html

I take this to mean some components have mixins and others don't.

The sass for the mixins are spread throughout the appropriate files within components directory.
ex. grid mixins are in _grid.scss, button mixins are in _buttons.scss etc...

You commented on Seth Hall's post over 5 years

Thanks Rafi. That was it. A few ems sprinkled on top of my settings :)

Changing to rem solved it.

You commented on Seth Hall's post over 5 years

@import "settings";
@import "foundation";

I am using Compass with Grunt.

https://github.com/gruntjs/grunt-contrib-compass

The annoying thing is that I upgraded a project a few months ago and got it working fairly quickly. I am referencing that project, but still can't get rid of the rem/em error.

You commented on Preben Hertzberg Sandquist's post over 5 years

I am experiencing and wondering the same thing.

I guess manual override is the solution.

Posts Followed

Following

  • No Content

Followers

  • No Content