Skip to content
Permalink
Browse files

Refactor flex grid class output to be more streamlined, and add mixin…

…s for horizontal/vertical flex alignment #7106
  • Loading branch information...
gakimball committed Dec 21, 2015
1 parent 69f5511 commit 0cb3a1e0ee61454ffb7f7b07fc642e420925bbab
Showing with 95 additions and 74 deletions.
  1. +95 −74 scss/grid/_flex-grid.scss
@@ -6,6 +6,21 @@
/// @group flex-grid
////

$-zf-flex-justify: (
'left': flex-start,
'right': flex-end,
'center': center,
'justify': space-between,
'spaced': space-around,
);

$-zf-flex-align: (
'top': flex-start,
'bottom': flex-end,
'middle': center,
'stretch': stretch,
);

/// Creates a container for a flex grid row.
///
/// @param {Keyword|List} $behavior [null]
@@ -90,6 +105,42 @@
order: $order;
}

@mixin flex-grid-row-align($x: null, $y: null) {
@if $x {
@if map-has-key($-zf-flex-justify, $x) {
$x: map-get($-zf-flex-justify, $x);
}
@else {
@warn 'flex-grid-row-align(): #{$x} is not a valid value for horizontal alignment. Use left, right, center, justify, or spaced.'
}
}

@if $y {
@if map-has-key($-zf-flex-align, $y) {
$y: map-get($-zf-flex-align, $y);
}
@else {
@warn 'flex-grid-row-align(): #{$y} is not a valid value for vertical alignment. Use top, bottom, middle, or stretch.'
}
}

justify-content: $x;
align-items: $y;
}

@mixin flex-grid-column-align($y: null) {
@if $y {
@if map-has-key($-zf-flex-align, $y) {
$y: map-get($-zf-flex-align, $y);
}
@else {
@warn 'flex-grid-column-align(): #{$y} is not a valid value for alignment. Use top, bottom, middle, or stretch.'
}
}

align-self: $y;
}

@mixin foundation-flex-grid {
// Row
.row {
@@ -121,111 +172,81 @@
@extend %flex-column;
}

// Sizing (percentage)
@each $size in $breakpoint-classes {
@include breakpoint($size) {
@for $i from 1 through $grid-column-count {
.#{$size}-#{$i} {
flex: flex-grid-column($i);
max-width: grid-column($i);
}
@include -zf-each-breakpoint {
@for $i from 1 through $grid-column-count {
// Sizing (percentage)
.#{$-zf-size}-#{$i} {
flex: flex-grid-column($i);
max-width: grid-column($i);
}
}
}

// Sizing (expand)
@each $size in $breakpoint-classes {
@if $size != small {
@include breakpoint($size) {
.#{$size}-expand {
flex: flex-grid-column();
}
// Offsets
$o: $i - 1;

.#{$-zf-size}-offset-#{$o} {
@include grid-column-offset($o);
}
}
}

// Sizing (shrink)
.shrink {
flex: flex-grid-column(shrink);
}

// Responsive collapsing
@each $size in $breakpoint-classes {
@include breakpoint($size) {
&.#{$size}-collapse {
> .column { @include grid-col-collapse; }
@for $i from 1 through 6 {
// Source ordering
.#{$-zf-size}-order-#{$i} {
@include flex-grid-order($i);
}
}

&.#{$size}-uncollapse {
> .column { @include grid-col-uncollapse; }
@if $-zf-size != small {
// Sizing (expand)
@include breakpoint($-zf-size) {
.#{$-zf-size}-expand {
flex: flex-grid-column();
}
}
}
}

// Auto-stacking/unstacking
@each $size in $breakpoint-classes {
@if $size != small {
.row.#{$size}-unstack {
.column {
flex: flex-grid-column(100%);
// Auto-stacking/unstacking
@at-root (without: media) {
.row.#{$-zf-size}-unstack {
.column {
flex: flex-grid-column(100%);

@include breakpoint($size) {
flex: flex-grid-column();
@include breakpoint($-zf-size) {
flex: flex-grid-column();
}
}
}
}
}
}

// Offsets
@each $size in $breakpoint-classes {
@include breakpoint($size) {
@for $i from 1 through $grid-column-count {
$o: $i - 1;
// Responsive collapsing
&.#{$-zf-size}-collapse {

This comment has been minimized.

Copy link
@pwnall

pwnall Dec 21, 2015

Contributor

This breaks in ruby-sass when foundation-flex-grid is included at the top level.

The fix is ugly: sass/sass#1873

In a nutshell, I think you'd have to replace & with #{if(&, "&", "")}

This comment has been minimized.

Copy link
@gakimball

gakimball Dec 22, 2015

Author Contributor

@pwnall Ah sorry, that was an oversight; that & shouldn't be there at all. Interesting that Libsass let it slide, though. I made the fix in the responsive-gutters branch, which has a lot of heavy modifications to the grid class output: d8a8bbe

This comment has been minimized.

Copy link
@pwnall

pwnall Dec 22, 2015

Contributor

@gakimball Thank you for responding so quickly!

I think it'd be worth cherry-picking d8a8bbe into the 6.0 release train, because it fixes a compilation error added between 6.0.5 and 6.0.6.

This comment has been minimized.

Copy link
@gakimball

gakimball Dec 22, 2015

Author Contributor

@pwnall Not seeing that in the master branch, which is 6.0.6 right now. (See the commit here.) These collapse/uncollapse classes also aren't in 6.0.6.

> .column { @include grid-col-collapse; }
}

.#{$size}-offset-#{$o} {
@include grid-column-offset($o);
}
}
&.#{$-zf-size}-uncollapse {
> .column { @include grid-col-uncollapse; }
}
}

// Source ordering
@each $size in $breakpoint-classes {
@include breakpoint($size) {
@for $i from 1 through 6 {
.#{$size}-order-#{$i} {
@include flex-grid-order($i);
}
}
}
// Sizing (shrink)
.shrink {
flex: flex-grid-column(shrink);
}

// Horizontal alignment using justify-content
@each $hdir, $prop in (
'right': flex-end,
'center': center,
'justify': space-between,
'spaced': space-around,
) {
@each $hdir, $prop in $-zf-flex-justify {
.row.align-#{$hdir} {
justify-content: $prop;
@include flex-grid-row-align($x: $hdir);
}
}

// Vertical alignment using align-items and align-self
@each $vdir, $prop in (
'top': flex-start,
'bottom': flex-end,
'middle': center,
'stretch': stretch,
) {
@each $vdir, $prop in $-zf-flex-align {
.row.align-#{$vdir} {
align-items: $prop;
@include flex-grid-row-align($y: $vdir);
}

.column.align-#{$vdir} {
align-self: $prop;
@include flex-grid-column-align($vdir);
}
}
}

0 comments on commit 0cb3a1e

Please sign in to comment.
You can’t perform that action at this time.