First commit

application/demo/examples/grids.js

@@ -0,0 +1,140 @@
+
+import input 	from "/elements/input.js"
+
+import page 	from "/elements/page.js"
+
+
+class label{
+
+	constructor( text ) {
+
+		this.text	= text;
+
+	}
+
+	background		= "#0000002e"
+
+	borderRadius	= 6;
+
+	margin			= 10;
+
+	padding			= 26;
+
+}
+
+class a extends input{
+
+	boxAlignItems		= "center"
+
+	boxJustifyContent	= "center";
+
+	boxColor			= "black"
+
+}
+
+
+class b extends input{
+
+	//background			= "blue";
+
+	boxAlignItems		= "center"
+
+	boxJustifyContent	= "center";
+
+	boxColor			= "black"
+
+}
+
+class c extends input{
+
+	//background			= "yellow";
+
+	boxAlignItems		= "center"
+
+	boxJustifyContent	= "center";
+
+	boxColor			= "black"
+
+
+}
+
+class d extends input{
+
+	//boxBackground		= "grey";
+
+	boxAlignItems		= "center"
+
+	boxJustifyContent	= "center";
+
+	boxColor			= "black"
+
+
+}
+
+class gridA{
+
+	display				= "grid";
+	
+	gridTemplate			=	`
+
+							"label          label"
+						    "a             	a"
+						    "b              d"
+						    "c          	d" 
+						`;
+
+	height			= 400;
+
+	width			= "100%"
+
+	label		= new label("This is the first Grid, Press tab to navigate trough the inputs.");
+
+	a			= new a();
+
+	b			= new b();
+
+	c			= new c();
+
+	d			= new d();
+
+}
+
+
+class gridB{
+
+	display				= "grid";
+	
+	gridTemplate			=	`
+
+							"label          label"
+						    "d             	d"
+						    "a              empty"
+						    "b          	b" 
+						`;
+
+	height			= 400;
+
+	width			= "100%"
+
+	label		= new label("This is the second Grid, Press tab to navigate trough the inputs.");
+
+	a			= new a();
+
+	b			= new b();
+
+	c			= new c();
+
+	d			= new d();
+
+}
+
+export default class gridExample extends page{
+
+	flexDirection	= "column"
+
+
+	gridA	= new gridA();
+
+	gridB	= new gridB();
+
+}