From b6d29df73e2d9a35f3f60a34dd03f0eeed1f8602 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn?= <me@tentakelfabrik.de>
Date: Sun, 18 Jul 2021 18:23:57 +0200
Subject: [PATCH] adding

---
 public/components.html |   2 +-
 public/helpers.html    | 453 ++---------------------------------------
 public/layout.html     | 145 ++++++++-----
 3 files changed, 115 insertions(+), 485 deletions(-)

diff --git a/public/components.html b/public/components.html
index 1c7a663..594b3de 100644
--- a/public/components.html
+++ b/public/components.html
@@ -59,7 +59,7 @@
                     <div class="panel__body">
                         <div class="content m-last-child-0">
                             <p>
-                                Plain UI is currently under development, a few Styles, Concepts and Names could be changing until Release!
+                                Plain UI is currently under development, Styles, Names and Documentation may change until Release!
                             </p>
                         </div>
                     </div>
diff --git a/public/helpers.html b/public/helpers.html
index 4090837..29a2291 100644
--- a/public/helpers.html
+++ b/public/helpers.html
@@ -47,454 +47,45 @@
 
     <div class="container">
         <div class="grid">
-            <div class="col-6">
-                <div class="content">
-                    <p>
-                        Some Text
-                    <p>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="container">
-        <div class="grid">
-            <div class="col-12">
-                <h2 class="m-bottom-2">Components</h2>
-                <h3>Buttons</h3>
-                <button class="button">
-                    Default
-                </button>
-                <button class="button">
-                    Default
-                    <svg class="icon fill-success" aria-hidden="true">
-                        <use xlink:href="symbol-defs.svg#icon-check"></use>
-                    </svg>
-                </button>
-                <button class="button button--danger">
-                    Danger
-                </button>
-                <button class="button button--selected">
-                    Hover
-                </button>
-                <button class="button button--outline">
-                    Outline
-                </button>
-                <button class="button button--danger button--outline">
-                    Danger Outline
-                </button>
-            </div>
-            <div class="col-12">
-                <button class="button" disabled>
-                    Disabled
-                </button>
-            </div>
             <div class="col-12">
-                <button class="button button--small">
-                    Small
-                </button>
-            </div>
-        </div>
-
-        <div class="grid">
-            <div class="col-12">
-                <div class="bar">
-                    <div class="bar__start">
-                        <button class="button button--transparent">
-                            <svg class="icon fill-white marginless" aria-hidden="true">
-                                <use xlink:href="symbol-defs.svg#icon-close"></use>
-                            </svg>
-                        </button>
-                    </div>
-                    <div class="bar__main">
-                        Bar
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="grid">
-            <div class="col-12">
-                <div class="tabs">
-                    <a class="tabs__item tabs__item--selected">
-                        Tab A
-                    </a>
-                    <a class="tabs__item">
-                        Tab B
-                    </a>
-                    <a class="tabs__item">
-                        Tab C
-                    </a>
-                </div>
-            </div>
-        </div>
-
-        <div class="grid">
-            <div class="col-12">
-                <h2>Icon</h2>
-                <svg class="icon" aria-hidden="true">
-                    <use xlink:href="symbol-defs.svg#icon-check"></use>
-                </svg>
-                <svg class="icon icon--danger" aria-hidden="true">
-                    <use xlink:href="symbol-defs.svg#icon-camera"></use>
-                </svg>
-                <svg class="icon icon--success" aria-hidden="true">
-                    <use xlink:href="symbol-defs.svg#icon-clock"></use>
-                </svg>
-            </div>
-        </div>
-
-        <div class="grid">
-            <div class="col-12">
-                <h2>Content</h2>
-                <div class="content">
-                    <p>
-                    </p>
-                    <ul>
-                        <li></li>
-                        <li></li>
-                        <li></li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-
-        <div class="grid">
-            <div class="col-12">
-                <h2>Badge</h2>
-                <span class="badge">
-                    Category
-                </span>
-                <span class="badge badge--round">
-                    99+
-                </span>
-            </div>
-        </div>
-
-        <div class="grid">
-            <div class="col-12">
-                <h2>Loading</h2>
-                <div>
-                    <div class="loading">
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="grid">
-            <div class="col-12">
-
-                <h2>Panel</h2>
+                <h1 class="highlight m-bottom-5">
+                    Components
+                </h1>
 
-                <div class="panel">
-                    <div class="bar">
-                        <div class="bar__start">
-                            <button type="button" class="button button--transparent">
-                                <svg class="icon fill-white" aria-hidden="true">
-                                    <use xlink:href="symbol-defs.svg#icon-expand"></use>
-                                </svg>
-                            </button>
-                        </div>
-                        <div class="bar__main">Test</div>
-                        <div class="bar__end">
-                            <button type="button" class="button button--transparent">
-                                <svg class="icon fill-white" aria-hidden="true">
-                                    <use xlink:href="symbol-defs.svg#icon-edit"></use>
-                                </svg>
-                            </button>
-                            <button type="button" class="button button--transparent">
-                                <svg class="icon fill-white" aria-hidden="true">
-                                    <use xlink:href="symbol-defs.svg#icon-close"></use>
-                                </svg>
-                            </button>
-                        </div>
-                    </div>
+                <div class="panel panel--border-highlight border-color-danger m-bottom-4">
                     <div class="panel__body">
-                        <div class="content">
+                        <div class="content m-last-child-0">
                             <p>
-                                Hallo
+                                Plain UI is currently under development, Styles, Names and Documentation may change until Release!
                             </p>
                         </div>
                     </div>
                 </div>
 
-            </div>
-        </div>
-
-        <div class="grid">
-            <div class="col-12">
-                <h2>Modal</h2>
-                <button class="button" onclick="openModal()">
-                    Click me!
-                </button>
-                <script type="text/javascript">
-                    function openModal() {
-                        document.querySelector('.modal').classList.add('modal--open')
-                    }
-
-                    function closeModal() {
-                        document.querySelector('.modal').classList.remove('modal--open')
-                    }
-                </script>
-                <div class="modal">
-                    <div class="modal__inner">
-                        <div class="modal__title t-center">
-                            <svg class="icon fill-white" aria-hidden="true">
-                                <use xlink:href="symbol-defs.svg#icon-close"></use>
-                            </svg>
-                            Delete
-                        </div>
-                        <div class="modal__body">
-                            Do you really wan't to delete all files?
-                        </div>
-                        <div class="modal__footer">
-                            <button class="button button--outline button--danger" onclick="closeModal()">
-                                Confirm
-                            </button>
-                            <button class="button button--outline float-right" onclick="closeModal()">
-                                Reject
-                            </button>
+                <div class="panel panel--border-highlight border-color-danger m-bottom-4">
+                    <div class="panel__body">
+                        <div class="content m-last-child-0">
+                            <p>
+                                @TODO Documentation
+                            </p>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
-
-        <div class="grid">
-            <div class="col-12">
-                <h2>Field</h2>
-
-                <form>
-                    <div class="field-group">
-                        <label class="field-label">
-                            Name
-                            <input class="field-text" />
-                        </label>
-                    </div>
-
-                    <div class="field-group field-group--valid">
-                        <label class="field-label">
-                            <svg class="icon" aria-hidden="true">
-                                <use class="test" xlink:href="symbol-defs.svg#icon-check"></use>
-                            </svg>
-                            Surname
-                            <input class="field-text" />
-                        </label>
-                    </div>
-
-                    <div class="field-group field-group--error">
-                        <label class="field-label">
-                            <svg class="icon" aria-hidden="true">
-                                <use class="test" xlink:href="symbol-defs.svg#icon-warning"></use>
-                            </svg>
-                            E-Mail
-                            <input class="field-text" />
-                        </label>
-                        <span class="field-error">
-                            String is not valid
-                        </span>
-                    </div>
-
-                    <div class="field-group">
-                        <label class="field-label">
-                            Towns
-                            <select class="field-choice">
-                                <option></option>
-                                <option value="lonytown">Lonytown</option>
-                            </select>
-                        </label>
-                    </div>
-
-                    <div class="field-group">
-                        <label class="field-label">
-                            <input class="field-choice" type="checkbox" value="true" />
-                            <svg class="icon field-choice__unchecked" aria-hidden="true">
-                                <use xlink:href="symbol-defs.svg#icon-circle"></use>
-                            </svg>
-                            <svg class="icon field-choice__checked" aria-hidden="true">
-                                <use xlink:href="symbol-defs.svg#icon-circle-check"></use>
-                            </svg>
-                            Do it!
-                        </label>
-                    </div>
-
-                    <div class="field-group">
-                        <label class="field-label">
-                            <input class="field-choice" type="radio" name="radio" value="true" />
-                            <svg class="icon field-choice__unchecked" aria-hidden="true">
-                                <use xlink:href="symbol-defs.svg#icon-circle"></use>
-                            </svg>
-                            <svg class="icon field-choice__checked" aria-hidden="true">
-                                <use xlink:href="symbol-defs.svg#icon-circle-check"></use>
-                            </svg>
-                            A
-                        </label>
-                        <label class="field-label">
-                            <input class="field-choice" type="radio" name="radio" value="true" />
-                            <svg class="icon field-choice__unchecked" aria-hidden="true">
-                                <use xlink:href="symbol-defs.svg#icon-circle"></use>
-                            </svg>
-                            <svg class="icon field-choice__checked" aria-hidden="true">
-                                <use xlink:href="symbol-defs.svg#icon-circle-check"></use>
-                            </svg>
-                            B
-                        </label>
-                    </div>
-
-                </form>
-
-            </div>
-        </div>
-
-        <div class="grid">
-            <div class="col-12">
-                <h2>Table</h2>
-
-                <table class="table table--striped">
-                    <thead>
-                        <tr>
-                            <th>A</th>
-                            <th>B</th>
-                            <th>C</th>
-                            <th>D</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>1</td>
-                            <td>2</td>
-                            <td>3</td>
-                            <td>4</td>
-                        </tr>
-                        <tr>
-                            <td>1</td>
-                            <td>2</td>
-                            <td>3</td>
-                            <td>4</td>
-                        </tr>
-                        <tr>
-                            <td>1</td>
-                            <td>2</td>
-                            <td>3</td>
-                            <td>4</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    </div>
-
-    <div class="container">
-        <div class="grid">
-            <div class="col-12">
-                <h2 class="">Hero</h2>
-            </div>
-        </div>
-    </div>
-
-    <div class="hero">
-        <img style="max-height: 400px;" src="/image.jpg" />
-    </div>
-
-    <div class="container">
-        <div class="grid">
-            <div class="col-12">
-                <h2 class="">Media</h2>
-            </div>
-            <div class="col-12">
-                <figure class="figure">
-                    <img class="media" src="/image.jpg" />
-                    <figcaption class="figure__caption">
-                        food truck yr franzen pabst
-                    </figcaption>
-                </figure>
-            </div>
-        </div>
-    </div>
-
-    <div class="container">
-        <div class="grid">
-            <div class="col-12">
-                <h2>Layout</h2>
-            </div>
-            <div class="col-12">
-                <h2>Slider</h3>
-            </div>
-        </div>
     </div>
 
-    <div class="slider">
-        <div class="slider__inner">
-            <div class="slider__item w-col-12">
-                <figure class="figure w-col-12">
-                    <img class="media" src="/image.jpg" />
-                    <figcaption class="figure__caption">
-                        food truck yr franzen pabst
-                    </figcaption>
-                </figure>
-            </div>
-            <div class="slider__item w-col-12">
-                <figure class="figure w-col-12">
-                    <img class="media" src="/image.jpg" />
-                    <figcaption class="figure__caption">
-                        food truck yr franzen pabst
-                    </figcaption>
-                </figure>
-            </div>
-            <div class="slider__item w-col-12">
-                <figure class="figure w-col-12">
-                    <img class="media" src="/image.jpg" />
-                    <figcaption class="figure__caption">
-                        food truck yr franzen pabst
-                    </figcaption>
-                </figure>
-            </div>
-            <div class="slider__item w-col-12">
-                <figure class="figure w-col-12">
-                    <img class="media" src="/image.jpg" />
-                    <figcaption class="figure__caption">
-                        food truck yr franzen pabst
-                    </figcaption>
-                </figure>
-            </div>
-            <div class="slider__item w-col-12">
-                <figure class="figure w-col-12">
-                    <img class="media" src="/image.jpg" />
-                    <figcaption class="figure__caption">
-                        food truck yr franzen pabst
-                    </figcaption>
-                </figure>
-            </div>
-        </div>
-    </div>
-
-    <div class="container">
-        <div class="grid">
-            <div class="col-12">
-                <h2>Masonry</h3>
-                <div class="masonry">
-                    <figure class="masonry__item marginless">
-                        <img class="media object-fit-cover h-100" src="/image.jpg" />
-                    </figure>
-                    <figure class="masonry__item marginless">
-                        <img class="media object-fit-cover h-100" src="/image.jpg" />
-                    </figure>
-                    <figure class="masonry__item marginless">
-                        <img class="media object-fit-cover h-100" src="/image.jpg" />
-                    </figure>
-                    <figure class="masonry__item marginless">
-                        <img class="media object-fit-cover h-100" src="/image.jpg" />
-                    </figure>
-                    <figure class="masonry__item marginless">
-                        <img class="media object-fit-cover h-100" src="/image.jpg" />
-                    </figure>
-                </div>
+    <footer class="site-footer m-top-5">
+        <div class="bar">
+            <div class="bar__main">
+                <a class="color-text-contrast m-right-4" href="/imprint.html">
+                    Imprint
+                </a>
+                <a class="color-text-contrast" href="/private-policy.html">
+                    Privacy Policy
+                </a>
             </div>
         </div>
-    </div>
-
+    </footer>
 </body>
-
 </html
\ No newline at end of file
diff --git a/public/layout.html b/public/layout.html
index d369702..d3466d6 100644
--- a/public/layout.html
+++ b/public/layout.html
@@ -49,13 +49,24 @@
     <div class="container">
         <div class="grid">
             <div class="col-12">
-                <h2 class="highlight">
+                <h1 class="highlight">
                     Layout
-                </h2>
+                </h1>
+                <div class="content">
+                    <div class="panel panel--border-highlight border-color-danger m-bottom-4">
+                        <div class="panel__body">
+                            <div class="content m-last-child-0">
+                                <p>
+                                    Plain UI is currently under development, Styles, Names and Documentation may change until Release!
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
 
-                <h3>
+                <h2 class="m-top-5">
                     Grid
-                </h3>
+                </h2>
 
                 <div class="panel panel--border-highlight border-color-info m-bottom-4">
                     <div class="panel__body">
@@ -68,7 +79,7 @@
                     </div>
                 </div>
 
-                <h3>
+                <h2 class="m-top-5">
                     Masonry
                 </h3>
 
@@ -102,60 +113,88 @@
         </div>
     </div>
 
-
-        <div class="container">
-            <div class="grid">
-                <div class="col-12">
-                    <h2>Slider</h3>
+    <div class="container">
+        <div class="grid">
+            <div class="col-12">
+                <h2>Slider</h2>
+                <div class="content">
+<code>&#x3C;div class=&#x22;slider&#x22;&#x3E;
+    &#x3C;div class=&#x22;slider__inner&#x22;&#x3E;
+        &#x3C;div class=&#x22;slider__item w-col-12&#x22;&#x3E;
+            &#x3C;figure class=&#x22;figure w-col-12&#x22;&#x3E;
+                &#x3C;img class=&#x22;media&#x22; src=&#x22;/image.jpg&#x22; /&#x3E;
+                &#x3C;figcaption class=&#x22;figure__caption&#x22;&#x3E;
+                    food truck yr franzen pabst
+                &#x3C;/figcaption&#x3E;
+            &#x3C;/figure&#x3E;
+         &#x3C;/div&#x3E;
+         &#x3C;div class=&#x22;slider__item w-col-12&#x22;&#x3E;
+             &#x3C;figure class=&#x22;figure w-col-12&#x22;&#x3E;
+                 &#x3C;img class=&#x22;media&#x22; src=&#x22;/image.jpg&#x22; /&#x3E;
+                 &#x3C;figcaption class=&#x22;figure__caption&#x22;&#x3E;
+                      food truck yr franzen pabst
+                 &#x3C;/figcaption&#x3E;
+             &#x3C;/figure&#x3E;
+         &#x3C;/div&#x3E;
+         &#x3C;div class=&#x22;slider__item w-col-12&#x22;&#x3E;
+              &#x3C;figure class=&#x22;figure w-col-12&#x22;&#x3E;
+                  &#x3C;img class=&#x22;media&#x22; src=&#x22;/image.jpg&#x22; /&#x3E;
+                  &#x3C;figcaption class=&#x22;figure__caption&#x22;&#x3E;
+                        food truck yr franzen pabst
+                  &#x3C;/figcaption&#x3E;
+              &#x3C;/figure&#x3E;
+         &#x3C;/div&#x3E;
+    &#x3C;/div&#x3E;
+&#x3C;/div&#x3E;
+</code>
                 </div>
             </div>
         </div>
+    </div>
 
-        <div class="slider">
-            <div class="slider__inner">
-                <div class="slider__item w-col-12">
-                    <figure class="figure w-col-12">
-                        <img class="media" src="/image.jpg" />
-                        <figcaption class="figure__caption">
-                            food truck yr franzen pabst
-                        </figcaption>
-                    </figure>
-                </div>
-                <div class="slider__item w-col-12">
-                    <figure class="figure w-col-12">
-                        <img class="media" src="/image.jpg" />
-                        <figcaption class="figure__caption">
-                            food truck yr franzen pabst
-                        </figcaption>
-                    </figure>
-                </div>
-                <div class="slider__item w-col-12">
-                    <figure class="figure w-col-12">
-                        <img class="media" src="/image.jpg" />
-                        <figcaption class="figure__caption">
-                            food truck yr franzen pabst
-                        </figcaption>
-                    </figure>
-                </div>
-                <div class="slider__item w-col-12">
-                    <figure class="figure w-col-12">
-                        <img class="media" src="/image.jpg" />
-                        <figcaption class="figure__caption">
-                            food truck yr franzen pabst
-                        </figcaption>
-                    </figure>
-                </div>
-                <div class="slider__item w-col-12">
-                    <figure class="figure w-col-12">
-                        <img class="media" src="/image.jpg" />
-                        <figcaption class="figure__caption">
-                            food truck yr franzen pabst
-                        </figcaption>
-                    </figure>
-                </div>
+    <div class="slider">
+        <div class="slider__inner">
+            <div class="slider__item w-col-12">
+                <figure class="figure w-col-12">
+                    <img class="media" src="/image.jpg" />
+                    <figcaption class="figure__caption">
+                        food truck yr franzen pabst
+                    </figcaption>
+                </figure>
+            </div>
+            <div class="slider__item w-col-12">
+                <figure class="figure w-col-12">
+                    <img class="media" src="/image.jpg" />
+                    <figcaption class="figure__caption">
+                        food truck yr franzen pabst
+                    </figcaption>
+                </figure>
+            </div>
+            <div class="slider__item w-col-12">
+                <figure class="figure w-col-12">
+                    <img class="media" src="/image.jpg" />
+                    <figcaption class="figure__caption">
+                        food truck yr franzen pabst
+                    </figcaption>
+                </figure>
             </div>
         </div>
+    </div>
 
-</body>
+    <footer class="site-footer m-top-5">
+        <div class="bar">
+            <div class="bar__main">
 
+            </div>
+            <div class="bar__end">
+                <a class="color-text-contrast m-right-4" href="/imprint.html">
+                    Imprint
+                </a>
+                <a class="color-text-contrast" href="/private-policy.html">
+                    Privacy Policy
+                </a>
+            </div>
+        </div>
+    </footer>
+</body>
 </html
\ No newline at end of file