feat: Add form ui example

Test css grid system for form fields.

source/screens/demo/examples/ui/form.njk

@@ -0,0 +1,45 @@
+---
+title: Form
+tags: 
+  - demoExample
+  - ui
+---
+{% extends "demo/_app.njk" %}
+
+{% block title %}{{ title }}
+{% endblock %}
+
+{% block links %}
+	<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
+{% endblock %}
+
+{% block head %}
+	{{ super() }}
+{% endblock %}
+
+{% block body %}
+	<div id="head">
+		<h1>Formulare</h1>
+		<button data-action="add">Hinzufügen</button>
+	</div>
+	<div id="grid">
+		<div>a</div>
+		<div>b</div>
+	</div>
+{% endblock %}
+
+{%- block script %}
+	{{ super() }}
+	<script>
+		const add = document.querySelector('[data-action=add]');
+
+		add.addEventListener('click', (e) => {
+				const grid = document.getElementById('grid');
+				const item = document.createElement('div');
+
+				item.style.backgroundColor = '#f0f';
+				item.textContent = 'c'
+				grid.appendChild(item);
+		});
+	</script>
+{% endblock %}

source/style/modules/ui/_form_module.scss

@@ -0,0 +1,33 @@
+#form body {
+	margin: 0;
+	background-color: #808080;
+}
+
+#head {
+	// display: flex;
+}
+
+h1 {
+	margin: 0;
+}
+
+#grid {
+	display: grid;
+	gap: 8px;
+	grid-template-columns: repeat(4, 1fr);
+	grid-auto-rows: minmax(64px, auto);
+}
+
+#grid>div {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+	background-color: aquamarine;
+}
+
+#grid>div:first-child {
+	grid-column: 1 / 3;
+	background-color: violet;
+}

source/style/ui.scss

@@ -194,4 +194,5 @@ $z-indexes: (
 
 @import "modules/ui/new_module";
 @import "modules/ui/settings_module";
-@import "modules/ui/drag_module";
+@import "modules/ui/drag_module";
+@import "modules/ui/form_module";