Skip to content

Instantly share code, notes, and snippets.

@fdorantesm fdorantesm/flexbox.css
Last active Apr 22, 2018

Embed
What would you like to do?
Grid generator sass mixin
.col {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-preferred-size: 0;
flex-basis: 0;
max-width: 100%;
}
.start-xs {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
text-align: start;
}
.center-xs {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
}
.end-xs {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
text-align: end;
}
.top-xs {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.middle-xs {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.bottom-xs {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.around-xs {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.between-xs {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.first-xs {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
}
.last-xs {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.col-xs-1 {
-ms-flex-preferred-size: 8.3333333333%;
flex-basis: 8.3333333333%;
max-width: 8.3333333333%;
}
.col-xs-2 {
-ms-flex-preferred-size: 16.6666666667%;
flex-basis: 16.6666666667%;
max-width: 16.6666666667%;
}
.col-xs-3 {
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
max-width: 25%;
}
.col-xs-4 {
-ms-flex-preferred-size: 33.3333333333%;
flex-basis: 33.3333333333%;
max-width: 33.3333333333%;
}
.col-xs-5 {
-ms-flex-preferred-size: 41.6666666667%;
flex-basis: 41.6666666667%;
max-width: 41.6666666667%;
}
.col-xs-6 {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
max-width: 50%;
}
.col-xs-7 {
-ms-flex-preferred-size: 58.3333333333%;
flex-basis: 58.3333333333%;
max-width: 58.3333333333%;
}
.col-xs-8 {
-ms-flex-preferred-size: 66.6666666667%;
flex-basis: 66.6666666667%;
max-width: 66.6666666667%;
}
.col-xs-9 {
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%;
}
.col-xs-10 {
-ms-flex-preferred-size: 83.3333333333%;
flex-basis: 83.3333333333%;
max-width: 83.3333333333%;
}
.col-xs-11 {
-ms-flex-preferred-size: 91.6666666667%;
flex-basis: 91.6666666667%;
max-width: 91.6666666667%;
}
.col-xs-12 {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
}
.col-xs-offset-0 {
margin-left: 0%;
}
.col-xs-offset-1 {
margin-left: 8.3333333333%;
}
.col-xs-offset-2 {
margin-left: 16.6666666667%;
}
.col-xs-offset-3 {
margin-left: 25%;
}
.col-xs-offset-4 {
margin-left: 33.3333333333%;
}
.col-xs-offset-5 {
margin-left: 41.6666666667%;
}
.col-xs-offset-6 {
margin-left: 50%;
}
.col-xs-offset-7 {
margin-left: 58.3333333333%;
}
.col-xs-offset-8 {
margin-left: 66.6666666667%;
}
.col-xs-offset-9 {
margin-left: 75%;
}
.col-xs-offset-10 {
margin-left: 83.3333333333%;
}
.col-xs-offset-11 {
margin-left: 91.6666666667%;
}
.col-xs-offset-12 {
margin-left: 100%;
}
.col-xs-push-0 {
left: 0%;
}
.col-xs-pull-0 {
right: 0%;
}
.col-xs-push-1 {
left: 8.3333333333%;
}
.col-xs-pull-1 {
right: 8.3333333333%;
}
.col-xs-push-2 {
left: 16.6666666667%;
}
.col-xs-pull-2 {
right: 16.6666666667%;
}
.col-xs-push-3 {
left: 25%;
}
.col-xs-pull-3 {
right: 25%;
}
.col-xs-push-4 {
left: 33.3333333333%;
}
.col-xs-pull-4 {
right: 33.3333333333%;
}
.col-xs-push-5 {
left: 41.6666666667%;
}
.col-xs-pull-5 {
right: 41.6666666667%;
}
.col-xs-push-6 {
left: 50%;
}
.col-xs-pull-6 {
right: 50%;
}
.col-xs-push-7 {
left: 58.3333333333%;
}
.col-xs-pull-7 {
right: 58.3333333333%;
}
.col-xs-push-8 {
left: 66.6666666667%;
}
.col-xs-pull-8 {
right: 66.6666666667%;
}
.col-xs-push-9 {
left: 75%;
}
.col-xs-pull-9 {
right: 75%;
}
.col-xs-push-10 {
left: 83.3333333333%;
}
.col-xs-pull-10 {
right: 83.3333333333%;
}
.col-xs-push-11 {
left: 91.6666666667%;
}
.col-xs-pull-11 {
right: 91.6666666667%;
}
.col-xs-push-12 {
left: 100%;
}
.col-xs-pull-12 {
right: 100%;
}
@mixin grid($size, $type: 'flex', $columns: 12)
//Auto column
@if $type == 'flex'
.col
-webkit-box-flex: 1
-ms-flex-positive: 1
flex-grow: 1
-ms-flex-preferred-size: 0
flex-basis: 0
max-width: 100%
.start-#{$size}
-webkit-box-pack: start
-ms-flex-pack: start
justify-content: flex-start
text-align: start
.center-#{$size}
-webkit-box-pack: center
-ms-flex-pack: center
justify-content: center
text-align: center
.end-#{$size}
-webkit-box-pack: end
-ms-flex-pack: end
justify-content: flex-end
text-align: end
.top-#{$size}
-webkit-box-align: start
-ms-flex-align: start
align-items: flex-start
.middle-#{$size}
-webkit-box-align: center
-ms-flex-align: center
align-items: center
.bottom-#{$size}
-webkit-box-align: end
-ms-flex-align: end
align-items: flex-end
.around-#{$size}
-ms-flex-pack: distribute
justify-content: space-around
.between-#{$size}
-webkit-box-pack: justify
-ms-flex-pack: justify
justify-content: space-between
.first-#{$size}
-webkit-box-ordinal-group: 0
-ms-flex-order: -1
order: -1
.last-#{$size}
-webkit-box-ordinal-group: 2
-ms-flex-order: 1
order: 1
// columns
@if $type != 'fractions'
@for $x from 1 through $columns
$width: percentage($x/$columns)
.col-#{$size}-#{$x}
@if $type == 'flex'
-ms-flex-preferred-size: $width
flex-basis: $width
max-width: $width
@else
width: $width
//offsets
@for $offset from 0 through $columns
.col-#{$size}-offset-#{$offset}
margin-left: percentage($offset/$columns)
//push & pull
@for $item from 0 through $columns
.col-#{$size}-push-#{$item}
left: percentage($item/$columns)
.col-#{$size}-pull-#{$item}
right: percentage($item/$columns)
@else
@for $x from 1 through $columns
@for $y from 1 through $x
@if $y!=$x
$width: percentage($y/$x)
.col-#{$size}-#{$y + '-' + $x}
width: $width
@for $k from 1 through $x
@if $x!=$k
$offset: percentage($k/$x)
&.col-#{$size}-offset-#{$k}
margin-left: $offset
&.col-#{$size}-pull-#{$k}
right: $offset
&.col-#{$size}-push-#{$k}
left: $offset
+grid('lg')
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.