From 409342c42964653cf554f94b5377faf8f2c627c3 Mon Sep 17 00:00:00 2001 From: Brett Mason Date: Wed, 19 Jul 2017 20:05:44 +0100 Subject: [PATCH 1/8] Starting point for figuring out the logic to include gutters... --- scss/xy-grid/_frame.scss | 26 +++++++++++++++++++++----- 1 file changed, 21 insertions(+), 5 deletions(-) diff --git a/scss/xy-grid/_frame.scss b/scss/xy-grid/_frame.scss index f2c35191be..21d5daecd8 100644 --- a/scss/xy-grid/_frame.scss +++ b/scss/xy-grid/_frame.scss @@ -4,13 +4,29 @@ /// @param {Boolean} $nested [false] - Is grid nested or not. If nested is true this sets the frame to 100% height, otherwise will be 100vh. @mixin xy-grid-frame( $vertical: false, - $nested: false + $nested: false, + $gutters: null, + $breakpoint: null ) { + // Get our gutters if applicable + $gutter: -zf-get-bp-val($gutters, $breakpoint); - @if $vertical == true { - height: if($nested == true, 100%, 100vh); - } @else { - width: if($nested == true, 100%, 100vw); + // If we have a gutter, add it to the width/height + @if $gutter { + @if $vertical == true { + $unit: if($nested == true, 100%, 100vh); + height: calc(#{$unit} + #{$gutter}); + } @else { + $unit: if($nested == true, 100%, 100vw); + width: calc(#{$unit} + #{$gutter}); + } + } + @else { + @if $vertical == true { + height: if($nested == true, 100%, 100vh); + } @else { + width: if($nested == true, 100%, 100vw); + } } overflow: hidden; From 0966bff5d317f661b0ead9a555834048886d173a Mon Sep 17 00:00:00 2001 From: Kevin Ball Date: Wed, 19 Jul 2017 14:53:32 -0700 Subject: [PATCH 2/8] Pass on further grid frame margin work --- scss/xy-grid/_classes.scss | 3 +++ scss/xy-grid/_frame.scss | 49 ++++++++++++++++++++++---------------- 2 files changed, 31 insertions(+), 21 deletions(-) diff --git a/scss/xy-grid/_classes.scss b/scss/xy-grid/_classes.scss index 5b296c749b..7a7c44fba8 100644 --- a/scss/xy-grid/_classes.scss +++ b/scss/xy-grid/_classes.scss @@ -333,6 +333,9 @@ @if $margin-grid { @include xy-margin-grid-classes(top bottom, true, '.grid-margin-y') + .grid-frame.grid-margin-y { + @include xy-grid-frame(true, false, $grid-margin-gutters) + } } } diff --git a/scss/xy-grid/_frame.scss b/scss/xy-grid/_frame.scss index 21d5daecd8..a9b4f78aa2 100644 --- a/scss/xy-grid/_frame.scss +++ b/scss/xy-grid/_frame.scss @@ -8,31 +8,38 @@ $gutters: null, $breakpoint: null ) { - // Get our gutters if applicable - $gutter: -zf-get-bp-val($gutters, $breakpoint); - // If we have a gutter, add it to the width/height - @if $gutter { - @if $vertical == true { - $unit: if($nested == true, 100%, 100vh); - height: calc(#{$unit} + #{$gutter}); - } @else { - $unit: if($nested == true, 100%, 100vw); - width: calc(#{$unit} + #{$gutter}); + @if $breakpoint == null and type-of($gutters) == 'map' { + @include -zf-each-breakpoint() { + @include xy-grid-frame($vertical, $nested, $gutters, $-zf-size); } - } - @else { - @if $vertical == true { - height: if($nested == true, 100%, 100vh); - } @else { - width: if($nested == true, 100%, 100vw); + } @else { + // Get our gutters if applicable + $gutter: -zf-get-bp-val($gutters, $breakpoint); + + // If we have a gutter, add it to the width/height + @if $gutter { + @if $vertical == true { + $unit: if($nested == true, 100%, 100vh); + height: calc(#{$unit} + #{$gutter}); + } @else { + $unit: if($nested == true, 100%, 100vw); + width: calc(#{$unit} + #{$gutter}); + } + } + @else { + @if $vertical == true { + height: if($nested == true, 100%, 100vh); + } @else { + width: if($nested == true, 100%, 100vw); + } } - } - overflow: hidden; - position: relative; - flex-wrap: nowrap; - align-items: stretch; + overflow: hidden; + position: relative; + flex-wrap: nowrap; + align-items: stretch; + } } /// Modifies a cell to give it "block" behavior (overflow auto, inertial scrolling) From 4f0ab6aa51057465697c78ad1d9dfac9dab44b7a Mon Sep 17 00:00:00 2001 From: Brett Mason Date: Fri, 21 Jul 2017 20:50:35 +0100 Subject: [PATCH 3/8] Convert gutter sizes to rem --- scss/xy-grid/_frame.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/scss/xy-grid/_frame.scss b/scss/xy-grid/_frame.scss index a9b4f78aa2..edcd157271 100644 --- a/scss/xy-grid/_frame.scss +++ b/scss/xy-grid/_frame.scss @@ -21,9 +21,11 @@ @if $gutter { @if $vertical == true { $unit: if($nested == true, 100%, 100vh); + $gutter: rem-calc($gutter); height: calc(#{$unit} + #{$gutter}); } @else { $unit: if($nested == true, 100%, 100vw); + $gutter: rem-calc($gutter); width: calc(#{$unit} + #{$gutter}); } } From a0afdc8720df2531605e2eb3b4ce1cde37927cda Mon Sep 17 00:00:00 2001 From: Kevin Ball Date: Fri, 21 Jul 2017 12:59:21 -0700 Subject: [PATCH 4/8] Only include base styles some of the time in frame --- scss/xy-grid/_frame.scss | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/scss/xy-grid/_frame.scss b/scss/xy-grid/_frame.scss index edcd157271..e6fc651146 100644 --- a/scss/xy-grid/_frame.scss +++ b/scss/xy-grid/_frame.scss @@ -6,12 +6,20 @@ $vertical: false, $nested: false, $gutters: null, - $breakpoint: null + $breakpoint: null, + $include-base-styles: true, ) { + @if $include-base-styles { + overflow: hidden; + position: relative; + flex-wrap: nowrap; + align-items: stretch; + } + @if $breakpoint == null and type-of($gutters) == 'map' { @include -zf-each-breakpoint() { - @include xy-grid-frame($vertical, $nested, $gutters, $-zf-size); + @include xy-grid-frame($vertical, $nested, $gutters, $-zf-size, false); } } @else { // Get our gutters if applicable @@ -36,11 +44,6 @@ width: if($nested == true, 100%, 100vw); } } - - overflow: hidden; - position: relative; - flex-wrap: nowrap; - align-items: stretch; } } From 55fd2eceaa09f1d7e1a5f31e3bc8333f7cf27817 Mon Sep 17 00:00:00 2001 From: Kevin Ball Date: Fri, 21 Jul 2017 13:06:34 -0700 Subject: [PATCH 5/8] Tix fypo --- scss/xy-grid/_frame.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/xy-grid/_frame.scss b/scss/xy-grid/_frame.scss index e6fc651146..56dead2633 100644 --- a/scss/xy-grid/_frame.scss +++ b/scss/xy-grid/_frame.scss @@ -7,7 +7,7 @@ $nested: false, $gutters: null, $breakpoint: null, - $include-base-styles: true, + $include-base-styles: true ) { @if $include-base-styles { From 529334c47c0dd8822404c18b48a89adb527d6483 Mon Sep 17 00:00:00 2001 From: Kevin Ball Date: Fri, 21 Jul 2017 13:10:31 -0700 Subject: [PATCH 6/8] Variable naming and description iteration --- scss/xy-grid/_frame.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/scss/xy-grid/_frame.scss b/scss/xy-grid/_frame.scss index 56dead2633..76c61e5ca2 100644 --- a/scss/xy-grid/_frame.scss +++ b/scss/xy-grid/_frame.scss @@ -2,15 +2,18 @@ /// /// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid. /// @param {Boolean} $nested [false] - Is grid nested or not. If nested is true this sets the frame to 100% height, otherwise will be 100vh. +/// @param {Number|Map} $gutters [null] - Map or single value for gutters. +/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. +/// @param {Boolean} $include-base [true] - Include the base styles that don't vary per breakpoint. @mixin xy-grid-frame( $vertical: false, $nested: false, $gutters: null, $breakpoint: null, - $include-base-styles: true + $include-base: true ) { - @if $include-base-styles { + @if $include-base { overflow: hidden; position: relative; flex-wrap: nowrap; From 916d94d746cb8bd1402937d1aa44a8d12c6c4308 Mon Sep 17 00:00:00 2001 From: Kevin Ball Date: Fri, 21 Jul 2017 13:22:13 -0700 Subject: [PATCH 7/8] Final touches on new grid frame margins --- scss/xy-grid/_classes.scss | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/scss/xy-grid/_classes.scss b/scss/xy-grid/_classes.scss index 7a7c44fba8..50908efc6f 100644 --- a/scss/xy-grid/_classes.scss +++ b/scss/xy-grid/_classes.scss @@ -333,13 +333,11 @@ @if $margin-grid { @include xy-margin-grid-classes(top bottom, true, '.grid-margin-y') - .grid-frame.grid-margin-y { - @include xy-grid-frame(true, false, $grid-margin-gutters) - } } + } -@mixin xy-frame-grid-classes($vertical-grid: true) { +@mixin xy-frame-grid-classes($vertical-grid: true, $margin-grid: true) { // Framed grid styles .grid-frame { @include xy-grid-frame; @@ -387,7 +385,6 @@ } @if $vertical-grid { - .grid-y { &.grid-frame { width: auto; @@ -413,6 +410,17 @@ } } } + @if $margin-grid { + @include xy-margin-grid-classes(top bottom, true, '.grid-margin-y') + .grid-frame.grid-margin-y { + @include xy-grid-frame(true, false, $grid-margin-gutters, $include-base: false) + } + @include -zf-each-breakpoint(false) { + .grid-margin-y.#{$-zf-size}-grid-frame { + @include xy-grid-frame(true, false, $grid-margin-gutters, $-zf-size, false) + } + } + } } // Final classes @@ -463,6 +471,6 @@ } @if ($frame-grid) { - @include xy-frame-grid-classes($vertical-grid) + @include xy-frame-grid-classes($vertical-grid, $margin-grid) } } From 6f1489e40e264bdadb4e9fb40b1409cd2ffe9297 Mon Sep 17 00:00:00 2001 From: Brett Mason Date: Mon, 24 Jul 2017 19:08:03 +0100 Subject: [PATCH 8/8] Add note to docs about hiding the overflow on body. --- docs/pages/xy-grid.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/pages/xy-grid.md b/docs/pages/xy-grid.md index 399bbb4f53..f1cf9ccb13 100644 --- a/docs/pages/xy-grid.md +++ b/docs/pages/xy-grid.md @@ -283,6 +283,10 @@ You can also apply margin or padding with `.grid-margin-y` and `.grid-padding-y` The XY grid incorporates the grid frame from Foundation for Apps plus many other useful features. To start, add `.grid-frame` to the grid. This sets the grid to be 100vh (the full height of the browser window). +
+ Please note to use `.grid-margin-x` or `.grid-margin-y` with `.grid-frame` you need to hide the overflow on the body like so: `body {overflow: hidden;}`. +
+ Here's an example of what you can do:
edit on codepen button