fluidable.less

/*!
 * Fluidable Grid System 1.3.1
 *
 * Creator: Andri Sigurðsson
 * Site: http://fluidable.com
 * Date: 31.05.2016
 */

//
//	Config
//

// Grid

@columns:       12;
@gutterWidth:   36px;

// Column size

@columnWidth: 	100%/@columns;

// Break-points

@screenTablet: 	768px;
@screenDesktop: 992px;
@screenLarge:   1200px;

//
// Mobile and up
//

[class*="col-fixed-"] {
  float: left;
  width: 100%;
}

.col-group {
	padding: 0 @gutterWidth;
	.clear();
}

.col-group .col-group {
	padding: 0;
}

.col-group [class*="col-"] {
	min-height: 1px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.col-group [class*="push-"],
.col-group [class*="pull-"] {
	position: relative;
}

// Columns

.fluidable (@index) when (@index > 0) {
	.col-mb-@{index} {
		width: @columnWidth * @index;
		float: left;
		padding-right: @gutterWidth / 2;
		padding-left: @gutterWidth / 2;
	}
	.fluidable(@index - 1);
}
.fluidable (0) {}
.fluidable (@columns);

// Offset

.offset (@index) when (@index > -1) {
	.col-mb-offset-@{index} {
		margin-left: @columnWidth * @index;
	}
	.offset(@index - 1);
}
.offset (0) {}
.offset (@columns);


// Pull

.pull (@index) when (@index > -1) {
	.col-mb-pull-@{index} {
		right: @columnWidth * @index;
	}
	.pull(@index - 1);
}
.pull (0) {}
.pull (@columns);


// Push

.push (@index) when (@index > -1) {
	.col-mb-push-@{index} {
		left: @columnWidth * @index;
	}
	.push(@index - 1);
}
.push (0) {}
.push (@columns);


//	
//	Tablet and up
//

@media (min-width: @screenTablet) {

	.container {
		max-width: @screenTablet - (@gutterWidth * 2);
		.center-block();
	}

	// Columns

	.fluidable (@index) when (@index > 0) {
		.col-@{index} {
			padding-left: @gutterWidth / 2;
			padding-right: @gutterWidth / 2;
			width: @columnWidth * @index;
			float: left;
		}
		.fluidable(@index - 1);
	}
	.fluidable (0) {}
	.fluidable (@columns);


	// Offset

	.offset (@index) when (@index > -1) {
		.col-offset-@{index} {
			margin-left: @columnWidth * @index;
		}
		.offset(@index - 1);
	}
	.offset (0) {}
	.offset (@columns);


	// Pull

	.pull (@index) when (@index > -1) {
		.col-pull-@{index} {
			right: @columnWidth * @index;
		}
		.pull(@index - 1);
	}
	.pull (0) {}
	.pull (@columns);


	// Push

	.push (@index) when (@index > -1) {
		.col-push-@{index} {
			left: @columnWidth * @index;
		}
		.push(@index - 1);
	}
	.push (0) {}
	.push (@columns);


	// Groups

	.col-group {
		margin-right: @gutterWidth / -2;
		margin-left: @gutterWidth / -2;
		padding: 0;
		.clear();
	}

}

//	
//	Desktop and up
//

@media (min-width: @screenDesktop) {

	.container {
		max-width: @screenDesktop  - (@gutterWidth * 2);
		.center-block();
	}

	// Columns

	.fluidable (@index) when (@index > 0) {
		.col-dt-@{index} {
			padding-left: @gutterWidth / 2;
			padding-right: @gutterWidth / 2;
			width: @columnWidth * @index;
			float: left;
		}
		.fluidable(@index - 1);
	}
	.fluidable (0) {}
	.fluidable (@columns);


	// Offset

	.offset (@index) when (@index > -1) {
		.col-dt-offset-@{index} {
			margin-left: @columnWidth * @index;
		}
		.offset(@index - 1);
	}
	.offset (0) {}
	.offset (@columns);


	// Pull

	.pull (@index) when (@index > -1) {
		.col-dt-pull-@{index} {
			right: @columnWidth * @index;
		}
		.pull(@index - 1);
	}
	.pull (0) {}
	.pull (@columns);


	// Push

	.push (@index) when (@index > -1) {
		.col-dt-push-@{index} {
			left: @columnWidth * @index;
		}
		.push(@index - 1);
	}
	.push (0) {}
	.push (@columns);

}


//	
//	Large desktop and up
//

@media (min-width: @screenLarge) {

	.container {
		max-width: @screenLarge  - (@gutterWidth * 2);
		.center-block();
	}

	// Columns

	.fluidable (@index) when (@index > 0) {
		.col-ld-@{index} {
			padding-left: @gutterWidth / 2;
			padding-right: @gutterWidth / 2;
			width: @columnWidth * @index;
			float: left;
		}
		.fluidable(@index - 1);
	}
	.fluidable (0) {}
	.fluidable (@columns);


	// Offset

	.offset (@index) when (@index > -1) {
		.col-ld-offset-@{index} {
			margin-left: @columnWidth * @index;
		}
		.offset(@index - 1);
	}
	.offset (0) {}
	.offset (@columns);


	// Pull

	.pull (@index) when (@index > -1) {
		.col-ld-pull-@{index} {
			right: @columnWidth * @index;
		}
		.pull(@index - 1);
	}
	.pull (0) {}
	.pull (@columns);


	// Push

	.push (@index) when (@index > -1) {
		.col-ld-push-@{index} {
			left: @columnWidth * @index;
		}
		.push(@index - 1);
	}
	.push (0) {}
	.push (@columns);

}

//
//	Fixed aspect ratio columns
//

.col-fixed-hd,
.col-fixed-landscape,
.col-fixed-square,
.col-fixed-portrait {
	position: relative;
}

.col-fixed-hd:before,
.col-fixed-landscape:before,
.col-fixed-square:before,
.col-fixed-portrait:before {
	content: "";
	display: block;
}

.col-fixed-hd .col-content, 
.col-fixed-landscape .col-content, 
.col-fixed-square .col-content, 
.col-fixed-portrait .col-content {
	position: absolute;
	top: 0; right: @gutterWidth / 2; bottom: 0; left: @gutterWidth / 2;
	padding: 0;
}

.col-fixed-hd:before {
	margin-top: 56.25%;
}

.col-fixed-landscape:before {
	margin-top: 75%;
}

.col-fixed-square:before {
	margin-top: 100%;
}

.col-fixed-portrait:before {
	margin-top: 133.33333333%;
}


//	
//	Other
//

// Positioning

.center-block {
	margin: 0 auto;
}

// Clearfix

.clear {
	&:after {
    	display: table;
    	clear: both;
    	content: " ";
	}
}