//** Number of columns in the grid.
$grid-columns:              12 !default;
//** Padding between columns. Gets divided in half for the left and right.
$grid-gutter-width:         30px !default;

// Creates a wrapper for a series of columns
@mixin make-row($gutter: $grid-gutter-width) {
	//margin-left:  ($gutter / -2);
	//margin-right: ($gutter / -2);

	@include clearfix();
}

@mixin make-grid-columns($i: 1, $list: ".vfb-col-#{$i}") {
  @for $i from (1 + 1) through $grid-columns {
    $list: "#{$list}, .vfb-col-#{$i}";
  }
  #{$list} {
    position: relative;
    // Prevent columns from collapsing when empty
    min-height: 1px;
    // Inner gutter via padding
    padding-left:  ($grid-gutter-width / 2);
    padding-right: ($grid-gutter-width / 2);
  }
}

@mixin grid-columns( $class, $columns ) {
  @for $i from 1 through $columns {
    .vfb-col-#{$i} {
      width: percentage( ( $i / $grid-columns ) );

      @if $class != 'xs' {
	      float: left;
      }
    }
  }
}

// !Box sizing
@mixin box-sizing($boxmodel) {
  -webkit-box-sizing: $boxmodel;
     -moz-box-sizing: $boxmodel;
          box-sizing: $boxmodel;
}

// !Clearfix
//
// For modern browsers
// 1. The space content is one way to avoid an Opera bug when the
//    contenteditable attribute is included anywhere else in the document.
//    Otherwise it causes space to appear at the top and bottom of elements
//    that are clearfixed.
// 2. The use of `table` rather than `block` is only necessary if using
//    `:before` to contain the top-margins of child elements.
//
// Source: http://nicolasgallagher.com/micro-clearfix-hack/

@mixin clearfix() {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}
