tningjs/sam-and-his-friends

// html-grid.scss v1.0 | @ajlkn | MIT licensed */

// Mixins.

/// Initializes the current element as an HTML grid.
/// @param {mixed} $gutters Gutters (either a single number to set both column/row gutters, or a list to set them individually).
/// @param {mixed} $suffix Column class suffix (optional; either a single suffix or a list).
@mixin html-grid($gutters: 1.5em, $suffix: '') {
  // Initialize.
  $cols: 12;
  $multipliers: 0, 0.25, 0.5, 1, 1.5, 2;
  $unit: 100% / $cols;

  // Suffixes.
  $suffixes: null;

  @if (type-of($suffix) == 'list') {
    $suffixes: $suffix;
  } @else {
    $suffixes: ($suffix);
  }

  // Gutters.
  $guttersCols: null;
  $guttersRows: null;

  @if (type-of($gutters) == 'list') {
    $guttersCols: nth($gutters, 1);
    $guttersRows: nth($gutters, 2);
  } @else {
    $guttersCols: $gutters;
    $guttersRows: 0;
  }

  // Row.
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  align-items: stretch;

  // Columns.
  > * {
    box-sizing: border-box;
  }

  // Gutters.
  &.gtr-uniform {
    > * {
      > :last-child {
        margin-bottom: 0;
      }
    }
  }

  // Alignment.
  &.aln-left {
    justify-content: flex-start;
  }

  &.aln-center {
    justify-content: center;
  }

  &.aln-right {
    justify-content: flex-end;
  }

  &.aln-top {
    align-items: flex-start;
  }

  &.aln-middle {
    align-items: center;
  }

  &.aln-bottom {
    align-items: flex-end;
  }

  // Step through suffixes.
  @each $suffix in $suffixes {
    // Suffix.
    @if ($suffix != '') {
      $suffix: '-' + $suffix;
    } @else {
      $suffix: '';
    }

    // Row.

    // Important.
    > .imp#{$suffix} {
      order: -1;
    }

    // Columns, offsets.
    @for $i from 1 through $cols {
      > .col-#{$i}#{$suffix} {
        width: $unit * $i;
      }

      > .off-#{$i}#{$suffix} {
        margin-left: $unit * $i;
      }
    }

    // Step through multipliers.
    @each $multiplier in $multipliers {
      // Gutters.
      $class: null;

      @if ($multiplier != 1) {
        $class: '.gtr-' + ($multiplier * 100);
      }

      &#{$class} {
        margin-top: ($guttersRows * $multiplier * -1);
        margin-left: ($guttersCols * $multiplier * -1);

        > * {
          padding: ($guttersRows * $multiplier)
            0
            0
            ($guttersCols * $multiplier);
        }

        // Uniform.
        &.gtr-uniform {
          margin-top: $guttersCols * $multiplier * -1;

          > * {
            padding-top: $guttersCols * $multiplier;
          }
        }
      }
    }
  }
}