From 9d8ec91bf942333fdf469c27e5075d1af0a46217 Mon Sep 17 00:00:00 2001 From: ZURBywood Date: Thu, 12 Oct 2017 15:39:30 -0700 Subject: [PATCH] Adds XY Grid Video with links and Protoyping Utilities video with links --- docs/pages/prototyping-utilities.md | 9 +++++++++ docs/pages/xy-grid.md | 18 ++++++++++++++++++ 2 files changed, 27 insertions(+) diff --git a/docs/pages/prototyping-utilities.md b/docs/pages/prototyping-utilities.md index ef617008b..cd475ff82 100644 --- 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) +

+ Watch this part in video +

+ #### Buttons ```html_example @@ -416,6 +421,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). +

+ Watch this part in video +

+ #### Margin (All Sides) ```html diff --git a/docs/pages/xy-grid.md b/docs/pages/xy-grid.md index 9cab3f623..ac5b662d7 100644 --- 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. +

+ Watch this part in video +

+
edit on codepen button
@@ -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. +

+ Watch this part in video +

+
edit on codepen button
@@ -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. +

+ Watch this part in video +

+

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

@@ -291,6 +304,11 @@ To start, add `.grid-frame` to the grid. This sets the grid to be 100vh (the ful Here's an example of what you can do: + +

+ Watch this part in video +

+
edit on codepen button
-- 2.47.2