// Components
@import 'grid/grid';
+@import 'zf-grid/zf-grid';
@import 'typography/typography';
@import 'forms/forms';
@import 'components/visibility';
@import 'components/thumbnail';
@import 'components/tooltip';
-@mixin foundation-everything($flex: false) {
+@mixin foundation-everything($flex: true) {
@if $flex {
$global-flexbox: true !global;
}
@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;
@include foundation-flex-classes;
}
}
-
-@include zf-grid-classes;
\ No newline at end of file
+++ /dev/null
-// 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();
- }
-}
--- /dev/null
+// 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);
+ }
+}
--- /dev/null
+// 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();
+ }
+}
--- /dev/null
+// 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
--- /dev/null
+// 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;
+}
--- /dev/null
+// 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;
+ }
+ }
+}
--- /dev/null
+// 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};
+ }
+}
--- /dev/null
+// 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';
--- /dev/null
+<!doctype html>
+<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
+<html class="no-js" lang="en" dir="ltr">
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <title>Foundation for Sites Testing</title>
+ <link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
+ <link href="../assets/css/foundation.css" rel="stylesheet" />
+ <style>
+ body {
+ padding: 30px;
+ }
+
+ .demo {
+ background: tomato;
+ }
+
+ .cell {
+ background: dodgerblue;
+ margin-bottom: 30px;
+ height: 50px;
+ line-height: 50px;
+ color: white;
+ text-align: center;
+ }
+
+ .dodgerblue {
+ background: dodgerblue;
+ padding: 10px;
+ color: white;
+ width: 50%;
+ float: left;
+ }
+
+ .tomato {
+ background: tomato;
+ padding: 10px;
+ color: white;
+ width: 50%;
+ float: left;
+ }
+ </style>
+ </head>
+ <body>
+
+ <h1>Demo showing the padding/margin gutter options</h1>
+
+ <h2>Key:</h2>
+ <div class="dodgerblue">This shows the padding of the cells</div>
+ <div class="tomato">This shows the cell</div>
+
+ <hr>
+
+ <button class="button toggle-margin-gutters">Toggle margin gutters</button>
+ <button class="button toggle-padding-gutters">Toggle padding gutters</button>
+
+ <div class="grid toggle-classes">
+ <div class="cell medium-12"><div class="demo">12</div></div>
+ <div class="cell medium-11"><div class="demo">11</div></div>
+ <div class="cell medium-1"><div class="demo">1</div></div>
+ <div class="cell medium-10"><div class="demo">10</div></div>
+ <div class="cell medium-2"><div class="demo">2</div></div>
+ <div class="cell medium-9"><div class="demo">9</div></div>
+ <div class="cell medium-3"><div class="demo">3</div></div>
+ <div class="cell medium-8"><div class="demo">8</div></div>
+ <div class="cell medium-4"><div class="demo">4</div></div>
+ <div class="cell medium-7"><div class="demo">7</div></div>
+ <div class="cell medium-5"><div class="demo">5</div></div>
+ <div class="cell medium-6"><div class="demo">6</div></div>
+ <div class="cell medium-4"><div class="demo">4</div></div>
+ </div>
+
+ <h2>Margin gutters nested example</h2>
+ <div class="grid margin-gutters">
+ <div class="cell medium-6">
+ <div class="grid margin-gutters">
+ <div class="cell medium-6"><div class="demo">6 nested</div></div>
+ <div class="cell medium-6"><div class="demo">6 nested</div></div>
+ </div>
+ </div>
+ <div class="cell medium-6"><div class="demo">6</div></div>
+ </div>
+
+ <h2>Padding gutters nested example</h2>
+ <div class="grid padding-gutters">
+ <div class="cell medium-6">
+ <div class="grid padding-gutters">
+ <div class="cell medium-6"><div class="demo">6 nested</div></div>
+ <div class="cell medium-6"><div class="demo">6 nested</div></div>
+ </div>
+ </div>
+ <div class="cell medium-6"><div class="demo">6</div></div>
+ </div>
+
+ <h2>Mixed gutters nested example</h2>
+ <div class="grid padding-gutters">
+ <div class="cell medium-6">
+ <div class="grid margin-gutters">
+ <div class="cell medium-6"><div class="demo">6 nested</div></div>
+ <div class="cell medium-6"><div class="demo">6 nested</div></div>
+ </div>
+ </div>
+ <div class="cell medium-6"><div class="demo">6</div></div>
+ </div>
+
+ <h2>Mixed gutters nested example</h2>
+ <div class="grid margin-gutters">
+ <div class="cell medium-6">
+ <div class="grid padding-gutters">
+ <div class="cell medium-6"><div class="demo">6 nested</div></div>
+ <div class="cell medium-6"><div class="demo">6 nested</div></div>
+ </div>
+ </div>
+ <div class="cell medium-6"><div class="demo">6</div></div>
+ </div>
+
+ <h2>Vertical grid</h2>
+ <div class="grid grid-vertical toggle-classes" style="height: 500px;">
+ <div class="cell medium-vertical-12"><div class="demo">12</div></div>
+ <div class="cell medium-vertical-11"><div class="demo">11</div></div>
+ <div class="cell medium-vertical-1"><div class="demo">1</div></div>
+ <div class="cell medium-vertical-10"><div class="demo">10</div></div>
+ <div class="cell medium--vertical-2"><div class="demo">2</div></div>
+ <div class="cell medium-vertical-9"><div class="demo">9</div></div>
+ <div class="cell medium-vertical-3"><div class="demo">3</div></div>
+ <div class="cell medium-vertical-8"><div class="demo">8</div></div>
+ <div class="cell medium-vertical-4"><div class="demo">4</div></div>
+ <div class="cell medium-vertical-7"><div class="demo">7</div></div>
+ <div class="cell medium-vertical-5"><div class="demo">5</div></div>
+ <div class="cell medium-vertical-6"><div class="demo">6</div></div>
+ <div class="cell medium-vertical-4"><div class="demo">4</div></div>
+ </div>
+
+ <script src="../assets/js/vendor.js"></script>
+ <script src="../assets/js/foundation.js"></script>
+ <script>
+ $(document).foundation();
+
+ $('.toggle-margin-gutters').click(function() {
+ $('.toggle-classes').toggleClass('margin-gutters');
+ });
+
+ $('.toggle-padding-gutters').click(function() {
+ $('.toggle-classes').toggleClass('padding-gutters');
+ });
+ </script>
+ </body>
+</html>
--- /dev/null
+<!doctype html>
+<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
+<html class="no-js" lang="en" dir="ltr">
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <title>zf margin grid</title>
+ <link href="../assets/css/foundation.css" rel="stylesheet" />
+ <style>
+ body {
+ padding: 30px;
+ }
+
+ .demo {
+ background: #1779ba;
+ }
+
+ .cell {
+ /*background: dodgerblue;*/
+ line-height: 50px;
+ height: 50px;
+ color: white;
+ text-align: center;
+ margin-bottom: 30px;
+ }
+ </style>
+ </head>
+ <body>
+ <h1>Margin Grid</h1>
+
+ <h2>Sizing Classes</h2>
+
+ <div class="grid margin-gutters">
+ <div class="cell medium-12"><div class="demo">12</div></div>
+ <div class="cell medium-11"><div class="demo">11</div></div>
+ <div class="cell medium-1"><div class="demo">1</div></div>
+ <div class="cell medium-10"><div class="demo">10</div></div>
+ <div class="cell medium-2"><div class="demo">2</div></div>
+ <div class="cell medium-9"><div class="demo">9</div></div>
+ <div class="cell medium-3"><div class="demo">3</div></div>
+ <div class="cell medium-8"><div class="demo">8</div></div>
+ <div class="cell medium-4"><div class="demo">4</div></div>
+ <div class="cell medium-7"><div class="demo">7</div></div>
+ <div class="cell medium-5"><div class="demo">5</div></div>
+ <div class="cell medium-6"><div class="demo">6</div></div>
+ <div class="cell medium-4"><div class="demo">4</div></div>
+ </div>
+
+ <h2>Nesting</h2>
+
+ <div class="grid margin-gutters">
+ <div class="cell medium-6">
+ <div class="grid margin-gutters">
+ <div class="cell medium-9"><div class="demo">9 nested</div></div>
+ <div class="cell medium-3"><div class="demo">3 nested</div></div>
+ </div>
+ </div>
+ <div class="cell medium-6"><div class="demo">11</div></div>
+ </div>
+
+ <h2>Auto and Shrink</h2>
+
+ <div class="grid margin-gutters">
+ <div class="cell medium-shrink"><div class="demo">Shrink on medium</div></div>
+ <div class="cell medium-auto"><div class="demo">Auto on medium</div></div>
+ </div>
+
+ <h2>Collapse</h2>
+
+ <div class="grid margin-gutters large-margin-collapse">
+ <div class="cell medium-12"><div class="demo">12</div></div>
+ <div class="cell medium-11"><div class="demo">11</div></div>
+ <div class="cell medium-1"><div class="demo">1</div></div>
+ <div class="cell medium-10"><div class="demo">10</div></div>
+ <div class="cell medium-2"><div class="demo">2</div></div>
+ <div class="cell medium-9"><div class="demo">9</div></div>
+ <div class="cell medium-3"><div class="demo">3</div></div>
+ <div class="cell medium-8"><div class="demo">8</div></div>
+ <div class="cell medium-4"><div class="demo">4</div></div>
+ <div class="cell medium-7"><div class="demo">7</div></div>
+ <div class="cell medium-5"><div class="demo">5</div></div>
+ <div class="cell medium-6"><div class="demo">6</div></div>
+ <div class="cell medium-4"><div class="demo">4</div></div>
+ </div>
+
+ <h2>Offset</h2>
+
+ <div class="grid margin-gutters">
+ <div class="cell medium-3 medium-offset-2"><div class="demo">3</div></div>
+ <div class="cell medium-4"><div class="demo">4</div></div>
+ </div>
+
+ <h2>Push/Pull</h2>
+
+ <div class="grid margin-gutters">
+ <div class="cell medium-3 medium-push-2"><div class="demo">3</div></div>
+ <div class="cell medium-4 medium-pull-1"><div class="demo">4</div></div>
+ </div>
+
+ <script src="../assets/js/vendor.js"></script>
+ <script src="../assets/js/foundation.js"></script>
+ <script>
+ $(document).foundation();
+ </script>
+ </body>
+</html>
--- /dev/null
+<!doctype html>
+<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
+<html class="no-js" lang="en" dir="ltr">
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <title>zf padding grid</title>
+ <link href="../assets/css/foundation.css" rel="stylesheet" />
+ <style>
+ body {
+ padding: 30px;
+ }
+
+ .demo {
+ background: #1779ba;
+ }
+
+ .cell {
+ background: tomato;
+ line-height: 50px;
+ height: 50px;
+ color: white;
+ text-align: center;
+ margin-bottom: 30px;
+ }
+ </style>
+ </head>
+ <body>
+ <h1>Padding Grid - red shows the padding gutters</h1>
+
+ <h2>Sizing Classes</h2>
+
+ <div class="grid padding-gutters">
+ <div class="cell medium-12"><div class="demo">12</div></div>
+ <div class="cell medium-11"><div class="demo">11</div></div>
+ <div class="cell medium-1"><div class="demo">1</div></div>
+ <div class="cell medium-10"><div class="demo">10</div></div>
+ <div class="cell medium-2"><div class="demo">2</div></div>
+ <div class="cell medium-9"><div class="demo">9</div></div>
+ <div class="cell medium-3"><div class="demo">3</div></div>
+ <div class="cell medium-8"><div class="demo">8</div></div>
+ <div class="cell medium-4"><div class="demo">4</div></div>
+ <div class="cell medium-7"><div class="demo">7</div></div>
+ <div class="cell medium-5"><div class="demo">5</div></div>
+ <div class="cell medium-6"><div class="demo">6</div></div>
+ <div class="cell medium-4"><div class="demo">4</div></div>
+ </div>
+
+ <h2>Nesting</h2>
+
+ <div class="grid padding-gutters">
+ <div class="cell medium-6">
+ <div class="grid padding-gutters">
+ <div class="cell medium-9"><div class="demo">9 nested</div></div>
+ <div class="cell medium-3"><div class="demo">3 nested</div></div>
+ </div>
+ </div>
+ <div class="cell medium-6"><div class="demo">11</div></div>
+ </div>
+
+ <h2>Auto and Shrink</h2>
+
+ <div class="grid padding-gutters">
+ <div class="cell medium-shrink"><div class="demo">Shrink on medium</div></div>
+ <div class="cell medium-auto"><div class="demo">Auto on medium</div></div>
+ </div>
+
+ <h2>Collapse</h2>
+
+ <div class="grid padding-gutters large-padding-collapse">
+ <div class="cell medium-12"><div class="demo">12</div></div>
+ <div class="cell medium-11"><div class="demo">11</div></div>
+ <div class="cell medium-1"><div class="demo">1</div></div>
+ <div class="cell medium-10"><div class="demo">10</div></div>
+ <div class="cell medium-2"><div class="demo">2</div></div>
+ <div class="cell medium-9"><div class="demo">9</div></div>
+ <div class="cell medium-3"><div class="demo">3</div></div>
+ <div class="cell medium-8"><div class="demo">8</div></div>
+ <div class="cell medium-4"><div class="demo">4</div></div>
+ <div class="cell medium-7"><div class="demo">7</div></div>
+ <div class="cell medium-5"><div class="demo">5</div></div>
+ <div class="cell medium-6"><div class="demo">6</div></div>
+ <div class="cell medium-4"><div class="demo">4</div></div>
+ </div>
+
+ <h2>Offset</h2>
+
+ <div class="grid padding-gutters">
+ <div class="cell medium-3 medium-offset-2"><div class="demo">3</div></div>
+ <div class="cell medium-4"><div class="demo">4</div></div>
+ </div>
+
+ <h2>Push/Pull</h2>
+
+ <div class="grid padding-gutters">
+ <div class="cell medium-3 medium-push-2"><div class="demo">3</div></div>
+ <div class="cell medium-4 medium-pull-1"><div class="demo">4</div></div>
+ </div>
+
+ <script src="../assets/js/vendor.js"></script>
+ <script src="../assets/js/foundation.js"></script>
+ <script>
+ $(document).foundation();
+ </script>
+ </body>
+</html>
--- /dev/null
+<!doctype html>
+<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
+<html class="no-js" lang="en" dir="ltr">
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <title>zf vertical grid</title>
+ <link href="../assets/css/foundation.css" rel="stylesheet" />
+ <style>
+ body {
+ padding: 30px;
+ }
+
+ .demo {
+ background: #1779ba;
+ }
+
+ .cell {
+ /*background: dodgerblue;*/
+ color: white;
+ text-align: center;
+ }
+ </style>
+ </head>
+ <body>
+ <h1>Vertical Grid</h1>
+
+ <h2>Sizing Classes</h2>
+
+ <div class="grid-vertical grid-frame margin-gutters">
+ <div class="cell medium-vertical-5"><div class="demo">5</div></div>
+ <div class="cell medium-vertical-4"><div class="demo">4</div></div>
+ <div class="cell medium-vertical-3"><div class="demo">3</div></div>
+ </div>
+
+ <h2>Auto and Shrink</h2>
+
+ <div class="grid-vertical grid-frame margin-gutters">
+ <div class="cell medium-vertical-shrink"><div class="demo">Shrink on medium</div></div>
+ <div class="cell medium-vertical-auto"><div class="demo">Auto on medium</div></div>
+ </div>
+
+ <h2>Collapse</h2>
+
+ <div class="grid-vertical margin-gutters large-collapse">
+ <div class="cell medium-12"><div class="demo">12</div></div>
+ <div class="cell medium-11"><div class="demo">11</div></div>
+ <div class="cell medium-1"><div class="demo">1</div></div>
+ <div class="cell medium-10"><div class="demo">10</div></div>
+ <div class="cell medium-2"><div class="demo">2</div></div>
+ <div class="cell medium-9"><div class="demo">9</div></div>
+ <div class="cell medium-3"><div class="demo">3</div></div>
+ <div class="cell medium-8"><div class="demo">8</div></div>
+ <div class="cell medium-4"><div class="demo">4</div></div>
+ <div class="cell medium-7"><div class="demo">7</div></div>
+ <div class="cell medium-5"><div class="demo">5</div></div>
+ <div class="cell medium-6"><div class="demo">6</div></div>
+ <div class="cell medium-4"><div class="demo">4</div></div>
+ </div>
+
+ <h2>Offset</h2>
+
+ <div class="grid-vertical grid-frame margin-gutters">
+ <div class="cell medium-vertical-3 medium-vertical-offset-2"><div class="demo">3</div></div>
+ <div class="cell medium-vertical-4"><div class="demo">4</div></div>
+ </div>
+
+ <script src="../assets/js/vendor.js"></script>
+ <script src="../assets/js/foundation.js"></script>
+ <script>
+ $(document).foundation();
+ </script>
+ </body>
+</html>
projects / thirdparty / foundation / foundation-sites.git / commitdiff
