From f3981fdcd1dbc6d016e6e06a49aa8346ee75056b Mon Sep 17 00:00:00 2001 From: RafiBomb Date: Wed, 10 May 2017 16:44:41 -0700 Subject: [PATCH] adds pens for float grid --- docs/assets/scss/docs.scss | 26 ++++++++++++++++++++++++++ docs/pages/grid.md | 30 +++++++++++++++++++++++++++++- 2 files changed, 55 insertions(+), 1 deletion(-) diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss index 04db42096..1f4010829 100644 --- a/docs/assets/scss/docs.scss +++ b/docs/assets/scss/docs.scss @@ -173,3 +173,29 @@ a#notice { height: 32px; } } + +a[data-open-video] { + padding: 0.3rem 0; + transition: all 0.25s ease-in; + + .video-icon { + margin-top: -4px; + margin-right: 4px; + } + + &:hover { + .video-icon { + transform: scale(1.2); + } + } +} + +.docs-video-codepen-container { + display: flex; + align-items: center; + justify-content: space-between; + + .codepen-logo-link { + bottom: -0.25rem; + } +} diff --git a/docs/pages/grid.md b/docs/pages/grid.md index 8f167df4d..3c63d25c5 100644 --- a/docs/pages/grid.md +++ b/docs/pages/grid.md @@ -20,6 +20,8 @@ Start by adding an element with a class of `.row`. This will create a horizontal

Disabling the alias can reduce the Foundation CSS file size from 3 to 5%. It is recommended if the alias is not used.

+edit on codepen button + ```html
@@ -92,6 +94,8 @@ Start by adding an element with a class of `.row`. This will create a horizontal Small grids expand to large screens easier than large grids cram into small screens. +edit on codepen button + ```html
2 columns
@@ -116,7 +120,13 @@ Small grids expand to large screens easier than large grids cram into small scre ### Medium Grid -Medium sized screens will inherit styles from small, unless you specify a different layout using the medium grid classes. [Video] +Medium sized screens will inherit styles from small, unless you specify a different layout using the medium grid classes. + +
+ Watch this part in video + + edit on codepen button +
```html
@@ -150,6 +160,8 @@ If you need a full-width column to use as a container, put the `.column` and `.r

Column rows can use sizing classes like .small-8, but only when used as a top-level container—not when nested inside another row.

+edit on codepen button + ```html
Row column @@ -166,6 +178,8 @@ If you need a full-width column to use as a container, put the `.column` and `.r Normally, a row is always 1200 pixels wide. Make a row completely fluid by adding the `.expanded` class. +edit on codepen button + ```html
@@ -177,6 +191,8 @@ Normally, a row is always 1200 pixels wide. Make a row completely fluid by addin You can nest the grids indefinitely, though at a certain point it will get absurd. +edit on codepen button + ```html
8 @@ -215,6 +231,8 @@ You can nest the grids indefinitely, though at a certain point it will get absur Move blocks up to 11 columns to the right by using classes like `.large-offset-1` and `.small-offset-3`. +edit on codepen button + ```html
1
@@ -257,6 +275,8 @@ Move blocks up to 11 columns to the right by using classes like `.large-offset-1 In order to work around browsers' different rounding behaviors, Foundation will float the last column in a row to the right so the edge aligns. If your row doesn't have a count that adds up to 12 columns, you can tag the last column with a class of `.end` in order to override that behavior. Alternatively, you can set the `$grid-column-align-edge` variable to `false` to turn off this behavior entirely. +edit on codepen button + ```html
3
@@ -321,6 +341,8 @@ The `.collapse` class lets you remove column gutters (padding). There are times when you won't want each media query to be collapsed or uncollapsed. In this case, use the media query size you want and collapse or uncollapse and add that to your row element. Example shows no gutter at small media size and then adds the gutter to columns at medium. +edit on codepen button + ```html
@@ -357,6 +379,8 @@ There are times when you won't want each media query to be collapsed or uncollap Center your columns by adding a class of `.small-centered` to your column. Large will inherit small centering by default, but you can also center solely on large by applying a `.large-centered` class. To uncenter on large screens, use `.large-uncentered`. +edit on codepen button + ```html
3 centered
@@ -391,6 +415,8 @@ Center your columns by adding a class of `.small-centered` to your column. Large Using these source ordering classes, you can shift columns around between our breakpoints. This means if you place sub-navigation below main content on small displays, you have the option to position the sub-navigation on either the left or right of the page for large displays. Prefix push/pull with the size of the device you want to apply the styles to. `.medium-push-#`, `.large-push-#` is the syntax you'll use. Use the number 0 instead to reset a push/pull, such as `.medium-push-0` or `.large-pull-0`. +edit on codepen button + ```html
10
@@ -441,6 +467,8 @@ Using these source ordering classes, you can shift columns around between our br Block grids are a shorthand way to create equally-sized columns. Add a class of the format `.[size]-up-[n]` to change the number of columns within the row. By default, the max number of columns you can use with block grid are 8. Adding the `.column-block` class to columns will apply a bottom margin equal to the width of gutters. +edit on codepen button + ```html_example
-- 2.47.2