Start ui framework with web components

src/layout/Page.component.ts

@@ -0,0 +1,35 @@
+import {ExComponent} from '../ExComponent.js'
+import {Component} from '../decorators.js'
+
+@Component('ex-page')
+export class PageComponent extends ExComponent {
+    protected static html = `
+        <style>
+            .container {
+                display: flex;
+                justify-content: center;
+                width: 100%;
+                height: 100%;
+                text-align: left;
+            }
+
+            .inner {
+                padding: 0 20px;
+                max-width: min(70%, 1000px);
+                min-width: min(70%, 1000px);
+            }
+
+            @media(max-width: 960px) {
+                .inner {
+                    width: 100%;
+                    max-width: unset;
+                }
+            }
+        </style>
+        <div class="container">
+            <div class="inner">
+                <slot></slot>
+            </div>
+        </div>
+    `
+}

src/layout/Section.component.ts

@@ -0,0 +1,17 @@
+import {ExComponent} from '../ExComponent.js'
+import {Component} from '../decorators.js'
+
+@Component('ex-section')
+export class SectionComponent extends ExComponent {
+    protected static html = `
+        <style>
+            .container {
+                min-height: 100vh;
+            }
+        </style>
+
+        <div class="container">
+            <slot></slot>
+        </div>
+    `
+}