Last active
January 12, 2016 18:50
-
-
Save brianpattison/daffde199b5f4813b654 to your computer and use it in GitHub Desktop.
"Has Columns" Flexbox SCSS Mixin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Sets up a element and its child elements with the flexbox properties needed | |
// to have the given number of columns with optional gutters or margins. | |
$mobile-breakpoint: 500px !default; | |
@mixin has-columns($columns, $gutter: 0, $margin: 0) { | |
@include align-content(stretch); | |
@include align-items(stretch); | |
@include display(flex); | |
@include flex-direction(row); | |
@include flex-wrap(wrap); | |
@include justify-content(space-around); | |
margin: 0 auto; | |
// Gutter and margin should be used for two different purposes. | |
@if $margin > 0 and $gutter > 0 { | |
@error "$gutter and $margin cannot be used together. Given: $gutter: #{$gutter} $margin: #{$margin}"; | |
} | |
@if $margin > 0 { | |
padding: $margin 0 0 $margin; | |
} | |
> div { | |
@include flex(1 1 auto); | |
width: (1 / $columns) * 85%; | |
@if $margin > 0 { | |
margin: 0 $margin $margin 0; | |
} @else if $gutter > 0 { | |
margin-right: $gutter; | |
&:nth-child(#{$columns}n) { | |
margin-right: 0; | |
} | |
} | |
&:empty { | |
margin-bottom: 0; | |
margin-top: 0; | |
visibility: hidden; | |
} | |
} | |
@media (max-width: $mobile-breakpoint) { | |
> div { | |
width: 100%; | |
@if $gutter > 0 { | |
margin-bottom: $gutter; | |
margin-right: 0; | |
} | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body.pages.home { | |
.columns { | |
@include has-columns(3, $gutter: 1em); | |
} | |
.widgets { | |
@include has-columns(3, $margin: 1em); | |
} | |
.center-children { | |
@include center-children; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment