Initial commit

2018-06-29 00:00:48 -07:00
commit f72587d80e
59 changed files with 10681 additions and 0 deletions
@@ -0,0 +1,121 @@
+// grid.scss v0.1-dev | @ajlkn | MIT licensed */
+
+// Mixins.
+
+	/// Initializes grid classes.
+	/// @param {mixed} $gutters Gutters (either a single number to set both column/row gutters, or a list to set them individually).
+	/// @param {string} $suffix Optional column class suffix.
+	/// @param {list} $override Optional list of column classes to override.
+	@mixin grid($gutters: 1.5em, $suffix: '', $override: ()) {
+
+		// Initialize.
+			$cols: 12;
+			$multipliers: 0, 0.25, 0.5, 1, 1.50, 2.00;
+			$unit: 100% / $cols;
+			$suffixes: join($override, ($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.
+			.row {
+				display: flex;
+				flex-wrap: wrap;
+				box-sizing: border-box;
+
+				// Columns.
+					> * {
+						box-sizing: border-box;
+					}
+
+				// Gutters.
+					&.gtr-uniform {
+						> * {
+							> :last-child {
+								margin-bottom: 0;
+							}
+						}
+					}
+
+			}
+
+		// Step through suffixes.
+			@each $suffix in $suffixes {
+
+				// Suffix.
+					@if ($suffix != '') {
+						$suffix: '-' + $suffix;
+					}
+					@else {
+						$suffix: '';
+					}
+
+				// Row.
+					.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;
+												}
+											}
+
+									}
+
+							}
+
+					}
+
+			}
+
+	}