Cacher is the code snippet organizer for pro developers

// Works out the width of elements based
// on total number of columns and width
// number of columns being displayed.
// Values for @grid would be 12, 16 or 24
.grid-inline-block(@grid: 12, @margin: 0, @width: 100%) {
	@actions: column, prefix, suffix, pull, push;

	.grid-action(block){
		display: inline-block;
    vertical-align: top;
	}
  .grid-action(custom){
	.grid-action(block);
    margin-left: @margin;
		margin-right: @margin;
	}

	.grid-action(column, @cols:''){
		.grid-action(custom);
		width: (@width/@grid * @cols) - (@margin * 2);
	}

  .grid-action(row, @top:0, @bottom:0){
    .grid-action(block);
    margin-top: @margin - @top;
		margin-bottom: @margin - @bottom;
	}

	// Allows for padding before element
	.grid-action(prefix, @cols: ''){
		padding-left: (@width/@grid * @cols);
	}
	// Allows for padding after element
	.grid-action(suffix, @cols: ''){
		padding-right: (@width/@grid * @cols);
	}
	.grid-action(push, @cols: ''){
		position: relative;
		left: (@width/@grid * @cols);
	}
	.grid-action(pull, @cols: ''){
		position: relative;
		left: (@width/@grid * @cols) * -1;
	}
	// Removes left margin
	// Removes left margin
	.grid-action(alpha){
		margin-left: 0;
	}
	// Removes right margin
	.grid-action(omega){
		margin-right: 0;
	}

	.grid-generate(@actionClasses: @actions){
		.-(@i: length(@actions)) when (@i > 0) {
			@name: extract(@actions, @i);
			@actionClass: extract(@actionClasses, @i);
			.generate-columns(@n, @x: 1) when (@x =< @n) {
				.@{actionClass}@{x} {
					.grid-action(@name, @x);
				}
				.generate-columns(@n, (@x + 1));
			}
			.generate-columns(@cols);
			.-((@i - 1));
		} .-;
	}
}

@import 'mixins/module-inline-block.less';
.module-inline-block(@module, @grid-pad);
.module(){
	.module-action(custom);
}
.module(@modules){
	.module-action(column, @modules);
}
.module(@modules-x, @modules-y){
	.module-action(column, @modules-x);
    .module-action(row, @modules-y);
}
.module-row(){
	.module-action(row);
}
.module-row(@modules){
    .module-action(row, @modules);
}
.module-prefix(@modules){
	.module-action(prefix, @modules);
}
.module-suffix(@modules){
	.module-action(suffix, @modules);
}
.module-pull(@modules){
	.module-action(pull, @modules);
}
.module-push(@modules){
	.module-action(push, @modules);
}
.module-height(@modules){
	.module-action(height, @modules);
}

@import 'mixins/grid-inline-block.less';
.grid-inline-block(@cols, @grid-pad, @width);
.block(){
	.grid-action(block);
}
.column(){
	.grid-action(custom);
}
.column(@cols){
	.grid-action(column, @cols);
}
.row(){
	.grid-action(row);
}
.row-bordered(@top, @bottom){
	.grid-action(row, @top, @bottom);
}
.column-prefix(@cols){
	.grid-action(prefix, @cols);
}
.column-suffix(@cols){
	.grid-action(suffix, @cols);
}
.column-pull(@cols){
	.grid-action(pull, @cols);
}
.column-push(@cols){
	.grid-action(push, @cols);
}

@module: 20px;
@cols: 12;
@column: @module * 4;
@width: @column * @cols;
@grid-pad: @module / 2;
@grid-cell: @column - (@grid-pad * 2);

// Works out the width of elements based
// on total number of columns and width
// number of columns being displayed.
// Values for @module-width would be 12, 16 or 24
.module-inline-block(@module-width: '16px', @margin: 0) {
	@actions: column, prefix, suffix, pull, push, alpha, omega;

	.module-action(block){
		display: inline-block;
        vertical-align: top;
	}
    .module-action(custom){
		.module-action(block);
		margin: 0 @margin;
	}

	.module-action(column, @modules:''){
		.module-action(custom);
		width: (@module-width * @modules) - (@margin * 2);
	}
    .module-action(height, @modules:''){
		height: (@module-width * @modules);
	}

    .module-action(row, @modules:''){
        .module-action(block);
		height: (@module-width * @modules) - (@margin * 2);
		margin-top: @margin;
		margin-bottom: @margin;
	}

	// Allows for padding before element
	.module-action(prefix, @modules: ''){
		padding-left: (@module-width * @modules);
	}
	// Allows for padding after element
	.module-action(suffix, @modules: ''){
		padding-right: (@module-width * @modules);
	}
	.module-action(push, @modules: ''){
		position: relative;
		left: (@module-width * @modules);
	}
	.module-action(pull, @modules: ''){
		position: relative;
		left: (@module-width * @modules) * -1;
	}
	// Removes left margin
	.module-action(alpha){
		margin-left: 0;
	}
	// Removes right margin
	.module-action(omega){
		margin-right: 0;
	}

	.module-generate(@actionClasses: @actions){
		.-(@i: length(@actions)) when (@i > 0) {
			@name: extract(@actions, @i);
			@actionClass: extract(@actionClasses, @i);
			.generate-modules(@n, @x: 1) when (@x =< @n) {
				.@{actionClass}@{x} {
					.module-action(@name, @x);
				}
				.generate-modules(@n, (@x + 1));
			}
			.generate-modules(@modules);
			.-((@i - 1));
		} .-;
	}
}

@import 'variables.less';
.grid(){
    width: (@column * (@cols / 4) + 1);
    @media (min-width: (@column * (@cols / 3))) {
        width: (@column * (@cols / 3) + 1);
    }
    @media (min-width: (@column * (@cols / 2))) {
        width: (@column * (@cols / 2) + 1);
    }
    @media (min-width: (@column * @cols)) {
        width: (@column * @cols + 1);
    }
}