stellar

a LESS library helping you scaffold your webapp. Just @import and save yourself some time.

Arrange the container's children in a .row(@x: @value; @y: @value;); or a .column(@x: @value; @y: @value;);.

Use @left, @center, @right or @spread for x-axix positioning.

Use @top, @center, @bottom or @spread for y-axis positioning.

Give a particular child a different position than the rest by using .naughty(row; @y: @value;); or .naughty(column; @x: @value;);.

Default values: @x: @left; @y: @top;

See the samples below.

I need more README ↓

child

.parent {
.row;
}

child

.parent {
.row;
height: 120px;
}

child

.parent {
.row(@x: @center; @y: @center;);
height: 120px;
}

child

naughty

child

.parent {
.row(@x: @spread);
height: 200px;
.naughty {
.naughty(row; @y: @bottom;);
}
}

child

.parent {
.column;
}

child

.parent {
.column(@x: @right; @y: @bottom;);
height: 250px;
}

child

naughty

child

.parent {
.column(@x: @center);
.naughty {
.naughty(column; @x: @left;);
}
}

I'm a fast learner

Fiddle with the code and see the changes on the left.

Resize the browser window for smaller or larger screen effect.

HTML LESS

<header>
	<h1>Hello, I'm H1</h1>
	<nav>
		<ul>
			<li>This</li>
			<li>is</li>
			<li>a</li>
			<li>navigation</li>
			<li>bar</li>
		</ul>
	</nav>
</header>
								
<main>
	<h2>I'm H2</h2>
	<section>
		<article>
			<h3>I'm H3</h3>
			<p>paragraphs in article</p>
			<p>paragraphs in article</p>
			<p>paragraphs in article</p>
		</article>
		<article>
			<h3>I'm H3</h3>
			<p>paragraphs in article</p>
			<p>paragraphs in article</p>
			<p>paragraphs in article</p>
		</article>
		<article>
			<h3>I'm H3</h3>
			<p>paragraphs in article</p>
			<p>paragraphs in article</p>
			<p>paragraphs in article</p>
		</article>
	</section>
	<aside>
		<div>some</div>
		<div>aside</div>
		<div>elements</div>
	</aside>
</main>

<footer>
	<section>
		<h4>I'm H4</h4>
		<article>
			<div>This is an input</div>
			<div>and a button</div>
		</article>
	</section>
	<section>
		<h4>I'm H4</h4>
		<article>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</article>
		<nav>
			<ul>
				<li>list item</li>
				<li>list item</li>
				<li>list item</li>
			</ul>
		</nav>
	</section>
	<section>
		<h4>I'm the last H4</h4>
	</section>
</footer>

Check what you've learned. Try to recreate the pattern given.

Stellar functions should be all you need.

Better use landscape mode if on mobile.

get stellar

$ bower install stellar-less

in your .less file

@import "path/to/stellar/stellar";

browser support

Chrome 21+
Firefox 22+
IE 11
Edge
Opera 12.10+
Safari 6.1+

Issues

IE 11 does not position the children elements along y-axis correctly if the parent has min-height. If you need to set min-height to the parent element, use height as well.