Menu icon Foundation

Developer | Capitola, CA

Front end web developer focusing on Fast, Functional, & Mobile Friendly using Responsive Web Design. That's what I do!

My Posts

No Content

My Comments

Daren Barry commented on Jonathan Ireland's post over 2 years

Hi Rafi, I love working with foundation it has a lot of very useful tools that make design, development, and mobile friendly very efficient and effective. However, I'll be honest... I specifically stated this: there is no cure for this while using Foundation.... to get your attention. It is my opinion that this needs to be addressed by Foundation. This was not an issue in Foundation 5: www.audreywingodds.com I launched that site 09/30/15 - over 18 months ago. The next site I built (and all others) I used Foundation 6 and I've had the same FOUC issue ever since - we're going on 20 months! Clearly I am not the only guy affected by this. I paid for a Foundation class thinking I might learn something I missed (hoping I missed something and I could correct this issue on all my sites). But it turns out there is no cure for this at the moment and the $299 I paid taught me that I was in fact doing things correctly, but there's still an issue with FOUC. I've posted about this in the past, both here and in other "blogs" - yet no cure. I'm a team player and I'd love to see this resolved! My peers that develop on MAC don't see it nearly as much as those of us that use a PC. It's clearly visible both upon loading a page AND when you adjust your browser to the point of the hamburger appearing and disappearing. How can I help?

Daren Barry commented on AJ's post over 2 years

What version of Foundation are you using? FYI - when I minify my CSS, I like to place this at the top of the file:
 /* Foundation 6.3.1 */ (or what ever the version is ). So, in the first UL classnames, add vertical and medium-horizontal, and I'd change data-dropdown-menu to data-responsive-menu="drilldown medium-dropdown".
 
If you need to view source, you can look at www.thealignmentcenter.com

Daren Barry commented on AJ's post over 2 years

Hey AJ - do you have a link to a site on the web? Much easier to look at and provide feedback. Cheers

Daren Barry commented on Dale Dietrich's post over 2 years

PHP is better at doing this than using HTML or Js. Another option is using a Framework like Laravel - but it depends on what you're trying to accomplish and the type of sites you're building

Daren Barry commented on Erwin0Maleki's post over 2 years

Do you have a link to a live site? Web 4U Inc

Daren Barry commented on Dale Dietrich's post over 2 years

 Yes there are several ways to do this, one of my favorites would be using PHP. Create a folder called includes (just like your css folder, images folder etc... place on the root) in the includes folder, create a file named links.php
 
Place your repeated code in links.php
 
Then place: 
<?php include("includes/links.php"); ?>
 
on each page where you want the links.
 
for more info you can reach out to me at www.web4uinc.com
 

Daren Barry commented on Jonathan Ireland's post over 2 years

Hi Jonathan - this issue is called FOUC - Flash of unstyled content. I noticed it as soon as Foundation 6 came out. They (the Foundation guys) suggested upgrading from 6.0.5 to 6.2.1 to 6.2.3... none of these FIXED the issue. There are some HACKS that minimize it as suggested by Rafi - but make no mistake, there is no cure for this while using Foundation. The other issue is when you have a drop down menu, the arrows to the right of the link that indicate there's a drop down... they make the entire menu move until everything is loaded. You can see this at www.thealignmentcenter.com 
 
I built my client's site using Foundation 6.3.1 & Jquery 3.1.1 - the latest "and greatest" according to the Foundation team - but the issue still exists. The only cure I've found is Bootstrap and I"m tempted to redo this site in BS. 

Daren Barry commented on john's post almost 3 years

Hello, here are a few starting points:
when I view source, none of the css files are there, not sure what hosting service you're using, but I typically use the slash before any file names (for css, js, and /index.xxx). I would also recommend hosting your foundation files on your own server. Start w/ these points... also, it appears you're using Foundation 6.0.0... try upgrading to 6.2.3 or 6.2.4. Although 6.3.0 is out... I feel it's buggy

Daren Barry commented on Alec Stewart's post almost 3 years

This FOUC continues to be an issue. I've done the .no-js, I've tried moving the jquery & foundation.js file to the head, I've added the following CSS:
[data-dropdown-menu] ul { display: none; }
.no-js .top-bar { display: none; }
@media screen and (min-width: 50em) {
     .no-js .top-bar { display: block; }
     .no-js .title-bar { display: none !important; }
}
www.switch.web4uinc.com
I still see the FOUC on FireFox. I've asked the boys at Foundation to "take a look"... they essentially want a $2,000 retainer to "take a look" and refer me back to this forum. I have to say, I really like 95% of foundation... but this one - FOUC is becoming a deal breaker. Anyone have any suggestions? 
 
I find it ironic that they want 2k to fix (what I believe to be THEIR issue). I can't be the only developer that sees this issue on PC Firefox

Daren Barry commented on Harout 's post over 3 years

So, did you download a special version of F with a 10 grid system (instead of the normal 12)?
 
If you didn't ...
 
I hear what you're saying... the 3rd line in my code, offers you your 10 wide grid (while using F's 12 grid system)... then next 3 divs offer you your 3rd (of the 10 wide) grid... just like pictured :). hope it helps

Posts Followed











Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Jonathan Ireland's post over 2 years

Hi Rafi, I love working with foundation it has a lot of very useful tools that make design, development, and mobile friendly very efficient and effective. However, I'll be honest... I specifically stated this: there is no cure for this while using Foundation.... to get your attention. It is my opinion that this needs to be addressed by Foundation. This was not an issue in Foundation 5: www.audreywingodds.com I launched that site 09/30/15 - over 18 months ago. The next site I built (and all others) I used Foundation 6 and I've had the same FOUC issue ever since - we're going on 20 months! Clearly I am not the only guy affected by this. I paid for a Foundation class thinking I might learn something I missed (hoping I missed something and I could correct this issue on all my sites). But it turns out there is no cure for this at the moment and the $299 I paid taught me that I was in fact doing things correctly, but there's still an issue with FOUC. I've posted about this in the past, both here and in other "blogs" - yet no cure. I'm a team player and I'd love to see this resolved! My peers that develop on MAC don't see it nearly as much as those of us that use a PC. It's clearly visible both upon loading a page AND when you adjust your browser to the point of the hamburger appearing and disappearing. How can I help?

You commented on AJ's post over 2 years

What version of Foundation are you using? FYI - when I minify my CSS, I like to place this at the top of the file:
 /* Foundation 6.3.1 */ (or what ever the version is ). So, in the first UL classnames, add vertical and medium-horizontal, and I'd change data-dropdown-menu to data-responsive-menu="drilldown medium-dropdown".
 
If you need to view source, you can look at www.thealignmentcenter.com

You commented on AJ's post over 2 years

Hey AJ - do you have a link to a site on the web? Much easier to look at and provide feedback. Cheers

You commented on Dale Dietrich's post over 2 years

PHP is better at doing this than using HTML or Js. Another option is using a Framework like Laravel - but it depends on what you're trying to accomplish and the type of sites you're building

You commented on Erwin0Maleki's post over 2 years

Do you have a link to a live site? Web 4U Inc

You commented on Dale Dietrich's post over 2 years

 Yes there are several ways to do this, one of my favorites would be using PHP. Create a folder called includes (just like your css folder, images folder etc... place on the root) in the includes folder, create a file named links.php
 
Place your repeated code in links.php
 
Then place: 
<?php include("includes/links.php"); ?>
 
on each page where you want the links.
 
for more info you can reach out to me at www.web4uinc.com
 

You commented on Jonathan Ireland's post over 2 years

Hi Jonathan - this issue is called FOUC - Flash of unstyled content. I noticed it as soon as Foundation 6 came out. They (the Foundation guys) suggested upgrading from 6.0.5 to 6.2.1 to 6.2.3... none of these FIXED the issue. There are some HACKS that minimize it as suggested by Rafi - but make no mistake, there is no cure for this while using Foundation. The other issue is when you have a drop down menu, the arrows to the right of the link that indicate there's a drop down... they make the entire menu move until everything is loaded. You can see this at www.thealignmentcenter.com 
 
I built my client's site using Foundation 6.3.1 & Jquery 3.1.1 - the latest "and greatest" according to the Foundation team - but the issue still exists. The only cure I've found is Bootstrap and I"m tempted to redo this site in BS. 

You commented on john's post almost 3 years

Hello, here are a few starting points:
when I view source, none of the css files are there, not sure what hosting service you're using, but I typically use the slash before any file names (for css, js, and /index.xxx). I would also recommend hosting your foundation files on your own server. Start w/ these points... also, it appears you're using Foundation 6.0.0... try upgrading to 6.2.3 or 6.2.4. Although 6.3.0 is out... I feel it's buggy

You commented on Alec Stewart's post almost 3 years

This FOUC continues to be an issue. I've done the .no-js, I've tried moving the jquery & foundation.js file to the head, I've added the following CSS:
[data-dropdown-menu] ul { display: none; }
.no-js .top-bar { display: none; }
@media screen and (min-width: 50em) {
     .no-js .top-bar { display: block; }
     .no-js .title-bar { display: none !important; }
}
www.switch.web4uinc.com
I still see the FOUC on FireFox. I've asked the boys at Foundation to "take a look"... they essentially want a $2,000 retainer to "take a look" and refer me back to this forum. I have to say, I really like 95% of foundation... but this one - FOUC is becoming a deal breaker. Anyone have any suggestions? 
 
I find it ironic that they want 2k to fix (what I believe to be THEIR issue). I can't be the only developer that sees this issue on PC Firefox

You commented on Harout 's post over 3 years

So, did you download a special version of F with a 10 grid system (instead of the normal 12)?
 
If you didn't ...
 
I hear what you're saying... the 3rd line in my code, offers you your 10 wide grid (while using F's 12 grid system)... then next 3 divs offer you your 3rd (of the 10 wide) grid... just like pictured :). hope it helps

Posts Followed

Following

  • No Content

Followers

  • No Content