Menu icon Foundation
some problems and advices for foundation

Hi, I am a front-end developer and have used foundation v4 in at least 3 projects. With the love and hate of foundation, I have some problems and advices for it. I hope you will read this and make this frame better and better.

1. First is the most serious problem I met in IE. IE can only recognize the first 4095 seletors of one CSS file, which means if you use SCSS and compress all the custom CSS with foundtion's own CSS, you may easily lost your style in IE. Then you have to divide your compressed CSS into at least 2 files.
I tried to @import SCSS components in 2 different files, and I found it's really hard because I have used some MIXIN in foundation files and I hope no repeated CSS exists in the 2 files.
So my advice for this is can you separate your MIXIN from other SCSS code like what the _global.scss did?

2. In all the versions of Android native browser, when you swipe the image in orbit from right to left, the animation is still sliding from left to right. Well, I hate Android native browser personally but I think it should be supported.

3. Visibility classes are not easy to use. I always cannot make the element hidden in the correct media because of its property display: inherit.

4. If you have changed the settings of small, medium, large media, you have to set the small_breakpoint property of foundation.section.js manually or the 'auto' section will get wired in small or medium media.

5. Button styles are not applyed on input tags in default.

6. Too deep CSS selector used in _topbar.scss and _section.scss, it's not nice for customize styles. For example:
.top-bar-section>ul>li> a, .section-container[data-section-small-style]> section> .title a:hover ...

For some reasons no projects has been upgraded to v5, if the points I mentioned above have been fixed in v5, please ignore them.

IE supportscsscss selectorsOrbitsectionvisibility classesbuttonandroid

Hi, I am a front-end developer and have used foundation v4 in at least 3 projects. With the love and hate of foundation, I have some problems and advices for it. I hope you will read this and make this frame better and better.

1. First is the most serious problem I met in IE. IE can only recognize the first 4095 seletors of one CSS file, which means if you use SCSS and compress all the custom CSS with foundtion's own CSS, you may easily lost your style in IE. Then you have to divide your compressed CSS into at least 2 files.
I tried to @import SCSS components in 2 different files, and I found it's really hard because I have used some MIXIN in foundation files and I hope no repeated CSS exists in the 2 files.
So my advice for this is can you separate your MIXIN from other SCSS code like what the _global.scss did?

2. In all the versions of Android native browser, when you swipe the image in orbit from right to left, the animation is still sliding from left to right. Well, I hate Android native browser personally but I think it should be supported.

3. Visibility classes are not easy to use. I always cannot make the element hidden in the correct media because of its property display: inherit.

4. If you have changed the settings of small, medium, large media, you have to set the small_breakpoint property of foundation.section.js manually or the 'auto' section will get wired in small or medium media.

5. Button styles are not applyed on input tags in default.

6. Too deep CSS selector used in _topbar.scss and _section.scss, it's not nice for customize styles. For example:
.top-bar-section>ul>li> a, .section-container[data-section-small-style]> section> .title a:hover ...

For some reasons no projects has been upgraded to v5, if the points I mentioned above have been fixed in v5, please ignore them.


Jennie Ji gave the most helpful answer for this post
Jennie Ji almost 5 years ago

ISSUE2 is found still exists in foundation v5.
And I just found out the stupid browser cannot work good with the negative percent margin.
foundation.orbit.js:line339: prev.css(margin, ‘-100%’);

So the above code should be updated to:
foundation.orbit.js:line339: prev.css(margin, -prev.width());

And following code should be updated to:
foundation.orbit.js:line329: animMargin[margin] = '0';

Jennie Ji almost 5 years ago

ISSUE2 is found still exists in foundation v5.
And I just found out the stupid browser cannot work good with the negative percent margin.
foundation.orbit.js:line339: prev.css(margin, ‘-100%’);

So the above code should be updated to:
foundation.orbit.js:line339: prev.css(margin, -prev.width());

And following code should be updated to:
foundation.orbit.js:line329: animMargin[margin] = '0';

zmirli nazim 3 months ago

Sometimes it will seem obvious when someone is going through a hard time, but there is no simple way of knowing if they have a mental health problem. Sometimes you don’t need to know. It’s more important to respond sensitively to someone who seems troubled than to find out whether or not they have a diagnosis.

Subway Surfers Psiphon Hill Climb Racing

Steve Smith 3 months ago

i dont know