bencoveney/Milligrid

// Base row rules.
@mixin row {
  // Display the content in rows
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  // No spacing, just a container
  margin: 0 (0 - $gutter-width);
  padding: 0;

  // Fill the parent container
  width: calc(100% + 2rem);

  // Smaller than mobile screen
  @media (max-width: $columns-as-rows-threshold) {
    flex-direction: column;
  }
}

// Vertical alignment.
@mixin row-top {
  align-items: flex-start;
}

@mixin row-bottom {
  align-items: flex-end;
}

@mixin row-center {
  align-items: center;
}

@mixin row-stretch {
  align-items: stretch;
}

@mixin row-baseline {
  align-items: baseline;
}

// Specification of the maximum number of items per row.
// Requires the name of the column classes that will be placed within the row.
@mixin row-number($number, $column-rule-name) {
  .#{$column-rule-name} {
    min-width: percentage(1 / $number);
  }
}

@mixin row-vertical-alignment-classes {
  &.#{$rule-prefix}row-top {
    @include row-top;
  }

  &.#{$rule-prefix}row-bottom {
    @include row-bottom;
  }

  &.#{$rule-prefix}row-center {
    @include row-center;
  }

  &.#{$rule-prefix}row-stretch {
    @include row-stretch;
  }

  &.#{$rule-prefix}row-baseline {
    @include row-baseline;
  }
}

@mixin row-number-classes {
  @for $i from 1 through $maximum-items-per-row {
    &.#{$rule-prefix}row-#{$i} {
      @include row-number($i, #{$rule-prefix}column);
    }
  }
}

// Construction of the static row rules.
.#{$rule-prefix}row {
  @include row;

  @include row-vertical-alignment-classes;
  @include row-number-classes;
}