Use pull request #10895 from ncoden/docs/new-videos-3 for v6.5.0

9d8ec91bf Adds XY Grid Video with links and Protoyping Utilities video with links

Signed-off-by: Nicolas Coden <nicolas@ncoden.fr>

diff --git a/docs/pages/prototyping-utilities.md b/docs/pages/prototyping-utilities.md
index c397b0fe1b491e00fa337b61b1f42fe002a40154..1bd5b2c882a827f9f2597358ca94f0a554fb3554 100644 (file)
--- a/docs/pages/prototyping-utilities.md
+++ b/docs/pages/prototyping-utilities.md
@@ -1,6 +1,7 @@
 ---
 title: Prototyping Utilities
 description: Quickly prototype layouts and UI with Foundation's Prototyping Utilities. These optional classes and mixins are great realizing your sketches and mockups into hi-fi coded prototype's ultra fast.
+video: Xhc_KUJMEuk
 sass:
   - scss/prototype/*.scss
 ---
@@ -111,6 +112,10 @@ These `.radius`, `.rounded`, `.bordered` & `.shadow` classes can be used indepen
        **Sass Tip**: You can use [Shadow](#shadow) mixin to create something like `shadow-hover-focus`. [Codepen example](http://codepen.io/IamManchanda/pen/XMRMwo)
 </div>
 
+<p>
+  <a class="" data-open-video="1:06"><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>
+
 #### Buttons
 
 ```html_example
@@ -429,6 +434,10 @@ Generate spacing around elements with these easy to use margin classes.
        Please note that here below, `1 = 1 * $global-margin` and so on. By default `$global-margin` is equal to `1rem` which you can easily customize through [Sass Variables](#sass-variables).
 </div>
 
+<p>
+  <a class="" data-open-video="1:28"><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>
+
 #### Margin (All Sides)
 
 ```html

diff --git a/docs/pages/xy-grid.md b/docs/pages/xy-grid.md
index c4d2b225bfc7e1d6ef0c81b970a2d5077bf70683..9bb8014b6be49a4e4b7719665b647b741d722642 100644 (file)
--- a/docs/pages/xy-grid.md
+++ b/docs/pages/xy-grid.md
@@ -1,6 +1,7 @@
 ---
 title: XY Grid
 description: A fully reworked new grid system in v6.4 which has all the variety inbuilt in the form of multiple grid types which includes margin grid, padding grid, frame grid, block grid and vertical grid.
+video: tjjVKGeoi3A
 sass: scss/xy-grid/*.scss
 ---
 
@@ -49,6 +50,10 @@ You can manually generate the XY Grid with:
 
 The structure of XY grid uses `.grid-x`, `.grid-y`, and `.cell` as its base. Without [defining a gutter type](#gutters) the cells will simply split up the space without any gutters.
 
+<p>
+  <a class="" data-open-video="3:47"><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/gRYeMQ?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
 </div>
@@ -75,6 +80,10 @@ The structure of XY grid uses `.grid-x`, `.grid-y`, and `.cell` as its base. Wit
 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.
 
+<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>
@@ -259,6 +268,10 @@ The internal cells will shift automatically to provide spacing vertically rather
 
 You can also apply margin or padding with `.grid-margin-y` and `.grid-padding-y` to apply spacing to the top and bottom of cells.
 
+<p>
+  <a class="" data-open-video="10:31"><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="callout">
   <p>Please note for vertical grids to work, the grid needs a height. You can also use [grid frame](#grid-frame) to create a 100 vertical height grid (or 100% height if nested).</p>
 </div>
@@ -291,6 +304,11 @@ To start, add `.grid-frame` to the grid. This sets the grid to be 100vh (the ful
 </div>
 
 Here's an example of what you can do:
+
+<p>
+  <a class="" data-open-video="12:09"><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/MogrXG?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
 </div>