Menu icon Foundation

Developer | Ashland, Ohio

Web Developer who loves Foundation

My Posts



  • NEW
  • Using 6.3+ Off-Canvas with 6.2.3

    By Ryan Patterson

    off-canvas

    I'm getting ready to start a project building a Wordpress child theme on a multi-site network. The parent theme is using 6.2.3 and the admin doesn't have any immediate plans to upgrade for the fear of things possibly breaking. I'm really wanting to ... (continued)



  • 1
    Reply
  • Orbit and Wow.js

    By Ryan Patterson

    Orbitwow.js

    Hello Foundation Community, I know this maybe more of a Wow.js question, but was hoping someone has run into a similar issue.  I have an orbit slider. I set the main image as the slides background. I have a div inside the slide that has a backgroun... (continued)

    Last Reply by John Stephanites 6 months ago







My Comments

Ryan Patterson commented on Shelley's post about 3 hours

@john kennedy, 
Shelley had mentioned in her original question that she was using just the CSS version, so won't be able to make the changes you suggested. Since the building block example is using flex grid, some of those classes won't work with her float grid. That is why I simply suggested she use the standard breakpoint classes. 
Sorry, really not trying to be a know it all or anything like that. If she had been using SASS, then your answer would be spot on! You did a good job at explaining it so that if she were using SASS, could easily fix her issue. 
And my bad, I should have mentioned in my original reply that some of the classes she was using, specifically .[size]-unstack won't work with the float grid. 

Ryan Patterson commented on Hannes Lehner's post about 3 hours

Most likely the issue is the new version of Foundation uses the XY grid by default, which uses different css classes than the float or flex grid. If you are using the SASS version, there is a file where you can chose which grid type your site is using. I apologize, I don't have a new version ready to find that file name.
If you are using SASS, do a search for 
@include foundation-xy-grid-classes;
and comment that out. You should then see similar includes for the flex and float grids. Just uncomment out which grid type you are using. 
Like I said, I'm just assuming this is your issue, so could be wrong.

Ryan Patterson commented on Adrian Bengtson's post about 8 hours

As someone who has been using Foundation since F3, I feel Zurb does a pretty good job at keeping up with bug fixes and making general improvements. Especially seeing as they distribute it for free. 
I have no idea why there hasn't been any github commits recently. Maybe they are focusing most of their current resources on F7, which I heard is on it's way. But I'm just speculating. 
Now, I will admit, I do feel Zurb is kind of slipping in terms of this forum. I see so many questions go unanswered by anyone from Zurb. I know some get answered by other forum members, but kind of expected them to be more involved than they have been. And as you mentioned, the spam in this forum is getting out of control and it doesn't seem like anything is being done about it. 
So in my opinion, Zurb has always seemed committed to Foundation, just not the Foundation forums. 

Ryan Patterson commented on Ben Siegfried's post about 8 hours

I would wrap each row inside a div or section tag (if they are logical sections) and then apply the color and padding to those wrapping div. Something like:
 
<section class="some-class-name">
<div class="row">
....
</div>
</section>
<section class="some-other-class">
<div class="row">
....
</div>
</section>
 Then just use the section classes to apply whatever background color and padding you need. This will also let you have a full-width background while still keeping the content inside the row width. 

Ryan Patterson commented on Shelley's post about 8 hours

I would suggest specifying the width of the columns using the breakpoint classes. 
Try this:
 
From the .row div, remove .medium-unstack, then on each column add .medium-4 .columns. This will display those columns in a 3 column layout for medium and up, but then stack on small. 
So would look something like this:
 
<div class="row">
<div class="medium-4 columns"></div>
<div class="medium-4 columns"></div>
<div class="medium-4 columns"></div>
</div>

Ryan Patterson commented on Keke's post 8 days

I can't say for sure why the options set in _settings.scss aren't working on all browsers, but you could hide these arrows manually in css using: 
.dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a::after {
display: none;
}
You may want to use css media queries if you only want to apply this to certain screen sizes. 
as far as changing the color, it's same thing, you can do manually in css/sass using: 
.dropdown.menu.medium-horizontal > li > a {
color: [insert rgb, hex or color variable];
}
*Note - your link color is set to red. But if you wanted to set the navigation links to a different color. I would add a unique ID or class to the navigation menu, then use that to target with CSS. 
Just as a side note, I see you're not using many html5 semantic tags. I would suggest putting your header content inside a header tag <header> and putting the navigation menu's code inside a nav tag <nav>. Then use landmark roles for better accessibility. 
HTML5 Semantic Tags: https://www.w3schools.com/html/html5_semantic_elements.asp
Landmark Roles: https://www.w3.org/TR/wai-aria-practices/examples/landmarks/HTML5.html

Ryan Patterson commented on SD Mattos's post 8 days

This is a pretty common issue and is known as FOUC or flash of unstyled content. As you may know, the JS is one of the last things to load (right before the closing body tag), because it blocks other elements from loading until it's complete. Otherwise, it would appear that the page is taking longer to load. The JS is what is triggering those elements to be hidden on given screen sizes. 
Zurb provides workarounds for FOUC. Usually you can fix by adding a couple lines of SASS/CSS to explicitly hide when the page loads. Because CSS loads in the head, it will apply those styles before the html of the top-bar is loaded. 
You can see an example of their workaround at https://foundation.zurb.com/sites/docs/responsive-navigation.html#preventing-fouc . This might help you out, if FOUC is the issue. However, can't speak to why is only happening on Chrome. I'm not familiar with the intricacies of each browser. 

Ryan Patterson commented on Julian's post about 1 month

Can't go wrong with WordPress, however, Foundation isn't built into WordPress. You would have to incorporate it into a theme. Luckily, there are already quite a few Wordpress themes built on Foundation. I would recommend JointsWP http://jointswp.com/

Ryan Patterson commented on Dave Styp's post about 1 month

Hi Paolo,
It seems there are many people having the same issue as you. V 4.7 works, but 4.8 and 4.9 give a similar error to what you are getting. Unfortunately, I have not seen one reply from someone at CF7 in the WP support forums about this issue. 
One person was able to fix by flushing the permalinks after upgrading to 4.9, but did not work for all. So if re-saving your permalink structure does not work,  looks like your best bet is to stick with 4.7 and hope that CF7 dev's fix whatever the issue is on the next update. 
Sorry couldn't be more help. 

Ryan Patterson commented on Dave Styp's post about 1 month

 
OK, so I know this is an old question, and not really suited for this support forum as it's more of a Wordpress question than Foundation, but since I use JointsWP and CF7 on almost every project I do, I'll see if I can help Paolo out.
Have you tried disabling all other plugins and checked? if that doesn't work try enabling all plugins, but then switching to twentysixteen theme. If all plugins are enabled, and CF7 works with a different theme, then it might be a JointsWP issue. But if I were a betting man, I would say it's probably either a conflict with another plugins, any custom scripts you may have added, or maybe something with server environment. I have been noticing a lot of weirdness with multiple plugins since upgrading the PHP 7.1. 

Posts Followed







  • 5
    Replies
  • CMS for Foundation

    By Julian

    cms

    So looking a developing with Foundation and want to know what the best CMS is for basic website edits by users? I don't need to bloat of wordpress or the ability to add multiple pages etc. Cheers

    Last Reply by Val Ery about 1 month ago





Following

    No Content

Followers

My Posts

My Comments

You commented on Shelley's post about 3 hours

@john kennedy, 
Shelley had mentioned in her original question that she was using just the CSS version, so won't be able to make the changes you suggested. Since the building block example is using flex grid, some of those classes won't work with her float grid. That is why I simply suggested she use the standard breakpoint classes. 
Sorry, really not trying to be a know it all or anything like that. If she had been using SASS, then your answer would be spot on! You did a good job at explaining it so that if she were using SASS, could easily fix her issue. 
And my bad, I should have mentioned in my original reply that some of the classes she was using, specifically .[size]-unstack won't work with the float grid. 

You commented on Hannes Lehner's post about 3 hours

Most likely the issue is the new version of Foundation uses the XY grid by default, which uses different css classes than the float or flex grid. If you are using the SASS version, there is a file where you can chose which grid type your site is using. I apologize, I don't have a new version ready to find that file name.
If you are using SASS, do a search for 
@include foundation-xy-grid-classes;
and comment that out. You should then see similar includes for the flex and float grids. Just uncomment out which grid type you are using. 
Like I said, I'm just assuming this is your issue, so could be wrong.

You commented on Adrian Bengtson's post about 8 hours

As someone who has been using Foundation since F3, I feel Zurb does a pretty good job at keeping up with bug fixes and making general improvements. Especially seeing as they distribute it for free. 
I have no idea why there hasn't been any github commits recently. Maybe they are focusing most of their current resources on F7, which I heard is on it's way. But I'm just speculating. 
Now, I will admit, I do feel Zurb is kind of slipping in terms of this forum. I see so many questions go unanswered by anyone from Zurb. I know some get answered by other forum members, but kind of expected them to be more involved than they have been. And as you mentioned, the spam in this forum is getting out of control and it doesn't seem like anything is being done about it. 
So in my opinion, Zurb has always seemed committed to Foundation, just not the Foundation forums. 

You commented on Ben Siegfried's post about 8 hours

I would wrap each row inside a div or section tag (if they are logical sections) and then apply the color and padding to those wrapping div. Something like:
 
<section class="some-class-name">
<div class="row">
....
</div>
</section>
<section class="some-other-class">
<div class="row">
....
</div>
</section>
 Then just use the section classes to apply whatever background color and padding you need. This will also let you have a full-width background while still keeping the content inside the row width. 

You commented on Shelley's post about 8 hours

I would suggest specifying the width of the columns using the breakpoint classes. 
Try this:
 
From the .row div, remove .medium-unstack, then on each column add .medium-4 .columns. This will display those columns in a 3 column layout for medium and up, but then stack on small. 
So would look something like this:
 
<div class="row">
<div class="medium-4 columns"></div>
<div class="medium-4 columns"></div>
<div class="medium-4 columns"></div>
</div>

You commented on Keke's post 8 days

I can't say for sure why the options set in _settings.scss aren't working on all browsers, but you could hide these arrows manually in css using: 
.dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a::after {
display: none;
}
You may want to use css media queries if you only want to apply this to certain screen sizes. 
as far as changing the color, it's same thing, you can do manually in css/sass using: 
.dropdown.menu.medium-horizontal > li > a {
color: [insert rgb, hex or color variable];
}
*Note - your link color is set to red. But if you wanted to set the navigation links to a different color. I would add a unique ID or class to the navigation menu, then use that to target with CSS. 
Just as a side note, I see you're not using many html5 semantic tags. I would suggest putting your header content inside a header tag <header> and putting the navigation menu's code inside a nav tag <nav>. Then use landmark roles for better accessibility. 
HTML5 Semantic Tags: https://www.w3schools.com/html/html5_semantic_elements.asp
Landmark Roles: https://www.w3.org/TR/wai-aria-practices/examples/landmarks/HTML5.html

You commented on SD Mattos's post 8 days

This is a pretty common issue and is known as FOUC or flash of unstyled content. As you may know, the JS is one of the last things to load (right before the closing body tag), because it blocks other elements from loading until it's complete. Otherwise, it would appear that the page is taking longer to load. The JS is what is triggering those elements to be hidden on given screen sizes. 
Zurb provides workarounds for FOUC. Usually you can fix by adding a couple lines of SASS/CSS to explicitly hide when the page loads. Because CSS loads in the head, it will apply those styles before the html of the top-bar is loaded. 
You can see an example of their workaround at https://foundation.zurb.com/sites/docs/responsive-navigation.html#preventing-fouc . This might help you out, if FOUC is the issue. However, can't speak to why is only happening on Chrome. I'm not familiar with the intricacies of each browser. 

You commented on Julian's post about 1 month

Can't go wrong with WordPress, however, Foundation isn't built into WordPress. You would have to incorporate it into a theme. Luckily, there are already quite a few Wordpress themes built on Foundation. I would recommend JointsWP http://jointswp.com/

You commented on Dave Styp's post about 1 month

Hi Paolo,
It seems there are many people having the same issue as you. V 4.7 works, but 4.8 and 4.9 give a similar error to what you are getting. Unfortunately, I have not seen one reply from someone at CF7 in the WP support forums about this issue. 
One person was able to fix by flushing the permalinks after upgrading to 4.9, but did not work for all. So if re-saving your permalink structure does not work,  looks like your best bet is to stick with 4.7 and hope that CF7 dev's fix whatever the issue is on the next update. 
Sorry couldn't be more help. 

You commented on Dave Styp's post about 1 month

 
OK, so I know this is an old question, and not really suited for this support forum as it's more of a Wordpress question than Foundation, but since I use JointsWP and CF7 on almost every project I do, I'll see if I can help Paolo out.
Have you tried disabling all other plugins and checked? if that doesn't work try enabling all plugins, but then switching to twentysixteen theme. If all plugins are enabled, and CF7 works with a different theme, then it might be a JointsWP issue. But if I were a betting man, I would say it's probably either a conflict with another plugins, any custom scripts you may have added, or maybe something with server environment. I have been noticing a lot of weirdness with multiple plugins since upgrading the PHP 7.1. 

Posts Followed

Following

  • No Content

Followers