Not Pictured: Mangoes

    stellar-less

    0.3.1 • Public • Published

    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 {
    		.naughty(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.

    Keywords

    none

    Install

    npm i stellar-less

    DownloadsWeekly Downloads

    2

    Version

    0.3.1

    License

    MIT

    Unpacked Size

    4.48 kB

    Total Files

    4

    Last publish

    Collaborators

    • stelaplamenova