Skip to content

Instantly share code, notes, and snippets.

@RomanHargrave
Last active January 26, 2019 05:08
Show Gist options
  • Save RomanHargrave/71f27116b1f86a862c86 to your computer and use it in GitHub Desktop.
Save RomanHargrave/71f27116b1f86a862c86 to your computer and use it in GitHub Desktop.
Tiny SCSS Flexbox Grid
/*
* Flexbox grid SCSS library
* Author: Roman Hargrave
* License: ASL 2.0
* The smallest grid system ever designed?
* */
@mixin flex-grid($classname: 'flexg', $columns: 16, $gutter: 0, $col-gutter: 10px) {
$column_name-format: #{$classname}-c-;
$offset_name-format: #{$classname}-o-;
.#{$classname}-row {
display: flex;
flex-flow: row;
padding: 0 $gutter;
> *[class *= "#{$classname}-c"]:first-child {
padding-left: 0px;
}
> *[class *= "#{$classname}-c"]:last-child {
padding-right: 0px;
}
}
$col-base-size: 100 / $columns;
@for $unit from 1 to $columns + 1 {
.#{$column_name-format}#{$unit} {
flex-grow: 1;
width: #{$col-base-size * $unit * 1%};
padding: 0 $col-gutter;
}
.#{$offset_name-format}#{$unit} {
left: #{$col-base-size * $unit * 1%};
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment