From: RafiBomb Date: Wed, 1 Feb 2017 21:29:03 +0000 (-0800) Subject: adds docs videos to flexbox and resp-accordion tabs X-Git-Url: http://git.ipfire.org/gitweb/?a=commitdiff_plain;h=refs%2Fheads%2Ffeature%2Fdocs-redesign-nick;p=thirdparty%2Ffoundation%2Ffoundation-sites.git adds docs videos to flexbox and resp-accordion tabs --- diff --git a/docs/pages/flexbox.md b/docs/pages/flexbox.md index 81a3592e4..ba2f6c446 100644 --- a/docs/pages/flexbox.md +++ b/docs/pages/flexbox.md @@ -1,6 +1,6 @@ --- title: Flexbox -description: For browsers with cutting-edge support, some of Foundation's key components can be converted to flexbox. +description: For browsers with cutting-edge support, some of Foundation's key components have been converted to flexbox. sass: - scss/components/_flex.scss - scss/util/_flex.scss @@ -51,16 +51,26 @@ If you use the `foundation-everything()` mixin in your main Sass file, pass in t @include foundation-everything(true); ``` -If you included each component manually (like our starter projects do), open your settings file (basic template: scss/_settings.scss, ZURB template: src/assets/scss/_settings.scss) and set `$global-flexbox` to `true`, and remove the `@include` for the float grid and replace it with the one for the flex grid, along with the helper classes (basic template: scss/app.scss, ZURB template: src/assets/scss/app.scss): +If you included each component manually (like our starter projects do), open your settings file (basic template: scss/_settings.scss, ZURB template: src/assets/scss/_settings.scss) and set `$global-flexbox` to `true`, and remove the `@include` for the float grid and replace it with the one for the flex grid, along with the helper classes (basic template: scss/app.scss, ZURB Stack: src/assets/scss/app.scss). -```scss -$global-flexbox: true; +In `app.scss`, comment out the standard grid and the float classes: +```scss // @include foundation-grid; @include foundation-flex-grid; + +// @include foundation-float-classes; @include foundation-flex-classes; ``` +In the `_settings.scss` file, activate Flexbox components: + +```scss +$global-flexbox: true; +``` + +You have now activated Flex-mode! + --- ## Supported Components @@ -262,3 +272,125 @@ Interested in building your own flexbox-ey component? Use the `flex()` mixin to @include flex-align(center, middle); } ``` + +--- + +## Related Resources + +Some releated resources for using {{title}}. + +
+ +
+ + image clip of video +
F6, GRID, LAYOUT, Flexbox
+

Solving problems using Flexbox - Vertical AlignmentRafi - Foundation Team

+ +
+ +
+ + image clip of video +
F6, GRID, LAYOUT, Flexbox
+

Foundation's Flexbox Cards to Win the GameRafi - Foundation Team

+ +
+ +
+ + image clip of video +
F6, DOWNLOAD, CSS
+

Getting Started with Foundation 6Gary Jennings

+ +
+ +
+ + image clip of video +
F6, CSS, INSTALL, PROJECT STRUCTURE
+

Setting Up Your Foundation 6 ProjectGary Jennings

+ +
+ +
+ + image clip of video +
F6, GRID, LAYOUT, CSS
+

Prototyping with Foundation 6 Grid Source Ordering and ButtonsTim - Foundation Team

+ +
+ +
+ +

Get to Know the Flexbox Grid in Foundation 6By Chris Sevilleja of Scotch.io

+ +
+ +
+ +
+ See More Tutorials +
+ + diff --git a/docs/pages/responsive-accordion-tabs.md b/docs/pages/responsive-accordion-tabs.md index 89529be13..5630d7c04 100644 --- a/docs/pages/responsive-accordion-tabs.md +++ b/docs/pages/responsive-accordion-tabs.md @@ -1,7 +1,7 @@ --- title: Responsive Accordion Tabs description: Use the Markup of the Accordion or Tabs components to create Responsive Accordion Tabs. -sass: +sass: - scss/components/_accordion.scss - scss/components/_tabs.scss js: js/foundation.zf.responsiveAccordionTabs.js @@ -13,6 +13,11 @@ previous: next: url: badge.html title: Badge +videos: + - + title: Responsive Tabs to Accordions + desc: Foundation Lesson - Responsive Tabs Accordion + url: https://www.youtube.com/watch?v=FKzzaWR6j2M --- ## Basics