mixin grid

mixin_grid.scss

/* begin mixin grid */
$columns: 12;
$atom: (100% / $columns);

$break_xs: 576px;
$break_sm: 720px;
$break_md: 992px;
$break_lg: 1200px;

$offset: 15px;
$offset_xs: $offset;
$offset_sm: $offset;
$offset_md: $offset;
$offset_lg: $offset;

$offset_one_side: ($offset / 2);
$offset_xs_one_side: ($offset_xs / 2);
$offset_sm_one_side: ($offset_sm / 2);
$offset_md_one_side: ($offset_md / 2);
$offset_lg_one_side: ($offset_lg / 2);

$fields: 15px;
$fields_md: 15px;

@mixin wrapper-full(){
	padding-left: $fields;
	padding-right: $fields;

	@include md-block(){
			padding-left: $fields_md;
			padding-right: $fields_md;
	}
}

@mixin wrapper(){
	max-width: 1280px;
	margin: 0 auto;
	@include wrapper-full();
}

@mixin row-offsets(){
	margin-left: ($offset_one_side * -1);
	margin-right: ($offset_one_side * -1);
}

@mixin row-flex(){
	display: flex;
	flex-wrap: wrap;
	@include row-offsets();
}

@mixin col-offsets($type){
	#{$type}-left: $offset_one_side;
	#{$type}-right: $offset_one_side;
}

@mixin col(){
	box-sizing: border-box;
	@include col-offsets(margin);
}

@mixin size($n){
	$val: 100% / $columns * $n;
	width: #{calc(#{$val} - #{$offset})};
}

@mixin size-xs($n){
	$val: 100% / $columns * $n;
	@include xs(width, #{calc(#{$val} - #{$offset_xs})});
}

@mixin size-sm($n){
	$val: 100% / $columns * $n;
	@include sm(width, #{calc(#{$val} - #{$offset_sm})});
}

@mixin size-md($n){
	$val: 100% / $columns * $n;
	@include md(width, #{calc(#{$val} - #{$offset_md})});
}

@mixin size-lg($n){
	$val: 100% / $columns * $n;
	@include lg(width, #{calc(#{$val} - #{$offset_lg})});
}

@mixin xs($name, $value){
	@media screen and (min-width: $break_xs){
			#{$name}: $value;
	}
}

@mixin xs-block(){
	@media screen and (min-width: $break_xs){
			@content;
	}
}

@mixin sm($name, $value){
	@media screen and (min-width: $break_sm){
			#{$name}: $value;
	}
}

@mixin sm-block(){
	@media screen and (min-width: $break_sm){
			@content;
	}
}

@mixin md($name, $value){
	@media screen and (min-width: $break_md){
			#{$name}: $value;
	}
}

@mixin md-block(){
	@media screen and (min-width: $break_md){
			@content;
	}
}

@mixin lg($name, $value){
	@media screen and (min-width: $break_lg){
			#{$name}: $value;
	}
}

@mixin lg-block(){
	@media screen and (min-width: $break_lg){
			@content;
	}
}

@mixin debug($background, $outline){
	height: 100vh;
	position: fixed;
	width: 100%;
	
	> div{
			height: inherit;
			@include wrapper();
			
			> div{
					height: inherit;
					@include row-flex();
					
					> div{
							@include col();
							@include size(1);
							height: inherit;
							outline: $outline;
							background: $background;
					}
			}
	}
}
/* Usage examples
.items{
    @include row-flex();
    @include md(justify-content, center);

    .item{
        @include col();
        @include size(3);
        @include size-md(5);
        @include size-xs(10);
    }
}
*/

/* end mixin grid */