gistfile1.css

/**
 * Set box-sizing
 *
 * @applied grid parent
*/
[data-grid],
[data-grid*='pad-'] > *, {
  -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/**
 *
 * Resets the important elements
 *
 * @types margins, paddings, list-styles
 * @applied grid parent, grid child, grid clear fix
*/
[data-grid],
[data-grid]:after {
	list-style: none;
	padding: 0 !important;
	margin: 0 !important;
}

/**
 *
 * Clear fix
 *
 * @source http://css-tricks.com/snippets/css/clear-fix/
*/
[data-grid]:after {
	content: "";
	display: table;
	clear: both;
}

/**
 *
 * Alignment
 *
 * Align spans and the children of cols left to right
*/
[data-grid*='span-'],
[data-grid*='cols-'] > * {
	float: left;
}

/**
 *
 * Remove side padding
 *
 * Remove padding at the sides, left and right
*/
[data-grid] > [data-grid*='span-'],
[data-grid*='cols-'] > * {
	display: block;
	padding: 0 !important;
	margin: 0 !important;

	&:first-child {
		padding-left: 0 !important;
	}

	&:last-child {
		padding-right: 0 !important;
	}
}

/**
 *
 * Repeat columns
 *
 * Repeat 24 columns
*/
@columns: 24;
.column_repeater (@index) when (@index > 0) {
	(~"[data-grid~='cols-@{index}'] > *") {
		width: ( 100% / @index );
	}
	.column_repeater (@index - 1);
}
.column_repeater (@columns);

/**
 *
 * Repeat spans
 *
 * Repeat 24 spans
*/
@spans: 24;
.span_repeater (@index) when (@index > 0) {
	(~"[data-grid~='span-@{index}']") {
		width: ( @index / @spans ) * 100%;
	}
	.span_repeater (@index - 1);
}
.span_repeater (@spans);

/**
 *
 * Repeat paddings
 *
 * Repeat paddings with 10 steps, between 30px - 60px
*/
@pad2: 60;
.pad2_repeater (@index) when (@index > 30) {
	(~"[data-grid~='pad-@{index}'] > *") {
		@width: (@index / 2);
		padding: (~"0 @{width}px !important");
	}
	.pad2_repeater (@index - 10);
}
.pad2_repeater (@pad2);

/**
 *
 * Repeat paddings
 *
 * Repeat paddings with 5 steps, between 0 - 30px
*/
@pad1: 30;
.pad1_repeater (@index) when (@index > 0) {
	(~"[data-grid~='pad-@{index}'] > *") {
		@width: (@index / 2);
		padding: (~"0 @{width}px !important");
	}
	.pad1_repeater (@index - 5);
}
.pad1_repeater (@pad1);