7 Foundation's magical, flexbox-powered grid.
10 - Horizontal or vertical grids
11 - Auto-sizing or percentage width grid blocks
12 - Independently-scrollable blocks
18 /// @Foundation.settings
20 $container-width: rem-calc(900) !default;
21 $block-padding: $global-padding !default;
22 $total-columns: 12 !default;
23 $block-grid-max-size: 6 !default;
27 Define the size of a grid block. Blocks are flex items. By default, they stretch to fill all available space, based on the size of sibling blocks. This is the "expand" behavior.
29 If set to "shrink", the block will contract and only fill as much space as it needs for its content.
31 If set to a number, the block will be given a percentage width, based on the total number of columns (12 by default). Percentage widths don't work if a block is inside a vertical grid.
35 @param {number|string} $size - Sizing behavior of the block. Should be expand, shrink, or a number.
37 @output The flex-basis, flex-grow, and flex-shrink properties.
39 @mixin grid-size($size: expand) {
40 @if (type-of($size) == 'number') {
41 $pct: percentage($size / $total-columns);
43 // max-width prevents columns from wrapping early in IE10/11
46 @else if ($size == shrink) {
49 @else if ($size == expand) {
54 Set the orientation of blocks within this block. The grid is re-oriented by changing the flex direction of the block.
58 @param {string} $orientation - Direction of the grid, either horizontal or vertical.
60 @output A flex-flow property to match the direction given.
62 @mixin grid-orient($orientation: horizontal) {
63 @if ($orientation == vertical) {
64 flex-flow: column nowrap;
72 Stretch a grid's child blocks across its cross-axis, making every column appear to have the same height.
76 @param {bool} $stretch - Stretch blocks if true, or align blocks to top if false.
78 @output Sets align-items to "stretch" if $stretch is true, or "flex-start" (the default value) if false.
80 @mixin grid-wrap($wrap: true) {
83 align-items: flex-start;
91 Set the alignment of blocks within a grid.
93 left: Items align to the left.
94 right: Items align to the right.
95 center: Items align to the center.
96 justify: Items are spaced equally apart so they occupy the space of the entire grid.
97 spaced: Items are given equal space to their left and right.
101 @param {string} $align - Alignment to use.
103 @output An appropriate justify-content value.
105 @mixin grid-align($align: left) {
110 justify: space-between,
111 spaced: space-around,
113 justify-content: map-get($options, $align);
116 Set the source order of a block. Items with lower numbers appear first. If multiple items have the same number, the one in the HTML first will appear first.
120 @param {number} $order - Position in source order.
122 @output An order property.
124 @mixin grid-order($order: 0) {
128 Collapse a content block by removing the padding.
132 @param {bool} $collapse - Collapses the block if true.
134 @output A padding value.
136 @todo No way to reverse collapse using this mixin. Solution:
137 - If true, add padding: 0;
138 - If false, add padding: 1rem;
139 - If null, add nothing, to cut down on CSS output
140 - Make null the default value
142 @mixin grid-collapse($collapse: true) {
148 Constrain the size of a block to the size of the average grid row, and center-align it. This imitates the behavior of ordinary Foundation rows.
152 @param {bool} $container - Adds container styles if true.
154 @output A maximum width and the good old margin: 0 auto for center alignment.
156 @mixin grid-container($width: $container-width, $align: center) {
163 margin: map-get($margins, $align);
166 Add negative margins to a block, equal to the padding of a content block. This aligns the edges of a block nested inside a content block.
170 @param {bool} $nest - Adds negative margins if true.
172 @output Negative margin values.
174 @mixin grid-nest($nest: true) {
181 Offset a block by adding a left margin.
185 @param {number | bool} $offset - If false, nothing is output. If a number, offsets the column by the specified number of columns.
187 @output A left margin based on the number of columns specified, and the global number of columns.
189 @mixin grid-offset($offset: false) {
190 @if ($offset != false) {
191 margin-left: percentage($offset / $total-columns);
196 Resets styles set by panels. Use this when a panel transforms into a block on larger screens.
200 @output Resets to transform, position, and a few visual styles.
202 @mixin grid-panel-reset() {
209 background: transparent;
217 Frames are containers that stretch to the full dimmensions of the browser window.
219 @mixin grid-frame($size: expand, $orientation: horizontal, $wrap: false, $align: left, $order: 0) {
224 backface-visibility: hidden;
226 @include grid-size($size);
227 @include grid-orient($orientation);
228 @include grid-wrap($wrap);
229 @include grid-align($align);
230 @include grid-order($order);
234 Groups are collections of content items. They're the "rows" of Foundation for Apps.
236 @mixin grid-block($size: expand, $orientation: horizontal, $wrap: false, $align: left, $order: 0) {
237 @include grid-frame($size, $orientation, $wrap, $align, $order);
239 // Reset the height used by frames
242 // Blocks will scroll by default if their content overflows
243 @if ($orientation == vertical) {
250 // Add scrolling with inertia
251 -webkit-overflow-scrolling: touch;
252 -ms-overflow-style: -ms-autohiding-scrollbar;
256 Blocks are containers for actual content. They're the "columns" of Foundation for Apps.
258 @mixin grid-content($size: expand, $offset: null, $order: null) {
259 // Content blocks are not flex items and have padding
261 padding: 0 $block-padding;
263 // Add scrolling with inertia
265 -webkit-overflow-scrolling: touch;
266 -ms-overflow-style: -ms-autohiding-scrollbar;
268 @include grid-size($size);
269 @if $offset != null { @include grid-offset($offset); }
270 @if $order != null { @include grid-order($order); }
273 @mixin grid-layout($up) {
276 list-style-type: none;
278 > li, > div, > section {
279 padding: 0 1rem 1rem;
280 flex: 0 0 percentage(1 / $up);
285 // - - - - - - - - - - - - - - - - - - - -
287 // Shared styles for frames and blocks (parent elements)
289 // Change the direction children flow
290 &.vertical { @include grid-orient(vertical); }
291 @each $size in $breakpoint-classes {
292 @include breakpoint($size) {
293 &.#{$size}-vertical { @include grid-orient(vertical); }
294 &.#{$size}-horizontal { @include grid-orient(horizontal); }
298 // Align the children of a grid block
299 &.align-right { @include grid-align(right); }
300 &.align-center { @include grid-align(center); }
301 &.align-justify { @include grid-align(justify); }
302 &.align-spaced { @include grid-align(spaced); }
304 // Allow child elements to wrap
305 &.wrap { @include grid-wrap(true); }
308 // Shared styles for blocks and content blocks (child elements)
310 // Shrink a flex item so it only takes up the space it needs
311 &.shrink { @include grid-size(shrink); }
313 // Prevent an element from scrolling
314 &.noscroll { overflow: hidden; }
317 @include exports(grid) {
318 // The core grid elements:
334 @include grid-content;
340 // Grids inside content blocks should wrap by default, so they mimic traditional float grids
342 margin-left: -($block-padding);
343 margin-right: -($block-padding);
347 // Reverse the above wrapping behavior
349 @include grid-wrap(false);
358 @include grid-container;
360 &.contain-left { @include grid-container($align: left); }
361 &.contain-right { @include grid-container($align: right); }
364 // Breakpoint classes for blocks
365 @each $size in $breakpoint-classes {
366 .#{$size}-grid-block {
370 @include breakpoint($size) {
373 // Override panel styles
374 &.panel { @include grid-panel-reset; }
377 .#{$size}-grid-content {
380 @include breakpoint($size) {
381 @include grid-content;
383 // Override panel styles
384 &.panel { @include grid-panel-reset; }
389 // Sizing and ordering classes
390 @for $i from 1 through $total-columns {
392 .order-#{$i} { @include grid-order($i); }
394 @each $size in $breakpoint-classes {
395 @for $i from 1 through $total-columns {
396 @include breakpoint($size) {
399 @include grid-size($i);
402 .#{$size}-order-#{$i} {
403 @include grid-order($i);
406 .#{$size}-offset-#{$i} {
407 @include grid-offset($i);
409 // Parent sizing (block grids)
411 @include grid-layout($i);
417 .grid-content .modal .grid-block {