tjhintz/farm
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial public release.

Browse Source
This commit is contained in:
Thomas Hintz
2020-02-05 18:04:50 -08:00
commit de7cf70319
173 changed files with 35469 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

272
src/foundation/xy-grid/_cell.scss Normal file
View File

@@ -0,0 +1,272 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group xy-grid
////
/// Returns the appropriate CSS flex value for a cell base.
///
/// @param {Keyword} $size [full] - The size of your cell. Accepts `full`, `auto`, `shrink`, `grow`, or any other value representing a cell size (it will be treated as `shrink`).
///
/// @returns {List} The cell flex property value.
@function xy-cell-base($size: full) {
@if ($size == 'auto') {
@return 1 1 0px;
}
@else if ($size == 'grow') {
@return 1 0 auto;
}
@else if ($size == 'shrink' or $size == 'full' or zf-is-fraction($size, $allow-no-denominator: true)) {
@return 0 0 auto;
}
@return null;
}
/// Calculate the size of a cell gutters.
///
/// @param {Number|Map} $gutters [$grid-margin-gutters] - 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 `auto`, returns the responsive gutters map `$gutters`. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
///
/// @returns {Number|Map} The cell gutter size or the responsive gutters map.
@function xy-cell-gutters(
$gutters: $grid-margin-gutters,
$breakpoint: null
) {
// For `auto`, returns the responsive map `$gutters`.
@if ($breakpoint == 'auto') {
@return $gutters;
}
// Use the contextual breakpoint by default.
$breakpoint: -zf-current-breakpoint($breakpoint);
@if ($breakpoint) {
@return -zf-get-bp-val($gutters, $breakpoint);
}
@else {
@return -zf-get-bp-val($gutters, $-zf-zero-breakpoint) or 0;
}
}
/// Returns 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`.
///
/// @returns {Number} Size of the cell (in percent).
@function xy-cell-size(
$size: $grid-columns
) {
@return fraction-to-percentage($size, $denominator: $grid-columns);
}
/// Returns the appropriate CSS value for a cell size.
///
/// Gutters-related arguments are required for cells with margin gutters (by default) as the gutter is included in the width.
///
/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full`, `auto`, `shrink` or any fraction like `6`, `50%`, `1 of 2` or `1/2`.
/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin`, `padding` or `none`.
/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If `auto`, returns a map of sizes adapted to responsive gutters. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
///
/// @returns {Number|String|Map} The cell sizing property value, or a responsive map of them.
@function xy-cell-size-css(
$size: full,
$gutters: $grid-margin-gutters,
$gutter-type: margin,
$breakpoint: null
) {
$margin-gutter: 0;
@if ($size == 'auto' or $size == 'shrink') {
@return auto;
}
// For cells with margin gutters, the gutter is included in the width.
@if ($gutter-type == 'margin') {
$margin-gutter: xy-cell-gutters($gutters, $breakpoint);
@if ($margin-gutter == null) {
@error 'xy-cell-size: no gutters were found in `$gutters` for "$breakpoint: #{$breakpoint}"';
}
}
// Calculate the cell size (number)
$size-raw: if($size == 'full', 100%, xy-cell-size($size));
// Calculate the cell CSS size including gutters (string)
// If the cell has responsive margin gutters, return a responsive map of sizes.
@if type-of($margin-gutter) == 'map' {
$responsive-css-sizes: ();
@each $bp, $mg in $margin-gutter {
$size-css: if($mg == 0, $size-raw, calc(#{$size-raw} - #{rem-calc($mg)}));
$responsive-css-sizes: map-merge($responsive-css-sizes, ($bp: $size-css));
}
@return $responsive-css-sizes;
}
// Otherwise, return a single CSS size.
@else {
$css-size: if($margin-gutter == 0, $size-raw, calc(#{$size-raw} - #{rem-calc($margin-gutter)}));
@return $css-size;
}
}
/// Sets base flex properties for cells.
///
/// @param {Keyword} $size [full] - The size of your cell. Accepts `full`, `auto`, `shrink`, `grow`, or any other value representing a cell size (it will be treated as `shrink`).
@mixin xy-cell-base($size: full) {
$base: xy-cell-base($size);
flex: #{$base};
// Set base styles for "full" only
@if($size == 'full') {
min-height: 0px;
min-width: 0px;
}
}
/// 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, height, width);
#{$direction}: auto;
max-#{$direction}: none;
}
/// Sets sizing properties for cells.
///
/// Gutters-related arguments are required for cells with margin gutters (by default) as the gutter is included in the width.
///
/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (100% width), `auto` (use all available space), `shrink` (use only the required space) or any fraction (`6`, `50%`, `1 of 2` or `1/2`...).
/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin`, `padding` or `none`.
/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If `auto`, generates sizes adapted for responsive gutters. 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-size(
$size: full,
$gutters: $grid-margin-gutters,
$gutter-type: margin,
$breakpoint: null,
$vertical: false
) {
$sizes: xy-cell-size-css($size, $gutters, $gutter-type, $breakpoint);
$direction: if($vertical == true, height, width);
@if (type-of($sizes) == 'map') {
@include -zf-breakpoint-value(auto, $sizes) {
#{$direction}: $-zf-bp-value;
}
}
@else {
#{$direction}: $sizes;
}
}
/// Sets gutters properties for cells.
///
/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin`, `padding` or `none`.
/// @param {List} $gutter-position [null] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination. By default `right left` for horizontal cells and `top bottom` for vertical cells.
/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If `auto`, generates responsive gutters. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
/// @param {Boolean} $vertical [false] - Direction of the gutters to output. See `$gutter-position`.
@mixin xy-cell-gutters(
$gutters: $grid-margin-gutters,
$gutter-type: margin,
$gutter-position: null,
$breakpoint: null,
$vertical: false
) {
// Get the default gutter position according to cell direction
@if($gutter-position == null) {
$gutter-position: if($vertical == true, top bottom, left right);
}
// Get the gutter width for this breakpoint
$gutter-width: xy-cell-gutters($gutters, $breakpoint);
@if ($gutter-width == null) {
@error 'xy-cell-gutters: no gutters were found in `$gutters` for "$breakpoint: #{$breakpoint}"';
}
@if ($gutter-type and $gutter-type != none) {
@include xy-gutters($gutter-width, $gutter-type, $gutter-position);
}
}
/// Creates a cell for your grid.
///
/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (100% width), `auto` (use all available space), `shrink` (use only the required space) or any fraction (`6`, `50%`, `1 of 2` or `1/2`...).
/// @param {Boolean} $gutter-output [null] - [DEPRECATED] 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 gutter to output. Accepts `margin`, `padding` or `none`.
/// @param {List} $gutter-position [null] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination. By default `right left` for horizontal cells and `top bottom` for vertical cells.
/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If `auto`, generates responsive gutters. 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.
/// @param {List} $output [(base size gutters)] - Cell parts to output. You will need to generate others parts of the cell seperately, it may not work properly otherwise.
@mixin xy-cell(
$size: full,
$gutter-output: null,
$gutters: $grid-margin-gutters,
$gutter-type: margin,
$gutter-position: null,
$breakpoint: null,
$vertical: false,
$output: (base size gutters)
) {
// Default for $gutter-output
@if ($gutter-output != null) {
@warn 'xy-cell: $gutter-output is deprecated and will be removed. See migration notes at https://git.io/foundation-6-6-0';
@if ($gutter-output == false) {
$output: sl-remove($output, gutters);
}
}
@if (index($output, base)) {
@include xy-cell-base($size);
}
@if (index($output, size)) {
@include xy-cell-size($size, $gutters, $gutter-type, $breakpoint, $vertical);
}
@if (index($output, gutters)) {
@include xy-cell-gutters($gutters, $gutter-type, $gutter-position, $breakpoint, $vertical);
}
}
/// Creates a single breakpoint sized grid. Used to generate our grid classes.
///
/// `xy-cell-static()` is deprecated and will be removed.
/// Use `xy-cell()` instead with `$output: (size gutters)` to not generate the cell base.
/// See migration notes at https://git.io/foundation-6-6-0
///
/// @deprecated v6.6.0
///
/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (100% width), `auto` (use all available space), `shrink` (use only the required space) or any fraction (`6`, `50%`, `1 of 2` or `1/2`...).
/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters. Always `true` for margin 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,
$gutter-type: margin,
$breakpoint: $-zf-zero-breakpoint,
$vertical: false
) {
@warn 'xy-cell-static() mixin is deprecated and will be removed. Use "xy-cell()" instead. See migration notes at https://git.io/foundation-6-6-0';
$gutter: -zf-get-bp-val($gutters, $breakpoint);
$gutter-position: if($vertical == true, top bottom, left right);
$-gutter-output: if($gutter-type == 'margin', true, $gutter-output);
$-gutter-margin: if($gutter-type == 'margin', $gutter, 0);
@include -xy-cell-properties($size, $-gutter-margin, $vertical);
@if ($-gutter-output) {
@include xy-gutters($gutter, $gutter-type, $gutter-position);
}
}

493
src/foundation/xy-grid/_classes.scss Normal file
View File

@@ -0,0 +1,493 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group xy-grid
////
// Margin Grid classes
@mixin xy-base-grid-classes {
// Grid Container
.grid-container {
@include xy-grid-container;
&.fluid {
@include xy-grid-container(100%);
}
&.full {
@include xy-grid-container(100%, 0);
}
}
// Base grid styles
.grid-x {
@include xy-grid;
}
.cell {
@include xy-cell(full, $gutter-type: none);
&.auto {
@include xy-cell-base(auto);
}
&.shrink {
@include xy-cell-base(shrink);
}
}
.grid-x {
> .auto {
@include xy-cell-size(auto, $gutter-type: none);
}
> .shrink {
@include xy-cell-size(shrink, $gutter-type: none);
}
}
// Auto width
@include -zf-each-breakpoint() {
// This is a bit of a hack/workaround, see these issues & PRs for the backstory:
// https://github.com/zurb/foundation-sites/issues/10244
// https://github.com/zurb/foundation-sites/pull/10222 and
// https://github.com/zurb/foundation-sites/pull/10164
.grid-x {
$str: "> .#{$-zf-size}-shrink, > .#{$-zf-size}-full";
@for $i from 1 through $grid-columns {
$str: $str + ", > .#{$-zf-size}-#{$i}"
}
#{$str} {
flex-basis: auto;
}
}
}
@include -zf-each-breakpoint() {
// Responsive "auto" modifier
@if not($-zf-size == $-zf-zero-breakpoint) {
.grid-x > .#{$-zf-size}-auto {
@include xy-cell(auto, $gutter-type: none);
}
}
%-xy-cell-base-shrink-horizontal-#{$-zf-size} {
@include xy-cell-base(shrink);
}
// Responsive "shrink" modifier
@if not($-zf-size == $-zf-zero-breakpoint) {
.grid-x > .#{$-zf-size}-shrink {
@extend %-xy-cell-base-shrink-horizontal-#{$-zf-size};
@include xy-cell-size(shrink, $gutter-type: none);
}
}
// Responsive width modifiers
@for $i from 1 through $grid-columns {
// Sizing (percentage)
.grid-x > .#{$-zf-size}-#{$i} {
@extend %-xy-cell-base-shrink-horizontal-#{$-zf-size};
@include xy-cell-size($i, $gutter-type: none);
}
}
}
// Reset width when using `.grid-margin-x` not on `.grid-x`
.grid-margin-x:not(.grid-x) > .cell {
width: auto;
}
// Reset height when using `.grid-margin-y` not on `.grid-y`
.grid-margin-y:not(.grid-y) > .cell {
height: auto;
}
}
@mixin -xy-breakpoint-cell-classes($class-breakpoint, $gutter-breakpoint, $vertical) {
$prefix: if($class-breakpoint == $-zf-zero-breakpoint, '', '#{$class-breakpoint}-');
> .#{$prefix}auto {
@include xy-cell-size(auto, $vertical: $vertical);
}
> .#{$prefix}shrink {
@include xy-cell-size(shrink, $vertical: $vertical);
}
@for $i from 1 through $grid-columns {
// Sizing (percentage)
$classname: if($vertical, '.#{$class-breakpoint}-#{$i}', '.#{$class-breakpoint}-#{$i}');
> #{$classname} {
@include xy-cell-size($i, $vertical: $vertical);
}
}
}
// Margin Grid classes
@mixin xy-margin-grid-classes(
$gutter-position: left right,
$vertical: false,
$wrapping-selector: '.grid-margin-x'
){
#{$wrapping-selector} {
@include xy-gutters($negative: true, $gutter-position: $gutter-position);
// Base cell styles
> .cell {
@include xy-cell($vertical: $vertical, $output: (size gutters));
}
// 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 xy-cell($vertical: $vertical, $output: (size gutters));
}
}
}
@include -zf-each-breakpoint() {
// This is purely for responsive gutters - the margin grid has to go back and adjust widths (or heights)
// for all prior breakpoints.
// As their gutter is defined with their width/height, even breakpoint without a new margin must be
// generated to not having their width/height overrided by re-adjusted smaller breakpoints.
@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) {
@include -xy-breakpoint-cell-classes($bp, $-zf-size, $vertical);
}
}
@include -xy-breakpoint-cell-classes($-zf-size, $-zf-size, $vertical);
}
}
}
// Padding Grid classes
@mixin xy-padding-grid-classes {
.grid-padding-x {
// Negative margin for nested grids
.grid-padding-x {
@include xy-gutters($negative: true);
}
// Negative margin for grids within `grid-container/grid-container.fluid`
// This allows margin and padding grids to line up with eachother
.grid-container:not(.full) > & {
@include xy-gutters($negative: true);
}
// Base cell styles
> .cell {
@include xy-gutters($gutters: $grid-padding-gutters, $gutter-type: padding);
}
}
}
// Block Grid classes
@mixin xy-block-grid-classes($margin-grid: true, $padding-grid: true) {
@if $padding-grid {
@include -zf-each-breakpoint {
@for $i from 1 through $xy-block-grid-max {
.#{$-zf-size}-up-#{$i} {
@include xy-grid-layout($n: $i, $selector: '.cell', $gutter-type: padding, $output: (size));
}
}
}
}
@if $margin-grid {
@include -zf-each-breakpoint {
@for $i from 1 through $xy-block-grid-max {
// 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) {
@if(map-has-key($grid-margin-gutters, $bp)) {
.grid-margin-x.#{$bp}-up-#{$i} {
@include xy-grid-layout($n: $i, $selector: '.cell', $gutter-type: margin, $output: (size));
}
}
}
}
}
@for $i from 1 through $xy-block-grid-max {
.grid-margin-x.#{$-zf-size}-up-#{$i} {
@include xy-grid-layout($n: $i, $selector: '.cell', $gutter-type: margin, $output: (size));
}
}
}
}
}
// Collapse classes
@mixin xy-collapse-grid-classes($margin-grid: true, $padding-grid: true) {
@each $bp in $breakpoint-classes {
@if $margin-grid {
.#{$bp}-margin-collapse {
@include xy-grid-collapse($gutter-type: margin, $min-breakpoint: $bp);
}
}
@if $padding-grid {
.#{$bp}-padding-collapse {
@include xy-grid-collapse($gutter-type: padding, $min-breakpoint: $bp);
}
}
}
}
// Offset 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 xy-cell-offset($o, $gutters: $grid-padding-gutters, $gutter-type: padding);
}
.grid-margin-x > .#{$-zf-size}-offset-#{$o} {
@include xy-cell-offset($o);
}
}
}
}
// Vertical Grid classes
@mixin xy-vertical-grid-classes(
$margin-grid: true,
$padding-grid: true
) {
@include -zf-each-breakpoint() {
@if not($-zf-size == $-zf-zero-breakpoint) {
}
}
.grid-y {
@include xy-grid(vertical, false);
> .cell {
@include xy-cell-reset();
}
> .auto {
@include xy-cell-size(auto, $gutter-type: none, $vertical: true);
}
> .shrink {
@include xy-cell-size(shrink, $gutter-type: none, $vertical: true);
}
@include -zf-each-breakpoint() {
// This is a bit of a hack/workaround, see these issues and PRs for the backstory:
// https://github.com/zurb/foundation-sites/issues/10244
// https://github.com/zurb/foundation-sites/pull/10222 and
// https://github.com/zurb/foundation-sites/pull/10164
$str: "> .#{$-zf-size}-shrink, > .#{$-zf-size}-full";
@for $i from 1 through $grid-columns {
$str: $str + ", > .#{$-zf-size}-#{$i}"
}
#{$str} {
flex-basis: auto;
}
}
@include -zf-each-breakpoint() {
// Responsive "auto" modifier
@if not($-zf-size == $-zf-zero-breakpoint) {
> .#{$-zf-size}-auto {
@include xy-cell(auto, $gutter-type: none, $vertical: true);
}
}
%-xy-cell-base-shrink-vertical-#{$-zf-size} {
@include xy-cell-base(shrink);
}
// Responsive "shrink" modifier
@if not($-zf-size == $-zf-zero-breakpoint) {
> .#{$-zf-size}-shrink {
@extend %-xy-cell-base-shrink-vertical-#{$-zf-size};
@include xy-cell-size(shrink, $gutter-type: none, $vertical: true);
}
}
// Responsive width modifiers
@for $i from 1 through $grid-columns {
// Sizing (percentage)
> .#{$-zf-size}-#{$i} {
@extend %-xy-cell-base-shrink-vertical-#{$-zf-size};
@include xy-cell-size($i, $gutter-type: none, $vertical: true);
}
}
}
}
@if $padding-grid {
.grid-padding-y {
// Negative margin for nested grids
.grid-padding-y {
@include xy-gutters($negative: true, $gutter-position: top bottom);
}
// Base cell styles
> .cell {
@include xy-gutters($gutters: $grid-padding-gutters, $gutter-type: padding, $gutter-position: top bottom);
}
}
}
@if $margin-grid {
@include xy-margin-grid-classes(top bottom, true, '.grid-margin-y');
}
}
@mixin xy-frame-grid-classes($vertical-grid: true, $margin-grid: true) {
// Framed grid styles
.grid-frame {
@include xy-grid-frame;
}
.cell .grid-frame {
width: 100%; // Same as include with $nested, but with less css
}
.cell-block {
@include xy-cell-block();
}
.cell-block-y {
@include xy-cell-block(true);
}
.cell-block-container {
@include xy-cell-block-container();
}
@include -zf-each-breakpoint(false) {
.#{$-zf-size}-grid-frame {
@include xy-grid-frame;
}
.cell .#{$-zf-size}-grid-frame {
width: 100%; // Same as include with $nested, but with less css
}
.#{$-zf-size}-cell-block {
@include xy-cell-block();
}
.#{$-zf-size}-cell-block-container {
@include xy-cell-block-container();
}
.#{$-zf-size}-cell-block-y {
@include xy-cell-block(true);
}
}
@if $vertical-grid {
.grid-y {
&.grid-frame {
width: auto;
@include xy-grid-frame(true);
}
@include -zf-each-breakpoint(false) {
&.#{$-zf-size}-grid-frame {
width: auto;
@include xy-grid-frame(true);
}
}
}
.cell {
.grid-y.grid-frame {
height: 100%; // Same as include with $nested, but with less css
}
@include -zf-each-breakpoint(false) {
.grid-y.#{$-zf-size}-grid-frame {
height: 100%; // Same as include with $nested, but with less css
}
}
}
}
@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
@mixin foundation-xy-grid-classes(
$base-grid: true,
$margin-grid: true,
$padding-grid: true,
$block-grid: true,
$collapse: true,
$offset: true,
$vertical-grid: true,
$frame-grid: true
) {
// Base grid styles
@if($base-grid) {
@include xy-base-grid-classes();
}
// Margin grid
@if($margin-grid) {
@include xy-margin-grid-classes();
}
// Padding grid
@if($padding-grid) {
@include xy-padding-grid-classes();
}
// Block grid
@if($block-grid) {
@include xy-block-grid-classes($margin-grid, $padding-grid);
}
// Collapse gutters
@if($collapse) {
@include xy-collapse-grid-classes($margin-grid, $padding-grid);
}
// Offset gutters
@if($offset) {
@include xy-offset-cell-classes();
}
// Vertical grid
@if($vertical-grid) {
@include xy-vertical-grid-classes($margin-grid, $padding-grid);
}
@if ($frame-grid) {
@include xy-frame-grid-classes($vertical-grid, $margin-grid)
}
}

75
src/foundation/xy-grid/_collapse.scss Normal file
View File

@@ -0,0 +1,75 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @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 {List} $gutter-position [right left] - The positions to remove gutters from. Accepts `top`, `bottom`, `left`, `right` in any combination.
/// @param {Keyword} $min-breakpoint [$-zf-zero-breakpoint] - Minimum breakpoint in `$breakpoint-classes` for which to collapse the gutter.
@mixin xy-grid-collapse(
$selector: '.cell',
$gutter-type: margin,
$gutter-position: right left,
$min-breakpoint: $-zf-zero-breakpoint
) {
// First, lets negate any margins on the top level
@if ($gutter-type == 'margin') {
@include breakpoint($min-breakpoint) {
@each $value in $gutter-position {
margin-#{$value}: 0;
}
> #{$selector} {
@each $value in $gutter-position {
margin-#{$value}: 0;
}
}
}
$excluded-bps: -zf-breakpoints-less-than($min-breakpoint);
// Output new widths to not include gutters
@each $bp in $breakpoint-classes {
@if(sl-contain($excluded-bps, $bp)) {
@include breakpoint($min-breakpoint) {
@for $i from 1 through $grid-columns {
// Sizing (percentage)
> .#{$bp}-#{$i} {
@include xy-cell-size($i, $gutter-type: none);
}
}
}
} @else {
@include breakpoint($bp) {
@for $i from 1 through $grid-columns {
// Sizing (percentage)
> .#{$bp}-#{$i} {
@include xy-cell-size($i, $gutter-type: none);
}
}
}
}
}
}
@else {
@include breakpoint($min-breakpoint) {
@each $value in $gutter-position {
margin-#{$value}: 0;
}
> #{$selector} {
@each $value in $gutter-position {
padding-#{$value}: 0;
}
}
}
}
}

86
src/foundation/xy-grid/_frame.scss Normal file
View File

@@ -0,0 +1,86 @@
/// 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.
/// @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: true
) {
@if $include-base {
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, false);
}
} @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);
$gutter: rem-calc($gutter);
height: calc(#{$unit} + #{$gutter});
} @else {
$unit: if($nested == true, 100%, 100vw);
$gutter: rem-calc($gutter);
width: calc(#{$unit} + #{$gutter});
}
}
@else {
@if $vertical == true {
height: if($nested == true, 100%, 100vh);
} @else {
width: if($nested == true, 100%, 100vw);
}
}
}
}
/// 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 xy-cell-block(
$vertical: false
) {
$property: if($vertical == true, 'overflow-y', 'overflow-x');
@if $vertical == true {
overflow-y: auto;
max-height: 100%;
min-height: 100%;
} @else {
overflow-x: auto;
max-width: 100%;
}
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
/// 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 xy-cell-block-container() {
display: flex;
flex-direction: column;
max-height: 100%;
> .grid-x {
max-height: 100%;
flex-wrap: nowrap;
}
}

37
src/foundation/xy-grid/_grid.scss Normal file
View File

@@ -0,0 +1,37 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @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.
/// @param {Number} $padding [$grid-container-padding] - paddings of the container.
@mixin xy-grid-container(
$width: $grid-container,
$padding: $grid-container-padding
) {
@include xy-gutters($gutters: $padding, $gutter-type: padding);
max-width: $width;
margin-left: auto;
margin-right: 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 xy-grid(
$direction: horizontal,
$wrap: true
) {
$direction: if($direction == 'horizontal', row, column);
$wrap: if($wrap, wrap, nowrap);
display: flex;
flex-flow: $direction $wrap;
}

45
src/foundation/xy-grid/_gutters.scss Normal file
View File

@@ -0,0 +1,45 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @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 nested grids.
@mixin xy-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}: unquote("#{$operator}#{$gutter}");
}
}
}
@else if (type-of($gutters) == 'number') {
$gutter: rem-calc($gutters) / 2;
// Loop through each gutter position
@each $value in $gutter-position {
#{$gutter-type}-#{$value}: unquote("#{$operator}#{$gutter}");
}
}
}

36
src/foundation/xy-grid/_layout.scss Normal file
View File

@@ -0,0 +1,36 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @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 ['.cell'] - Selector(s) to use for child elements.
/// @param {Boolean} $gutter-output [null] - [DEPRECATED] 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 gutter to output. Accepts `margin`, `padding` or `none`.
/// @param {List} $gutter-position [null] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination. By default `right left` for horizontal cells and `top bottom` for vertical cells.
/// @param {String} $breakpoint [null] - The breakpoint to use for the cell generation. 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.
/// @param {List} $output [(base size gutters)] - Cell parts to output. You will need to generate others parts of the cell seperately, it may not work correctly otherwise.
@mixin xy-grid-layout(
$n,
$selector: '.cell',
$gutter-output: null,
$gutters: $grid-margin-gutters,
$gutter-type: margin,
$gutter-position: null,
$breakpoint: null,
$vertical: false,
$output: (base size gutters)
) {
$size: percentage(1/$n);
& > #{$selector} {
@include xy-cell($size, $gutter-output, $gutters, $gutter-type, $gutter-position, $breakpoint, $vertical, $output);
}
}

55
src/foundation/xy-grid/_position.scss Normal file
View File

@@ -0,0 +1,55 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group xy-grid
////
/// Returns the appropriate CSS value to offset a cell.
///
/// @param {Number|List} $n - Size to offset by. You can pass in any value accepted by the `xy-cell()` mixin, such as `6`, `50%`, or `1 of 2`.
/// @param {Number|Map} $gutters [$grid-margin-gutters] Map of gutters or single value to use for responsive gutters.
/// @param {Keyword} $gutter-type [margin] The type of gutter to use. Can be `margin` or `padding`
/// @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.
///
/// @returns {Number|String} The cell offset property value.
@function xy-cell-offset(
$n,
$gutters: $grid-margin-gutters,
$gutter-type: margin,
$breakpoint: null
) {
$breakpoint: -zf-current-breakpoint($breakpoint, $default: $-zf-zero-breakpoint);
$size: xy-cell-size($n);
$offset: $size;
@if ($gutter-type == 'margin') {
$gutter: rem-calc(xy-cell-gutters($gutters, $breakpoint) / 2);
$offset: if($gutter == 0, $size, calc(#{$size} + #{$gutter}));
}
@return $offset;
}
/// 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 `xy-cell()` mixin, such as `6`, `50%`, or `1 of 2`.
/// @param {Number|Map} $gutters [$grid-margin-gutters] Map of gutters or single value to use for responsive gutters.
/// @param {Keyword} $gutter-type [margin] The type of gutter to use. Can be `margin` or `padding`
/// @param {Number|Array|Keyword} $breakpoint [null] - Breakpoint to use for `$gutters`. It can be a breakpoint name, list of breakpoints or `auto` for all breakpoints. If a list is given, media-queries will be generated. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
/// @param {Boolean} $vertical [false] Sets the direction of the offset. If set to true will apply margin-top instead.
@mixin xy-cell-offset(
$n,
$gutters: $grid-margin-gutters,
$gutter-type: margin,
$breakpoint: null,
$vertical: false
) {
$breakpoint: -zf-current-breakpoint($breakpoint, $default: $-zf-zero-breakpoint);
$direction: if($vertical, 'top', $global-left);
@include -zf-each-breakpoint-in($breakpoint, $media-queries: 'for-lists') {
$offset: xy-cell-offset($n, $gutters, $gutter-type);
margin-#{$direction}: #{$offset};
}
}

51
src/foundation/xy-grid/_xy-grid.scss Normal file
View File

@@ -0,0 +1,51 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group xy-grid
////
/// Enables the XY grid.
/// @type Boolean
$xy-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;
/// The amount of padding to use when padding the grid-container.
/// @type Map | Length
$grid-container-padding: $grid-padding-gutters !default;
/// The maximum width to apply to a grid container
/// @type Number
$grid-container-max: $global-width !default;
/// The maximum number of cells in an XY block grid.
/// @type Number
$xy-block-grid-max: 8 !default;
@import 'gutters';
@import 'grid';
@import 'cell';
@import 'frame';
@import 'position';
@import 'layout';
@import 'collapse';
@import 'classes';