grider.scss

/*
||||||||||||||||
|||||GRIDER|||||
||||||||||||||||
*/

/******************** 
ENABLE / DISABLE FEATURES ********************/
$equal-feature 			: true;
$offset-feature 		: true;

/******************** 
BASIC ********************/
$grid 					: 16;
$gutter					: 6px;

/******************** 
NAMING ********************/
$row					: 'row';
$container				: 'container';
$column					: 'column';
$offset					: 'offset';
$equal					: 'equal';
// breakpoints //
$extra-small 			: 'xs';
$small 					: 'sm';
$medium 				: 'md';
$large 					: 'lg';
$extra-large 			: 'xl';

/******************** 
COLUMN ********************/
$column-padding			: .3rem;
$column-min-height		: .125rem;

/******************** 
BREAKPOINTS ********************/
$breakpoints-extra-small	: 0;
$breakpoints-small			: 500px;
$breakpoints-medium			: 768px;
$breakpoints-large			: 992px;
$breakpoints-extra-large	: 1260px;

$viewports: (
	($extra-small, $breakpoints-extra-small),
	($small, $breakpoints-small), 
	($medium, $breakpoints-medium), 
	($large, $breakpoints-large), 
	($extra-large, $breakpoints-extra-large)
);

/*** MIXINS ***/
@mixin breakpoints($size) {
	@media only screen and (min-width: #{$size}) {
		@content;
	}
}

.#{$container} {
	width: 95%;
	margin: 0 auto;
}
.#{$row} {
	display: grid;
	grid-gap: $gutter;
	grid-template-columns: repeat($grid, 1fr);
	&> [class^="#{$column}"] { 
		height: fit-content;
		padding: $column-padding;
		min-height: $column-min-height;	
	}
	@if $equal-feature {
		&.#{$equal} > [class^="#{$column}"] { 
			height: auto;	
		}
	}
}
@each $label, $breakpoint in $viewports {
	@include breakpoints($breakpoint) {
		@for $id from 1 through $grid {
			.#{$column}-#{$id},
			.#{$column}-#{$label}-#{$id} {
				grid-column: span #{$id};
			}
			@if $offset-feature {
				@for $offset-id from 1 through $grid {
					.#{$column}-#{$label}-#{$id}.#{$offset}-#{$label}-#{$offset-id} {
						grid-column: #{$offset-id} / span #{$id};
					}
				}
			}
		}
	}
}