Add our existing foundation docs vids

diff --git a/docs/pages/accordion-menu.md b/docs/pages/accordion-menu.md
index f271fe06f3c3fcb76df4a680f0f547fa77325f0d..f0dadc7d4efe4e12157fb2dbd523c4395f0b7088 100644 (file)
--- a/docs/pages/accordion-menu.md
+++ b/docs/pages/accordion-menu.md
@@ -3,6 +3,7 @@ title: Accordion Menu
 sass: scss/components/_accordion-menu.scss
 js: js/foundation.accordionMenu.js
 description: Change a basic vertical Menu into a expandable accordion menu with the Accordion Menu plugin.
+video: yPGdaMRx60w
 ---
 
 ## Basics

diff --git a/docs/pages/breadcrumbs.md b/docs/pages/breadcrumbs.md
index da4b5a238f1eac5c0f09d6f5fb78729c907ca1b4..2d45bb8b38104a773108d9337a3812a995f47224 100644 (file)
--- a/docs/pages/breadcrumbs.md
+++ b/docs/pages/breadcrumbs.md
@@ -1,6 +1,7 @@
 ---
 title: Breadcrumbs
 description: Breadcrumbs come in handy to show a navigation trail for users clicking through your site.
+video: 'vQz-Kv5f_Ts'
 sass: scss/components/_breadcrumbs.scss
 ---
 

diff --git a/docs/pages/button-group.md b/docs/pages/button-group.md
index 315f9a33441a5f92d7679b55d4a14de4e8e50b6f..05f9008155e1ffd1775b4d0c3b70885c2a0c24e1 100644 (file)
--- a/docs/pages/button-group.md
+++ b/docs/pages/button-group.md
@@ -1,6 +1,7 @@
 ---
 title: Button Group
 description: Button groups are containers for related action items. They're great when you need to display a group of actions in a bar. These build off the button styles and work perfectly with the grid.
+video: PRjMAuvwX44
 sass: scss/components/_button-group.scss
 tags:
   - split button

diff --git a/docs/pages/button.md b/docs/pages/button.md
index 1b7318adf62ba0688c89342f669b38a8eee19a44..6bcdd4c23f287fdd8343d36684cd734df75f5f30 100644 (file)
--- a/docs/pages/button.md
+++ b/docs/pages/button.md
@@ -1,6 +1,7 @@
 ---
 title: Button
 description: Buttons are convenient tools when you need more traditional actions. To that end, Foundation has many easy to use button styles that you can customize or override to fit your needs.
+video: Qe8KHC2ZtMM
 sass: scss/components/_button.scss
 tags:
   - dropdown button

diff --git a/docs/pages/callout.md b/docs/pages/callout.md
index ec1363847ba4ab95d1b28ae6226f20d59b5babab..c75f241d67f4bea7476ee889aca6318d503e738e 100644 (file)
--- a/docs/pages/callout.md
+++ b/docs/pages/callout.md
@@ -1,6 +1,7 @@
 ---
 title: Callout
 description: Callouts combine panels and alerts from Foundation 5 into one generic container component.
+video: nUrs8Z8sTBg
 sass: scss/components/_callout.scss
 tags:
   - panel

diff --git a/docs/pages/close-button.md b/docs/pages/close-button.md
index 5a59022ef1a6c0b00f934913facb83e9af37a5cf..c7751a26d870b5d4850934c90f93f877eb68dd17 100644 (file)
--- a/docs/pages/close-button.md
+++ b/docs/pages/close-button.md
@@ -1,6 +1,7 @@
 ---
 title: Close Button
 description: The humble close button can be used anywhere you need something to go away on click.
+video: '8CDk9lUAbUM'
 sass: scss/components/_close-button.scss
 ---
 

diff --git a/docs/pages/drilldown-menu.md b/docs/pages/drilldown-menu.md
index 8075fcee3f799be73812da4ba8572877d141d5f3..552aa5a41bb5fab942e1ccf2736e305235af2e66 100644 (file)
--- a/docs/pages/drilldown-menu.md
+++ b/docs/pages/drilldown-menu.md
@@ -1,6 +1,7 @@
 ---
 title: Drilldown
 description: Drilldown is one of Foundation's three menu patterns, which converts a series of nested lists into a vertical drilldown menu.
+video: risWADXGMYs
 scss: scss/components/_drilldown.scss
 js: js/foundation.drilldown.js
 ---

diff --git a/docs/pages/dropdown-menu.md b/docs/pages/dropdown-menu.md
index adb61ab5ad52f6dec66b4d57e557d33a11044129..dd9d78fba0346d55ceaa4d5f58def4f8940d2e58 100644 (file)
--- a/docs/pages/dropdown-menu.md
+++ b/docs/pages/dropdown-menu.md
@@ -1,6 +1,7 @@
 ---
 title: Dropdown Menu
 description: Change a basic Menu into an expandable dropdown menu with the Dropdown Menu plugin.
+video: qDybCaxK3bA
 sass: scss/components/_dropdown-menu.scss
 js: js/foundation.dropdownMenu.js
 ---

diff --git a/docs/pages/flex-grid.md b/docs/pages/flex-grid.md
index 161c23e7daecbc0d58a07a5fce0cd4526c82f5d2..46aad3b3b8da051d0a3231a4623cb13f0fd40d66 100644 (file)
--- a/docs/pages/flex-grid.md
+++ b/docs/pages/flex-grid.md
@@ -2,6 +2,7 @@
 title: Flex Grid
 description: New in Foundation 6 is a Flexbox-powered grid, which you can use instead of the traditional float grid.
 sass: scss/grid/_flex-grid.scss
+video: tpmQcZSPw4Q
 ---
 
 The flex grid works very similarly to the standard float grid, but includes a number of useful features only possible with flexbox, like horizontal and vertical alignment, automatic sizing, and easier source ordering.

diff --git a/docs/pages/float-classes.md b/docs/pages/float-classes.md
index e9b710b99b2bf320f1a136b8854a6fcd4d086480..e2cf6fb24353a589f1ac6e76097b29011686919d 100644 (file)
--- a/docs/pages/float-classes.md
+++ b/docs/pages/float-classes.md
@@ -1,6 +1,7 @@
 ---
 title: Float Classes
 description: Foundation includes a handful of helpful float classes to add common positioning behaviors to elements.
+video: 'VEzXdMmqhAY'
 ---
 
 ## Float Left/Right

diff --git a/docs/pages/grid.md b/docs/pages/grid.md
index dfea489c0e5cbe1ad46d23441ca9dfbdf121cf83..5e32fd1352505aeece17ea78df47282801f0bce5 100644 (file)
--- a/docs/pages/grid.md
+++ b/docs/pages/grid.md
@@ -1,6 +1,7 @@
 ---
 title: The Grid
 description: Create powerful multi-device layouts quickly and easily with the default 12-column, nestable Foundation grid. If you're familiar with grid systems, you'll feel right at home. If not, you'll learn quickly.
+video: k1zizfK2xbQ
 sass:
   - scss/grid/*.scss
   - '!scss/grid/_flex-grid.scss'

diff --git a/docs/pages/installation.md b/docs/pages/installation.md
index 87a1ecd859aa60bff601511a02e0ae263faf622e..42f7902be357fd70b11127fa7ed97c6854f827ad 100644 (file)
--- a/docs/pages/installation.md
+++ b/docs/pages/installation.md
@@ -4,19 +4,6 @@ description: There are many ways to install Foundation, but if you're just getti
 video: sKYsLkJ0yvQ
 ---
 
-## Installation
-
-{{#if video}}<div id="subpage-intro-video" class="subpage-intro-video">
-  <div class="docs-video-inner">
-    <span class="close-button" data-close-video>&times;</span>
-    <div class="responsive-embed widescreen">
-      <div id="main-video" data-video="{{video}}"></div>
-    </div>
-  </div>
-</div>{{/if}}
-
----
-
 ### Command-Line Tool
 
 Not a fan of GUIs? The Node-powered Foundation CLI can install the same template projects for you. Install it with npm:

diff --git a/docs/pages/magellan.md b/docs/pages/magellan.md
index d849a57faa263816c3fbdd9c341f60e808a16bef..222ca1c42fe23d1d74555e50f85b69b6c106d8cc 100644 (file)
--- a/docs/pages/magellan.md
+++ b/docs/pages/magellan.md
@@ -1,6 +1,7 @@
 ---
 title: Magellan
 description: Magellan allows you to create navigation that tracks the active section of a page your user is in. Pair it with our Sticky plugin to create a fixed navigation element.
+video: 'eT-WWX74SY0'
 js: js/foundation.magellan.js
 tags:
   - navigation

diff --git a/docs/pages/media-object.md b/docs/pages/media-object.md
index df70dd56f3cc4ccec204114e68d14a6318edc4f8..87f348ef8001ecd915e6c6f2af8cbc38654aa8b4 100644 (file)
--- a/docs/pages/media-object.md
+++ b/docs/pages/media-object.md
@@ -1,6 +1,7 @@
 ---
 title: Media Object
 description: Media objects are super useful components for displaying an item, usually an image, alongside some content, usually text. You could put lists, grids, or even other media objects inside.
+video: 'H74_A6eI-wY'
 sass: scss/components/_media-object.scss
 flex: true
 ---

diff --git a/docs/pages/media-queries.md b/docs/pages/media-queries.md
index 959bfe826f87b4c2ca13c47f05697c59c6f2972e..129d5472bec850d8363b9a8867b4c6e42adb1db5 100644 (file)
--- a/docs/pages/media-queries.md
+++ b/docs/pages/media-queries.md
@@ -1,6 +1,7 @@
 ---
 title: Media Queries
 description: CSS media queries allow us to adjust the display and orientation of content at different screen sizes.
+video: gqqi2cqlST8
 sass: scss/util/_breakpoint.scss
 js: js/foundation.util.mediaQuery.js
 tags:

diff --git a/docs/pages/menu.md b/docs/pages/menu.md
index 1fa5f515b1d3ae0b08717a7bbf8b5865290a1b6a..6437b15a6a7e93995bbed23ac7d125b4f39a825b 100644 (file)
--- a/docs/pages/menu.md
+++ b/docs/pages/menu.md
@@ -1,6 +1,7 @@
 ---
 title: Menu
 description: Our flexible menu component makes it easy to build many common navigation patterns, all with the same markup.
+video: 'CmMGPCd-fYc'
 sass: scss/components/_menu.scss
 tags:
   - navigation

diff --git a/docs/pages/pagination.md b/docs/pages/pagination.md
index 8d7f62e3593df1f08e05f510ed1430531a20a70e..1657030748fa7d8a733120b1aa65af63aa35c3cb 100644 (file)
--- a/docs/pages/pagination.md
+++ b/docs/pages/pagination.md
@@ -1,6 +1,7 @@
 ---
 title: Pagination
 description: Pagination is a type of navigation that lets users click through pages of search results, products, or other related items.
+video: 'zyk8c6-SpLU'
 sass: scss/components/_pagination.scss
 ---
 

diff --git a/docs/pages/sass.md b/docs/pages/sass.md
index ebe40c79543b2a24e668f49a2c4f680bc9459834..e4ea42ec2ade0f8dccce70ca2df70b9c35f9dd21 100644 (file)
--- a/docs/pages/sass.md
+++ b/docs/pages/sass.md
@@ -1,6 +1,7 @@
 ---
 title: Sass
 description: Foundation is written in Sass, which allows us to make the codebase customizable and flexible.
+video: mYiyunVQdMY
 ---
 
 <div class="primary callout">

diff --git a/docs/pages/starter-projects.md b/docs/pages/starter-projects.md
index 75013b6a6a35fc83c1eb965159998c42a90b30fc..412310cfd684a469ffbf8de05368f0a175678468 100644 (file)
--- a/docs/pages/starter-projects.md
+++ b/docs/pages/starter-projects.md
@@ -1,6 +1,7 @@
 ---
 title: Starter Projects
 description: We have a few starter project templates that can be installed with the Foundation CLI. You can also download them manually!
+video: 'lFrpnk0Oo_8'
 ---
 
 Our project templates give you a solid... *Foundation* on which to start a new project. Both templates use the [Gulp](http://gulpjs.com) build system to automate the process of compiling Sass, processing JavaScript, copying files, and more.

diff --git a/docs/pages/switch.md b/docs/pages/switch.md
index 7ea5f58a300225323ee7cae2b33f84404e58fdfe..cfb85721c137c5cb556f8b0393777431148b0596 100644 (file)
--- a/docs/pages/switch.md
+++ b/docs/pages/switch.md
@@ -1,6 +1,7 @@
 ---
 title: Switch
 description: Now you can tell your users to flip the switch or switch off.
+video: '25NIiOhwGNQ'
 sass: scss/components/_switch.scss
 ---
 

diff --git a/docs/pages/top-bar.md b/docs/pages/top-bar.md
index 16367c17bcd15cd688160bd8a58192870ea978fb..285675d4f1e2152e6f6109cfc49cfe72dd425cbc 100644 (file)
--- a/docs/pages/top-bar.md
+++ b/docs/pages/top-bar.md
@@ -1,6 +1,7 @@
 ---
 title: Top Bar
 description: The new top bar is a simpler wrapper around our flexible menu components.
+video: cxPwwixHEJg
 sass: ./scss/components/_top-bar.scss
 flex: true
 ---

diff --git a/docs/pages/typography-base.md b/docs/pages/typography-base.md
index d02cb861dc0d083a779b4592ec208c6dc30395eb..c06ac656d2cb72255d15a3674a32fdb662ec946d 100644 (file)
--- a/docs/pages/typography-base.md
+++ b/docs/pages/typography-base.md
@@ -1,6 +1,7 @@
 ---
 title: Base Typography
 description: Typography in Foundation 6 is meant to make your life easier by providing clean, attractive, simple default styles for all of the most basic typographical elements.
+video: pzAyIfsXis4
 sass:
   - scss/typography/_base.scss
   - scss/typography/_print.scss

diff --git a/docs/pages/typography-helpers.md b/docs/pages/typography-helpers.md
index 2e0d751a639bedb5d87547e0f15fd6b6df7f1c80..84e7ef2319d53bfeda4573a1917466043f9b809a 100644 (file)
--- a/docs/pages/typography-helpers.md
+++ b/docs/pages/typography-helpers.md
@@ -1,6 +1,7 @@
 ---
 title: Typography Helpers
 description: Our helper classes allow you to scaffold certain typographic styles faster.
+video: dq7s3PVpQ7M
 sass:
   - scss/typography/_helpers.scss
   - scss/typography/_alignment.scss
@@ -89,4 +90,4 @@ If you're building a dashboard, you might need to display some important numbers
 ```html_example
 <p>Days without merge conflict</p>
 <div class="stat">128</div>
-```
\ No newline at end of file
+```

diff --git a/docs/pages/visibility.md b/docs/pages/visibility.md
index ebf1a4587fac5e137cd7116403add7d245b3e070..12673aa4a6b311e50886cacba554128282fb890c 100644 (file)
--- a/docs/pages/visibility.md
+++ b/docs/pages/visibility.md
@@ -1,6 +1,7 @@
 ---
 title: Visibility Classes
 description: Visibility classes let you show or hide elements based on screen size or device orientation. You can also use visibility classes to control which elements users see depending on their browsing environment.
+video: 'j__6VmFdSnc'
 sass: scss/components/_visibility.scss
 tags:
   - hide