Merge branch 'master-6.5.3' into master-new

# Conflicts:
#	CONTRIBUTING.md
#	README.md
#	docs/pages/abide.md
#	docs/pages/grid.md
#	docs/pages/installation.md
#	docs/pages/motion-ui.md
#	docs/pages/prototyping-utilities.md
#	docs/pages/sass.md
#	docs/partials/footer.html
#	js/foundation.abide.js
#	js/foundation.magellan.js
#	package-lock.json
#	package.json
#	yarn.lock

diff --cc docs/layout/default.html
Simple merge

diff --cc docs/pages/xy-grid.md
index c5db80c5466e92b97455f8dba447256310daed9d,f979e2e5ac8b798ec318d35e9492eb6a3e422b22..b2517f7649625dd5c0443d78a9db3cef8713eb0c
--- 1/docs/pages/xy-grid.md
--- 2/docs/pages/xy-grid.md
+++ b/docs/pages/xy-grid.md
@@@ -81,12 -81,12 +81,16 @@@ The structure of XY grid uses `.grid-x`
  ## Gutters
  
  The defining feature of the XY grid is the ability to use margin AND padding grids in harmony.
- To define a grid type, simply set `.grid-margin-x` or `.grid-padding-x` on the grid.
+ To define a grid type, simply set `.grid-margin-x`/`.grid-margin-y` or `.grid-padding-x`/`.grid-padding-y` on the grid.
+ 
+ <p>
+   <a class="" data-open-video="5:43"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+ </p>
  
 +<p>
 +  <a class="" data-open-video="5:43"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 +</p>
 +
  <div class="docs-codepen-container">
  <a class="codepen-logo-link" href="https://codepen.io/ZURBFoundation/pen/owvqYp?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
  </div>

diff --cc test/javascript/components/offcanvas.js
Simple merge