--- /dev/null
+---
+title: ZF Grid
+description: 6.4 grid.
+sass: scss/grid/_zf-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.
+
+---
+
+## 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.
+
+---
+
+## Importing
+
+If you're using the CSS version of Foundation, you can generate a <a href="https://foundation.zurb.com/sites/download">custom download of Foundation</a> with flexbox mode enabled.
+
+```scss
+@import 'foundation';
+
+@include zf-grid;
+@include zf-grid-classes;
+```
+---
+
+## Basics
+
+The structure of the new grid uses `.grid` (formerly `.row`) and `.cell` (formerly `.column`). This structure makes it a lot clearer when working with vertical grids.
+
+```html_example
+<div class="grid">
+ <div class="cell">full width cell</div>
+ <div class="cell">full width cell</div>
+</div>
+<div class="grid">
+ <div class="small-6 cell">6 cells</div>
+ <div class="small-6 cell">6 cells</div>
+</div>
+<div class="grid">
+ <div class="medium-6 large-4 cell">12/6/4 cells</div>
+ <div class="medium-6 large-8 cell">12/6/8 cells</div>
+</div>
+```
+
+---
+
+## Auto Sizing
+
+If the class `.auto` is added to the cell, it will take up the remaining space.
+
+```html_example
+<div class="grid">
+ <div class="small-4 cell">4 cells</div>
+ <div class="auto cell">Whatever's left!</div>
+</div>
+```
+
+---
+
+Multiple expanding cells will share the leftover space equally.
+
+```html_example
+<div class="grid">
+ <div class="small-4 cell">4 cells</div>
+ <div class="auto cell">Whatever's left!</div>
+ <div class="auto cell">Whatever's left!</div>
+</div>
+```
+
+---
+
+A cell can also be made to *shrink*, by adding the `.shrink` class. This means it will only take up the space its contents need.
+
+```html_example
+<div class="grid">
+ <div class="shrink cell">Shrink!</div>
+ <div class="auto cell">Expand!</div>
+</div>
+```
+
+---
+
+## Responsive Adjustments
+
+To switch back to the expand behavior from a percentage or shrink behavior, use the classes `.[size]-auto` or `.[size]-shrink`. In the below example, the cells stack on small screens, and become even-width on large screens.
+
+```html_example
+<div class="grid">
+ <div class="large-auto cell">One</div>
+ <div class="large-auto cell">Two</div>
+ <div class="large-auto cell">Three</div>
+ <div class="large-auto cell">Four</div>
+ <div class="large-auto cell">Five</div>
+ <div class="large-auto cell">Six</div>
+</div>
+```
+
+---
+
+### Automatic Stacking
+
+We have a few shorthand classes for the above behavior. Use the `.[size]-auto` or `.[size]-shrink` classes to stack all cells in the grid by default, and then unstack them on a larger screen size, making each one equal-width.
+
+```html_example
+<div class="grid medium-grid-auto">
+ <div class="cell">One</div>
+ <div class="cell">Two</div>
+ <div class="cell">Three</div>
+ <div class="cell">Four</div>
+ <div class="cell">Five</div>
+ <div class="cell">Six</div>
+</div>
+<div class="grid medium-grid-shrink">
+ <div class="cell">One</div>
+ <div class="cell">Two</div>
+ <div class="cell">Three</div>
+ <div class="cell">Four</div>
+ <div class="cell">Five</div>
+ <div class="cell">Six</div>
+</div>
+```
+
+---
+
+## Collapse/Uncollapse Cells
+
+The `.grid-collapse` class lets you remove cell gutters.
+
+There are times when you won't want each media query to be collapsed or uncollapsed. In this case, use the media query size you want and collapse or uncollapse and add that to your row element. Example shows no gutter at small media size and then adds the gutter to cells at medium.
+
+```html
+<div class="grid small-grid-collapse medium-grid-uncollapse">
+ <div class="small-6 cell">
+ Removes gutter at small media query and adds at medium.
+ </div>
+ <div class="small-6 cell">
+ Removes gutter at small media query and adds at medium.
+ </div>
+</div>
+```
+
+<p class="lead">Scale the browser down to a medium size to see the difference.</p>
+
+<div class="grid medium-grid-uncollapse large-grid-collapse">
+ <div class="small-6 cell">
+ <div class="callout secondary">
+ <p class="show-for-small-only">On a small screen, I have gutters!</p>
+ <p class="show-for-medium-only">On a medium screen, I have gutters!</p>
+ <p class="show-for-large">On a large screen, I have no gutters!</p>
+ </div>
+ </div>
+ <div class="small-6 cell">
+ <div class="callout secondary">
+ <p class="show-for-small-only">On a small screen, I have gutters!</p>
+ <p class="show-for-medium-only">On a medium screen, I have gutters!</p>
+ <p class="show-for-large">On a large screen, I have no gutters!</p>
+ </div>
+ </div>
+</div>
+
+---
+
+## Offsets
+
+Offsets work by applying `margin-left` (or `margin-top` to a vertical grid) to a grid.
+
+```html_example
+<div class="grid">
+ <div class="small-4 large-offset-2 cell">Offset 2 on large</div>
+ <div class="small-4 cell">4 cells</div>
+</div>
+```
+
+---
+
+## Source Ordering
+
+Flexbox supports source ordering, making it easy to rearrange columns on different screen sizes without weird relative positioning tricks.
+
+The CSS property is easy enough to remember.
+
+```scss
+.element {
+ order: 1;
+}
+```
+
+Cells within a grid will be sorted by their `order` property. Lower numbers are placed first. If multiple cells have the same number, they're sorted in the order they appear in the HTML.
+
+We have a set of classes that make it easy to setup source ordering in your HTML. They also come in responsive flavors, allowing you to reorder a grid on different screen sizes.
+
+```html_example
+<div class="grid">
+ <div class="cell small-order-2 medium-order-1">
+ This cell will come second on small, and first on medium and larger.
+ </div>
+ <div class="cell small-order-1 medium-order-2">
+ This cell will come first on small, and second on medium and larger.
+ </div>
+</div>
+```
+
+---
--- /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: padding !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') {
+ $size: if($type == 'margin', calc(100% - #{$grid-gutters}), 100%);
+
+ flex: 1 1 $size;
+ }
+ @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') {
+ $size: if($type == 'margin', calc(100% - #{$grid-gutters}), 100%);
+
+ flex: 0 0 auto;
+ max-#{$direction}: $size;
+ }
+ @else {
+ $size: if($type == 'margin', calc(#{zf-cell-size($size)} - #{$grid-gutters}), zf-cell-size($size));
+
+ flex: 0 0 $size;
+ max-#{$direction}: $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);
+
+ // Gutters
+ @if($gutters) {
+ @include zf-gutters($gutters: $gutters, $type: $type, $position: $position);
+ }
+}
+
+// Final classes
+@mixin zf-grid-classes() {
+
+ // Grid Container
+ .grid-container {
+ @include zf-grid-container;
+ }
+
+ // Default Grid
+ .grid {
+ @include zf-grid;
+
+ // Negative margins for margin grid.
+ @if ($grid-type == 'margin') {
+ @include zf-gutters($negative: true);
+ }
+
+ // Negative nested margin for padding grid.
+ @if ($grid-type == 'padding') {
+ .grid {
+ @include zf-gutters($negative: true);
+ }
+ }
+ }
+
+ // Vertical grid.
+ .grid-vertical {
+ @include zf-grid(vertical, false);
+
+ // Cells
+ .cell {
+ @include zf-cell($position: vertical);
+ #{$grid-type}-right: 0;
+ #{$grid-type}-left: 0;
+ max-width: 100%;
+ }
+
+ @include -zf-each-breakpoint {
+ @for $i from 1 through $grid-columns {
+ // Sizing (percentage)
+ .#{$-zf-size}-#{$i} {
+ @include zf-cell($i, $direction: vertical, $gutters: false);
+ }
+ }
+ }
+ }
+
+ // Collapse gutters.
+ .grid-collapse {
+ > .cell {
+ #{$grid-type}-right: 0;
+ #{$grid-type}-left: 0;
+ }
+ }
+
+
+ // Collapse vertical gutters.
+ .grid-vertical-collapse {
+ > .cell {
+ #{$grid-type}-top: 0;
+ #{$grid-type}-bottom: 0;
+ }
+ }
+
+ // Grid shrink classes
+ .grid-shrink {
+ > .cell {
+ @include zf-cell(shrink, false);
+ }
+ }
+
+ // Grid auto classes
+ .grid-auto {
+ > .cell {
+ @include zf-cell(auto, false);
+ }
+ }
+
+ @include -zf-each-breakpoint($small: false) {
+ // Responsive collapse classes
+ .#{$-zf-size}-grid-collapse {
+ > .cell {
+ #{$grid-type}-right: 0;
+ #{$grid-type}-left: 0;
+ }
+ }
+
+ // Responsive vertical collapse classes
+ .#{$-zf-size}-grid-vertical-collapse {
+ > .cell {
+ #{$grid-type}-top: 0;
+ #{$grid-type}-bottom: 0;
+ }
+ }
+
+ // Responsive grid shrink classes
+ .#{$-zf-size}-grid-shrink {
+ > .cell {
+ @include zf-cell(shrink, false);
+ }
+ }
+
+ // Responsive grid auto classes
+ .#{$-zf-size}-grid-auto {
+ > .cell {
+ @include zf-cell(auto, false);
+ }
+ }
+ }
+
+ // Cells
+ .cell {
+ @include zf-cell;
+ }
+
+ // Shrink
+ .shrink {
+ @include zf-cell(shrink, false);
+ }
+
+ // Auto
+ .auto {
+ @include zf-cell(auto, false);
+ }
+
+ @include -zf-each-breakpoint($small: false) {
+ // Responsive shrink sizes
+ .#{$-zf-size}-shrink {
+ @include zf-cell(shrink, false);
+ }
+
+ // Responsive auto sizes
+ .#{$-zf-size}-auto {
+ @include zf-cell(auto, false);
+ }
+ }
+
+ @include -zf-each-breakpoint {
+ @for $i from 1 through $grid-columns {
+ // Sizing (percentage)
+ .#{$-zf-size}-#{$i} {
+ @include zf-cell($i, $gutters: false);
+ }
+ }
+ }
+}
projects / thirdparty / foundation / foundation-sites.git / commitdiff
