@ui-doc/html-renderer 0.3.0 → 0.4.0

package/styles/03_components/grid-auto.css

@@ -0,0 +1,49 @@
+/**
+  * Use the auto grid class to define your custom grid layouts. Please note, all columns will have the same width.
+  * We are using css variables to define the grid:
+  * - `--grid-columns` (required): define how many columns your grid should have
+  * - `--grid-item-min-width` (required): define the min width of the containing items, when you use a count of 4 and a item
+  *   width of  200px but there are only 650px availabe only three columns will be used. All items won't get smaller as
+  *   this number.
+  *
+  * Modify the gap of your grid:
+  * - `--gap-x` (optional): column (x-axis) gap - space between items - eg. 3rem
+  * - `--gap-y` (optional): row (y-axis) gap - space between items - eg. 3rem
+  * - `--gap` (optional): Define column (x-axis) and row (y-axis) gap - eg. 3rem
+  * - `--gap-space-x` (optional): Define column (x-axis) gap - use existing space variables - eg. var(--space-xs)
+  * - `--gap-space-y` (optional): Define row (y-axis) gap - use existing space variables - eg. var(--space-xs)
+  * - `--gap-space` (optional): Define column (x-axis) and row (y-axis) gap - use existing space variables - eg. var(--space-xs)
+  *
+  * If you need to redefine the gap in a inner auto grid you can use `unset` or `inital` as vairable value inn the inner grid to fallback to default.
+  *
+  * @location components.grid-auto Auto Grid
+  * @example
+  * <div class="grid-auto" style="--grid-columns: 3; --grid-item-min-width: 300px;">
+  *   <div class="bg bg-black pxy"></div>
+  *   <div class="bg bg-black pxy"></div>
+  *   <div class="bg bg-black pxy"></div>
+  *   <div class="bg bg-black pxy"></div>
+  *   <div class="bg bg-black pxy"></div>
+  * </div>
+  */
+.grid-auto {
+  /* https://css-tricks.com/an-auto-filling-css-grid-with-max-columns/ */
+  --grid-gap-x: var(
+    --gap-x,
+    var(--gap, calc(var(--space-unit) * var(--gap-space-x, var(--gap-space, var(--space-normal)))))
+  );
+  --grid-gap-y: var(
+    --gap-y,
+    var(--gap, calc(var(--space-unit) * var(--gap-space-y, var(--gap-space, var(--space-normal)))))
+  );
+  --grid-gap-count: calc(var(--grid-columns) - 1);
+  --grid-total-gap-width: calc(var(--grid-gap-count) * var(--grid-gap-x));
+  --grid-item-max-width: calc((100% - var(--grid-total-gap-width)) / var(--grid-columns));
+
+  display: grid;
+  grid-gap: var(--grid-gap-y) var(--grid-gap-x);
+  grid-template-columns: repeat(
+    auto-fill,
+    minmax(max(var(--grid-item-min-width), var(--grid-item-max-width)), 1fr)
+  );
+}

package/styles/03_components/icons.css

@@ -1,32 +1,20 @@
 .icons {
-  display: grid;
-  grid-template-columns: repeat(var(--icons-columns, 1), 1fr);
-  gap: var(--icons-gap, var(--size-normal));
-
-  @container content (width > 300px) {
-    --icons-columns: 2;
-  }
-
-  @container content (width > 620px) {
-    --icons-columns: 3;
-  }
-
-  @container content (width > 940px) {
-    --icons-columns: 4;
-  }
+  --grid-columns: 4;
+  --grid-item-min-width: 200px;
 }
 
 .icons > .item {
+  --space-px: var(--space-md);
+  --space-py: var(--space-xl);
+
   display: flex;
   flex-direction: column;
-  gap: var(--size-xs);
+  gap: calc(var(--space-xs) * var(--space-unit));
   justify-content: center;
 
-  padding: var(--size-xl) var(--size-md);
-
   text-align: center;
 
-  border: 1px solid rgb(var(--border-color));
+  border: 1px solid rgb(var(--border-color, var(--font-color)));
 
   > .show,
   > .show::before,

package/styles/03_components/navigation/burger-control.css

@@ -0,0 +1,75 @@
+/**
+  * @location components.navigation.burger-control Navigation Burger Control
+  * @example
+  * <nav class="nav">
+  *   <button class="control burger" aria-label="Toggle Navigation" aria-expanded="false" aria-controls="target" style="--nav-burger-control-size: 3em; --space-px: .4; --space-py: .6">
+  *     <span class="line"></span>
+  *     <span class="line"></span>
+  *     <span class="line"></span>
+  *   </button>
+  *   <div id="target" hidden>Controlled Area</div>
+  * </nav>
+  */
+
+.nav-main .burger.control {
+  /* prettier-ignore */
+  --nav-burger-control-line-height-calc: var(--nav-burger-control-line-height, calc(
+    (
+      var(--nav-burger-control-size) -
+      (var(--py, calc(var(--space-unit) * var(--space-py))) * 2) -
+      (var(--nav-burger-control-line-space, var(--space-unit) / 2) * 2)
+    ) / 3
+  ));
+
+  position: relative;
+  width: calc(var(--nav-burger-control-size) * var(--nav-burger-control-width-multiplier, 1.4));
+  height: var(--nav-burger-control-size);
+}
+
+.nav-main .burger.control > .line {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  display: block;
+
+  width: calc(100% - var(--px, calc(var(--space-unit) * var(--space-px))) * 2);
+  height: var(--nav-burger-control-line-height-calc);
+
+  background: rgb(var(--font-color));
+
+  transition: all var(--nav-burger-animation-time, 0.3s) ease;
+
+  &:first-child {
+    transform: translate(
+      -50%,
+      calc(
+        -50% - var(--nav-burger-control-line-space, var(--space-unit) / 2) - var(--nav-burger-control-line-height-calc)
+      )
+    );
+  }
+
+  &:last-child {
+    transform: translate(
+      -50%,
+      calc(
+        -50% + var(--nav-burger-control-line-space, var(--space-unit) / 2) + var(--nav-burger-control-line-height-calc)
+      )
+    );
+  }
+}
+
+.nav-main .burger.control[aria-expanded="true"] > .line {
+  &:first-child {
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+
+  &:nth-child(2) {
+    display: none;
+  }
+
+  &:last-child {
+    transform: translate(-50%, -50%) rotate(-45deg);
+  }
+}

package/styles/03_components/{nav → navigation}/list.css

@@ -1,7 +1,7 @@
 .nav-list {
-  --nav-list-item-px: var(--size-sm);
-  --nav-list-item-py: var(--size-xs);
-  --nav-list-item-border-color: var(--border-color);
+  --nav-list-item-space-px: var(--space-sm);
+  --nav-list-item-space-py: var(--space-xs);
+  --nav-list-item-border-color: var(--border-color, var(--font-color));
 
   text-align: left;
 
@@ -15,23 +15,21 @@
     margin-top: var(--nav-list-root-item-space, var(--size-sm));
   }
 
-  .control {
-    &.active {
-      --font-color: var(--accent-color);
-    }
+  .control.active {
+    --font-color: var(--accent-color);
   }
 }
 
 .nav-list > ul > li > .control {
-  --py: var(--nav-list-item-py);
-  --pr: var(--nav-list-item-px);
+  --space-py: var(--nav-list-item-space-py);
+  --space-pr: var(--nav-list-item-space-px);
   --font-weight: var(--font-weight-bold);
   --font-size: var(--font-size-md);
 }
 
 .nav-list > ul > li > ul > li > .control {
-  --py: var(--nav-list-item-py);
-  --px: var(--nav-list-item-px);
+  --space-py: var(--nav-list-item-space-py);
+  --space-px: var(--nav-list-item-space-px);
 
   text-align: left;
   border-left: 1px solid rgba(var(--nav-list-item-border-color) / var(--border-opacity, 0.1));

package/styles/03_components/navigation/main.css

@@ -0,0 +1,102 @@
+.nav-main {
+  --bg-color: var(--na-main-bg-color, var(--color-blue));
+  --font-color: var(--nav-main-bg-color, var(--color-white));
+  --accent-color: var(--nav-main-accent-color, var(--color-yellow));
+
+  position: sticky;
+  z-index: 100;
+  top: 0;
+}
+
+.nav-main > .bar,
+.nav-main > .bar > .menu {
+  display: flex;
+  gap: var(--nav-main-item-gap, calc(var(--space-unit) * var(--nav-main-item-gap-space, 0)));
+}
+
+.nav-main > .bar {
+  --width-content-offset: var(--nav-main-bar-item-space-x) * var(--space-unit);
+
+  container-name: nav-bar;
+  container-type: inline-size;
+  justify-content: center;
+  background: rgb(var(--bg-color));
+
+  > .logo,
+  > .burger.control,
+  > .menu > .control {
+    --space-px: var(--nav-main-bar-item-space-x);
+    --space-py: var(--nav-main-bar-item-space-y);
+  }
+
+  > .logo {
+    height: var(--nav-main-bar-item-height);
+
+    > svg {
+      width: auto;
+      height: 100%;
+    }
+  }
+
+  > .menu > .control {
+    --font-weight: var(--font-weight-bold);
+
+    display: block;
+
+    &[aria-current="page"] {
+      --font-color: var(--accent-color);
+    }
+  }
+
+  @container nav-bar (width > 1000px) {
+    > .burger.control {
+      display: none;
+    }
+
+    > .menu {
+      margin-left: auto;
+    }
+  }
+
+  @container nav-bar (width <= 1000px) {
+    position: relative;
+
+    > .burger.control {
+      --nav-burger-control-size: var(--nav-main-bar-item-height);
+
+      margin-left: auto;
+    }
+
+    > .menu {
+      position: absolute;
+      top: calc(var(--nav-main-bar-item-height));
+      left: 0;
+
+      overflow-y: auto;
+      flex-direction: column;
+
+      width: 100%;
+      max-height: calc(100vh - var(--nav-main-height));
+      padding: calc(var(--space-unit) * var(--nav-main-menu-space-t)) var(--width-calc)
+        calc(var(--space-unit) * var(--nav-main-menu-space-b));
+
+      opacity: 1;
+      background: rgb(var(--bg-color));
+    }
+
+    > .menu.menu-show-enter-active,
+    > .menu.menu-show-leave-active {
+      transition: opacity 0.3s ease-in-out;
+    }
+
+    > .menu.menu-show-enter-from,
+    > .menu.menu-show-leave-to {
+      opacity: 0;
+    }
+
+    > .menu[hidden],
+    > .burger.control[aria-expanded="false"] ~ .menu {
+      display: none;
+    }
+  }
+}

package/styles/03_components/spaces.css

@@ -4,7 +4,7 @@
 
   display: flex;
   flex-direction: column;
-  gap: var(--spaces-gap, var(--size-xs));
+  gap: var(--spaces-gap, calc(var(--spaces-gap-space, var(--space-xs)) * var(--space-unit)));
 }
 
 .spaces > .item {
@@ -15,20 +15,21 @@
     --font-color: var(--spaces-font-color);
   }
 
-  > div {
-    padding: var(--size-sm) var(--size-normal);
+  > .pxy {
+    --space-px: var(--space-normal);
+    --space-py: var(--space-xs);
   }
 
   > div:first-child {
-    margin-right: var(--space-value);
+    margin-right: calc(var(--space-value) * var(--space-unit));
   }
 
-  > div:last-child {
+  > .info {
     display: flex;
 
     > *:not(:last-child) {
-      margin-right: var(--size-xs);
-      padding-right: var(--size-xs);
+      margin-right: calc(var(--space-xs) * var(--space-unit));
+      padding-right: calc(var(--space-xs) * var(--space-unit));
       border-right: 1px solid currentcolor;
     }
 

package/styles/04_layout/body.css

@@ -0,0 +1,22 @@
+html {
+  height: 100%;
+}
+
+html > body:has(.expand-full-height) {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+
+  > .expand-full-height {
+    flex: 1 1;
+  }
+}
+
+html > body > footer {
+  --bg-color: var(--footer-bg-color, var(--color-blue));
+  --font-color: var(--footer-font-color, var(--color-white));
+
+  > .text {
+    text-align: right;
+  }
+}

package/styles/04_layout/inline-code.css

@@ -0,0 +1,6 @@
+p > code {
+  display: inline-block;
+  padding: 0.1em 0.2em;
+  color: rgb(var(--inline-code-font-color, var(--font-color)));
+  background: rgb(var(--inline-code-bg-color, var(--color-gray)));
+}

package/styles/04_layout/page.css

@@ -0,0 +1,73 @@
+body.page {
+  --main-sidebar-width: 25ch;
+  --main-content-sidebar-space: var(--space-xl);
+}
+
+body.page > .content {
+  --space-py: var(--space-xl);
+
+  .headline + .description {
+    margin-top: calc(var(--page-headline-description-space, var(--space-md)) * var(--space-unit));
+  }
+
+  > main > section + section {
+    margin-top: calc(var(--page-content-section-space, var(--space-xl)) * var(--space-unit));
+  }
+
+  > main * + .example,
+  > main *:not(.example) + .markup {
+    margin-top: 1em;
+  }
+}
+
+body.page > .content > main {
+  container-name: content;
+  container-type: inline-size;
+}
+
+@media screen and (width >= 1000px) {
+  body.page > .content:has(> .sidebar) {
+    display: grid;
+    grid-template-columns: var(--main-sidebar-width) 1fr;
+    grid-template-rows: auto 1fr;
+    gap: var(
+        --page-header-main-garp,
+        calc(var(--page-header-main-space, var(--space-lg)) * var(--space-unit))
+      )
+      var(
+        --page-content-sidebar-garp,
+        calc(var(--page-content-sidebar-space, var(--space-xl)) * var(--space-unit))
+      );
+
+    > .sidebar {
+      grid-column: 1 / span 1;
+      grid-row: 1 / span 2;
+    }
+
+    > header {
+      grid-column: 2 / span 1;
+      grid-row: 1 / span 1;
+    }
+
+    > main {
+      grid-column: 2 / span 1;
+      grid-row: 2 / span 1;
+    }
+
+    > .sidebar > .scrollbar {
+      position: sticky;
+      top: var(--nav-main-height);
+
+      overflow-y: auto;
+
+      height: 100%;
+      max-height: calc(100vh - var(--nav-main-height));
+    }
+  }
+}
+
+@media screen and (width < 1000px) {
+  body.page > .content > .sidebar {
+    display: none;
+  }
+}

package/styles/index.css

@@ -1,20 +1,61 @@
-@import url("./01_resets/root.css");
-@import url("./01_resets/initial.css");
-@import url("./01_resets/typography.css");
+/**
+  * Text for the index page
+  *
+  * @page index UI-Doc
+  */
 
-@import url("./02_objects/background.css");
-@import url("./02_objects/text.css");
-@import url("./02_objects/padding.css");
-@import url("./02_objects/margin.css");
-@import url("./02_objects/width.css");
-@import url("./02_objects/control.css");
+/**
+  * Variables used in the project.
+  *
+  * @page variables Variables
+  * @order 10
+  */
 
-@import url("./03_components/example-markup.css");
-@import url("./03_components/text-flow.css");
-@import url("./03_components/nav/main.css");
-@import url("./03_components/nav/list.css");
-@import url("./03_components/colors.css");
-@import url("./03_components/spaces.css");
-@import url("./03_components/icons.css");
+/**
+  * Resets used to normalize the browser styles.
+  *
+  * @page resets Resets
+  * @order 20
+  */
+@import url("01_resets/root.css");
+@import url("01_resets/initial.css");
+@import url("01_resets/typography.css");
 
-@import url("./04_layouts/page.css");
+/**
+  * Utility classes are building the base of all styles. They can be applyed everywhere to modify/control one specific thing.
+  *
+  * @page utils Utilities
+  * @order 30
+  */
+@import url("02_utils/background.css");
+@import url("02_utils/padding.css");
+@import url("02_utils/margin.css");
+@import url("02_utils/control.css");
+@import url("02_utils/width.css");
+
+/**
+  * Objects are build out of objects and define style for it's inner children.
+  *
+  * @page components Components
+  * @order 40
+  */
+@import url("03_components/button.css");
+@import url("03_components/container.css");
+@import url("03_components/grid-auto.css");
+@import url("03_components/navigation/burger-control.css");
+@import url("03_components/navigation/main.css");
+@import url("03_components/navigation/list.css");
+@import url("03_components/example-markup.css");
+@import url("03_components/colors.css");
+@import url("03_components/icons.css");
+@import url("03_components/spaces.css");
+
+/**
+  * Layouts are the outermost layer of the design. They define the structure of the page.
+  *
+  * @page layout Layout
+  * @order 50
+  */
+@import url("04_layout/body.css");
+@import url("04_layout/inline-code.css");
+@import url("04_layout/page.css");

package/templates/layouts/default.html

@@ -7,12 +7,10 @@
 
     {{var:styles}}
   </head>
-  <body class="{{var:page.id}}">
-    <header>{{partial:nav-main}}</header>
-    <main class="width-content">
-      {{page:page.id page}}
-    </main>
-    <footer class="width-content py mt">
+  <body class="page {{var:page.id}}">
+    {{partial:nav-main}}
+    {{page:page.id page}}
+    <footer class="width-content py bg">
       <div class="text">{{var:footerText}}</div>
     </footer>
 

package/templates/layouts/example.html

@@ -9,7 +9,7 @@
     <style>
       body {
         margin: 0 !important;
-        padding: 0 !important;
+        padding: 1em !important;
         overflow: hidden !important;
       }
       body > *:last-child {

package/templates/pages/default.html

@@ -1,14 +1,14 @@
-<div class="content">
-  <h1 class="headline">{{var:title}}</h1>
-
-  {{if:description}}<div class="description">{{var:description}}</div>{{/if}}
-
-  {{for:sections}}
-  {{partial:section}}
-  {{/for}}
+<div class="content width-content expand-full-height py">
+  <header class="container">
+    <h1 class="headline">{{var:title}}</h1>
+    {{if:description}}<div class="container description">{{var:description}}</div>{{/if}}
+  </header>
+  <main class="container">
+    {{for:sections}}
+    {{partial:section}}
+    {{/for}}
+  </main>
+  <aside class="sidebar">
+    <div class="scrollbar">{{partial:nav-sidebar}}</div>
+  </aside>
 </div>
-<aside class="sidebar">
-  <div class="scroll">{{partial:nav-sidebar}}</div>
-</aside>
-
-

package/templates/pages/index.html

@@ -1,3 +1,9 @@
-<h1 class="headline">{{var:title}}</h1>
-
-{{if:description}}<div class="description">{{var:description}}</div>{{/if}}
+<header class="width-content">
+  <h1 class="headline">{{var:title}}</h1>
+  {{if:description}}<div class="container description">{{var:description}}</div>{{/if}}
+</header>
+<main class="width-content expand-full-height">
+  {{for:sections}}
+  {{partial:section}}
+  {{/for}}
+</main>

package/templates/partials/code.html

@@ -1,5 +1,5 @@
 {{if:type}}
 <div class="markup">
-  <pre class="code"><code class="language-{{var:type}}">{{var:content escape}}</code></pre>
+  <pre class="code"><code class="pxy language-{{var:type}}">{{var:content escape}}</code></pre>
 </div>
 {{/if}}

package/templates/partials/colors.html

@@ -1,7 +1,7 @@
-<div class="colors">
+<div class="colors grid-auto">
   {{for:this}}
   <div
-    class="item bg"
+    class="item bg pxy"
     style="--bg-color: {{var:value.output}};{{if:font}} --font-color: {{var:font.output}};{{/if}}"
   >
     {{if:value.hex}}<span class="value">{{var:value.hex}}</span>{{/if}}

package/templates/partials/content.html

@@ -1,4 +1,4 @@
-<h{{var:titleLevel}} id="{{var:id}}">{{var:title}}</h{{var:titleLevel}}>
+<h{{var:titleLevel}} class="headline" id="{{var:id}}">{{var:title}}</h{{var:titleLevel}}>
 
 {{if:description}}{{var:description}}{{/if}}
 

package/templates/partials/icons.html

@@ -1,14 +1,14 @@
-<div class="icons">
+<div class="icons grid-auto">
   {{for:this}}
     {{if:value.name}}
-    <div class="item from-var" style="--icon: {{var:value.output}}">
+    <div class="item pxy from-var" style="--icon: {{var:value.output}}">
       <span class="show"></span>
       <span class="text">{{var:text}}</span>
       <span class="name">{{var:name}}</span>
     </div>
     {{/if}}
     {{if:value.value}}
-    <div class="item from-data">
+    <div class="item pxy from-data">
       <span class="show">{{var:value.output}}</span>
       <span class="text" data-icon="{{var:value.output}}">{{var:text}}</span>
       <span class="name">{{var:name}}</span>

package/templates/partials/nav-main.html

@@ -1,9 +1,20 @@
-<nav class="nav-main width-content" aria-label="Main navigation" role="menu">
-  <div class="bar">
-    <a href="{{var:homeLink}}" class="control logo">{{var:logo}}</a>
-    <a href="{{var:homeLink}}" class="control title">{{var:name}}</a>
+<div class="nav-main" aria-label="Main navigation" role="menu">
+  <div class="bar width-content">
+    <a class="control logo" role="menuitem" href="{{var:homeLink}}" aria-label="To homepage">{{var:logo}}</a>
+
+    <button
+      class="control burger"
+      aria-label="Toggle menu"
+      aria-haspopup="true"
+      aria-expanded="false"
+      aria-controls="nav-main-menu"
+    >
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+    </button>
+    <nav class="menu" role="menubar" id="nav-main-menu" data-animate="menu-show" data-inert="body > .content, body > footer">
+      {{for:menu}}<a class="control" role="menuitem" tabindex="0" href="{{var:href}}"{{if:active}} aria-current="page"{{/if}}>{{var:text}}</a>{{/for}}
+    </nav>
   </div>
-  <div class="menu" role="menubar" id="nav-main-menu">
-    {{for:menu}}<a href="{{var:href}}" class="control" role="menuitem" tabindex="0"{{if:active}} aria-current="page"{{/if}}>{{var:text}}</a>{{/for}}
-  </div>
-</nav>
+</div>