Grid utilities, based on bourbon/neat.

grid_utils.sass

// Settings
$grid-visual-aid-breakpoints: () !global !default
$grid-media-default-feature : min-width !default
$grid-max-columns           : 12 !default
$grid-default-columns       : 2 !default
$grid-float-direction       : left !default
$grid-gutter-width          : 30px !default
$grid-max-width             : 1200px !default

// Scoped
$grid-columns-for-scope     : $grid-default-columns !global


// ----------------------------------------------------------------------------

@function grid-media-breakpoint($query: $value $columns)
  @if length($query) == 1 // Only value provided
    $query: $grid-media-default-feature nth($query, 1) $grid-max-columns

  @else if is-even(length($query)) // No feature provided
    $query: $grid-media-default-feature nth($query, 1) nth($query, 2)

  @if not index($query, $grid-visual-aid-breakpoints)
    $grid-visual-aid-breakpoints: append($grid-visual-aid-breakpoints, $query, comma) !global

  @return $query


// ----------------------------------------------------------------------------

=grid-media($query: $feature $value $columns)
  $media-query: "screen and (" + nth($query, 1) + ": " + nth($query, 2) + ") "

  // OUT:
  @media #{$media-query}
    $grid-columns-for-scope: nth($query, 3) !global
    @content
    $grid-columns-for-scope: $grid-default-columns !global


// ----------------------------------------------------------------------------

@function grid-columns-width($columns, $container-columns: $grid-columns-for-scope)
  @return percentage($columns / $container-columns)


// ----------------------------------------------------------------------------

=grid-columns($span: $columns of $container-columns)
  $columns: nth($span, 1)
  // no container columns provided, use default
  $container-columns: $grid-columns-for-scope
  $grid-columns-for-scope: $grid-default-columns !default

  // e.g. "2 of 12"
  @if length($span) == 3
    $container-columns: nth($span, 3)

  // OUT:
  float: $grid-float-direction
  width: grid-columns-width($columns, $container-columns)


// ----------------------------------------------------------------------------

=grid-container
  // OUT:
  +clearfix
  max-width: $grid-max-width
  margin-left: auto
  margin-right: auto


// ----------------------------------------------------------------------------

=grid-padded
  // OUT:
  padding-left: $grid-gutter-width / 2
  padding-right: $grid-gutter-width / 2


// ----------------------------------------------------------------------------

@function -grid-visual-aid-column-gradient-stops($grid-columns, $color: hotpink)
  $column-width: grid-columns-width(1, $grid-columns)
  $column-offset: 0

  $values: (transparent 0, $color 0)

  @for $i from 0 to $grid-columns
    @if $i % 2 == 0
      $values: append($values, transparent $column-offset, comma)
      $values: append($values, transparent $column-offset + $column-width, comma)
    @else
      $values: append($values, $color $column-offset, comma)
      $values: append($values, $color $column-offset + $column-width, comma)
    $column-offset: $column-offset + $column-width

  @return $values


// ----------------------------------------------------------------------------

=-grid-visual-aid-column-gradient($values...)
  // OUT:
  background-image: -webkit-linear-gradient(left, $values)
  background-image: -moz-linear-gradient(left, $values)
  background-image: -ms-linear-gradient(left, $values)
  background-image: -o-linear-gradient(left, $values)
  background-image: unquote("linear-gradient(to left, #{$values})")


// ----------------------------------------------------------------------------

=grid-visual-aid
  // OUT:
  &:before
    $gradient-stops: -grid-visual-aid-column-gradient-stops($grid-columns-for-scope)
    +-grid-visual-aid-column-gradient($gradient-stops)
    content: ""
    display: inline-block
    height: 100%
    width: 100%
    left: 0
    right: 0
    margin: 0 auto
    opacity: 0.4
    pointer-events: none
    position: absolute
    z-index: -1

    @each $breakpoint in $grid-visual-aid-breakpoints
      @if $breakpoint
        +grid-media($breakpoint)
          $gradient-stops: -grid-visual-aid-column-gradient-stops($grid-columns-for-scope)
          +-grid-visual-aid-column-gradient($gradient-stops)