five-for-the-future/themes/pub/wporg/css/tools/_kube.scss

// Kube. CSS & JS Framework
// Copyright (c) 2009-2017, Imperavi LLC.
// License: MIT

$grid-columns: 12 !default;
$grid-gutter: 2% !default;
$text-margin-bottom: 16px !default;
$z-over-content: 100 !default;

// display
@mixin flex {
	display: flex;
}

// basis
@mixin flex-basis($width) {
	flex-basis: $width;
}

// items wrap
@mixin flex-items-wrap {
	flex-wrap: wrap;
}

// items nowrap
@mixin flex-items-nowrap {
	flex-wrap: nowrap;
}

// items row
@mixin flex-items-row {
	flex-direction: row;
}

// items columns
@mixin flex-items-column {
	flex-direction: column;
}

// items left
@mixin flex-items-left {
	justify-content: flex-start;
}

// items right
@mixin flex-items-right {
	justify-content: flex-end;
}

// items center
@mixin flex-items-center {
	justify-content: center;
}

// items between
@mixin flex-items-space-between {
	justify-content: space-between;
}

// items around
@mixin flex-items-space-around {
	justify-content: space-around;
}

// items vertical top
@mixin flex-items-top {
	align-items: flex-start;
}

// items vertical middle
@mixin flex-items-middle {
	align-items: center;
}

// items vertical bottom
@mixin flex-items-bottom {
	align-items: flex-end;
}

// item grow
@mixin flex-item-grow($grow: 0) {
	flex-grow: $grow;
}


// item auto
@mixin flex-item-auto {
	flex: auto;
}

// item one
@mixin flex-item-one {
	flex: 1;
}

// item shrink
@mixin flex-item-shrink($num: 0) {
	flex-shrink: $num;
}

// item width
@mixin flex-item-width($width) {
	flex: 0 0 $width;

	@include breakpoint(sm) {
		flex: 0 0 100% !important;
	}
}
// Make Row
@mixin grid-row {
	@include flex;
	@include flex-items-row;
	@include flex-items-wrap;

	@include breakpoint(sm) {
		@include flex-items-column;
		@include flex-items-nowrap;
	}
}

// Generate Columns
@mixin generate-grid-columns {

	@for $i from 1 through $grid-columns
	{
		.col-#{$i} {
			width: 100% / $grid-columns * $i;
		}
		.offset-#{$i} {
			$width: 100% / $grid-columns * $i;
			margin-left: $width;
		}

	}

	.gutters {
		@for $i from 1 through $grid-columns
		{
			& > .col-#{$i} {
				$width: 100% / $grid-columns * $i;
				width: calc(#{$width} - #{$grid-gutter});
			}
			$n: $grid-columns / $i + 1;
			@if $n == floor( $n ) and ($grid-columns / $i) > 1 {
				& > .col-#{$i}:nth-child(n+#{$n}) {
					margin-top: #{$grid-gutter};
				}
			}
			& > .offset-#{$i} {
				$width: 100% / $grid-columns * $i;
				margin-left: calc(#{$width} + #{$grid-gutter}) !important;
			}
		}
	}
}