Hi,
I have found a solution for the missing responsive content alignment classes.
It allows to justify content columns inside a parent row, on left, right or center, depending of the media query (the screen size).
Here is the SCSS.
PS : @RafiBenkual : it should be a good idea to include it in the next Foundation Release.
 
//ZFEX : Create breakpoint specific justify styles, missing in foundation by default.
@each $breakpoint in $breakpoint-classes {
@if $breakpoint == small {
// Do nothing
} @else {
@include breakpoint($breakpoint) {
//provides ability to use .medium-align-left, .large-align-left, and so on..., in order to override .align-center OR .align-right
.#{$breakpoint}-align-left {
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
}
//provides ability to use .medium-align-center, .large-align-center, and so on..., in order to override .align-left OR .align-right
.#{$breakpoint}-align-center {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
//provides ability to use .medium-align-right, .large-align-right, and so on..., in order to override .align-center OR .align-left
.#{$breakpoint}-align-right {
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
}
}
}

Hi,
I have found a solution for the missing responsive content alignment classes.
It allows to justify content columns inside a parent row, on left, right or center, depending of the media query (the screen size).
Here is the SCSS.
PS : @RafiBenkual : it should be a good idea to include it in the next Foundation Release.
 
//ZFEX : Create breakpoint specific justify styles, missing in foundation by default.
//***********************
//https://foundation.zurb.com/sites/docs/flex-grid.html
//https://foundation.zurb.com/sites/docs/flexbox-utilities.html
@each $breakpoint in $breakpoint-classes {
@if $breakpoint == small {
// Do nothing
} @else {
@include breakpoint($breakpoint) {
//provides ability to use .medium-align-left, .large-align-left, and so on..., in order to override .align-center OR .align-right
.#{$breakpoint}-align-left {
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
}
//provides ability to use .medium-align-center, .large-align-center, and so on..., in order to override .align-left OR .align-right
.#{$breakpoint}-align-center {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
//provides ability to use .medium-align-right, .large-align-right, and so on..., in order to override .align-center OR .align-left
.#{$breakpoint}-align-right {
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
}
}
}

I Would appreciate an update on this, too... I need to open a reveal sometimes with escOnClose:true, other times with escOnClose:false...

With Foundation 6.4.3, you have to :
1. Re-Init the Abide plugin for the Form containing the dynamically created fields, like this :
Foundation.reInit($('form#TheFormContainingAddedFields'));
2. Then, you need to Re-Bind the 'forminvalid.zf.abide' and 'formvalid.zf.abide' events if you have such ones, like this :
$('form#TheFormContainingAddedFields')
.on('forminvalid.zf.abide', function(e){
alert('invalid');
})
.on('formvalid.zf.abide', function(e){
alert('valid');
});
 

If you need to manually expand all the parents of the Active submenu, you can use this code (tested with Foundation 6.4.3) :
$('.menu.vertical.accordion-menu[data-accordion-menu] .is-submenu-item.is-accordion-submenu-item > a.current').parents().find('.is-accordion-submenu-parent > a').trigger('click');

Thanks to the @Will Fairhurst answser, it is possible to achieve the desired result : Thanks !
Example :
<div class="row">
<div class="column small-12 medium-shrink">
ICON
</div>
<div class="column small-12 medium-expand">
<h1>TITLE</h1>
</div>
</div>

Hi,
I have opened a pull request on this topic : https://github.com/zurb/foundation-sites/pull/9896

I hope this component will manage the overflow-y property, in order to remain sticky, because that's such a pain having to put a huuuuge quantity of javascript hacks into it, to get the actual ViewPort ScrollTop, move the offcanvas, and listen for this on every Dom scroll event.. So let's wait and see the new one ! Hope the docs on zurb website will be...well...documented !

+1 Rafi Bankual :-)

Hi again Brian,

Your code fixed a little bug that I had, like a charm !

As an explanation, my problem was that when I activated the stored tab from my variable (stored_variable_tabToActivate), sometimes the tab content of the previous tab was still displayed. :-/
So I was obliged to create a "poor-quality fix" (not considering the "aria" properties, but only dealing with the "is-active" class :

$("[data-tabs-content='"+TabsObjectId+"'] .tabs-panel:not(#"+in_tabToActivate+")").removeClass("is-active");

Your code was helpful to "PROPERLY reset" the "aria-hidden" property, the "aria-selected" property and the "is-active" class on Dropdown close, this way :

   $(document).bind("hide.zf.dropdownmenu", function() {
      $(".tabs-title").removeClass('is-active').find('[role="tab"]').attr({'aria-selected':'false'});
      $(".tabs-panel").removeClass('is-active').attr({'aria-hidden':'true'});
      //I've commented this line, as I already manage to select the tab another way
      //$("#example-vert-tabs").foundation('selectTab',"panel1v");
    });

Doing so is much more clean, and the Good consequence is that I was able to get rid of my "pooooor fix", and finally comment it, like this :

//$("[data-tabs-content='"+TabsObjectId+"'] .tabs-panel:not(#"+in_tabToActivate+")").removeClass("is-active");

Thanks again Brian ! I'm always digging deeper in the .JS source files of foundation to get some documentation, but sometimes, my fixes are not so good... you helped me to manage it in a cleaner way ! :-)

I sincerely wish you a very good new 2016 year !