LESS

main.less

@charset "UTF-8";
@import "variables.less";
@import "mixins.less";
@import "reset.less";
@import "utility.less";

mixins.less

// Sizing shortcuts

.size(@width, @height) {
	width: @width;
	height: @height;
}
.square(@size) {
	.size(@size, @size);
}
.min-height(@height){
	min-height: @height;
	height: auto !important;
	height: @height;
}


// Background

.background-img(@img, @repeat: no-repeat, @posx: left, @posy: top, @imgPathPrefix: @imgPathPrefix){
	background-image: url('@{imgPathPrefix}@{img}');
	background-repeat: @repeat;
	background-position: @posx @posy;
}

.mask-image(@img){
	-webkit-mask-image: url('@{imgPathPrefix}@{img}');
	-o-mask-image: url('@{imgPathPrefix}@{img}');
	-moz-mask-image: url('@{imgPathPrefix}@{img}');
	mask-image: url('@{imgPathPrefix}@{img}');
}

.background-clip(@clip) {
	-webkit-background-clip: @clip;
	-moz-background-clip: @clip;
	background-clip: @clip;
}

.background-size(@x,@y){
	-webkit-background-size: @x @y;
	-moz-background-size: @x @y;
	-o-background-size: @x @y;
	background-size: @x @y;
}

// Typography

.kerning(@kerning){
	@letterSpacingVal: @kerning / 1000;
	@letterSpacing: ~'@{letterSpacingVal}em';
	letter-spacing: @letterSpacing;
}

#font {
	// shorthand: style variant weight size/line-height stack;
	#base {
		.regular(@size: @baseFontSize, @line: @baseLineHeight) {
			#font > .shorthand(@baseStack,@baseWeight,@size,@line);
		}
		.bold(@size: @baseFontSize, @line: @baseLineHeight) {
			#font > .shorthand(@baseStack,@boldWeight,@size,@line);
		}
	}
	.shorthand(@stack, @weight: normal, @size: @baseFontSize, @line: @baseLineHeight, @style: normal, @variant: normal) {
		font: @style @variant @weight ~"@{size}/@{line}" ~`"@{stack}".replace((/[\[\]]/g),'')`;
	}
	.settings() {
		text-rendering: optimizeLegibility;
		-webkit-font-smoothing: antialiased;
	}
}

.font-face(@name,@file,@weight:normal,@style:normal){
	@font-face {
		font-family: '@{name}';
		src:url('@{fontPathPrefix}@{file}.eot');
		src:url('@{fontPathPrefix}@{file}.eot?#iefix') format('embedded-opentype'),
			url('@{fontPathPrefix}@{file}.woff') format('woff'),
			url('@{fontPathPrefix}@{file}.ttf') format('truetype'),
			url('@{fontPathPrefix}@{file}.svg#@{name}') format('svg');
		font-weight: @weight;
		font-style: @style;
	}
}

// Border Radius

.border-radius(@radius: 5px){
	-moz-border-radius: @radius;
	-khtml-border-radius: @radius;
	-webkit-border-radius: @radius;
	border-radius: @radius;
}

// Box Shadow

.box-shadow(...){
	@step1: ~`"@{arguments}".replace((/[\[\]]/g),'')`;
	@props: ~`"@{step1}".replace((/\'/g),'')`;
	-moz-box-shadow: @props;
	-webkit-box-shadow: @props;
	box-shadow: @props;
}

// Transitions

.transition(...){
	@step1: ~`"@{arguments}".replace((/[\[\]]/g),'')`;
	@props: ~`"@{step1}".replace((/\'/g),'')`;
	-webkit-transition: @props;
	-moz-transition: @props;
	-ms-transition: @props;
	-o-transition: @props;
	transition: @props;
}
.transition-delay(@transition-delay) {
	-webkit-transition-delay: @transition-delay;
	-moz-transition-delay: @transition-delay;
	-ms-transition: @transition-delay;
	-o-transition-delay: @transition-delay;
	transition-delay: @transition-delay;
}
.transition-duration(@transition-duration){
	transition-duration: @transition-duration;
	-moz-transition-duration: @transition-duration;
	-webkit-transition-duration: @transition-duration;
	-o-transition-duration: @transition-duration;
	-ms-transition: @transition-duration;
}

// Transformations

.rotate(@degrees) {
	-webkit-transform: rotate(@degrees);
	-moz-transform: rotate(@degrees);
	-ms-transform: rotate(@degrees);
	-o-transform: rotate(@degrees);
	transform: rotate(@degrees);
}
.scale(@ratio) {
	-webkit-transform: scale(@ratio);
	-moz-transform: scale(@ratio);
	-ms-transform: scale(@ratio);
	-o-transform: scale(@ratio);
	transform: scale(@ratio);
}
.translate(@x, @y) {
	-webkit-transform: translate(@x, @y);
	-moz-transform: translate(@x, @y);
	-ms-transform: translate(@x, @y);
	-o-transform: translate(@x, @y);
	transform: translate(@x, @y);
}
.perspective(@x) {
	-webkit-perspective: @x;
	-moz-perspective: @x;
	-ms-perspective: @x;
	-o-perspective: @x;
	perspective: @x;
}
.perspective-origin(@x,@y) {
	-webkit-perspective-origin: @x @y;
	-moz-perspective-origin: @x @y;
	-ms-perspective-origin: @x @y;
	-o-perspective-origin: @x @y;
	perspective-origin: @x @y;
}
.transform-style(@x) {
	-webkit-transform-style: @x;
	-moz-transform-style: @x;
	-ms-transform-style: @x;
	-o-transform-style: @x;
	transform-style: @x;
}
.skew(@x, @y) {
	-webkit-transform: skew(@x, @y);
	-moz-transform: skew(@x, @y);
	-ms-transform: skewX(@x) skewY(@y);
	-o-transform: skew(@x, @y);
	transform: skew(@x, @y);
}
.translate3d(@x, @y, @z) {
	-webkit-transform: translate3d(@x, @y, @z);
	-moz-transform: translate3d(@x, @y, @z);
	-ms-transform: translate3d(@x, @y, @z);
	-o-transform: translate3d(@x, @y, @z);
	transform: translate3d(@x, @y, @z);
}
.transform-origin(@x,@y){
	-webkit-transform-origin: @x @y;
	-moz-transform-origin: @x @y;
	-ms-transform-origin: @x @y;
	-o-transform-origin: @x @y;
	transform-origin: @x @y;
}
.transform(...){
	@step1: ~`"@{arguments}".replace((/[\[\]]/g),'')`;
	@transform: ~`"@{step1}".replace((/\'/g),'')`;
	-webkit-transform: @transform;
	-moz-transform: @transform;
	-ms-transform: @transform;
	-o-transform: @transform;
	transform: @transform;
}

.backface-visibility(@visibility){
	-webkit-backface-visibility: @visibility;
	-moz-backface-visibility: @visibility;
	backface-visibility: @visibility;
}

.box-sizing(@boxmodel) {
	-webkit-box-sizing: @boxmodel;
	-moz-box-sizing: @boxmodel;
	box-sizing: @boxmodel;
}

.flexbox() {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}

.flex(...) {
	@step1: ~`"@{arguments}".replace((/[\[\]]/g),'')`;
	@flex: ~`"@{step1}".replace((/\'/g),'')`;
	-webkit-flex: @flex;
	-moz-flex: @flex;
//	-ms-flex: 1 0 @flex;
	-o-flex: @flex;
	flex: @flex;
}

.flexflow(...) {
	@step1: ~`"@{arguments}".replace((/[\[\]]/g),'')`;
	@flexflow: ~`"@{step1}".replace((/\'/g),'')`;
	-webkit-flex-flow: @flexflow;
	-moz-flex-flow: @flexflow;
	-ms-flex-flow: @flexflow;
	-o-flex-flow: @flexflow;
	flex-flow: @flexflow;
}

.user-select(@select) {
	-webkit-user-select: @select;
	-khtml-user-select: @select;
	-moz-user-select: @select;
	-ms-user-select: @select;
	-o-user-select: @select;
	user-select: @select;
}

.selection(@color){
	&::selection {
		background: @color;
	}
	&::-moz-selection {
		background: @color;
	}
}

.appearance(@appearance){
	-webkit-appearance: @appearance;
	-moz-appearance: @appearance;
	-ms-appearance: @appearance;
	-o-appearance: @appearance;
	appearance: @appearance;
}

.opacity(@opacity) {
	@msopacity: @opacity * 100;
	opacity: @opacity;
	filter: ~"alpha(opacity=@{msopacity})";
}

// Placeholder
.placeholder(@color){
	&::-webkit-input-placeholder {
		color: @color;
	}
	&:-moz-placeholder {
		color: @color;
	}
	&::-moz-placeholder {
		color: @color;
	}
	&:-ms-input-placeholder {
		color: @color;
	}
	&:-o-input-placeholder {
		color: @color;
	}
}

// Search X
.remove-search() {
	&::-webkit-search-cancel-button {
		display: none;
	}
	&:-moz-search-cancel-button {
		display: none;
	}
	&::-moz-search-cancel-button {
		display: none;
	}
	&::-ms-search-cancel-button {
		display: none;
	}
	&::-o-search-cancel-button {
		display: none;
	}
}

// RGBA

#rgba {
	.bgie(@color: #000, @alpha: 1){
		@msrgba: `Math.round(@{alpha} * 255).toString(16) + '@{color}'.substr(1)`;
		background-color: transparent;
		filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=#@{msrgba},endColorstr=#@{msrgba})";
		zoom: 1;
		#rgba > .bg(@color,@alpha);
	}
	.bg(@color: #000, @alpha: 1){
		background-color: hsla(hue(@color),saturation(@color),lightness(@color),@alpha);
	}
	.color(@color: #000, @alpha: 1){
		color: hsla(hue(@color),saturation(@color),lightness(@color),@alpha);
	}
}

// Gradients

// Linear Gradient Useage
// arg1 is linear
// arg2 is direction: to top, to bottom, to right, to left, to bottom right, to bottom left, to top right, to top left
// n number of arguments may follow for stops, must include hex val for color and percentage: #000 50%
// example: .gradient(linear, to right, #fff 0%, #000 100%) or .gradient(linear, to bottom right, #fff 0%, #c00 50%, #000 100%)

// Radial Gradient Useage
// arg1 is circle or ellipse
// arg2 is direction and placement.
//      Directions: top left, top center, top right, middle left, middle center, middle right, bottom left, bottom center, bottom right
//      Placements: closest side, closest corner, farthest side, farthest corner
// n number of arguments may follow for stops, must include hex val for color and percentage: #000 50%
// .gradient(circle, top center farthest corner, #c00 0%, #000 100%) or .gradient(circle, top center farthest corner, #c00 0%, #fff 50%, #000 100%)

.gradient(...){
	@obj: ~`_gradient_obj = {totop:{generic:'bottom,',webkit:'linear, left bottom, left top,',ms:'to top,'},tobottom:{generic:'top,',webkit:'linear, left top, left bottom,',ms:'to bottom,'},toright:{generic:'left,',webkit:'linear, left top, right top,',ms:'to right,'},toleft:{generic:'right,',webkit:'linear, right top, left top,',ms:'to left,'},tobottomright:{generic:'top left,',webkit:'linear, left top, right bottom,',ms:'to bottom right,'},tobottomleft:{generic:'top right,',webkit:'linear, right top, left bottom,',ms:'to bottom left,'},totopright:{generic:'bottom left,',webkit:'linear, left bottom, right top,',ms:'to top right,'},totopleft:{generic:'bottom right,',webkit:'linear, right bottom, left top,',ms:'to top left,'}}`;
	@args: ~`_gradient_args = "@{arguments}".replace((/[\[\]]/g),'').replace((/\s\s/g),' ').replace((/,\s/g),',').split(',')`;
	@type: ~`_gradient_type = _gradient_args[0].toLowerCase().replace((/[^a-z]/g),'')`;
	@prefix_type: ~`_gradient_type == 'linear' ? 'linear' : 'radial'`;
	@params: ~`_gradient_params = _gradient_args[1]`;
	@params_arr: ~`_gradient_params_arr = _gradient_params.split(' ')`;
	@colors: ~`_gradient_colors = _gradient_args.toString().replace(_gradient_type + ',','').replace(_gradient_params + ',','')`;
	@webkit_colors: ~`_gradient_webkitcolors = ('color-stop(' + _gradient_colors.replace((/#/g),'').split(',').join('),color-stop(') + ')').replace((/([a-fA-F0-9]+)\s([0-9]+%)/g),function(){return (parseInt(arguments[2],10) / 100) + ',' + '#' + arguments[1]})`;
	@bgcolor: ~`_gradient_colors.substr(0,7)`;
	@prefix_gen: ~`_gradient_type == 'linear' ? _gradient_obj[(_gradient_params.toLowerCase().replace((/\s/g),''))].generic : (_gradient_params_arr[0] + ' ' + (_gradient_params_arr[1] == 'middle' ? 'center' : _gradient_params_arr[1]) + ',@{type} ' + _gradient_params_arr[2] + '-' + _gradient_params_arr[3] + ',')`;
	@prefix_webkit: ~`_gradient_type == 'linear' ? _gradient_obj[(_gradient_params.toLowerCase().replace((/\s/g),''))].webkit : ('@{prefix_type},' + _gradient_params_arr[0] + ' ' + (_gradient_params_arr[1] == 'middle' ? 'center' : _gradient_params_arr[1]) + ',0,' + _gradient_params_arr[0] + ' ' + (_gradient_params_arr[1] == 'middle' ? 'center' : _gradient_params_arr[1]) + ',100%,')`;
	@prefix_ms: ~`_gradient_type == 'linear' ? _gradient_obj[(_gradient_params.toLowerCase().replace((/\s/g),''))].ms : ('@{type} ' + _gradient_params_arr[2] + '-' + _gradient_params_arr[3] + ' at ' + _gradient_params_arr[0] + ' ' + (_gradient_params_arr[1] == 'middle' ? 'center' : _gradient_params_arr[1]) + ',')`;
	background-color: @bgcolor;
	background-image: ~"-ms-@{prefix_type}-gradient(@{prefix_gen}@{colors})";
	background-image: ~"-moz-@{prefix_type}-gradient(@{prefix_gen}@{colors})";
	background-image: ~"-o-@{prefix_type}-gradient(@{prefix_gen}@{colors})";
	background-image: ~"-webkit-gradient(@{prefix_webkit}@{webkit_colors})";
	background-image: ~"-webkit-@{prefix_type}-gradient(@{prefix_gen}@{colors})";
	background-image: ~"@{prefix_type}-gradient(@{prefix_ms}@{colors})";
}

// Triangles

#triangle {
	.core(@size,@background) {
		.size(0,0);
		line-height: 0;
		border: solid @size @background;
	}
	.toTop(@size,@foreground,@background: transparent){
		#triangle > .core(@size,@background);
		border-bottom-color: @foreground;
	}
	.toRight(@size,@foreground,@background: transparent){
		#triangle > .core(@size,@background);
		border-left-color: @foreground;
	}
	.toBottom(@size,@foreground,@background: transparent){
		#triangle > .core(@size,@background);
		border-top-color: @foreground;
	}
	.toLeft(@size,@foreground,@background: transparent){
		#triangle > .core(@size,@background);
		border-right-color: @foreground;
	}
	.toTopRight(@size,@foreground,@background: transparent){
		#triangle > .core((@size / 2),@background);
		border-top-color: @foreground;
		border-right-color: @foreground;
	}
	.toTopLeft(@size,@foreground,@background: transparent){
		#triangle > .core((@size / 2),@background);
		border-top-color: @foreground;
		border-left-color: @foreground;
	}
	.toBottomRight(@size,@foreground,@background: transparent){
		#triangle > .core((@size / 2),@background);
		border-bottom-color: @foreground;
		border-right-color: @foreground;
	}
	.toBottomLeft(@size,@foreground,@background: transparent){
		#triangle > .core((@size / 2),@background);
		border-bottom-color: @foreground;
		border-left-color: @foreground;
	}
}

reset.less

* {
	padding: 0;
	margin: 0;
	outline: none;
}
img,
fieldset {
	border: none;
}
p,
ul,
ol {
	margin-bottom: 1em;
}
li {
	margin-left: 35px;
}
sup,
sub {
	height: 0;
	line-height: 1;
	vertical-align: baseline;
	position: relative;
}
sup {
	bottom: 1ex;
}
sub {
	top: .5ex;
}
abbr {
	border: none;
}

utility.less

ol.unstyled,
ul.unstyled {
	margin: 0;
	li {
		list-style-type: none;
		margin: 0;
	}
}
.preload {
	position: absolute;
	left: -9999px;
	top: -9999px;
	visibility: hidden;
}
.clear {
	width: 0;
	height: 0;
	line-height: 0;
	font-size: 0;
	display: block;
	visibility: hidden;
	overflow: hidden;
	clear: both;
}
.clearfix {
	*zoom: 1;
	&:before,
	&:after {
		display: table;
		content: "";
		line-height: 0;
	}
	&:after {
		clear: both;
	}
}
.none {
	display: none;
}

variables.less

// Paths
@imgPathPrefix:		'../img/';
@fontPathPrefix:	'../fonts/';

// Typography

@baseStack:			Arial, 'Helvetica Neue', Helvetica, sans-serif;
@baseWeight:		normal;
@boldWeight:		bold;
@baseFontSize:		18px;
@baseLineHeight:	26px;