Skip to content

Instantly share code, notes, and snippets.

@stanosmith
Forked from RomanHargrave/flexgrid.scss
Created June 14, 2018 19:12
Show Gist options
  • Save stanosmith/fb2cd781694d81cace47b1b93a3d1ed1 to your computer and use it in GitHub Desktop.
Save stanosmith/fb2cd781694d81cace47b1b93a3d1ed1 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