Antler @ Cartalyst Labs

Layouts

Antler uses layouts as opposed to a grid & column approach. Through the power of fractions the .layout(numerator, denominator) method allows you to divide your elements according to its container. That means expressive class names, cleaner markup, and total responsive control.

Example HTML LESS

General

.layout(1,1)

.layout(1,2)

.layout(1,3)

.layout(1,4)

Push

.layout(3, 4, push, 1);

.layout(2, 4, push, 2);

.layout(1, 4, push, 3);

Center

.layout(1, 4, center);

.layout(2, 4, center);

.layout(3, 4, center);


<div class="example--layout">
	<div class="full">
		<div>.layout(1,1)</div>
	</div>

	<div class="halfs">
		<div>.layout(1,2)</div>
		<div>.layout(1,2)</div>
	</div>

	<div class="thirds">
		<div>.layout(1,3)</div>
		<div>.layout(1,3)</div>
		<div>.layout(1,3)</div>
	</div>

	<div class="fourths">
		<div>.layout(1,4)</div>
		<div>.layout(1,4)</div>
		<div>.layout(1,4)</div>
		<div>.layout(1,4)</div>
	</div>
</div>


.example--layout {

	.clearfix();

	div {
		padding:8px;
		margin:4px 0;
		color:@white;
		text-align:center;
		border-right:1px solid @white;

		&:last-child {
			border-right:none;
		}
	}

	.full {
		.clearfix();

		div {
			background: @palette3;
			.layout(1,1);
		}
	}

	.halfs {
		.clearfix();
		div {
			background: @palette3;
			.layout(1, 2);
		}
	}

	.thirds {
		.clearfix();
		div {
			background: @palette3;
			.layout(1, 3);
		}
	}

	.fourths {
		.clearfix();
		div {
			background: @palette3;
			.layout(1, 4);
		}
	}
}