akartonplanning/docs/assets/sass/libs/_html-grid.scss

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

								}

						}

			}

	}