sprime01 / stellar Goto Github PK

stellar is a LESS library for easy and fast webapp scaffolding

It is good at:

• vertical align;
• and..centering things;
• arranging in rows (for wide screens) and columns (for small screens); and of course
• responsive design with just a few lines of code.

And easy because:

there is a parent (element) and it has children (elements)..and the parent says how his children are arranged in terms of x-axis and y-axis.

How to use:

• First, let's see what the parent can do to children.

Use .row(); or .column(); on a parent element to arrange its children in a row or a column.

Inside the brackets you can use @x: and @y: to specify how the children are positioned on the corresponding axis.

Use @left;, @center;, @right; or @spread; for x-axis positioning. Use @top;, @center;, @bottom; or @spread; for y-axis positioning.

Default values:

	.row(@x: @left; @y: @top;);
	.column(@x: @left; @y: @top);

If using a default value, the property and its corresponding value can be skipped.

Sample:

Тhis: .row(@x: center; @y: @top); is the same like .row(@x: center;);.

• And now, what children can do despite their parent's say.

A child can get a different positioning than the rest of the children.

Use .naughty(row; @y: value;); when the children are arranged in a .row;. (values: @top, @center, @bottom).

Use .naughty(column; @x: value;); when the children are arranged in a .column;. (values: @left, @center, @right).

Default values:

	.naughty(row; @y: @top;);
	.naughty(column; @x: @left;);

Sample

HTML code

<div class="container">
	<div class="child"></div>
	<div class="child"></div>
	<div class="child naughty"></div>
	<div class="child"></div>
</div>

LESS code

.container {
	.row(@x: @center; @y: @top);
	height: 100vh;
	width: 960px;
	.child {
		height: 100px;
		margin: 20px;
		width: 100px;
	}	
	.naughty {
		.odd(row; @y: @center;);
	}
}

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.

Install

$ bower install stellar-less

in your .less file:

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

More samples

For more complex samples in an interactive playground, please visit http://stellar.stelavit.com.