clearless/examples/example.less

@import "../mixins/all";

// Default settings override

@sprite-image: url('/examples/sprite.png');
@using-modernizr: false;
@using-ieclasses: true;

@column-width: 60;
@gutter-width: 20;

@base-font-size: 10;

// Project settings

@mobile-width: 40em;

/* ---- setup ---- */

body {
	padding: 20px;
	margin: 0;
	background: #DDD;
	font-size: ~"@{base-font-size}px";
	font-family: sans-serif;
	min-width: 320px;
}

p, li {
	.font-size-rems(1);
}

h1 {
	.font-size-rems(1.5);
}

h2 {
	.font-size-rems(1.2);
}

.receptacle {
	max-width: 1200px;
	margin: 0 auto;
	border-bottom: 1px dashed #666;
}

.nav {
	padding: 10px 0 10px 10px;
	li {
		margin-bottom: 5px;
		list-style: none;
		padding: 0;
	}
	a {
		.inline-block();
		.icon(2, 1, 6px, 11px, 10px, 0, 4px);
	}
}

/* ---- grids ---- */

.primary,
.secondary,
.tertiary,
.quaternary {
	background: #FFF;
}
 
.section {
	margin-bottom: 2%;
}

.segment {
	margin-bottom: 2%;
	overflow: hidden;
}

/* Grids using floats */

.floated {
	.section {
		.column-wrapper();
	}
	.segment {
		.column();
	}
}
 
/* Grids using inline-block */

.inline {
	.section {
		.inline-column-wrapper();
	}
	.segment {
		.inline-column();
	}
}

.section-1 {
	.segment {
		.span(16,true);
	}
}

.section-2 {
	.segment {
		.inline-column(8);
	}
	.secondary {
		.end-column()
	}
}

.section-3 {
	.segment {
		.span(8);
	}
}

.section-4 {
	.segment {
		.span(8);
	}
}


/* media query example */

@media all and ( max-width: @mobile-width ) {
	.section-3 .segment:nth-child(2n),
	.section-4 .segment:nth-child(2n) {
		.end-column();
	}	
}

@media all and ( min-width: @mobile-width ) {
	
	.section-1 {
		.segment {
			.span(4);
		}
		.quaternary {
			.end-column();
		}
	}

	.section-2 {
		.primary {
			.span(10);
		}
		.secondary {
			.span(6);
			.end-column();
		}
	}

	.section-3 {
		.segment:nth-child(4n) {
			.end-column();
		}
		.primary {
			.span(3);
		}
		.secondary {
			.span(4);
		}
		.tertiary {
			.span(6);
		}
		.quaternary {
			.span(3);
			.end-column();
		}
	}
	
	.section-4 {
		.primary {
			.span(2);
			.post-pad(1);
		}
		.secondary {
			.span(2);
			.pre-pad(1);
			.pre-push(1);
		}
		.tertiary {
			.span(3);
			.pre-push(1);
		}
		
		.quaternary {
			.span(3);
			.pre-pad(1);
			.post-push-end(1);
		}
	
	}
	
}

/* Nested Grids */

.section-parent {
	.segment {
		.span(8);
	}
	> .secondary {
		background-color: transparent;
		padding: 0;
		.end-column();
	}
}

.section-nested {
	.segment {
		.span(2,8);
		background: #999;
	}
}

.floated {
	.section-nested .segment > .secondary,
	.section-parent .segment:nth-child(4n) {
		.end-column();
	}
}

.inline {
	.section-nested .segment > .secondary,
	.section-parent .segment:nth-child(4n) {
		.inline-end-column();
	}
}


/* Sprites & Icons */

.more {
	.inline-block();
	.right-icon(2, 1, 6px, 11px, 10px, 0, 4px);
}

.icon-nav {
	a {
		.inline-block();
		padding-top: 10px;
		padding-bottom: 10px;
		.icon(0, 0, 28px, 28px, 10px, 0, 2px);
	}
	.robots a {
		.icon-pos(0,0);
		&:hover {
			.icon-pos(1,0);
		}
	}
	.rockets a {
		.icon-pos(0,1);
		&:hover {
			.icon-pos(1,1);
		}
	}
	.runners a {
		.icon-pos(0,2);
		&:hover {
			.icon-pos(1,2);
		}
	}
	.ghosts a {
		.icon-pos(0,3);
		&:hover {
			.icon-pos(1,3);
		}
	}
}

/* Other Helpers */