Menu icon Foundation

Developer

My Posts





My Comments

Roy Six commented on Gregor's post 6 days

Hi, going by the code you posted in the first post, you should contain the images into their own individual cell divs (you're making the images cells themselves). Here's a codepen with the markup corrected to how I would write it, so that all 12 images sit on one line with no breaks. 
https://codepen.io/sixs/pen/MEqvRM
Also, I'm not sure what the intent was with the first div small-centered in your code, but if you want to make everything centered, you'd add a grid-container (which defines a max-width) and contain the grid-x.

Roy Six commented on Craig Wright's post 10 days

Indeed Nigel, Nik's grid-frame code is almost there, but needs some modifications to work as we want. There's also another way: we could go lower-level and use Foundation's vanilla flexbox utility classes. So, these are the two methods so far with codepens and notes showing how they can be used to make the footer stay pushed down. 
1. Foundation Vanilla Flexbox Utility Classes

Codepen Example
Notes: Requires two modifications by making .flex-container have a height of 100vh and adding a .flex-child-no-shrink class to prevent divs from shrinking

 
2. Foundation Grid-Frame

Codepen Example
Notes: Requires three modifications by making .grid-container have overflow for the scrollbar to be visible and adding a .cell.no-shrink to prevent shrinking and .cell.grow class to make the main content div grow/expand

(Sorry, I would link to the docs, but I'm afraid I'll get flagged with too many links.)
It seems this is still being worked on by the developers and we should continue to revisit this to see if they add more classes that will allow for no modifications.

Roy Six commented on Pratiba Premkumar's post 10 days

Can you show us some code (link us to the website or post a codepen)? Are you using dropdown submenus?
Foundation's (v6.4.2) dropdown submenu width is set in the following CSS, but it only applies a min-width (the computed width ends up being auto, which can be overridden), so I'm not sure why your submenus are so wide without looking at the code:
.is-dropdown-submenu {
position: absolute;
top: 0;
left: 100%;
z-index: 1;
display: none;
min-width: 200px;
border: 1px solid #cacaca;
background: #fefefe;
}
 

Roy Six commented on Ron Huppert's post 18 days

I haven't experienced this, but I recently started to make the Foundation buttons have a border-radius of 3px so they're at least rounded a tiny bit. This was more so for aesthetics, but some people may still be adjusting to the completely rectangle buttons often found in flat design. I'd maybe consider adding a "join" icon preceding the text in the button, but I would not add animations since it could annoy users. Without having a chance to look at it, I'm guessing people are seeing your button, but aren't realizing it's a button -- otherwise, I'd suggest looking at the overall design of the page itself and placement/prominence of the button on small / medium / large screens.

Roy Six commented on Wiechert Hooghwinkel's post 25 days

Hi Wiechert, for the codepen you should go into the JS settings (gear icon) and add external JS for jQuery first (place it before foundation.min.js). And in the internal JS, when you reference $("top-bar"),  change it so you reference the class with a leading period "." or create a variable and reference the variable if you will be using it multiple times.
// Reference top-bar by class:
$(".top-bar").removeClass...

// Or reference top-bar by variable:
var topbar = $(".top-bar");
$(topbar).removeClass...
 

Roy Six commented on Wiechert Hooghwinkel's post about 1 month

Glad to hear Wiechert. I would start using the xy grid for sure, it is now the default grid and I think what the developers want us to move to in the future.
what-input.js is mainly for differentiating between keyboard and mouse input, and I think foundation uses it for styling purposes to only give outlines to inputs when you use keyboard (e.g. focus) and not the mouse click (according to this post). I guess it's really an optional thing and not needed for core foundation.
Happy developing!

Roy Six commented on Craig Wright's post about 1 month

Hi Craig, there are many ways to keep the footer pushed down to the bottom, but I would recommend using Flexbox CSS for this since flex is native CSS and doesn't require any tricks. Most modern browsers should support flex.
This is a small tutorial that keeps the footer down using flex CSS and uses a bare Foundation 6 layout with Off-Canvas Wrapper (if you're not using off-canvas, you can replace the "off-canvas-content" div with just a regular div "container").
Hope it helps.
 

Roy Six commented on Wiechert Hooghwinkel's post about 1 month

Hi Wiechert, it seems like you're using a default 6.4.2-complete download build, right? The complete build switched over to the xy-grid in recent versions, so definitely make sure you are using the xy-grid class names ("grid-container", "grid-x", "cell"), and not the legacy float grid classes ("row" "column"). In your codepen (first post), it's using row and column, so that's why I bring it up.
Also, your codepen isn't working right because it currently doesn't have any Foundation CSS or JS sources, so you should click the "gear" icons next to the CSS/JS sections to add them in.
Lastly, for "completeness," I think you're missing what-input.js for your Foundation JS includes, which should be found in the complete build under the vendor folder (but it's not needed to make the grid work).

Roy Six commented on Martin Holsten's post about 1 month

Indeed, it's not obvious, but Foundation by default will auto-focus the first anchor in the off-canvas when it opens. To stop this behavior, you can manually add an attribute called data-auto-focus and set it to false in your data-off-canvas div:
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-auto-focus="false">
 

Roy Six commented on Markus Lind's post about 2 months

Christoffer, apologies, I did it in a different way, so there was no need to adjust the flex on the grid-container, but I really like Yun's solution. My solution was similar to Alex's: I had an outer div that contained everything for background styling, and I had the grid-container contain the entire top-bar. However, I think Yun's solution is more elegant.
<div style="background-color: #e6e6e6;">
<div class="grid-container">
<div class="top-bar" style="background-color: inherit;">
<div class="top-bar-left">
Left Top Bar
</div>
<div class="top-bar-right">
Right Top Bar
</div>
</div>
</div>
</div>
 

Posts Followed





  • 9
    Replies
  • Whats wrong with my footer?

    By Wiechert Hooghwinkel

    footer

    Hi I have a simple horizontal lined footer which I used in an other layout before and which is not working any more in a new layout. I do not see what's wrong here maybe one of you guys can see the problem? It was supposed to line horizontal not vertical ... (continued)

    Last Reply by Roy Six about 1 month ago







Following

    No Content

Followers

My Posts

My Comments

You commented on Gregor's post 6 days

Hi, going by the code you posted in the first post, you should contain the images into their own individual cell divs (you're making the images cells themselves). Here's a codepen with the markup corrected to how I would write it, so that all 12 images sit on one line with no breaks. 
https://codepen.io/sixs/pen/MEqvRM
Also, I'm not sure what the intent was with the first div small-centered in your code, but if you want to make everything centered, you'd add a grid-container (which defines a max-width) and contain the grid-x.

You commented on Craig Wright's post 10 days

Indeed Nigel, Nik's grid-frame code is almost there, but needs some modifications to work as we want. There's also another way: we could go lower-level and use Foundation's vanilla flexbox utility classes. So, these are the two methods so far with codepens and notes showing how they can be used to make the footer stay pushed down. 
1. Foundation Vanilla Flexbox Utility Classes

Codepen Example
Notes: Requires two modifications by making .flex-container have a height of 100vh and adding a .flex-child-no-shrink class to prevent divs from shrinking

 
2. Foundation Grid-Frame

Codepen Example
Notes: Requires three modifications by making .grid-container have overflow for the scrollbar to be visible and adding a .cell.no-shrink to prevent shrinking and .cell.grow class to make the main content div grow/expand

(Sorry, I would link to the docs, but I'm afraid I'll get flagged with too many links.)
It seems this is still being worked on by the developers and we should continue to revisit this to see if they add more classes that will allow for no modifications.

You commented on Pratiba Premkumar's post 10 days

Can you show us some code (link us to the website or post a codepen)? Are you using dropdown submenus?
Foundation's (v6.4.2) dropdown submenu width is set in the following CSS, but it only applies a min-width (the computed width ends up being auto, which can be overridden), so I'm not sure why your submenus are so wide without looking at the code:
.is-dropdown-submenu {
position: absolute;
top: 0;
left: 100%;
z-index: 1;
display: none;
min-width: 200px;
border: 1px solid #cacaca;
background: #fefefe;
}
 

You commented on Ron Huppert's post 18 days

I haven't experienced this, but I recently started to make the Foundation buttons have a border-radius of 3px so they're at least rounded a tiny bit. This was more so for aesthetics, but some people may still be adjusting to the completely rectangle buttons often found in flat design. I'd maybe consider adding a "join" icon preceding the text in the button, but I would not add animations since it could annoy users. Without having a chance to look at it, I'm guessing people are seeing your button, but aren't realizing it's a button -- otherwise, I'd suggest looking at the overall design of the page itself and placement/prominence of the button on small / medium / large screens.

You commented on Wiechert Hooghwinkel's post 25 days

Hi Wiechert, for the codepen you should go into the JS settings (gear icon) and add external JS for jQuery first (place it before foundation.min.js). And in the internal JS, when you reference $("top-bar"),  change it so you reference the class with a leading period "." or create a variable and reference the variable if you will be using it multiple times.
// Reference top-bar by class:
$(".top-bar").removeClass...

// Or reference top-bar by variable:
var topbar = $(".top-bar");
$(topbar).removeClass...
 

You commented on Wiechert Hooghwinkel's post about 1 month

Glad to hear Wiechert. I would start using the xy grid for sure, it is now the default grid and I think what the developers want us to move to in the future.
what-input.js is mainly for differentiating between keyboard and mouse input, and I think foundation uses it for styling purposes to only give outlines to inputs when you use keyboard (e.g. focus) and not the mouse click (according to this post). I guess it's really an optional thing and not needed for core foundation.
Happy developing!

You commented on Craig Wright's post about 1 month

Hi Craig, there are many ways to keep the footer pushed down to the bottom, but I would recommend using Flexbox CSS for this since flex is native CSS and doesn't require any tricks. Most modern browsers should support flex.
This is a small tutorial that keeps the footer down using flex CSS and uses a bare Foundation 6 layout with Off-Canvas Wrapper (if you're not using off-canvas, you can replace the "off-canvas-content" div with just a regular div "container").
Hope it helps.
 

You commented on Wiechert Hooghwinkel's post about 1 month

Hi Wiechert, it seems like you're using a default 6.4.2-complete download build, right? The complete build switched over to the xy-grid in recent versions, so definitely make sure you are using the xy-grid class names ("grid-container", "grid-x", "cell"), and not the legacy float grid classes ("row" "column"). In your codepen (first post), it's using row and column, so that's why I bring it up.
Also, your codepen isn't working right because it currently doesn't have any Foundation CSS or JS sources, so you should click the "gear" icons next to the CSS/JS sections to add them in.
Lastly, for "completeness," I think you're missing what-input.js for your Foundation JS includes, which should be found in the complete build under the vendor folder (but it's not needed to make the grid work).

You commented on Martin Holsten's post about 1 month

Indeed, it's not obvious, but Foundation by default will auto-focus the first anchor in the off-canvas when it opens. To stop this behavior, you can manually add an attribute called data-auto-focus and set it to false in your data-off-canvas div:
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-auto-focus="false">
 

You commented on Markus Lind's post about 2 months

Christoffer, apologies, I did it in a different way, so there was no need to adjust the flex on the grid-container, but I really like Yun's solution. My solution was similar to Alex's: I had an outer div that contained everything for background styling, and I had the grid-container contain the entire top-bar. However, I think Yun's solution is more elegant.
<div style="background-color: #e6e6e6;">
<div class="grid-container">
<div class="top-bar" style="background-color: inherit;">
<div class="top-bar-left">
Left Top Bar
</div>
<div class="top-bar-right">
Right Top Bar
</div>
</div>
</div>
</div>
 

Posts Followed

Following

  • No Content

Followers