From: harry Date: Thu, 6 Jul 2017 17:54:45 +0000 (+0530) Subject: Add codepen example and also move block grid below offset docs! X-Git-Tag: v6.4.2-rc2~1^2~27^2 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F10357%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git Add codepen example and also move block grid below offset docs! --- diff --git a/docs/pages/xy-grid.md b/docs/pages/xy-grid.md index ede941094..5d8c02054 100644 --- a/docs/pages/xy-grid.md +++ b/docs/pages/xy-grid.md @@ -190,12 +190,29 @@ There are times when you won't want each media query to be collapsed. In this ca --- +## Offsets + +Offsets work by applying `margin-left` (or `margin-top` for a vertical grid) to a grid. + +```html_example +
+
Offset 2 on large
+
4 cells
+
+``` + +--- + ## Block Grids -To define cell widths at a direction-level, instead of the individual cell level, add the class `.[size]-up-[n]` to a `grid-x` or `grid-y`, where `[n]` is the number of cells to display per direction, and `[size]` is the breakpoint at which to apply the effect. +To define cell widths within a direction-level, instead of the individual cell level, add the class `.[size]-up-[n]` to a `grid-x` or `grid-y`, where `[n]` is the number of cells to display per direction, and `[size]` is the breakpoint at which to apply the effect.
This example uses padding grid but this can be used with margin grid too.
+
+edit on codepen button +
+ ```html_example
cell
@@ -209,19 +226,6 @@ To define cell widths at a direction-level, instead of the individual cell level --- -## Offsets - -Offsets work by applying `margin-left` (or `margin-top` for a vertical grid) to a grid. - -```html_example -
-
Offset 2 on large
-
4 cells
-
-``` - ---- - ## Looking for Push Pull Push and pull are a bit of a hack solution and was only necessary for Float based grids. But for flexbox, this hack is not needed as [source ordering](flexbox-utilities.html#source-ordering) does this with ease.