Skip to content

Instantly share code, notes, and snippets.

@elisechant
Created November 14, 2013 04:33
Show Gist options
  • Save elisechant/7461403 to your computer and use it in GitHub Desktop.
Save elisechant/7461403 to your computer and use it in GitHub Desktop.
Block Grid for Bourbon's Neat
/*
|--------------------------------------------------------------------------
| Block Grid for Neat
|--------------------------------------------------------------------------
|
| An Automatic Rows type grid layout with no margins
|
| Overcomes a limitation of Bourbons's flex-grid(), where you can't set a
| value for $fg-gutter, impacting the width of the elements
|
| @param {Number [(of) Number]} standard span-columns() type var dec
| @param Boolean - include inner padding or not, default is false
|
*/
@mixin block-grid(
$span: $columns of $container-columns,
$inner-flex-padding: false
) {
// ***unset** the $fg-gutter
$fg-gutter: 0em;
@include span-columns($span, collapse);
@include omega(nth($span, 1) + n);
@if ($inner-flex-padding == true) {
@include pad( 0 #{flex-gutter()} );
}
// **reset** the $fg-gutter
$fg-gutter: $gutter;
}
@debug $fg-gutter;
.article-list {
@include outer-container;
.article-list-item {
@include block-grid(4 of 16);
}
}
@debug $fg-gutter;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment