Generated by SassMeister.com.

Flexbox Grid Sass.scss

/**
 * Flex Grid
*/
//
// Usage
// =====
// Assuming default values:
// <div class="row">
// 	<div class="col-xs-6">
// 		A half-width column.
// 	</div>
// 	<div class="col-xs-6 col-xs-push-6">
// 		A half, pulled left by its own width. You get this, right?
// 	</div>
// </div>
//-----------------------------------//

//
// Options
//

// Base
$container-maw: 1280px !default; // Max width of site container
$container-miw: 320px !default; // Min width of site container
$flex-gutter: 40px !default; // Columns gutter width
$flex-columns: 12 !default; // Quantity of columns
$flex-turn_on: true !default; // Turn on / off grid. If turned off, there will be generated only containers.

// Namespaces
$flex-nmsp-cont-fixed: "container" !default; // Name of fixed site container
$flex-nmsp-cont-fluid: "container-fluid" !default; // Name of fluid site container
$flex-nmsp-row: "row" !default; // Name of flex-row container
$flex-nmsp-column: "column" !default; // Name of flex-column container
$flex-nmsp-col: "col" !default; // Name of colls
$flex-nmsp-col-prfx: "-" !default; // divider between col and mq prefix
$flex-nmsp-sz-prfx: "-" !default; // divider between mq prefix and size

// Additional options
$flex-use-attr-selector: true !default; // If true, you don't need write 'col col-xs-12' class, just 'col-xs-12'//[class*='col-' / .col]
$flex-use-column: false !default; // grid in column (.column)
$flex-use-reverse: false !default; // reverse grid (.row-/.column-reverse)
$flex-use-no-gutter: false !default; // grid without gutters (.row.no-gutter)
$flex-use-no-margin: true !default; // grid without negative margins (.row.no-margin)
$flex-use-fixed-container-width: false !default; // Use fixed container width

// Pushes and pulls
$flex-use-pushes: false !default; // pushes for cols (margin-left: ...%)
$flex-use-pulls: false !default; // pulls for cols (margin-left: -...%)
$flex-use-offsets: false !default; // offsets for cols (margin-right: ...%)

// Help classes
$flex-use-row-help: false !default; // help classes for .row/.col container
$flex-use-col-help: false !default; // help classes for .col- items
$flex-use-col-hide: false !default; // hide classes for .col- items

// System computed
$flex-gutter-split: $flex-gutter / 2;
$flex-gutter-compensation: $flex-gutter-split * -1;
$flex-attr: if($flex-use-attr-selector, "[class*='#{$flex-nmsp-col+$flex-nmsp-col-prfx}']", ".#{$flex-nmsp-col}");

//
// The code
//

// Site containers
.#{$flex-nmsp-cont-fluid} { // container-fluid
	padding-right: $flex-gutter-split;
	padding-left: $flex-gutter-split;
	min-width: $container-miw;
}

.#{$flex-nmsp-cont-fixed} { // container
	@extend .#{$flex-nmsp-cont-fluid};
	margin-right: auto;
	margin-left: auto;
	max-width: $container-maw;
}

@if ($flex-turn_on) { // Turn on grid

	// Flex container
	%grid-row {
		box-sizing: border-box;
		display: flex;
		flex: 0 1 auto;
		flex-wrap: wrap;
		margin-right: $flex-gutter-compensation;
		margin-left: $flex-gutter-compensation;
		@if ($flex-use-no-margin) {
			&.no-margin {
				margin-right: 0;
				margin-left: 0;
			}
		}
		@if ($flex-use-no-gutter) {
			&.no-gutter {
				margin-right: 0;
				margin-left: 0;
				& > #{$flex-attr} { // [class*='col-' / .col]
					padding-right: 0;
					padding-left: 0;
				}
			}
		}
	}
	.#{$flex-nmsp-row} { // row
		@extend %grid-row;
		flex-direction: row;
		@if ($flex-use-reverse) {
			&.reverse {
				flex-direction: row-reverse;
			}
		}
	}
	@if ($flex-use-column) { // column
		.#{$flex-nmsp-column} {
			@extend %grid-row;
			flex-direction: column;
			@if ($flex-use-reverse) {
				&.reverse {
					flex-direction: column-reverse;
				}
			}
		}
	}

	// base column styles
	#{$flex-attr} { // [class*='col-' / .col]
		box-sizing: border-box;
		flex: 0 0 auto;
		padding-right: $flex-gutter-split;
		padding-left: $flex-gutter-split;
	}

}// Turn on

// make grid
@mixin grid($size, $width: 0) {

	// Auto width
	.#{$flex-nmsp-col+$flex-nmsp-col-prfx+$size} { // .col-*prefix*
		flex-grow: 1;
		flex-basis: 0;
		max-width: 100%;
	}

	// Container fixed width
	@if ($flex-use-fixed-container-width and $width != 0) {
		.container {
			width: ($width - $flex-gutter);
		}
	}

	// create columns
	@for $i from 1 through $flex-columns { // .col-*prefix*-*size*
		.#{$flex-nmsp-col+$flex-nmsp-col-prfx+$size+$flex-nmsp-sz-prfx}#{$i} {
			flex-basis: percentage($i / $flex-columns);
			max-width: percentage($i / $flex-columns);
		}
	}

	// pushes
	@if ($flex-use-pushes) { // .col-*prefix*-*push*-*size*
		@for $i from 0 to $flex-columns {
			.#{$flex-nmsp-col+$flex-nmsp-col-prfx+$size+$flex-nmsp-sz-prfx}push-#{$i} {
				@if $i == 0 {
					margin-left: 0;
				} @else {
					margin-left: percentage($i / $flex-columns);
				}
			}
		}
	}

	// pulls
	@if ($flex-use-pulls) { // .col-*prefix*-*pull*-*size*
		@for $i from 0 to $flex-columns {
			.#{$flex-nmsp-col+$flex-nmsp-col-prfx+$size+$flex-nmsp-sz-prfx}pull-#{$i} {
				@if $i == 0 {
					margin-left: 0;
				} @else {
					margin-left: -(percentage($i / $flex-columns));
				}
			}
		}
	}

	// offsets
	@if ($flex-use-offsets) { // .col-*prefix*-*push*-*size*
		@for $i from 0 to $flex-columns {
			.#{$flex-nmsp-col+$flex-nmsp-col-prfx+$size+$flex-nmsp-sz-prfx}offset-#{$i} {
				@if $i == 0 {
					margin-right: 0;
				} @else {
					margin-right: percentage($i / $flex-columns);
				}
			}
		}
	}

	// helper classes for flex container
	@if ($flex-use-row-help) {
		.start-#{$size} {
			justify-content: flex-start;
			text-align: start;
		}
		.center-#{$size} {
			justify-content: center;
			text-align: center;
		}
		.end-#{$size} {
			justify-content: flex-end;
			text-align: end;
		}
		.top-#{$size} {
			align-items: flex-start;
		}
		.middle-#{$size} {
			align-items: center;
		}
		.bottom-#{$size} {
			align-items: flex-end;
		}
		.around-#{$size} {
			justify-content: space-around;
		}
		.between-#{$size} {
			justify-content: space-between;
		}
	}

	// helper classes for flex items
	@if ($flex-use-col-help) {
		.first-#{$size} {
			order: -1;
		}
		.last-#{$size} {
			order: 1;
		}
		// My custom helper classes for flex items
		.self-top-#{$size} {
			align-self: flex-start;
		}
		.self-center-#{$size} {
			align-self: center;
		}
		.self-bottom-#{$size} {
			align-self: flex-end;
		}
		.self-baseline-#{$size} {
			align-self: baseline;
		}
	}

	// hiding classes for both
	@if ($flex-use-col-hide) {
		.#{$flex-nmsp-col+$flex-nmsp-col-prfx+$size}-hide {
			display: none;
		}
		.#{$flex-nmsp-col+$flex-nmsp-col-prfx+$size}-show {
			display: block;
		}
	}

}

// End flex grid mixin

@if ($flex-turn_on) { // Turn on grid

	@include grid(xs);

	// Include this mixin inside needed mediaquery to make it responsive
	//@include breakpoint(small) {
	//	@include grid(sm);
	//}
	//@include breakpoint(medium) {
	//	@include grid(md);
	//}
	//@include breakpoint(large) {
	//	@include grid(lg);
	//}

}// Turn on