Menu icon Foundation

Designer

My Posts





My Comments

Dan Feather commented on Jakub Minka's post over 1 year

@Jade :: Nothing RE: Bootstrap menu here, but in RE: the FOUC problem in FND 6.
Have you tried the fix of 'no-js' CSS styles (found in 2 posts* in the Forum I believe)?
I've just implemented it, and it seems helpful. I'd suggest that you see if that works for you. 
(And I'm wondering: has anyone field-tested this and declared it solid?)
First, I made sure the opening <html> tag has a class of "no-js". 
<html class="no-js" lang="en" dir="ltr">
Second, I paste the <script> tag (below) into <head> of HTML files. (I thought this wasn't working at all when I had integrated it into my linked CSS file. But after inlining into the page, it seems to have solved it.)
<style type="text/css">

.no-js .top-bar {
display: none;
}

@media screen and (min-width: 40em) {
.no-js .top-bar {
display: block;
}
.no-js .title-bar {
display: none;
}
}
</style>

My fingers are crossed (need to test more browsers and devices, but working now in development).
 *REF:
https://foundation.zurb.com/sites/docs/responsive-navigation.html#preventing-fouc
 
https://foundation.zurb.com/forum/posts/39063
 

Dan Feather commented on Dan Feather's post about 2 years

A little more than 8 hours later, I've found the problem -- and, naturally, it was of my own doing.
I record it here for the benefit of anyone who, like me, gets carried away by paying attention to web validation tools.
When doing some validating of my FND5 website, I kept getting flagged for "empty href tags" : the <a href="#"> that appeared in the top-bar labels/dividers/names. Indeed, this is considered bad form. But, as I so rudely learned, it also makes the top-bar nav menu non-functional on mobile devices.
Furthermore, I found that the omission of the hashtag at href also breaks the navigation back up the chain of dropdowns in the mobile menu.
So, if the Foundation docs say an empty tag is what you need, you'd better not mess with it.
Cheers!
- Dan

Dan Feather commented on Rafi Benkual's post over 2 years

<sigh>Is this not a concern to everyone?</ ....> Well, here I am 10 months later, my FND5 site still bloated, and again working with FND6 and YetiLaunch, and again back and the forum looking for unCSS info.
After finding a post (one of the few RE: this topic) advising this and more minification will be accomplished by changing the isProduction var in the gulp file (http://foundation.zurb.com/forum/posts/36189#comment_26511). I edited the gulp file, stopped and started YL (because 'foundation build' won't run for me ??), and the app.css and app.js files in 'dist' were indeed MUCH smaller. 
Hooray, I cried. . . . BUT . . . danged if the html pages aren't working right. The orbit slider stops after 1 click . . . 
So, as also concerns Joshua Smith (http://foundation.zurb.com/forum/posts/25541#comment_23553), I'm stuck wondering WHEN the solution to de-bloated css will be reliable.
 

Dan Feather commented on Rafi Benkual's post over 3 years

I would reiterate Calder's question: where is UnCSS info for Foundation 6? 
(I could swear I saw a doc page on this somewhere at Zurb during the first months of Foundation 6's release, but I can't find anything today.)
There are so many hassles (and not even very gratifying results) in the "until then" recipe from Cory Dowdy that I'm completely discouraged from trudging down this path with my FND 5 site. (If only the title of this post really gave me adequate information to make my final CSS "super tiny!")
I've done a bit of messing around with Yeti Launch and FND 6, but without any instructions or documentation about UnCSS and FND 6 (or even guides for transitioning a FND 5 site to FND 6), I can't help but feeling reluctant to jump into FND 6.
Can anyone sell me on it?
AND/OR: Can anyone point to a fairly straightforward path to getting a Foundation site to be as small as possible?
 

Dan Feather commented on Dan Feather's post about 4 years

Latest report here (original poster): Shame on me: the answer seems to be right on the Zurb documents Interchange page (under "Adding New Interchange Content After Page Load").

I have added $(document).foundation('interchange', 'reflow'); before my closing tag in the target document, and this seems to have solved the problem. (At least in my simple test file referenced above.)

What is REALLY FRUSTRATING is that I was not able to get this solution after making my post here.

I have been reading (in forum here and at GitHub) other users who've had various problems with Interchange, so I suspect I'm not "out of the woods" yet, but I'm glad to have (apparently) an answer to my original question.

I will likely use this in my current client project, and will report back as to the success in "the real world."

  • Dan

Dan Feather commented on Dan Feather's post about 4 years

Rafi (or anyone!).

I haven't heard anything on this. Please let me know if there's a solution.

Thanks,

  • Dan

Dan Feather commented on Dan Feather's post over 4 years

Yes I can, Rafi.

(Actually, this is NOT the project file that prompted this question, but that's a client site under development, and I am not at liberty to post the link in the forum. So I made a dummy set of files to illustrate. SEE NOTE AT END!)

The page which has anchors in SECTIONS, and then loads Interchange content is at:
http://whatuserswant.com/webdev/index.html

After the UL where various SECTIONS are linked on that page, you'll see a paragraph with description and link to the external page, where links there fail:
http://whatuserswant.com/webdev/external.html

Interestingly, when I first put together these test pages, I used lorem ipsum text only for the loaded content. I was surprised when the external links worked just fine. Then I considered that the load time for this content was surely in the microseconds. One of the components that I use on the client site has an embedded Google map. When I put similar content in one of my "filler" pages, the problem was revealed. I am thinking it is probably an timing issue. I could experiment further to see if it's the embedding that's the main factor, or just time. Maybe putting some large images would cause the problem too?

Thanks,

  • Dan

Dan Feather commented on Dorian Scheidt's post over 4 years

Geez! This is an invaluable tip! . . . It's SO frustrating dealing with something so powerful sometimes.

I find so much to love about Magellan, but the behavior you solved is just part of my problem. For starters, I'd like my Magellan bar, once 'activated,' to stay within the base page width ('small-12 columns'), but haven't figured that out yet. (More frustrating is to see the Foundation docs page display a Magellan that stays contained that way, but, for the life of me, I can't figure out how to do it.) I would've assumed this would be an oft-encountered preference, so its being absent in the docs baffles me. . . Grrrrr.

[#aside] Is there any place that provides actual demos (or live samples) of Foundation components? Is there a better (or at least supplemental) tutorials, especially any resources for non-programmers?[/aside]

Thanks for sharing Dorian!

Dan Feather commented on Htet Htet Aung's post over 4 years

Hi. The ability to link to a specific accordion (and actually SEE the content!) has been critical on many of my projects, and it's disappointing to learn this is not built into version 5. (Especially when I read info that makes it appear that Foundation 4 DID support deep linking on accordions: see http://foundation.zurb.com/docs/v/4.3.2/components/section.html)

Anyway, I can't quite understand how Arthur's post can help me get a closed accordion to open with a hash tag in a link. Lyn's solution seems pretty cool, and it may have to do, knowing that it won't work on links within the same page.

But I would strongly request that this functionality be added to version 5, AND THAT YOU DON'T TAKE IT OUT AGAIN! . . . For the life of me, I can't imagine how this doesn't qualify as a standard option that very many websites require.

So, with Andres and Adam, I await a final solution.

Posts Followed



Following

    No Content

Followers

My Posts

My Comments

You commented on Jakub Minka's post over 1 year

@Jade :: Nothing RE: Bootstrap menu here, but in RE: the FOUC problem in FND 6.
Have you tried the fix of 'no-js' CSS styles (found in 2 posts* in the Forum I believe)?
I've just implemented it, and it seems helpful. I'd suggest that you see if that works for you. 
(And I'm wondering: has anyone field-tested this and declared it solid?)
First, I made sure the opening <html> tag has a class of "no-js". 
<html class="no-js" lang="en" dir="ltr">
Second, I paste the <script> tag (below) into <head> of HTML files. (I thought this wasn't working at all when I had integrated it into my linked CSS file. But after inlining into the page, it seems to have solved it.)
<style type="text/css">

.no-js .top-bar {
display: none;
}

@media screen and (min-width: 40em) {
.no-js .top-bar {
display: block;
}
.no-js .title-bar {
display: none;
}
}
</style>

My fingers are crossed (need to test more browsers and devices, but working now in development).
 *REF:
https://foundation.zurb.com/sites/docs/responsive-navigation.html#preventing-fouc
 
https://foundation.zurb.com/forum/posts/39063
 

You commented on Dan Feather's post about 2 years

A little more than 8 hours later, I've found the problem -- and, naturally, it was of my own doing.
I record it here for the benefit of anyone who, like me, gets carried away by paying attention to web validation tools.
When doing some validating of my FND5 website, I kept getting flagged for "empty href tags" : the <a href="#"> that appeared in the top-bar labels/dividers/names. Indeed, this is considered bad form. But, as I so rudely learned, it also makes the top-bar nav menu non-functional on mobile devices.
Furthermore, I found that the omission of the hashtag at href also breaks the navigation back up the chain of dropdowns in the mobile menu.
So, if the Foundation docs say an empty tag is what you need, you'd better not mess with it.
Cheers!
- Dan

You commented on Rafi Benkual's post over 2 years

<sigh>Is this not a concern to everyone?</ ....> Well, here I am 10 months later, my FND5 site still bloated, and again working with FND6 and YetiLaunch, and again back and the forum looking for unCSS info.
After finding a post (one of the few RE: this topic) advising this and more minification will be accomplished by changing the isProduction var in the gulp file (http://foundation.zurb.com/forum/posts/36189#comment_26511). I edited the gulp file, stopped and started YL (because 'foundation build' won't run for me ??), and the app.css and app.js files in 'dist' were indeed MUCH smaller. 
Hooray, I cried. . . . BUT . . . danged if the html pages aren't working right. The orbit slider stops after 1 click . . . 
So, as also concerns Joshua Smith (http://foundation.zurb.com/forum/posts/25541#comment_23553), I'm stuck wondering WHEN the solution to de-bloated css will be reliable.
 

You commented on Rafi Benkual's post over 3 years

I would reiterate Calder's question: where is UnCSS info for Foundation 6? 
(I could swear I saw a doc page on this somewhere at Zurb during the first months of Foundation 6's release, but I can't find anything today.)
There are so many hassles (and not even very gratifying results) in the "until then" recipe from Cory Dowdy that I'm completely discouraged from trudging down this path with my FND 5 site. (If only the title of this post really gave me adequate information to make my final CSS "super tiny!")
I've done a bit of messing around with Yeti Launch and FND 6, but without any instructions or documentation about UnCSS and FND 6 (or even guides for transitioning a FND 5 site to FND 6), I can't help but feeling reluctant to jump into FND 6.
Can anyone sell me on it?
AND/OR: Can anyone point to a fairly straightforward path to getting a Foundation site to be as small as possible?
 

You commented on Dan Feather's post about 4 years

Latest report here (original poster): Shame on me: the answer seems to be right on the Zurb documents Interchange page (under "Adding New Interchange Content After Page Load").

I have added $(document).foundation('interchange', 'reflow'); before my closing tag in the target document, and this seems to have solved the problem. (At least in my simple test file referenced above.)

What is REALLY FRUSTRATING is that I was not able to get this solution after making my post here.

I have been reading (in forum here and at GitHub) other users who've had various problems with Interchange, so I suspect I'm not "out of the woods" yet, but I'm glad to have (apparently) an answer to my original question.

I will likely use this in my current client project, and will report back as to the success in "the real world."

  • Dan

You commented on Dan Feather's post about 4 years

Rafi (or anyone!).

I haven't heard anything on this. Please let me know if there's a solution.

Thanks,

  • Dan

You commented on Dan Feather's post over 4 years

Yes I can, Rafi.

(Actually, this is NOT the project file that prompted this question, but that's a client site under development, and I am not at liberty to post the link in the forum. So I made a dummy set of files to illustrate. SEE NOTE AT END!)

The page which has anchors in SECTIONS, and then loads Interchange content is at:
http://whatuserswant.com/webdev/index.html

After the UL where various SECTIONS are linked on that page, you'll see a paragraph with description and link to the external page, where links there fail:
http://whatuserswant.com/webdev/external.html

Interestingly, when I first put together these test pages, I used lorem ipsum text only for the loaded content. I was surprised when the external links worked just fine. Then I considered that the load time for this content was surely in the microseconds. One of the components that I use on the client site has an embedded Google map. When I put similar content in one of my "filler" pages, the problem was revealed. I am thinking it is probably an timing issue. I could experiment further to see if it's the embedding that's the main factor, or just time. Maybe putting some large images would cause the problem too?

Thanks,

  • Dan

You commented on Dorian Scheidt's post over 4 years

Geez! This is an invaluable tip! . . . It's SO frustrating dealing with something so powerful sometimes.

I find so much to love about Magellan, but the behavior you solved is just part of my problem. For starters, I'd like my Magellan bar, once 'activated,' to stay within the base page width ('small-12 columns'), but haven't figured that out yet. (More frustrating is to see the Foundation docs page display a Magellan that stays contained that way, but, for the life of me, I can't figure out how to do it.) I would've assumed this would be an oft-encountered preference, so its being absent in the docs baffles me. . . Grrrrr.

[#aside] Is there any place that provides actual demos (or live samples) of Foundation components? Is there a better (or at least supplemental) tutorials, especially any resources for non-programmers?[/aside]

Thanks for sharing Dorian!

You commented on Htet Htet Aung's post over 4 years

Hi. The ability to link to a specific accordion (and actually SEE the content!) has been critical on many of my projects, and it's disappointing to learn this is not built into version 5. (Especially when I read info that makes it appear that Foundation 4 DID support deep linking on accordions: see http://foundation.zurb.com/docs/v/4.3.2/components/section.html)

Anyway, I can't quite understand how Arthur's post can help me get a closed accordion to open with a hash tag in a link. Lyn's solution seems pretty cool, and it may have to do, knowing that it won't work on links within the same page.

But I would strongly request that this functionality be added to version 5, AND THAT YOU DON'T TAKE IT OUT AGAIN! . . . For the life of me, I can't imagine how this doesn't qualify as a standard option that very many websites require.

So, with Andres and Adam, I await a final solution.

Posts Followed

Following

  • No Content

Followers

  • No Content