index.scss

/**
 * The Kickoff Flexbox Grid
 * =================================
 * Default grid classes
 * Grid gutter options
 * Modifier Classes (column height and cell alignment)
 * Legacy fallbacks for flexbox
 * Grid span classes
 * Breakpoint stacking
 */

@import "../../utils.scss/scss/index"; // https://github.com/TryKickoff/kickoff-utils.scss

/* Import Grid helpers and mixins */
@import 'grid-variables';
@import "../../../include-media/dist/include-media"; // http://include-media.com
@import 'grid-helpers';

/**
 * Basic Usage:
 * =================================
	<div class="g">
		<div class="g-col g-span4 g-span6--mid"></div>
		<div class="g-col g-span8 g-span6--mid"></div>
	</div>
 */
.g {
	display: flex !important; // force display: flex, as otherwise may clash with other components display properties (and the grid won’t work)
	flex-wrap: wrap;
	flex-direction: row;

	// any image in the grid should have a max-width of it’s container
    & img {
        max-width: 100%;
    }
}

	.g-col {
		display: block;
		box-sizing: border-box; // Ensure border-box is specified as the grid proportions rely on this

		// By default, evenly distribute columns
		// n.b. to support non-flexbox browsers, you should always add .g-spanx
		flex: 1 0 0;
		min-width: 0; // this is to make sure that long words don’t get cut off, but wrap as expected
	}

/**
 * Gutter calcs – applied to grid columns in our grid (direct descendants only)
 * Default: pixels (can look at changing to percentage)
 * Usage: gutterCalc() or gutterCalc(false)
 */

// Three types of gutter
// -------------------
// .g--gutter
// Uses padding and fixed gutter px values.
// Pros = Margins will be equal to your $grid-gutter-width (even at larger/smaller container sizes), if that’s what you require
// Cons = Can’t set a border directly to grid containers, as uses negative margins.  Need extra element to get the desired effect

$g-gutter-half: ($grid-gutter-width / 2) + px;

.g--gutter {
	margin-left: -$g-gutter-half;
	margin-right: -$g-gutter-half;

	& > .g-col {
		padding-left: $g-gutter-half;
		padding-right: $g-gutter-half;
	}
}

// .g--gutter--<breakpoints>
// Generates gutter settings for each defined breakpoint for better gutter control in responsive designs
// Only generated if $responsive-gutters == true

@if $responsive-gutters {
	@each $name, $value in $breakpoints {
		.g--gutter--#{$name} {
			@include media(">=#{$name}") {
				margin-left: -$g-gutter-half;
				margin-right: -$g-gutter-half;

				& > .g-col {
					padding-left: $g-gutter-half;
					padding-right: $g-gutter-half;
				}
			}
		}
	}
}

// .g--gutter--scaled
// Uses margin and percentage values.  Scales the margin as the viewport gets smaller (for RWD)
// Pro = Good for when your container is always the $layout-max-width.  Means can apply borders to grid elements without more markup
// Cons = If container isn’t same size as $layout-max-width, the gutters will also scale (so larger container width === larger gutters and vice versa)

.g--gutter--scaled {
	& > .g-col {
		margin-left: ko-gutterCalc();
		margin-right: 0;

		&:first-child {
			margin-left: 0;
		}
	}
}

.g--stack {
	& > .g-col {
		flex-basis: 100%;
		max-width: 100%;
	}
    &.g--gutter--scaled > .g-col {
        margin-left: 0;
    }
}


/**
 * .g--equalHeight – Equal Height Child Elements
 */
.g--equalHeight {
	> .g-col {
		display: flex;

		& > * {
			flex-basis: 100%;
		}
	}
}


/**
 * Alignment
 * Modifier classes to move our grid elements around
 */
.g--alignTop        { align-items: flex-start; }
.g--alignBottom     { align-items: flex-end; }
.g--alignSelfBottom { align-self: flex-end; }
.g--alignRight      { justify-content: flex-end; }
.g--alignCenter     { justify-content: center; }
.g--alignCenter--v  { align-items: center; }


/**
 * Centering
 * Centers an individual column, rather than the entire grid
 */
.g-col--centered {
	margin: 0 auto;
}

/**
 * Shrinking Content
 * Shrink a .g-col down to only the space it needs (flexbox only)
 *
 * Effectively just changes it’s values back to the default flex properties
 */
.g-col--shrink {
	flex: 0 1 auto;
}


/**
 * Add fallbacks for non-flexbox supporting browsers (for example, IE8/9)
 */
@if $use-legacy-grid {
	.no-flexbox {
		.g {
			display: block !important; // need this for old Safari, as it thinks it understands flexbox but doesn’t really
			@include ko-clearfix;
		}

		.g-col {
			float: left;
			min-height: 1px;
			clear: none;
			box-sizing: border-box;
		}

		.g--stack .g-col {
			width: 100%;
		}

		.g--equalHeight {
			> .g-col {
				display: block; // again need to overide old safari thinking it knows flexbox, when it doesn’t really
			}
		}
	}
	//end .no-flexbox
}



/**
 * Grid Span classes (for different breakpoints)
 *
 * Applied by using .g-spanx to .g-col elements, where x is the number of columns
 */

@include ko-gridSpanHelper; // Default sizes

// Responsive sizes only generated if $responsive-grid-sizes == true
@if $responsive-grid-sizes {
	//loop through our breakpoints
	@each $name, $value in $breakpoints {
		@include media('>=#{$value}') {
			@include ko-gridSpanHelper($name);
		}
	}
}

@each $name, $value in $breakpoints {
	.g--stack--#{$name} {
		@include ko-grid-stack($name);
	}
}