From fb511a60863b12bfff7c8a49cfd595b93d256b9b Mon Sep 17 00:00:00 2001 From: Brett Mason Date: Thu, 25 May 2017 19:27:37 +0100 Subject: [PATCH] Sort grid into final (hopefully) file structure and add some visual tests --- scss/foundation.scss | 12 +- scss/grid/_zf-grid.scss | 344 ------------------------- scss/zf-grid/_cell.scss | 145 +++++++++++ scss/zf-grid/_classes.scss | 210 +++++++++++++++ scss/zf-grid/_collapse.scss | 61 +++++ scss/zf-grid/_grid.scss | 32 +++ scss/zf-grid/_gutters.scss | 45 ++++ scss/zf-grid/_position.scss | 30 +++ scss/zf-grid/_zf-grid.scss | 37 +++ test/visual/zf-grid/kitchen-sink.html | 149 +++++++++++ test/visual/zf-grid/margin-grid.html | 106 ++++++++ test/visual/zf-grid/padding-grid.html | 106 ++++++++ test/visual/zf-grid/vertical-grid.html | 74 ++++++ 13 files changed, 1003 insertions(+), 348 deletions(-) delete mode 100644 scss/grid/_zf-grid.scss create mode 100644 scss/zf-grid/_cell.scss create mode 100644 scss/zf-grid/_classes.scss create mode 100644 scss/zf-grid/_collapse.scss create mode 100644 scss/zf-grid/_grid.scss create mode 100644 scss/zf-grid/_gutters.scss create mode 100644 scss/zf-grid/_position.scss create mode 100644 scss/zf-grid/_zf-grid.scss create mode 100644 test/visual/zf-grid/kitchen-sink.html create mode 100644 test/visual/zf-grid/margin-grid.html create mode 100644 test/visual/zf-grid/padding-grid.html create mode 100644 test/visual/zf-grid/vertical-grid.html diff --git a/scss/foundation.scss b/scss/foundation.scss index a7117ed68..301c4683c 100644 --- a/scss/foundation.scss +++ b/scss/foundation.scss @@ -27,6 +27,7 @@ // Components @import 'grid/grid'; +@import 'zf-grid/zf-grid'; @import 'typography/typography'; @import 'forms/forms'; @import 'components/visibility'; @@ -64,7 +65,7 @@ @import 'components/thumbnail'; @import 'components/tooltip'; -@mixin foundation-everything($flex: false) { +@mixin foundation-everything($flex: true) { @if $flex { $global-flexbox: true !global; } @@ -74,7 +75,12 @@ @include foundation-grid; } @else { - @include foundation-flex-grid; + @if $zf-grid { + @include foundation-zf-grid-classes; + } + @else { + @include foundation-flex-grid; + } } @include foundation-typography; @include foundation-forms; @@ -116,5 +122,3 @@ @include foundation-flex-classes; } } - -@include zf-grid-classes; \ No newline at end of file diff --git a/scss/grid/_zf-grid.scss b/scss/grid/_zf-grid.scss deleted file mode 100644 index c92cb172d..000000000 --- a/scss/grid/_zf-grid.scss +++ /dev/null @@ -1,344 +0,0 @@ -// Foundation for Sites by ZURB -// foundation.zurb.com -// Licensed under MIT Open Source - -//// -/// @group grid -//// -$grid-container: 1200px !default; -$grid-columns: 12 !default; -$grid-type: margin !default; -$grid-gutters: ( - small: 20px, - medium: 30px -) !default; -$grid-debug: false !default; - -/// Calculate the percentage size of a cell. -/// -/// @param {Number|List} $size [$grid-columns] - Size to make the cell. You can pass a value in multiple formats, such as `6`, `50%`, `1 of 2 or 1/3. -@function zf-cell-size( - $size: $grid-columns -) { - // Parsing percents, decimals, n of n and number counts - @if type-of($size) == 'number' { - @if unit($size) == '%' { - $size: $size; - } - @else if $size < 1 { - $size: percentage($size); - } - @else { - $size: percentage($size / $grid-columns); - } - } - - // Parsing "n of n" or "n/n" expressions - @else if type-of($size) == 'list' { - @if length($size) != 3 { - @error 'Wrong syntax for zf-cell-size(). Use the format "n of n" or "n/n".'; - } - @else { - $size: percentage(nth($size, 1) / nth($size, 3)); - } - } - - // Anything else is incorrect - @else { - @error 'Wrong syntax for zf-cell-size(). Use a number, decimal, percentage, or "n of n" / "n/n".'; - } - - @return $size; -} - -/// Create gutters for a cell/container. -/// -/// @param {Number|Map} $gutters [$grid-gutters] - Map or single value for gutters size. -/// @param {Keyword} $type [$grid-type] - The type of gutter to apply. Accepts either `padding` or `margin`. -/// @param {Keyword|List} $position [horizontal] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination, `block` (a quick way to say left right bottom) or `all` (for all 4 sides). Also accepts `negative` to output gutters as a negative value (only works with margins). -/// @param {Boolean} $negative [false] - Whether to apply the gutter as a negative value. Commonly used for nexted grids. -@mixin zf-gutters( - $gutters: auto, - $type: $grid-type, - $position: horizontal, - $negative: false -) { - $format: if($negative, '-', ''); - - // If we have declared negative gutters, force type to `margin. - $type: if($negative, 'margin', $type); - - // Declare our gutter positions. - $gutter-output: ''; - - @if ($position == 'horizontal') { - $gutter-output: right left; - } - @elseif ($position == 'vertical') { - $gutter-output: top bottom; - } - @elseif ($position == 'block') { - $gutter-output: top bottom left; - } - @else { - $gutter-output: $position; - } - - // Output our gutters. - @if ($gutters == 'auto') { - @include -zf-breakpoint-value($gutters, $grid-gutters) { - $gutter: rem-calc($-zf-bp-value) / 2; - - // If position is set to `all` apply our gutter to all sides - @if index($position, all) != null { - #{$type}: #{$format}$gutter; - } - @else { - // Loop through each gutter position - @each $value in $gutter-output { - #{$type}-#{$value}: #{$format}$gutter; - } - } - } - } - @else { - $gutter: rem-calc($gutters) / 2; - - // Loop through each gutter position - @each $value in $gutter-output { - #{$type}-#{$value}: #{$format}$gutter; - } - } -} - -/// Creates a max width container, designed to house your grid content. -/// -/// @param {Number} $width [$grid-container] - a width to limit the container to. -@mixin zf-grid-container( - $width: $grid-container -) { - max-width: rem-calc($width); - margin: 0 auto; -} - -/// Creates a container for your flex cells. -/// -/// @param {Keyword} $direction [horizontal] - Either horizontal or vertical direction of cells within. -/// @param {Boolean} $wrap [true] - If the cells within should wrap or not. -@mixin zf-grid( - $direction: horizontal, - $wrap: true -) { - $direction: if($direction == 'horizontal', row, column); - $wrap: if($wrap, wrap, nowrap); - - display: flex; - flex-flow: $direction $wrap; -} - -/// Creates a cell for your grid. -/// -/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space. -/// @param {Keyword} $direction [horizontal] - Either horizontal or vertical direction - used to apply gutters in the right place. -@mixin zf-cell-size( - $size: full, - $type: $grid-type, - $direction: horizontal -) { - // Set either width or height depending on axis - $direction: if($direction == 'horizontal', width, height); - - // Sizing properties - @if($size == 'full') { - @if($type == 'margin') { - @include -zf-breakpoint-value(auto, $grid-gutters) { - $gutter: rem-calc($-zf-bp-value); - flex: 1 1 calc(100% - #{$gutter}); - } - } - @else { - flex: 1 1 100%; - } - } - @elseif($size == 'auto') { - flex: 1 1 0px; // sass-lint:disable-line zero-unit - https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored - } - @elseif($size == 'shrink') { - flex: 0 0 auto; - - @if($type == 'margin') { - @include -zf-breakpoint-value(auto, $grid-gutters) { - $gutter: rem-calc($-zf-bp-value); - max-#{$direction}: calc(100% - #{$gutter}); - } - } - @else { - max-#{$direction}: 100%; - } - } - @else { - @if($type == 'margin') { - @include -zf-breakpoint-value(auto, $grid-gutters) { - $gutter: rem-calc($-zf-bp-value); - flex: 0 0 calc(#{zf-cell-size($size)} - #{$gutter}); - max-#{$direction}: calc(#{zf-cell-size($size)} - #{$gutter}); - } - } - @else { - flex: 0 0 zf-cell-size($size); - max-#{$direction}: zf-cell-size($size); - } - } -} - -/// Creates a cell for your grid. -/// -/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space. -/// @param {Number|Map} $gutters [$grid-gutters] - Map or single value for gutters size. -/// @param {Keyword} $type [$grid-type] - The type of gutter to apply. Accepts either `padding` or `margin`. -/// @param {Keyword} $direction [horizontal] - Either horizontal or vertical direction - used to apply gutters in the right place. -@mixin zf-cell( - $size: full, - $gutters: auto, - $position: horizontal, - $type: $grid-type, - $direction: horizontal -) { - // Sizing - @include zf-cell-size($size: $size, $direction: $direction, $type: $type); - - // Gutters - @if($gutters) { - @include zf-gutters($gutters: $gutters, $type: $type, $position: $position); - } -} - -// Margin Grid classes -@mixin zf-margin-grid-classes { - .margin-gutters { - @include zf-gutters($negative: true); - - // Base cell styles - .cell { - @include zf-cell($type: margin); - } - - // Auto width - @include -zf-each-breakpoint() { - .#{$-zf-size}-auto { - @include zf-cell-size(auto, $type: margin); - } - } - - // Shrink - @include -zf-each-breakpoint() { - .#{$-zf-size}-shrink { - @include zf-cell-size(shrink, $type: margin); - } - } - - // Sizing classes - @include -zf-each-breakpoint { - @for $i from 1 through $grid-columns { - // Sizing (percentage) - .#{$-zf-size}-#{$i} { - @include zf-cell-size($i, $type: margin); - } - } - } - } -} - -// Padding Grid classes -@mixin zf-padding-grid-classes { - .padding-gutters { - - // Negative margin for nested grids - .padding-gutters { - @include zf-gutters($negative: true); - } - - // Base cell styles - .cell { - @include zf-cell($type: padding); - } - - // Auto width - @include -zf-each-breakpoint() { - .#{$-zf-size}-auto { - @include zf-cell-size(auto, $type: padding); - } - } - - // Shrink - @include -zf-each-breakpoint() { - .#{$-zf-size}-shrink { - @include zf-cell-size(shrink, $type: padding); - } - } - - // Sizing classes - @include -zf-each-breakpoint { - @for $i from 1 through $grid-columns { - // Sizing (percentage) - .#{$-zf-size}-#{$i} { - @include zf-cell-size($i, $type: padding); - } - } - } - } -} - -// Collapse classes -@mixin zf-collapse-grid-classes { - @include -zf-each-breakpoint { - .#{$-zf-size}-collapse { - margin-right: 0; - margin-left: 0; - - > .cell { - margin: 0; - padding: 0; - } - - @include -zf-each-breakpoint { - // Output new widths to not include gutters - @for $i from 1 through $grid-columns { - // Sizing (percentage) - & > .#{$-zf-size}-#{$i} { - @include zf-cell-size($i, $type: padding); - } - } - } - } - } -} - -// Final classes -@mixin zf-grid-classes($margin-grid: true, $padding-grid: true, $collapse: true) { - - // Grid Container - .grid-container { - @include zf-grid-container; - } - - // Base grid styles - .grid { - @include zf-grid; - } - - // Margin grid - @if($margin-grid) { - @include zf-margin-grid-classes(); - } - - // Padding grid - @if($padding-grid) { - @include zf-padding-grid-classes(); - } - - // Collapse gutters - @if($collapse) { - @include zf-collapse-grid-classes(); - } -} diff --git a/scss/zf-grid/_cell.scss b/scss/zf-grid/_cell.scss new file mode 100644 index 000000000..ccde316c6 --- /dev/null +++ b/scss/zf-grid/_cell.scss @@ -0,0 +1,145 @@ +// Foundation for Sites by ZURB +// foundation.zurb.com +// Licensed under MIT Open Source + +//// +/// @group zf-grid +//// + +/// Calculate the percentage size of a cell. +/// +/// @param {Number|List} $size [$grid-columns] - Size to make the cell. You can pass a value in multiple formats, such as `6`, `50%`, `1 of 2 or 1/3. +@function zf-cell-size( + $size: $grid-columns +) { + // Parsing percents, decimals, n of n and number counts + @if type-of($size) == 'number' { + @if unit($size) == '%' { + $size: $size; + } + @else if $size < 1 { + $size: percentage($size); + } + @else { + $size: percentage($size / $grid-columns); + } + } + + // Parsing "n of n" or "n/n" expressions + @else if type-of($size) == 'list' { + @if length($size) != 3 { + @error 'Wrong syntax for zf-cell-size(). Use the format "n of n" or "n/n".'; + } + @else { + $size: percentage(nth($size, 1) / nth($size, 3)); + } + } + + // Anything else is incorrect + @else { + @error 'Wrong syntax for zf-cell-size(). Use a number, decimal, percentage, or "n of n" / "n/n".'; + } + + @return $size; +} + +// Outputs sizing for full sized cells. +@mixin -zf-cell-full($gutters, $gutter-type, $gutter-position, $vertical) { + // Set either width or height depending on axis + $direction: if($vertical == true, height, width); + + // If we have a margin, output as calc + @if($gutter-type == 'margin') { + @include -zf-breakpoint-value(auto, $gutters) { + $gutter: rem-calc($-zf-bp-value); + flex: 1 1 calc(100% - #{$gutter}); + } + } + // If not margin, output as non-calc + @else { + flex: 1 1 100%; + } +} + +// Outputs sizing for auto sized cells. +@mixin -zf-cell-auto() { + flex: 1 1 0px; // sass-lint:disable-line zero-unit - https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored +} + +// Outputs sizing for shrinking sized cells. +@mixin -zf-cell-shrink($gutters, $gutter-type, $gutter-position, $vertical) { + // Set either width or height depending on axis + $direction: if($vertical == true, height, width); + + flex: 0 0 auto; + + // If we are margin, output as calc + @if($gutter-type == 'margin') { + @include -zf-breakpoint-value(auto, $gutters) { + $gutter: rem-calc($-zf-bp-value); + max-#{$direction}: calc(100% - #{$gutter}); + } + } + // If not margin, output as non-calc + @else { + max-#{$direction}: 100%; + } +} + +// Outputs sizing for sized cells. +@mixin -zf-cell-size($size, $gutters, $gutter-type, $gutter-position, $vertical) { + // Set either width or height depending on axis + $direction: if($vertical == true, height, width); + + // If we have a margin, output as calc + @if($gutter-type == 'margin') { + @include -zf-breakpoint-value(auto, $gutters) { + $gutter: rem-calc($-zf-bp-value); + flex: 0 0 calc(#{zf-cell-size($size)} - #{$gutter}); + max-#{$direction}: calc(#{zf-cell-size($size)} - #{$gutter}); + } + } + // If no margin, output as non-calc + @else { + flex: 0 0 zf-cell-size($size); + max-#{$direction}: zf-cell-size($size); + } +} + +/// Creates a cell for your grid. +/// +/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space. +/// @param {Boolean} $gutter-output [true] - Output out gutters or not. Set to false when using with breakpoints when the base styles have already been set. +/// @param {Number|Map} $margin [$grid-margin-gutters] - Map or single value for margin gutters. +/// @param {Number|Map} $padding [$grid-padding-gutters] - Map or single value for padding gutters. +/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination. +/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths. +@mixin zf-cell( + $size: full, + $gutter-output: true, + $gutters: $grid-margin-gutters, + $gutter-type: margin, + $gutter-position: right left, + $vertical: false +) { + // Sizing properties + @if($size == 'full') { + @include -zf-cell-full($gutters, $gutter-type, $gutter-position, $vertical); + } + @elseif($size == 'auto') { + @include -zf-cell-auto(); + } + @elseif($size == 'shrink') { + @include -zf-cell-shrink($gutters, $gutter-type, $gutter-position, $vertical); + } + + // If its not a keyword, just output our sizes + @else { + @include -zf-cell-size($size, $gutters, $gutter-type, $gutter-position, $vertical); + } + + // If we want to output the gutters + @if($gutter-output) { + @include zf-gutters($gutters, $gutter-type, $gutter-position); + } +} diff --git a/scss/zf-grid/_classes.scss b/scss/zf-grid/_classes.scss new file mode 100644 index 000000000..19e5696ca --- /dev/null +++ b/scss/zf-grid/_classes.scss @@ -0,0 +1,210 @@ +// Foundation for Sites by ZURB +// foundation.zurb.com +// Licensed under MIT Open Source + +//// +/// @group zf-grid +//// + +// Margin Grid classes +@mixin zf-base-grid-classes { + + // Grid Container + .grid-container { + @include zf-grid-container; + } + + // Base grid styles + .grid { + @include zf-grid; + } + + // Base cell styles + .cell { + @include zf-cell($gutter-output: false, $gutter-type: padding); + } + + // Auto width + @include -zf-each-breakpoint() { + > .#{$-zf-size}-auto { + @include zf-cell(auto, false, $gutter-type: padding); + } + } + + // Shrink + @include -zf-each-breakpoint() { + > .#{$-zf-size}-shrink { + @include zf-cell(shrink, false, $gutter-type: padding); + } + } + + // Sizing classes + @include -zf-each-breakpoint { + @for $i from 1 through $grid-columns { + // Sizing (percentage) + .#{$-zf-size}-#{$i} { + @include zf-cell($i, false, $gutter-type: padding); + } + } + } +} + +// Margin Grid classes +@mixin zf-margin-grid-classes { + .margin-gutters { + @include zf-gutters($negative: true); + + // Base cell styles + > .cell { + @include zf-cell(); + } + + // Auto width + @include -zf-each-breakpoint() { + > .#{$-zf-size}-auto { + @include zf-cell(auto, false); + } + } + + // Shrink + @include -zf-each-breakpoint() { + > .#{$-zf-size}-shrink { + @include zf-cell(shrink, false); + } + } + + // Sizing classes + @include -zf-each-breakpoint { + @for $i from 1 through $grid-columns { + // Sizing (percentage) + > .#{$-zf-size}-#{$i} { + @include zf-cell($i, false); + } + } + } + } +} + +// Padding Grid classes +@mixin zf-padding-grid-classes { + .padding-gutters { + + // Negative margin for nested grids + .padding-gutters { + @include zf-gutters($negative: true); + } + + // Base cell styles + > .cell { + @include zf-gutters($gutters: $grid-padding-gutters, $gutter-type: padding); + } + } +} + +// Collapse classes +@mixin zf-collapse-grid-classes { + @include -zf-each-breakpoint { + .#{$-zf-size}-margin-collapse { + @include zf-grid-collapse($gutter-type: margin); + } + + .#{$-zf-size}-padding-collapse { + @include zf-grid-collapse($gutter-type: padding); + } + } +} + +// Offset classes +@mixin zf-offset-cell-classes { + @include -zf-each-breakpoint { + @for $i from 1 through $grid-columns { + // Offsets + $o: $i - 1; + + .margin-gutters > .#{$-zf-size}-offset-#{$o} { + @include zf-cell-offset($o); + } + + .padding-gutters > .#{$-zf-size}-offset-#{$o} { + @include zf-cell-offset($o, $gutter-type: padding); + } + } + } +} + +// Vertical Grid classes +@mixin zf-vertical-grid-classes { + // Sizing classes + @include -zf-each-breakpoint { + @for $i from 1 through $grid-columns { + // Sizing (percentage) + .#{$-zf-size}-vertical-#{$i} { + @include zf-cell($i, false, $gutter-type: padding, $vertical: true); + } + } + } + + // Auto width + @include -zf-each-breakpoint() { + .#{$-zf-size}-vertical-auto { + @include zf-cell(auto, false, $vertical: true); + } + } + + // Shrink + @include -zf-each-breakpoint() { + .#{$-zf-size}-vertical-shrink { + @include zf-cell(shrink, false, $vertical: true); + } + } + + .grid-vertical.margin-gutters { + @include zf-gutters($gutter-position: top bottom, $negative: true); + + // Base cell styles + > .cell { + @include zf-cell($gutter-position: top bottom, $vertical: true); + } + } +} + +// Final classes +@mixin foundation-zf-grid-classes( + $base-grid: true, + $margin-grid: true, + $padding-grid: true, + $vertical-grid: true, + $collapse: true, + $offset: true +) { + + // Base grid styles + @if($base-grid) { + @include zf-base-grid-classes(); + } + + // Margin grid + @if($margin-grid) { + @include zf-margin-grid-classes(); + } + + // Padding grid + @if($padding-grid) { + @include zf-padding-grid-classes(); + } + + // Vertical grid + @if($vertical-grid) { + @include zf-vertical-grid-classes(); + } + + // Collapse gutters + @if($collapse) { + @include zf-collapse-grid-classes(); + } + + // Offset gutters + @if($offset) { + @include zf-offset-cell-classes(); + } +} diff --git a/scss/zf-grid/_collapse.scss b/scss/zf-grid/_collapse.scss new file mode 100644 index 000000000..a9e39d170 --- /dev/null +++ b/scss/zf-grid/_collapse.scss @@ -0,0 +1,61 @@ +// Foundation for Sites by ZURB +// foundation.zurb.com +// Licensed under MIT Open Source + +//// +/// @group zf-grid +//// + +/// Collapses the grid a cells within it. +/// +/// @param {String} $selector [.cell] - The child element to remove the gutter from. +/// @param {Keyword} $gutter-type [margin] - The type of gutter to remove. +/// @param {Number|Map} $margin [$grid-margin-gutters] - Map or single value for gutters. +/// @param {List} $gutter-position [right left] - The positions to remove gutters from. Accepts `top`, `bottom`, `left`, `right` in any combination. +@mixin zf-grid-collapse( + $selector: '.cell', + $gutter-type: margin, + $gutter-position: right left +) { + // First, lets negate any margins on the top level + @if ($gutter-type == 'margin') { + + @each $value in $gutter-position { + margin-#{$value}: 0; + + > #{$selector} { + margin-#{$value}: 0; + } + } + + @include -zf-each-breakpoint { + // Output new widths to not include gutters + @for $i from 1 through $grid-columns { + // Sizing (percentage) + > .#{$-zf-size}-#{$i} { + @include zf-cell($i, $gutter-output: false, $gutter-type: padding); + } + } + } + } + @else { + + @each $value in $gutter-position { + margin-#{$value}: 0; + + > .#{$selector} { + padding-#{$value}: 0; + } + } + + @include -zf-each-breakpoint { + // Output new widths to not include gutters + @for $i from 1 through $grid-columns { + // Sizing (percentage) + > .#{$-zf-size}-#{$i} { + @include zf-cell($i, $gutter-output: false, $gutter-type: padding); + } + } + } + } +} \ No newline at end of file diff --git a/scss/zf-grid/_grid.scss b/scss/zf-grid/_grid.scss new file mode 100644 index 000000000..163332d87 --- /dev/null +++ b/scss/zf-grid/_grid.scss @@ -0,0 +1,32 @@ +// Foundation for Sites by ZURB +// foundation.zurb.com +// Licensed under MIT Open Source + +//// +/// @group zf-grid +//// + +/// Creates a max width container, designed to house your grid content. +/// +/// @param {Number} $width [$grid-container] - a width to limit the container to. +@mixin zf-grid-container( + $width: $grid-container +) { + max-width: rem-calc($width); + margin: 0 auto; +} + +/// Creates a container for your flex cells. +/// +/// @param {Keyword} $direction [horizontal] - Either horizontal or vertical direction of cells within. +/// @param {Boolean} $wrap [true] - If the cells within should wrap or not. +@mixin zf-grid( + $direction: horizontal, + $wrap: true +) { + $direction: if($direction == 'horizontal', row, column); + $wrap: if($wrap, wrap, nowrap); + + display: flex; + flex-flow: $direction $wrap; +} diff --git a/scss/zf-grid/_gutters.scss b/scss/zf-grid/_gutters.scss new file mode 100644 index 000000000..abbdb6ff4 --- /dev/null +++ b/scss/zf-grid/_gutters.scss @@ -0,0 +1,45 @@ +// Foundation for Sites by ZURB +// foundation.zurb.com +// Licensed under MIT Open Source + +//// +/// @group zf-grid +//// + +/// Create gutters for a cell/container. +/// +/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters. +/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts either margin or padding. +/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination. +/// @param {Boolean} $negative [false] - Whether to apply the gutter as a negative value. Commonly used for nexted grids. +@mixin zf-gutters( + $gutters: $grid-margin-gutters, + $gutter-type: margin, + $gutter-position: right left, + $negative: false +) { + $operator: if($negative, '-', ''); + + // If we have declared negative gutters, force type to `margin. + $gutter-type: if($negative, 'margin', $gutter-type); + + // Output our margin gutters. + @if (type-of($gutters) == 'map') { + @include -zf-breakpoint-value(auto, $gutters) { + $gutter: rem-calc($-zf-bp-value) / 2; + + // Loop through each gutter position + @each $value in $gutter-position { + #{$gutter-type}-#{$value}: #{$operator}$gutter; + } + } + } + @elseif (type-of($gutters) == 'number') { + $gutter: rem-calc($margin) / 2; + + // Loop through each gutter position + @each $value in $gutter-position { + #{$gutter-type}-#{$value}: #{$operator}$gutter; + } + } +} diff --git a/scss/zf-grid/_position.scss b/scss/zf-grid/_position.scss new file mode 100644 index 000000000..078c1ac45 --- /dev/null +++ b/scss/zf-grid/_position.scss @@ -0,0 +1,30 @@ +// Foundation for Sites by ZURB +// foundation.zurb.com +// Licensed under MIT Open Source + +//// +/// @group zf-grid +//// + +/// Offsets a column to the right/bottom by `$n` columns. +/// +/// @param {Number|List} $n - Size to offset by. You can pass in any value accepted by the `zf-cell()` mixin, such as `6`, `50%`, or `1 of 2`. +/// @param {Boolean} $vertical [false] Sets the direction of the offset. If set to true will apply margin-top instead. +@mixin zf-cell-offset($n, $gutters: $grid-margin-gutters, $gutter-type: margin, $vertical: false) { + $direction: if($vertical, 'top', $global-left); + + @if (type-of($gutters) == 'map') { + @include -zf-breakpoint-value(auto, $gutters) { + $gutter: rem-calc($-zf-bp-value) / 2; + $size: if($gutter-type == 'margin', calc(#{zf-cell-size($n)} + #{$gutter}), #{zf-cell-size($n)}); + + margin-#{$direction}: #{$size}; + } + } + @else { + $gutter: rem-calc($-zf-bp-value) / 2; + $size: if($gutter-type == 'margin', calc(#{zf-cell-size($n)} + #{$gutter}), #{zf-cell-size($n)}); + + margin-#{$direction}: #{$size}; + } +} diff --git a/scss/zf-grid/_zf-grid.scss b/scss/zf-grid/_zf-grid.scss new file mode 100644 index 000000000..72b685ae1 --- /dev/null +++ b/scss/zf-grid/_zf-grid.scss @@ -0,0 +1,37 @@ +// Foundation for Sites by ZURB +// foundation.zurb.com +// Licensed under MIT Open Source + +//// +/// @group zf-grid +//// + +/// Enables the zf-grid. +/// @type Boolean +$zf-grid: true !default; + +/// The maximum width of a grid container. +/// @type Number +$grid-container: $global-width !default; + +/// The number of columns used in the grid. +/// @type Number +$grid-columns: 12 !default; + +/// The amount of margin between cells at different screen sizes when using the margin grid. To use just one size, set the variable to a number instead of a map. +/// @type Map | Length +$grid-margin-gutters: ( + small: 20px, + medium: 30px +) !default; + +/// The amount of padding in cells at different screen sizes when using the padding grid. To use just one size, set the variable to a number instead of a map. +/// @type Map | Length +$grid-padding-gutters: $grid-margin-gutters !default; + +@import 'gutters'; +@import 'grid'; +@import 'cell'; +@import 'position'; +@import 'collapse'; +@import 'classes'; diff --git a/test/visual/zf-grid/kitchen-sink.html b/test/visual/zf-grid/kitchen-sink.html new file mode 100644 index 000000000..5051412f5 --- /dev/null +++ b/test/visual/zf-grid/kitchen-sink.html @@ -0,0 +1,149 @@ + + + + + + + Foundation for Sites Testing + + + + + + +

Demo showing the padding/margin gutter options

+ +

Key:

+
This shows the padding of the cells
+
This shows the cell
+ +
+ + + + +
+
12
+
11
+
1
+
10
+
2
+
9
+
3
+
8
+
4
+
7
+
5
+
6
+
4
+
+ +

Margin gutters nested example

+
+
+
+
6 nested
+
6 nested
+
+
+
6
+
+ +

Padding gutters nested example

+
+
+
+
6 nested
+
6 nested
+
+
+
6
+
+ +

Mixed gutters nested example

+
+
+
+
6 nested
+
6 nested
+
+
+
6
+
+ +

Mixed gutters nested example

+
+
+
+
6 nested
+
6 nested
+
+
+
6
+
+ +

Vertical grid

+
+
12
+
11
+
1
+
10
+
2
+
9
+
3
+
8
+
4
+
7
+
5
+
6
+
4
+
+ + + + + + diff --git a/test/visual/zf-grid/margin-grid.html b/test/visual/zf-grid/margin-grid.html new file mode 100644 index 000000000..c4ab8975c --- /dev/null +++ b/test/visual/zf-grid/margin-grid.html @@ -0,0 +1,106 @@ + + + + + + + zf margin grid + + + + +

Margin Grid

+ +

Sizing Classes

+ +
+
12
+
11
+
1
+
10
+
2
+
9
+
3
+
8
+
4
+
7
+
5
+
6
+
4
+
+ +

Nesting

+ +
+
+
+
9 nested
+
3 nested
+
+
+
11
+
+ +

Auto and Shrink

+ +
+
Shrink on medium
+
Auto on medium
+
+ +

Collapse

+ +
+
12
+
11
+
1
+
10
+
2
+
9
+
3
+
8
+
4
+
7
+
5
+
6
+
4
+
+ +

Offset

+ +
+
3
+
4
+
+ +

Push/Pull

+ +
+
3
+
4
+
+ + + + + + diff --git a/test/visual/zf-grid/padding-grid.html b/test/visual/zf-grid/padding-grid.html new file mode 100644 index 000000000..84c8ac490 --- /dev/null +++ b/test/visual/zf-grid/padding-grid.html @@ -0,0 +1,106 @@ + + + + + + + zf padding grid + + + + +

Padding Grid - red shows the padding gutters

+ +

Sizing Classes

+ +
+
12
+
11
+
1
+
10
+
2
+
9
+
3
+
8
+
4
+
7
+
5
+
6
+
4
+
+ +

Nesting

+ +
+
+
+
9 nested
+
3 nested
+
+
+
11
+
+ +

Auto and Shrink

+ +
+
Shrink on medium
+
Auto on medium
+
+ +

Collapse

+ +
+
12
+
11
+
1
+
10
+
2
+
9
+
3
+
8
+
4
+
7
+
5
+
6
+
4
+
+ +

Offset

+ +
+
3
+
4
+
+ +

Push/Pull

+ +
+
3
+
4
+
+ + + + + + diff --git a/test/visual/zf-grid/vertical-grid.html b/test/visual/zf-grid/vertical-grid.html new file mode 100644 index 000000000..41e24f80c --- /dev/null +++ b/test/visual/zf-grid/vertical-grid.html @@ -0,0 +1,74 @@ + + + + + + + zf vertical grid + + + + +

Vertical Grid

+ +

Sizing Classes

+ +
+
5
+
4
+
3
+
+ +

Auto and Shrink

+ +
+
Shrink on medium
+
Auto on medium
+
+ +

Collapse

+ +
+
12
+
11
+
1
+
10
+
2
+
9
+
3
+
8
+
4
+
7
+
5
+
6
+
4
+
+ +

Offset

+ +
+
3
+
4
+
+ + + + + + -- 2.47.2