}
// Flex Grid
[id^="docs-zf"].docs-component .docs-code-live {
- @include foundation-zf-grid-classes;
+ @include foundation-xy-grid-classes;
.grid {
background: #f9f9f9;
---
-title: ZF Grid
+title: XY Grid
description: A fully reworked new grid system in v6.4 which has all the variety inbuilt in the form of multiple grid types which includes margin grid, padding grid, frame grid, block grid and vertical grid.
-sass: scss/grid/_zf-grid.scss
+sass: scss/xy-grid/_xy-grid.scss
---
-The flex grid works very similarly to the standard float grid, but includes a number of useful features only possible with flexbox, like horizontal and vertical alignment, automatic sizing, and easier source ordering.
+The XY grid works very similarly to the standard float grid, but includes a number of useful features only possible with flexbox, like horizontal and vertical alignment, automatic sizing, and easier source ordering.
---
## Browser support
-The flex grid is only supported in Chrome, Firefox, Safari 6+, IE10+, iOS 7+, and Android 4.4+. Flexbox is supported in Android 2, but not reliably enough for use with this grid. ([View flexbox browser support.](http://caniuse.com/#feat=flexbox)) We recommend only using the flex grid on projects that can live with purely cutting-edge browser support.
+XY grid is only supported in Chrome, Firefox, Safari 6+, IE10+, iOS 7+, and Android 4.4+. Flexbox is supported in Android 2, but not reliably enough for use with this grid. ([View flexbox browser support.](http://caniuse.com/#feat=flexbox)) We recommend only using the flex grid on projects that can live with purely cutting-edge browser support.
---
```scss
@import 'foundation';
-@include zf-grid;
-@include zf-grid-classes;
+@include xy-grid;
+@include xy-grid-classes;
```
---
// Components
@import 'grid/grid';
-@import 'zf-grid/zf-grid';
+@import 'xy-grid/xy-grid';
@import 'typography/typography';
@import 'forms/forms';
@import 'components/visibility';
@include foundation-grid;
}
@else {
- @if $zf-grid {
- @include foundation-zf-grid-classes;
+ @if $xy-grid {
+ @include foundation-xy-grid-classes;
}
@else {
@include foundation-flex-grid;
// Licensed under MIT Open Source
////
-/// @group zf-grid
+/// @group xy-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(
+@function xy-cell-size(
$size: $grid-columns
) {
// Parsing percents, decimals, n of n and number counts
// Parsing "n of n" or "n/n" expressions
@elseif type-of($size) == 'list' {
@if length($size) != 3 {
- @error 'Wrong syntax for zf-cell-size(). Use the format "n of n" or "n/n".';
+ @error 'Wrong syntax for xy-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".';
+ @error 'Wrong syntax for xy-cell-size(). Use a number, decimal, percentage, or "n of n" / "n/n".';
}
@return $size;
}
-@mixin zf-cell-base($size: full) {
+/// Sets base flex properties for cells.
+///
+/// @param {Keyword} $size [full] - The size of your cell. Accepts `full`, `auto` or `shrink`.
+@mixin xy-cell-base($size: full) {
min-height: 0px;
min-width: 0px;
@if($size == 'full') {
}
}
-@mixin zf-cell-reset($vertical: true) {
+/// Resets a cells width (or height if vertical is true) as well as strips its gutters.
+///
+/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
+@mixin xy-cell-reset($vertical: true) {
$direction: if($vertical == true, width, height);
$sides: if($vertical == true, left right, top bottom);
#{$direction}: auto;
}
}
-@mixin -zf-cell-properties($size, $margin-gutter, $vertical) {
+// Sets our cell widths or heights depending on gutter type.
+@mixin -xy-cell-properties($size, $margin-gutter, $vertical) {
$direction: if($vertical == true, height, width);
@if($size == 'full') {
$val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));
#{$direction}: auto;
}
@else {
- $val: if($margin-gutter == 0, #{zf-cell-size($size)}, calc(#{zf-cell-size($size)} - #{rem-calc($margin-gutter)}));
+ $val: if($margin-gutter == 0, #{xy-cell-size($size)}, calc(#{xy-cell-size($size)} - #{rem-calc($margin-gutter)}));
#{$direction}: $val;
}
}
-
/// 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 {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.
/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
-@mixin zf-cell(
+@mixin xy-cell(
$size: full,
$gutter-output: true,
$gutters: $grid-margin-gutters,
$gutter: -zf-get-bp-val($gutters, $breakpoint);
// Base flex properties
- @include zf-cell-base($size);
+ @include xy-cell-base($size);
@if($gutter-type == 'margin') {
- @include -zf-cell-properties($size, $gutter, $vertical);
+ @include -xy-cell-properties($size, $gutter, $vertical);
}
@else {
- @include -zf-cell-properties($size, 0, $vertical);
+ @include -xy-cell-properties($size, 0, $vertical);
}
@if $gutter-output {
@if(type-of($gutters) == 'map') {
// If $gutters map has a key = $breakpoint, output the value
@if (map-has-key($gutters, $breakpoint)) {
- @include zf-gutters($gutter, $gutter-type, $gutter-position);
+ @include xy-gutters($gutter, $gutter-type, $gutter-position);
}
}
// If not a map
@else {
- @include zf-gutters($gutter, $gutter-type, $gutter-position);
+ @include xy-gutters($gutter, $gutter-type, $gutter-position);
}
}
}
-@mixin zf-cell-static(
+/// Creates a single breakpoint sized grid. Used to generate our grid classes.
+///
+/// @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] - Whether or not to output gutters
+/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
+/// @param {Keyword} $gutter-type [margin] - 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. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
+/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
+@mixin xy-cell-static(
$size: full,
$gutter-output: true,
$gutters: $grid-margin-gutters,
- $breakpoint: $-zf-zero-breakpoint,
$gutter-type: margin,
+ $breakpoint: $-zf-zero-breakpoint,
$vertical: false
) {
$gutter-position: if($vertical == true, top bottom, left right);
@if($gutter-type == 'margin') {
- @include -zf-cell-properties($size, $gutter, $vertical);
+ @include -xy-cell-properties($size, $gutter, $vertical);
}
@else {
- @include -zf-cell-properties($size, 0, $vertical);
+ @include -xy-cell-properties($size, 0, $vertical);
}
// If we want to output the gutters
@if($gutter-output) {
// TODO: Figure out if we need to pass breakpoint in here too.
- @include zf-gutters($gutter, $gutter-type, $gutter-position);
+ @include xy-gutters($gutter, $gutter-type, $gutter-position);
}
}
/// Modifies a cell to give it "block" behavior (overflow auto, inertial scrolling)
///
/// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid.
-@mixin zf-cell-block(
+@mixin xy-cell-block(
$vertical: false
) {
$property: if($vertical == true, 'overflow-y', 'overflow-x');
/// Container for inside a grid frame containing multiple blocks. Typically used
/// as a modifier for a `.cell` to allow the cell to pass along flex sizing
/// constraints / from parents to children.
-@mixin zf-cell-block-container() {
+@mixin xy-cell-block-container() {
display: flex;
flex-direction: column;
max-height: 100%;
// Licensed under MIT Open Source
////
-/// @group zf-grid
+/// @group xy-grid
////
// Margin Grid classes
-@mixin zf-base-grid-classes {
+@mixin xy-base-grid-classes {
// Grid Container
.grid-container {
- @include zf-grid-container;
+ @include xy-grid-container;
}
// Base grid styles
.grid {
- @include zf-grid;
+ @include xy-grid;
}
// Framed grid styles
.grid-frame {
- @include zf-grid-frame;
+ @include xy-grid-frame;
}
.cell {
- @include zf-cell-base();
- @include zf-cell-static($grid-columns, false, $gutter-type: padding);
+ @include xy-cell-base();
+ @include xy-cell-static($grid-columns, false, $gutter-type: padding);
}
.cell-block {
- @include zf-cell-block();
+ @include xy-cell-block();
}
.cell-block-container {
- @include zf-cell-block-container();
+ @include xy-cell-block-container();
}
.grid {
> .auto {
- @include zf-cell-base(auto);
- @include zf-cell-static(auto, false);
+ @include xy-cell-base(auto);
+ @include xy-cell-static(auto, false);
}
> .shrink {
- @include zf-cell-base(shrink);
- @include zf-cell-static(shrink, false);
+ @include xy-cell-base(shrink);
+ @include xy-cell-static(shrink, false);
}
}
@include -zf-each-breakpoint() {
@if not($-zf-size == small) {
.grid > .#{$-zf-size}-auto {
- @include zf-cell-base(auto);
- @include zf-cell-static(auto, false);
+ @include xy-cell-base(auto);
+ @include xy-cell-static(auto, false);
}
.grid > .#{$-zf-size}-shrink {
- @include zf-cell-base(shrink);
- @include zf-cell-static(shrink, false);
+ @include xy-cell-base(shrink);
+ @include xy-cell-static(shrink, false);
}
&.#{$-zf-size}-grid-frame {
width: auto;
- @include zf-grid-frame(true);
+ @include xy-grid-frame(true);
}
.#{$-zf-size}-cell-block {
- @include zf-cell-block();
+ @include xy-cell-block();
}
}
@for $i from 1 through $grid-columns {
// Sizing (percentage)
.#{$-zf-size}-#{$i} {
- @include zf-cell-static($i, false, $gutter-type: padding);
+ @include xy-cell-static($i, false, $gutter-type: padding);
}
}
}
}
-@mixin -zf-breakpoint-cell-classes($class-breakpoint, $gutter-breakpoint, $vertical) {
+@mixin -xy-breakpoint-cell-classes($class-breakpoint, $gutter-breakpoint, $vertical) {
$prefix: if($class-breakpoint == $-zf-zero-breakpoint, '', '#{$class-breakpoint}-');
> .#{$prefix}auto {
- @include zf-cell-static(auto, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);
+ @include xy-cell-static(auto, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);
}
> .#{$prefix}shrink {
- @include zf-cell-static(shrink, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);
+ @include xy-cell-static(shrink, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);
}
@for $i from 1 through $grid-columns {
$classname: if($vertical, '.#{$class-breakpoint}-vertical-#{$i}', '.#{$class-breakpoint}-#{$i}');
> #{$classname} {
- @include zf-cell-static($i, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);
+ @include xy-cell-static($i, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);
}
}
}
// Margin Grid classes
-@mixin zf-margin-grid-classes(
+@mixin xy-margin-grid-classes(
$gutter-position: left right,
$vertical: false,
$wrapping-selector: '.margin-gutters'
){
#{$wrapping-selector} {
- @include zf-gutters($negative: true, $gutter-position: $gutter-position);
+ @include xy-gutters($negative: true, $gutter-position: $gutter-position);
// Base cell styles
> .cell {
- @include zf-cell-static($vertical: $vertical);
+ @include xy-cell-static($vertical: $vertical);
}
// base styles need to all be before the auto and shrink styles
@include -zf-each-breakpoint() {
@if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size) and $-zf-size != $-zf-zero-breakpoint) {
> .cell {
- @include zf-cell-static($breakpoint: $-zf-size, $vertical: $vertical);
+ @include xy-cell-static($breakpoint: $-zf-size, $vertical: $vertical);
}
}
}
// This is purely for responsive gutters - the margin grid has to go back and adjust widths (or heights)
// for prior breakpoints based on the responsive gutter.
@if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) {
- @each $bp in -zf-breakpoints-less-than($-zf-size) {
+ @each $bp in -xy-breakpoints-less-than($-zf-size) {
@if(map-has-key($grid-margin-gutters, $bp)) {
- @include -zf-breakpoint-cell-classes($bp, $-zf-size, $vertical);
+ @include -xy-breakpoint-cell-classes($bp, $-zf-size, $vertical);
}
}
}
- @include -zf-breakpoint-cell-classes($-zf-size, $-zf-size, $vertical);
+ @include -xy-breakpoint-cell-classes($-zf-size, $-zf-size, $vertical);
}
}
}
// Padding Grid classes
-@mixin zf-padding-grid-classes {
+@mixin xy-padding-grid-classes {
.padding-gutters {
// Negative margin for nested grids
.padding-gutters {
- @include zf-gutters($negative: true);
+ @include xy-gutters($negative: true);
}
// Base cell styles
> .cell {
- @include zf-gutters($gutters: $grid-padding-gutters, $gutter-type: padding);
+ @include xy-gutters($gutters: $grid-padding-gutters, $gutter-type: padding);
}
}
}
// Block Grid classes
-@mixin zf-block-grid-classes($margin-grid: true, $padding-grid: true) {
+@mixin xy-block-grid-classes($margin-grid: true, $padding-grid: true) {
@if $margin-grid {
@include -zf-each-breakpoint {
@for $i from 1 through $block-grid-max {
@each $bp in -zf-breakpoints-less-than($-zf-size) {
@if(map-has-key($grid-margin-gutters, $bp)) {
.margin-gutters.#{$bp}-up-#{$i} {
- @include zf-grid-layout($i, '.cell', false, $gutter-type: margin, $breakpoint: $bp);
+ @include xy-grid-layout($i, '.cell', false, $gutter-type: margin, $breakpoint: $bp);
}
}
}
}
@for $i from 1 through $block-grid-max {
.margin-gutters.#{$-zf-size}-up-#{$i} {
- @include zf-grid-layout($i, '.cell', false, $gutter-type: margin, $breakpoint: $-zf-size);
+ @include xy-grid-layout($i, '.cell', false, $gutter-type: margin, $breakpoint: $-zf-size);
}
}
}
@include -zf-each-breakpoint {
@for $i from 1 through $block-grid-max {
.padding-gutters.#{$-zf-size}-up-#{$i} {
- @include zf-grid-layout($i, '.cell', false, $gutter-type: padding);
+ @include xy-grid-layout($i, '.cell', false, $gutter-type: padding);
}
}
}
}
// Collapse classes
-@mixin zf-collapse-grid-classes($margin-grid: true, $padding-grid: true) {
+@mixin xy-collapse-grid-classes($margin-grid: true, $padding-grid: true) {
@include -zf-each-breakpoint {
@if $margin-grid {
.#{$-zf-size}-margin-collapse {
- @include zf-grid-collapse($gutter-type: margin);
+ @include xy-grid-collapse($gutter-type: margin);
}
}
@if $padding-grid {
.#{$-zf-size}-padding-collapse {
- @include zf-grid-collapse($gutter-type: padding);
+ @include xy-grid-collapse($gutter-type: padding);
}
}
}
}
// Offset classes
-@mixin zf-offset-cell-classes {
+@mixin xy-offset-cell-classes {
@include -zf-each-breakpoint {
@for $i from 1 through $grid-columns {
// Offsets
$o: $i - 1;
.#{$-zf-size}-offset-#{$o} {
- @include zf-cell-offset($o, $gutters: $grid-padding-gutters, $gutter-type: padding, $breakpoint: $-zf-size);
+ @include xy-cell-offset($o, $gutters: $grid-padding-gutters, $gutter-type: padding, $breakpoint: $-zf-size);
}
.margin-gutters > .#{$-zf-size}-offset-#{$o} {
- @include zf-cell-offset($o, $breakpoint: $-zf-size);
+ @include xy-cell-offset($o, $breakpoint: $-zf-size);
}
}
}
}
// Vertical Grid classes
-@mixin zf-vertical-grid-classes(
+@mixin xy-vertical-grid-classes(
$margin-grid: true,
$padding-grid: true
) {
.cell-block-vertical {
- @include zf-cell-block(true);
+ @include xy-cell-block(true);
}
@include -zf-each-breakpoint() {
@if not($-zf-size == small) {
.#{$-zf-size}-cell-block-vertical {
- @include zf-cell-block(true);
+ @include xy-cell-block(true);
}
}
}
.grid-vertical {
- @include zf-grid(vertical);
+ @include xy-grid(vertical);
&.grid-frame {
width: auto;
- @include zf-grid-frame(true);
+ @include xy-grid-frame(true);
}
> .cell {
- @include zf-cell-reset();
+ @include xy-cell-reset();
}
> .auto {
- @include zf-cell-static(auto, false, $breakpoint: $-zf-size, $vertical: true);
+ @include xy-cell-static(auto, false, $breakpoint: $-zf-size, $vertical: true);
}
> .shrink {
- @include zf-cell-static(shrink, false, $breakpoint: $-zf-size, $vertical: true);
+ @include xy-cell-static(shrink, false, $breakpoint: $-zf-size, $vertical: true);
}
@include -zf-each-breakpoint() {
@if not($-zf-size == small) {
> .#{$-zf-size}-auto {
- @include zf-cell-static(auto, false, $breakpoint: $-zf-size, $vertical: true);
+ @include xy-cell-static(auto, false, $breakpoint: $-zf-size, $vertical: true);
}
> .#{$-zf-size}-shrink {
- @include zf-cell-static(shrink, false, $breakpoint: $-zf-size, $vertical: true);
+ @include xy-cell-static(shrink, false, $breakpoint: $-zf-size, $vertical: true);
}
&.#{$-zf-size}-grid-frame {
width: auto;
- @include zf-grid-frame(true);
+ @include xy-grid-frame(true);
}
}
@for $i from 1 through $grid-columns {
// Sizing (percentage)
> .#{$-zf-size}-vertical-#{$i} {
- @include zf-cell-static($i, false, $vertical: true, $gutter-type: padding);
+ @include xy-cell-static($i, false, $vertical: true, $gutter-type: padding);
}
}
}
&.padding-gutters {
// Negative margin for nested grids
.padding-gutters {
- @include zf-gutters($negative: true, $gutter-position: top bottom);
+ @include xy-gutters($negative: true, $gutter-position: top bottom);
}
// Base cell styles
> .cell {
- @include zf-gutters($gutters: $grid-padding-gutters, $gutter-type: padding, $gutter-position: top bottom);
+ @include xy-gutters($gutters: $grid-padding-gutters, $gutter-type: padding, $gutter-position: top bottom);
}
}
}
}
@if $margin-grid {
- @include zf-margin-grid-classes(top bottom, true, '.grid-vertical.margin-gutters')
+ @include xy-margin-grid-classes(top bottom, true, '.grid-vertical.margin-gutters')
}
}
// Final classes
-@mixin foundation-zf-grid-classes(
+@mixin foundation-xy-grid-classes(
$base-grid: true,
$margin-grid: true,
$padding-grid: true,
// Base grid styles
@if($base-grid) {
- @include zf-base-grid-classes();
+ @include xy-base-grid-classes();
}
// Margin grid
@if($margin-grid) {
- @include zf-margin-grid-classes();
+ @include xy-margin-grid-classes();
}
// Padding grid
@if($padding-grid) {
- @include zf-padding-grid-classes();
+ @include xy-padding-grid-classes();
}
// Block grid
@if($block-grid) {
- @include zf-block-grid-classes($margin-grid, $padding-grid);
+ @include xy-block-grid-classes($margin-grid, $padding-grid);
}
// Collapse gutters
@if($collapse) {
- @include zf-collapse-grid-classes($margin-grid, $padding-grid);
+ @include xy-collapse-grid-classes($margin-grid, $padding-grid);
}
// Offset gutters
@if($offset) {
- @include zf-offset-cell-classes();
+ @include xy-offset-cell-classes();
}
// Vertical grid
@if($vertical-grid) {
- @include zf-vertical-grid-classes($margin-grid, $padding-grid);
+ @include xy-vertical-grid-classes($margin-grid, $padding-grid);
}
}
// Licensed under MIT Open Source
////
-/// @group zf-grid
+/// @group xy-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(
+@mixin xy-grid-collapse(
$selector: '.cell',
$gutter-type: margin,
$gutter-position: right left
@for $i from 1 through $grid-columns {
// Sizing (percentage)
> .#{$bp}-#{$i} {
- @include zf-cell-static($i, $gutter-output: false, $gutter-type: padding);
+ @include xy-cell-static($i, $gutter-output: false, $gutter-type: padding);
}
}
}
// Licensed under MIT Open Source
////
-/// @group zf-grid
+/// @group xy-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(
+@mixin xy-grid-container(
$width: $grid-container
) {
max-width: rem-calc($width);
///
/// @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(
+@mixin xy-grid(
$direction: horizontal,
$wrap: true
) {
/// Modifies a grid to give it "frame" behavior (no overflow, no wrap, stretch behavior)
///
/// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid.
-@mixin zf-grid-frame(
+/// @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
) {
// Licensed under MIT Open Source
////
-/// @group zf-grid
+/// @group xy-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(
+/// @param {Boolean} $negative [false] - Whether to apply the gutter as a negative value. Commonly used for nested grids.
+@mixin xy-gutters(
$gutters: $grid-margin-gutters,
$gutter-type: margin,
$gutter-position: right left,
// Licensed under MIT Open Source
////
-/// @group zf-grid
+/// @group xy-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 {String} $selector ['.cell'] - Selector(s) to use for child elements.
/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters
/// @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 {Keyword} $gutter-type [margin] - Type of gutter 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 zf-grid-layout(
+@mixin xy-grid-layout(
$n,
$selector: '.cell',
$gutter-output: true,
$size: percentage(1/$n);
& > #{$selector} {
- @include zf-cell($size, $gutter-output, $gutter-type: $gutter-type, $gutter-position: $gutter-position, $vertical: $vertical);
+ @include xy-cell($size, $gutter-output, $gutter-type: $gutter-type, $gutter-position: $gutter-position, $vertical: $vertical);
}
}
// Licensed under MIT Open Source
////
-/// @group zf-grid
+/// @group xy-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(
+@mixin xy-cell-offset(
$n,
$gutters: $grid-margin-gutters,
$gutter-type: margin,
@include -zf-breakpoint-value($breakpoint, $gutters) {
$gutter: rem-calc($-zf-bp-value) / 2;
- $size: if($gutter-type == 'margin', calc(#{zf-cell-size($n)} + #{$gutter}), #{zf-cell-size($n)});
+ $size: if($gutter-type == 'margin', calc(#{xy-cell-size($n)} + #{$gutter}), #{xy-cell-size($n)});
margin-#{$direction}: #{$size};
}
// Licensed under MIT Open Source
////
-/// @group zf-grid
+/// @group xy-grid
////
-/// Enables the zf-grid.
+/// Enables the XY grid.
/// @type Boolean
-$zf-grid: true !default;
+$xy-grid: true !default;
/// The maximum width of a grid container.
/// @type Number
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
- <title>zf block grid</title>
+ <title>xy block grid</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
body {
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
- <title>zf margin grid</title>
+ <title>xy frame grid</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
body {
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
- <title>zf margin grid</title>
+ <title>xy margin grid</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
body {
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
- <title>zf padding grid</title>
+ <title>xy padding grid</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
body {
/*background: dodgerblue;*/
color: white;
text-align: center;
- margin-bottom: 30px;
}
</style>
</head>
<body>
<h1>Vertical Grid</h1>
+ <h2>Margin Grid</h2>
+
<div class="grid-vertical margin-gutters" style="height: 800px;">
<div class="cell small-vertical-auto medium-vertical-3 large-vertical-1"><div class="demo">auto/3/1</div></div>
<div class="cell small-vertical-auto medium-vertical-3 large-vertical-2"><div class="demo">auto/3/2</div></div>
<div class="cell small-vertical-auto medium-vertical-3 large-vertical-5"><div class="demo">auto/3/5</div></div>
</div>
+ <h2>Padding Grid</h2>
+
<div class="grid-vertical grid-frame padding-gutters" style="height: 800px;">
<div class="cell small-vertical-auto medium-vertical-3 large-vertical-1"><div class="demo">auto/3/1</div></div>
<div class="cell small-vertical-auto medium-vertical-3 large-vertical-2"><div class="demo">auto/3/2</div></div>
$(document).foundation();
</script>
</body>
-</html>
\ No newline at end of file
+</html>
projects / thirdparty / foundation / foundation-sites.git / commitdiff
