stylesheet.less

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}


// ==========================
// = Example 2: Column grid =
// ==========================

// ---------
// - Setup -
// ---------

@import '../../order.less';

html {
	width: @grid-width;
	padding: 0 @grid-gutter;
	font-family: sans-serif;
}

main {
	padding-top: @grid-gutter;
	// .show-columns();
	// .show-gutters(5);
}
#content > div, #sidebar, #grid > * {
	box-sizing: border-box;
	height: 120px;
	margin-bottom: @grid-gutter;
	border: 1px solid #aaa;
	background: fade(black, 12.5%);
	color: #666;
	font-size: 20px;
	line-height: 120px;
	text-align: center;
}
#sidebar {
	height: 220px;
}
#grid {
	clear: both;
	list-style: none;
	
	> * {
		height: 60px;
		font-size: 16px;
		line-height: 60px;
	}
}


// ------------------
// - Actual example -
// ------------------

@default-grid-width: 840px;
@default-grid-gutter: 24px;
@default-grid-columns: 3;

@items-grid-width: @default-grid-width;
@items-grid-gutter: @default-grid-gutter;
@items-grid-columns: 5;

.use-column-grid(default);

#content {
	float: left;
	.width(2);
	
	> .secondary {
		float: left;
		.width(1, 2);
		
		& + .secondary {
			.margin-left(@grid-gutter, 2);
		}
	}
}
#sidebar {
	float: right;
	.width(1);
}
#grid {
	.use-column-grid(items);
	
	> * {
		display: inline-block;
		.width(1);
		.margin-right(@grid-gutter);
		vertical-align: top;
		
		&:nth-child(5n) {
			.margin-right(0);
		}
	}
}