_fgrid.scss

/*
  FRACTION GRID
  Fixed gutter, fluid width grid based on fractions
  Note: use lowest common denominator, e.g. 1/6 rather than 2/12
*/

// PLAYGROUND: http://codepen.io/iamkeir/pen/qZOarg?editors=1100

// @TODO: Option to float right instead of left in fgrid-col (plus push/pull)
// @TODO: Inline-block support (reset space w/ font-size)
// @TODO: Flexbox support (w/ fallback?)
// @TODO: Centre align, on grid
// @TODO: Example of responsive gutters?
// @TODO: IE8?
// @TODO: Auto-generate classes from fraction map for class-based grid
// @TODO: Consider data-attr? E.g. data-col="1/4", data-col-tablet="1/2", etc.

$w-gutter: 20px !default;
$w-max: 1000px !default;

// FGRID-FRACTION
// Generate % width from fraction, e.g. `width: fgrid-fraction(1/2)` will output `width: 50%`
// Assumes `$w-max` as grid size but can be overridden as needed
// Optionally calculate fraction as px width, e.g. `width: fgrid-fraction(1/2,$unit:px)` will output `width: 480px`
@function fgrid-fraction($fraction,$container:$w-max,$unit:false) {
  $px-width: $container*$fraction;
  @if ($unit == px) {
    @return $px-width;
  } @else {
    @return percentage($px-width/$container);
  }
}

// FGRID-WRAP
// This needs to be applied to the parent element of your columns
@mixin fgrid-wrap($gutter:$w-gutter) {
  margin-left: #{-$gutter};
  &:after { content: ""; display: table; clear: both; } // clearfix
}

// FGRID-WRAP-RESET
@mixin fgrid-wrap-reset() {
  margin-left: 0;
  &:after { content: normal; display: inline; clear: none; } // reset clearfix
}

// FGRID-COL
// Infinite grid possibilities using fractions
// E.g. `@include fgrid-col(1/12)` will be 1 of 12 cols, `@include fgrid-col(1/6)` will be 2 of 12 cols, etc.
@mixin fgrid-col($fraction:1/1,$gutter:$w-gutter) {
  float: left;
  padding-left: $gutter;
  width: fgrid-fraction($fraction);
}

// FGRID-COL-RESET
@mixin fgrid-col-reset() {
  float: none;
  padding-left: 0;
  width: auto;
}

// FGRID-OFFSET
// Offset by fraction
@mixin fgrid-offset($fraction:1/1,$mode:push,$direction:left) {  
  position: relative;
  @if ($mode == pull) {
    #{$direction}: -(fgrid-fraction($fraction)); // pull
  } @else {
    #{$direction}: fgrid-fraction($fraction); // push
  }
}

// FGRID-OFFSET-RESET
@mixin fgrid-offset-reset() {
  position: static;
  left: auto;
  right: auto;
}