Menu icon Foundation

My Posts

  • 7
    Replies
  • Sticky footer in Foundation 6

    By Nick Shook

    footer

    With the flex grid, is there an easier way? I have seen posts like https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ that use CSS Flex attributes. Is the solution to use http://foundation.zurb.com/sites/docs/sticky.html with a top a... (continued)

    Last Reply by Nick Shook over 3 years ago


My Comments

Nick Shook commented on Scott Koons's post over 3 years

Stealthworker.com is using foundation 6, but I can def use some design help! Message me if you're available.

Nick Shook commented on Scott Koons's post over 3 years

Stealthworker.com is using foundation 6, but I can def use some design help! Message me if you're available.

Nick Shook commented on Ryan Brady's post over 3 years

* be more framework agnostic now that ES6 has a nice way of importing code.

Nick Shook commented on Ryan Brady's post over 3 years

hey all,
super late post but stealthworker.com uses both Ember and Foundation 6. I found that using the didRender callback works nicely with Foundation's plugins, e.g. here is the code I use for our navigation component which uses the dropdown/drilldown menus (depending if you're on a mobile or not)
export default Ember.Component.extend({
layout,
classNames: ['sw-navigation'],
didInsertElement() {
this._super(...arguments);
$('.sw-navigation').foundation();
},
didRender() {
new Foundation.DropdownMenu($('.dropdown.menu'));
new Foundation.Drilldown($('.drilldown.menu'));
}
});
fwiw, I'd love to see Foundation 

Nick Shook commented on Nick Shook's post over 3 years

http://caniuse.com/#feat=flexbox for browser support
And as far as I'm concerned ie8 is officially deprecated!

Nick Shook commented on Nick Shook's post over 3 years

Hi Jeff,

Do you have the flex grid enabled from foundation 6? I did this on Stealthworker.com if you're interested in seeing it in action.

Hope this helps!

Nick Shook commented on Nick Shook's post almost 4 years

I was able to answer my own question,.

If you have html like:

<body>
  <div class='content'>
     # some content
   </div>
   <footer>
     # some footer
   </footer>
</body>

You'll need the following sass:

body                                                                                             
  height: auto !important                                                                        
  display: flex                                                                                  
  min-height: 100vh                                                                              
  flex-direction: column                                                                         
.content                                                                                         
  flex: 1 0

What took me a while to figure out is that there is an automatic setting of body { height: 100% } that needs to be overriden for this to work.

Nick Shook commented on Nick Shook's post almost 4 years

yes, exactly I have some pages w/ a lot of content and some pages with very little. Does using the vh property fall in line w/ the flex-grid?

Posts Followed


Following

    No Content

Followers

My Posts


My Comments

You commented on Scott Koons's post over 3 years

Stealthworker.com is using foundation 6, but I can def use some design help! Message me if you're available.

You commented on Scott Koons's post over 3 years

Stealthworker.com is using foundation 6, but I can def use some design help! Message me if you're available.

You commented on Ryan Brady's post over 3 years

* be more framework agnostic now that ES6 has a nice way of importing code.

You commented on Ryan Brady's post over 3 years

hey all,
super late post but stealthworker.com uses both Ember and Foundation 6. I found that using the didRender callback works nicely with Foundation's plugins, e.g. here is the code I use for our navigation component which uses the dropdown/drilldown menus (depending if you're on a mobile or not)
export default Ember.Component.extend({
layout,
classNames: ['sw-navigation'],
didInsertElement() {
this._super(...arguments);
$('.sw-navigation').foundation();
},
didRender() {
new Foundation.DropdownMenu($('.dropdown.menu'));
new Foundation.Drilldown($('.drilldown.menu'));
}
});
fwiw, I'd love to see Foundation 

You commented on Nick Shook's post over 3 years

http://caniuse.com/#feat=flexbox for browser support
And as far as I'm concerned ie8 is officially deprecated!

You commented on Nick Shook's post over 3 years

Hi Jeff,

Do you have the flex grid enabled from foundation 6? I did this on Stealthworker.com if you're interested in seeing it in action.

Hope this helps!

You commented on Nick Shook's post almost 4 years

I was able to answer my own question,.

If you have html like:

<body>
  <div class='content'>
     # some content
   </div>
   <footer>
     # some footer
   </footer>
</body>

You'll need the following sass:

body                                                                                             
  height: auto !important                                                                        
  display: flex                                                                                  
  min-height: 100vh                                                                              
  flex-direction: column                                                                         
.content                                                                                         
  flex: 1 0

What took me a while to figure out is that there is an automatic setting of body { height: 100% } that needs to be overriden for this to work.

You commented on Nick Shook's post almost 4 years

yes, exactly I have some pages w/ a lot of content and some pages with very little. Does using the vh property fall in line w/ the flex-grid?

Posts Followed


Following

  • No Content

Followers

  • No Content