// 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; } } } } } }