Add new `grid-layout` mixin for creating block grids

diff --git a/scss/zf-grid/_layout.scss b/scss/zf-grid/_layout.scss
new file mode 100644 (file)
index 0000000..0f38331
--- /dev/null
+++ b/scss/zf-grid/_layout.scss
@@ -0,0 +1,29 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group zf-grid
+////
+
+/// Sizes child elements so that `$n` number of items appear on each row.
+///
+/// @param {Number} $n - Number of elements to display per row.
+/// @param {String} $selector ['.column'] - Selector(s) to use for child elements.
+/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
+/// @param {Keyword} $gutter-type [margin] - Type of margin to output. Accepts `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} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
+@mixin grid-layout(
+  $n,
+  $selector: '.cell',
+  $gutters: $grid-margin-gutters,
+  $gutter-type: margin,
+  $gutter-position: right left,
+  $breakpoint: $-zf-zero-breakpoint,
+  $vertical: false
+) {
+  & > #{$selector} {
+    @include zf-cell($n, $gutter-type: $gutter-type, $gutter-position: $gutter-position, $vertical: $vertical);
+  }
+}

diff --git a/scss/zf-grid/_zf-grid.scss b/scss/zf-grid/_zf-grid.scss
index 72b685ae198cccc69902a16000448b5cc9f0c5b3..e06ebcecf9043793591e9586284bc193d4b8443a 100644 (file)
--- a/scss/zf-grid/_zf-grid.scss
+++ b/scss/zf-grid/_zf-grid.scss
@@ -33,5 +33,6 @@ $grid-padding-gutters: $grid-margin-gutters !default;
 @import 'grid';
 @import 'cell';
 @import 'position';
+@import 'layout';
 @import 'collapse';
 @import 'classes';