stellar

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

I'm here for the samples

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

1

child
child
child

.parent {
.row;
}

child
child
child

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

child
child
child

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

child
naughty
child

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

child
child
child

.parent {
.column;
}

child
child
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

2

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

Resize the browser window for smaller or larger screen effect.

3

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.

.container {
.row(@x: @value; @y: @value;); or
.column(@x: @value; @y: @value;);
}

.square {
.row(@x: @value; @y: @value;); or
.column(@x: @value; @y: @value;);
}

.container {
._____(@x: @center; @y: @center;);
}

.rect-1 {
._____(@y: @top;);
}

.rect-2 {
.column(@y: @value;);
}

.rect-3 {
._____(@y: @value;);
}

// There is more than one way to create this pattern.

.container {
._____(@x: @spread; @y: @center);
}

.square-1 {
.column; or .row;
}

.square-2 {
.naughty(._____; @y: @value;);
}

.square-3 {
.naughty(._____; @y: @value;);
.row(@x: @right; @y: @center;);
}

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.