mixins

_mixins.scss

// Block grids
// ----------------------------------
// create an n-up block grid
// works well for > n unequal height items
// use @miixn block-grid on parent elem,
// @mixin block-grid-item on children

@mixin block-grid($gutterWidth: 25){
  font-size: 0; //kills inline-block ghost space
  margin-left: -#{$gutterWidth}px;
}

@mixin block-grid-item($n, $gutterWidth: 25, $fontSize: '14px'){
  font-size: $fontSize; //reset parent's zero font
  width: percentage(1/$n);
  display: inline-block;
  vertical-align: top;
  padding-left: #{$gutterWidth}px;
}