stellar created

README.md

@@ -0,0 +1,95 @@
+## Stellar is a LESS library for easy and fast webapp scaffolding.
+
+**It is good at:**
+
+* vertical align;
+* and..centering of everything;
+* 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-axix 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 ``.odd(row; @y: value;);`` when the children are arranged in a ``.row;``.
+(values ``@top``, ``@center``, ``@bottom``).
+
+Use ``.odd(column; @x: value;);`` when the children are arranged in a ``.column;``.
+(values: ``@left``, ``@center``, ``@right``).
+
+
+**Default values:**
+
+		.odd(row; @y: @top;);
+		.odd(column; @x: @left;);
+
+
+
+## Sample
+
+
+**HTML code**
+
+	<div class="container-1">
+		<div class="child"></div>
+		<div class="child"></div>
+		<div class="child naughty"></div>
+		<div class="child"></div>
+	</div>
+
+
+**LESS code**
+
+	.container-1 {
+		.row(@x: @center; @y: @top);
+		height: 100vh;
+		width: 960px;
+		.child {
+			height: 100px;
+			margin: 20px;
+			width: 100px;
+		}	
+		.naughty {
+			.odd(row; @y: @center;);
+		}
+	}
+
+
+For more complex samples in an interactive playground, please visit [http://stellar.stelavit.com](http://www.stellar.stelavit.com/).
+
+
+## Install stuff

stellar.less

@@ -0,0 +1,91 @@
+// stellar
+
+
+/* parent element */
+
+
+// 	applies to all immediate children
+//
+// 	position the children elements in a .row; or a .column;
+//
+// 	use @left, @center(or @centre), @right or @spread for x-axis 
+// 	positioning
+//
+// 	use @top, @center(or @centre), @bottom or @spread for y-axis 
+// 	positioning
+//	
+// 	when using default values, leave blank the corresponding
+// 	axis and value
+//
+// 	defaluts: 	.row(@x: @left; @y: @top;); 
+//				.column(@x: @left; @y: @top;)
+
+
+.row(@x: @left; @y: @top;) {
+	-webkit-align-items: @y;
+	-ms-align-items: @y;
+	align-items: @y;
+	-webkit-display: flex;
+	-moz-display: flex;
+	-ms-display: flex;
+	display: flex;
+	-webkit-flex-dierction: row;
+	-ms-flex-direction: row;
+	flex-direction: row;
+	-webkit-justify-content: @x;
+	-ms-justify-content: @x;
+	justify-content: @x;
+}
+
+.column(@x: @left; @y: @top;) {
+	-webkit-align-items: @x;
+	-ms-align-items: @x;
+	align-items: @x;
+	-webkit-display: flex;
+	-moz-display: flex;
+	-ms-display: flex;
+	display: flex;
+	-webkit-flex-direction: column;
+	-ms-flex-direction: column;
+	flex-direction: column;
+	-webkit-justify-content: @y;
+	-ms-justify-content: @y;
+	justify-content: @y;
+}
+
+
+/* child element */
+
+//	use to give a particular child a different positioning than its 	
+//	siblings.
+//
+//	applies to a child element which has been positioned with .row; or
+//	.column; function before.
+//
+// 	use .odd(row; @y: value;); when .row; is used on the parent element and .odd(column; @x:
+//	value;); when .column; is used on the parent element.
+//
+// 	a row-arranged child can get a different @y position and a column-arranged a different @x
+//	position.
+//
+// 	values @x and @y can get are the same as for parent elements.
+
+
+.odd(row; @y: @top;) {
+	align-self: @y;
+}
+
+.odd(column; @x: @left;) {
+	align-self: @x;
+}
+
+/* var */
+
+@center: center;
+@centre: center;
+@top: flex-start;
+@bottom: flex-end;
+@spread: space-between;
+@left: flex-start;
+@middle: center;
+@right: flex-end;