adds missing video and deep links

diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index f74a6e9e5b3caea753a446ecdc5d22a8c4bd83c1..5108978e61058f215c5dfd4da3ea4e89a1516e77 100644 (file)
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@ -202,7 +202,6 @@ a#notice {
   }
 }
 
-
 a[data-open-video] {
   padding: 0.3rem 0;
   transition: all 0.25s ease-in;

diff --git a/docs/pages/badge.md b/docs/pages/badge.md
index 872cc729d61a4b93ad6a908432db1d8b1f65bb99..ea7f832f9fc6b82d796af830866db7063264018b 100644 (file)
--- a/docs/pages/badge.md
+++ b/docs/pages/badge.md
@@ -2,6 +2,7 @@
 title: Badge
 description: The badge is a basic component that displays a number. It's useful for calling out a number of unread items.
 sass: scss/components/_badge.scss
+video: '_S_OO9NiWQ8'
 ---
 
 ## Basics
@@ -9,7 +10,7 @@ sass: scss/components/_badge.scss
 Add the `.badge` class to an element to create a badge. In the below example, we're using `<span>`, but any tag will work fine.
 
 <p>
-  <a class="" data-open-video="0:39"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+  <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>
 
 <div class="docs-codepen-container">
@@ -42,7 +43,7 @@ Finally, the content itself might need more context for users that use screen re
 Add color classes to give badges additional meaning.
 
 <p>
-  <a class="" data-open-video="0:39"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+  <a class="" data-open-video="2:05"><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">
@@ -70,7 +71,7 @@ $badge-palette: map-remove($foundation-palette, (
     primary,
     secondary
 )) !default;
-```  
+```
 
 Or you can add more colors to the default palette.
 

diff --git a/docs/pages/installation.md b/docs/pages/installation.md
index 6ebfe26d83b27074895a3c80a6cf4a21ecac0433..07fbade7c648dd8c7968d020e23dae1960aa99fc 100644 (file)
--- a/docs/pages/installation.md
+++ b/docs/pages/installation.md
@@ -80,6 +80,11 @@ To create compressed, production-ready assets, run `npm run build`.
 
 ## CSS Download
 
+<div class="responsive-embed widescreen mb1">
+  <iframe width="560" height="315" src="https://www.youtube.com/embed/lFrpnk0Oo_8" frameborder="0" allowfullscreen></iframe>
+  <a id="docs-mobile-video-link" class="docs-mobile-video" target="_blank" href="https://youtu.be/lFrpnk0Oo_8"></a>
+</div>
+
 If you aren't into Sass, we have a starter template with compiled CSS and JavaScript, as well as a starting `index.html` file for you to hack on. Just unzip and get coding!
 
 <a href="http://foundation.zurb.com/sites/download" class="large button">Download CSS Version</a>

diff --git a/docs/pages/label.md b/docs/pages/label.md
index 4d9d205fc6eb4ffe481f3b8b4ad1d9f9a6f18e86..e0b8d60bad6a543ff2ddbdd2f3491d58f1df1e92 100644 (file)
--- a/docs/pages/label.md
+++ b/docs/pages/label.md
@@ -2,6 +2,7 @@
 title: Label
 description: Labels are useful inline styles that can be dropped into body copy to call out certain sections or to attach metadata. For example, you can attach a label that notes when something was updated.
 sass: scss/components/_label.scss
+video: '_S_OO9NiWQ8'
 ---
 
 ## Basics
@@ -9,7 +10,7 @@ sass: scss/components/_label.scss
 Add the `.label` class to an element to create a label. In the below example, we're using `<span>`, but any tag will work fine.
 
 <p>
-  <a class="" data-open-video="0:39"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+  <a class="" data-open-video="3:52"><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">
@@ -44,7 +45,7 @@ If an element is described by multiple labels, place multiple IDs inside of `ari
 Add color classes to give labels additional meaning.
 
 <p>
-  <a class="" data-open-video="0:39"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+  <a class="" data-open-video="4:04"><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">
@@ -72,7 +73,7 @@ $label-palette: map-remove($foundation-palette, (
     primary,
     secondary
 )) !default;
-```  
+```
 
 Or you can add more colors to the default palette.
 
@@ -108,10 +109,6 @@ The text color for each label class is determined by either `$label-color` or `$
 
 An icon can be dropped into a label just fine. We're using the [Foundation icon font](http://zurb.com/playground/foundation-icon-fonts-3) here, but any icon fonts or image-based icons will work fine.
 
-<p>
-  <a class="" data-open-video="0:39"><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/IamManchanda/pen/dWKrgb?editors=1100" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
 </div>

diff --git a/docs/pages/sass-mixins.md b/docs/pages/sass-mixins.md
index 9f91d6ec195ddf0f3161cd36c26946a88f9f666b..51144ca8f94ff5dd14b41d39eb07cb48c47185ad 100644 (file)
--- a/docs/pages/sass-mixins.md
+++ b/docs/pages/sass-mixins.md
@@ -2,6 +2,7 @@
 title: Sass Mixins
 descriptions: Mixins allow us to reuse code in various parts of the framework. Foundation includes mixins for clearfixes, visibility, icons, shapes, and more.
 sass: scss/util/_mixins.scss
+video: 'aiO5nFepdcw'
 ---
 
 ## Importing

diff --git a/docs/pages/starter-projects.md b/docs/pages/starter-projects.md
index b208d27014de43d044d0532a60770f76b547deff..051402d28d92496e0782a05a0e4fee67948bbe43 100644 (file)
--- a/docs/pages/starter-projects.md
+++ b/docs/pages/starter-projects.md
@@ -8,6 +8,11 @@ Our project templates give you a solid... *Foundation* on which to start a new p
 
 ## Basic Template
 
+<div class="responsive-embed widescreen mb1">
+  <iframe width="560" height="315" src="https://www.youtube.com/embed/ofSZUKkjPRY" frameborder="0" allowfullscreen></iframe>
+  <a id="docs-mobile-video-link" class="docs-mobile-video" target="_blank" href="https://youtu.be/ofSZUKkjPRY"></a>
+</div>
+
 Our basic project template is a lot like the Sass template from Foundation 5. The project has a flat directory structure and only compiles Sass. It's great if you want to quickly put together a simple project and only need to use Sass.
 
 You can set up a basic project through the Foundation CLI with this command:

diff --git a/docs/pages/style-sherpa.md b/docs/pages/style-sherpa.md
index 5f2d65b7461c00717741793e9d1b655b356e7591..294e3ba004098436ae8e4bea8c57dec614e120c1 100644 (file)
--- a/docs/pages/style-sherpa.md
+++ b/docs/pages/style-sherpa.md
@@ -4,6 +4,7 @@ description: Bundled with the ZURB Template, Style Sherpa makes it easy to creat
 library:
   github: https://github.com/zurb/style-sherpa
   docs: https://github.com/zurb/style-sherpa
+video: 'paIqrjCm9_k'
 ---
 
 Style guides are a critical component of a CSS codebase, especially one used by many people. It's important that everyone on a team knows how to build a component. Style guides are that documentation. The docs you're reading right now are a style guide of sorts, for the core Foundation styles.
@@ -14,6 +15,10 @@ Style guides are a critical component of a CSS codebase, especially one used by
 
 ## Usage
 
+<p>
+  <a class="" data-open-video="1: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>
+
 The ZURB Template includes the folder `src/styleguide/`, which contains both of the files you need to build your style guide. Like everything else in the ZURB Template, just edit the files and your changes will instantly be compiled
 
 One is a Markdown file, `index.md`. This file contains the contents of your style guide.
@@ -24,6 +29,10 @@ The other is a Handlebars template, `template.html`. The contents of your style
 
 ## Writing Content
 
+<p>
+  <a class="" data-open-video="5: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>
+
 The style guide is divided into sections. Generally, each component in your codebase&mdash;think buttons, panels, modals, form controls, and so on&mdash;will have its own section.
 
 Sections are titled with a Markdown heading, which is a single hash mark:
@@ -50,6 +59,10 @@ Lorem ipsum dolor sit amet, `<form>` elit, sed do eiusmod tempor incididunt ut l
 
 ### Code Samples
 
+<p>
+  <a class="" data-open-video="6: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>
+
 A style guide should always have HTML examples, which explain how to build something. To create a code block in Markdown, surround the code with three backticks. You can also set the language of the code block after the first set of backticks. Style Sherpa will color the syntax for you in the final output.
 
     ```html
@@ -72,6 +85,10 @@ The output looks something like this:
 
 ## Changing the Template
 
+<p>
+  <a class="" data-open-video="3:32"><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>
+
 The ZURB Template includes a minimal boilerplate for your style guide, but you're free to customize it however you want.
 
 The boilerplate uses Foundation's Vertical Menu&mdash;one item is made for each section. Here's what the Handlebars code looks like:

diff --git a/docs/pages/toggler.md b/docs/pages/toggler.md
index 1b76076cbd1f524cead6c769f0fc5b66e1e0f3a4..86c2e91aa5bc9248296ee0d5880f725fd2d3001e 100644 (file)
--- a/docs/pages/toggler.md
+++ b/docs/pages/toggler.md
@@ -3,6 +3,7 @@ title: Toggler
 description: Toggler makes it easy to toggle CSS or animate any element with a click.
 js: js/foundation.toggler.js
 mui: true
+video: 'wHpZCrpKlBc'
 ---
 
 ## Toggle a CSS class
@@ -10,7 +11,7 @@ mui: true
 To setup a class toggle, start by adding the attribute `data-toggler` to an element. The value of `data-toggler` is the class you want to toggle. Also give the element a unique ID so it can be targeted.
 
 <p>
-  <a class="" data-open-video="0:27"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+  <a class="" data-open-video="0:53"><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">
@@ -49,7 +50,7 @@ Instead of toggling a class, you can also toggle visibility. When toggled, the e
 
 Instead of `data-toggler`, add the attribute `data-animate`. The value of the attribute is the *in animation* you want, followed by the *out animation*.
 <p>
-  <a class="" data-open-video="0:27"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+  <a class="" data-open-video="3:49"><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">
@@ -71,7 +72,7 @@ Instead of `data-toggler`, add the attribute `data-animate`. The value of the at
 
 To create an element that can be closed once, add the attribute `data-closable`. Then add a click trigger inside the element using `data-close`.
 <p>
-  <a class="" data-open-video="0:27"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+  <a class="" data-open-video="7:42"><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">
@@ -92,7 +93,7 @@ To create an element that can be closed once, add the attribute `data-closable`.
 `data-closable` can be configured with a custom exit animation.
 
 <p>
-  <a class="" data-open-video="0:27"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+  <a class="" data-open-video="9:35"><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">
@@ -113,7 +114,7 @@ To create an element that can be closed once, add the attribute `data-closable`.
 The `data-toggle` attribute only toggles classes/visibility on click. You can also have the toggle fire when an element is *focused* or *unfocused* using `data-toggle-focus`.
 
 <p>
-  <a class="" data-open-video="0:27"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+  <a class="" data-open-video="10:27"><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">
@@ -134,7 +135,7 @@ The `data-toggle` attribute only toggles classes/visibility on click. You can al
 
 The `data-toggle`, `data-close`, and `data-open` attributes can now target multiple elements! The syntax is simple; just pass a *space* separated list to the `data-x` attribute like so:
 <p>
-  <a class="" data-open-video="0:27"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+  <a class="" data-open-video="12:52"><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">