From: RafiBomb Date: Wed, 17 May 2017 20:28:53 +0000 (-0700) Subject: adds missing video and deep links X-Git-Tag: v6.4.0-rc1~26^2~11 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=b66202b620e3dcbe66f08d8cf3304f1c32a84187;p=thirdparty%2Ffoundation%2Ffoundation-sites.git adds missing video and deep links --- diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss index f74a6e9e5..5108978e6 100644 --- 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 872cc729d..ea7f832f9 100644 --- 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 ``, but any tag will work fine.

- Watch this part in video + Watch this part in video

@@ -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.

- Watch this part in video + Watch this part in video

@@ -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 6ebfe26d8..07fbade7c 100644 --- 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 +
+ + +
+ 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! Download CSS Version diff --git a/docs/pages/label.md b/docs/pages/label.md index 4d9d205fc..e0b8d60ba 100644 --- 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 ``, but any tag will work fine.

- Watch this part in video + Watch this part in video

@@ -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.

- Watch this part in video + Watch this part in video

@@ -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. -

- Watch this part in video -

-
edit on codepen button
diff --git a/docs/pages/sass-mixins.md b/docs/pages/sass-mixins.md index 9f91d6ec1..51144ca8f 100644 --- 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 b208d2701..051402d28 100644 --- 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 +
+ + +
+ 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 5f2d65b74..294e3ba00 100644 --- 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 +

+ Watch this part in video +

+ 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 +

+ Watch this part in video +

+ The style guide is divided into sections. Generally, each component in your codebase—think buttons, panels, modals, form controls, and so on—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, `
` elit, sed do eiusmod tempor incididunt ut l ### Code Samples +

+ Watch this part in video +

+ 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 +

+ Watch this part in video +

+ 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—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 1b76076cb..86c2e91aa 100644 --- 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.

- Watch this part in video + Watch this part in video

@@ -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*.

- Watch this part in video + Watch this part in video

@@ -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`.

- Watch this part in video + Watch this part in video

@@ -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.

- Watch this part in video + Watch this part in video

@@ -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`.

- Watch this part in video + Watch this part in video

@@ -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:

- Watch this part in video + Watch this part in video