Subversion Repositories web.creative

// 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.50, 2.00;
      $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;
                      }
                    }

                }

            }

      }

  }