Created
June 4, 2015 18:25
-
-
Save xyfeng/783422698775bfa775d7 to your computer and use it in GitHub Desktop.
Flexbox grid scss with custom gutter
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
/** | |
* Grid Setup | |
* Modified from http://matthewsimo.github.io/scss-flex-grid/ | |
*/ | |
$ps-columns: 12 !default; | |
$ps-gutter: 0.5rem !default; | |
/** | |
* Break point namespace object | |
* | |
* Set the default namespace object with these defaults with the | |
* understanding that you can pass in whatever you might require for your site. | |
* | |
* $ps-breakpoints is a Sass list with nested lists inside. Each sub list defines two things. | |
* 1. The namespace for that breakpoint. (Required) (i.e. xs, sm, md, lg) | |
* 2. The min-width measurement for the breakpoint for that namespace. (i.e. 48em, 62em, 75em) | |
* 3. The gutter-width measurement for the breakpoint for that namespace. | |
* | |
* Note: These should be in the proper order (at least till libsass handles map keys properly). | |
* | |
*/ | |
$ps-breakpoints: ( (xs), (sm, 768px, 16px), (md, 1020px, 20px), (lg, 1440px, 24px) ) !default; | |
/** | |
* Calculate column size percentage | |
*/ | |
@function get-col-percent($column-num) { | |
@return $column-num / $ps-columns * 100%; | |
} | |
/** | |
* Spacing mixin to create uniform margin/padding | |
*/ | |
@mixin spacing( $value, $type: margin, $orientation: vertical ) { | |
@if $orientation == vertical { | |
#{ $type }-top: $value; | |
#{ $type }-bottom: $value; | |
} | |
@else { | |
#{ $type }-left: $value; | |
#{ $type }-right: $value; | |
} | |
} | |
/** | |
* Row wrapper class, flex box parent. | |
*/ | |
.row { | |
box-sizing: border-box; | |
display: flex; | |
flex-direction: row; | |
flex-wrap: wrap; | |
flex: 0 1 auto; | |
} | |
%col { | |
box-sizing: border-box; | |
display: flex; | |
flex-direction: column; | |
flex-grow: 0; | |
flex-shrink: 0; | |
} | |
%col-flex { | |
@extend %col; | |
flex-grow: 1; | |
flex-basis: 0; | |
max-width: 100%; | |
} | |
/** | |
* Generate a set of grid column classes using a namespace | |
*/ | |
@mixin grid-sizes( $namespace, $gutter ) { | |
.col { | |
@include spacing( ( $gutter / 2), padding, horizontal ); | |
} | |
.row { | |
@include spacing( ( -$gutter / 2 ), margin, horizontal ); | |
} | |
.start-#{$namespace} { | |
justify-content: flex-start; | |
text-align: start; | |
} | |
.center-#{$namespace} { | |
justify-content: center; | |
text-align: center; | |
} | |
.end-#{$namespace} { | |
justify-content: flex-end; | |
text-align: end; | |
} | |
.top-#{$namespace} { | |
align-items: flex-start; | |
} | |
.middle-#{$namespace} { | |
align-items: center; | |
} | |
.bottom-#{$namespace} { | |
align-items: flex-end; | |
} | |
.around-#{$namespace} { | |
justify-content: space-around; | |
} | |
.between-#{$namespace} { | |
justify-content: space-between; | |
} | |
.first-#{$namespace} { | |
order: -1; | |
} | |
.last-#{$namespace} { | |
order: 1; | |
} | |
@for $i from 1 through $ps-columns { | |
.#{$namespace}-#{$i} { | |
@extend %col; | |
flex-basis: get-col-percent($i); | |
max-width: get-col-percent($i); | |
} | |
@if ( $i != $ps-columns ) { | |
.off-#{$namespace}-#{$i} { | |
margin-left: get-col-percent($i); | |
} | |
} | |
} | |
} | |
/** | |
* Build Grid | |
*/ | |
@each $val in $ps-breakpoints { | |
$namespace: nth($val, 1); | |
$gutter: $ps-gutter; | |
.#{$namespace} { | |
@extend %col-flex; | |
} | |
.container { | |
overflow: hidden; | |
} | |
.row.reverse { | |
flex-direction: row-reverse; | |
} | |
.col.reverse { | |
flex-direction: column-reverse; | |
} | |
@if length($val) == 1 { | |
@include grid-sizes( $namespace, $gutter ); | |
} | |
@else { | |
$size: nth($val, 2); | |
@if length($val) == 3 { | |
$gutter: nth($val, 3); | |
} | |
@media only screen and (min-width: #{$size}) { | |
@include grid-sizes( $namespace, $gutter ); | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment