toolctrl-labs/HiveGrid-Wireframes
9
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve D-D0b preview rule inspector

Browse Source
This commit is contained in:
david committed 2026-07-03 00:46:45 +02:00
1 parent 91180a82bf
commit 1f561321f7
3 files changed
+325
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md
+1
View File
@@ -24,6 +24,7 @@ HTML-Preview:
- Separate Full-Page-Vorschau: [D-D0b Full Page Preview](<Preview/preview.html>)
- Lokale Arbeitskopie fuer Self-Hosting: `99 Temp/D-D0b Layout Preview/index.html`
- Die versionierte Preview liegt bewusst im D-D0b-Ordner, damit sie zusammen mit den Layout-Entscheidungen auffindbar bleibt.
- Die Preview enthaelt einen ausklappbaren Standards-Drawer und optionale Rule-Hints, damit sichtbar ist, welche Regel an welcher Stelle angewendet wird.
- Die Preview ist visuelle Referenz, aber kein Source of Truth.
- `99 Temp/` ist per `.gitignore` ausgeschlossen.
- Wenn Regeln spaeter abweichen, gelten die Markdown-Standards, nicht die HTML-Preview.
02 Wireframes/D0 Foundation/D-D0b Layout Standards/Preview/index.html
+321
View File
@@ -162,6 +162,187 @@
left: 3px;
}
.rule-toggle-switch {
position: relative;
width: 32px;
height: 18px;
border-radius: 999px;
background: var(--primary);
}
.rule-toggle-switch::after {
content: "";
position: absolute;
top: 3px;
left: 17px;
width: 12px;
height: 12px;
border-radius: 999px;
background: #fff;
transition: left 160ms ease;
}
body.hide-rule-markers .rule-toggle-switch {
background: var(--border-strong);
}
body.hide-rule-markers .rule-toggle-switch::after {
left: 3px;
}
.rule-badge {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
width: max-content;
min-height: 24px;
padding: 0 8px;
border: 1px solid #b8c7ff;
border-radius: 999px;
background: #eef3ff;
color: #2443a8;
font-size: 12px;
font-weight: 800;
text-decoration: none;
white-space: nowrap;
}
.rule-badge::before {
content: "->";
font-size: 10px;
}
.rule-badge::after {
content: attr(data-tooltip);
position: absolute;
right: 0;
bottom: calc(100% + 8px);
z-index: 40;
display: none;
width: min(280px, 72vw);
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: #fff;
box-shadow: var(--shadow);
color: var(--text);
font-size: 12px;
font-weight: 500;
line-height: 1.45;
white-space: normal;
}
.rule-badge:hover::after,
.rule-badge:focus-visible::after {
display: block;
}
.rule-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.rule-callout {
display: grid;
gap: 8px;
margin-top: 12px;
padding: 12px 14px;
border: 1px solid #c7d2fe;
border-radius: 8px;
background: #f7f9ff;
}
.rule-callout p {
color: #294268;
font-size: 12px;
line-height: 1.5;
}
body.hide-rule-markers .rule-badge,
body.hide-rule-markers .rule-row,
body.hide-rule-markers .rule-callout {
display: none;
}
.standards-drawer {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 30;
width: min(420px, calc(100vw - 40px));
border: 1px solid var(--border);
border-radius: 10px;
background: #fff;
box-shadow: var(--shadow);
overflow: hidden;
}
.standards-drawer summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 48px;
padding: 0 16px;
cursor: pointer;
font-weight: 800;
list-style: none;
}
.standards-drawer summary::-webkit-details-marker {
display: none;
}
.standards-drawer summary::after {
content: "Auf/zu";
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
.standards-drawer-body {
display: grid;
gap: 12px;
max-height: min(520px, calc(100vh - 120px));
padding: 0 16px 16px;
overflow: auto;
}
.standards-drawer-note {
color: var(--muted);
font-size: 12px;
line-height: 1.45;
}
.standards-rule-list {
display: grid;
gap: 8px;
}
.standards-rule {
display: grid;
gap: 3px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface-subtle);
color: var(--text);
text-decoration: none;
}
.standards-rule strong {
font-size: 12px;
}
.standards-rule span {
color: var(--muted);
font-size: 12px;
line-height: 1.35;
}
.legend {
display: flex;
align-items: center;
@@ -1979,6 +2160,12 @@
display: none;
}
.standards-drawer {
right: 12px;
bottom: 12px;
width: calc(100vw - 24px);
}
.rhythm-card-row {
grid-template-columns: 1fr;
}
@@ -1996,6 +2183,10 @@
<span>Spacing Tiles</span>
<span class="marker-toggle-switch" aria-hidden="true"></span>
</button>
<button class="marker-toggle" id="ruleToggle" type="button" aria-pressed="true">
<span>Rule Hints</span>
<span class="rule-toggle-switch" aria-hidden="true"></span>
</button>
<a class="button sm secondary" href="#overview">Uebersicht</a>
<a class="button sm secondary" href="preview.html">Full Page</a>
<a class="button sm secondary" href="#d01">D01</a>
@@ -2028,6 +2219,53 @@
</div>
</section>
<details class="standards-drawer" open>
<summary>Aktive Layout-Standards</summary>
<div class="standards-drawer-body">
<p class="standards-drawer-note">
Klick auf eine Regel springt zur passenden Stelle. Die Inline-Hinweise zeigen, wo diese Regel im Beispiel angewendet wird.
</p>
<div class="standards-rule-list">
<a class="standards-rule" href="#d01">
<strong>D01 Grundraster</strong>
<span>Erlaubte Werte: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96.</span>
</a>
<a class="standards-rule" href="#d02">
<strong>D02 Page/Card/Grid</strong>
<span>Page 24px, Card/Surface 16px, Grid Gap 16px, kompakt lokal 12px.</span>
</a>
<a class="standards-rule" href="#d03">
<strong>D03 Text-Rhythmus</strong>
<span>0px / 24px / 0px / 12px mit 150%-Texttokens fuer Beschreibungen.</span>
</a>
<a class="standards-rule" href="#d04">
<strong>D04 Button Ownership</strong>
<span>Button Default/Medium/36px; Button-Padding kommt aus der Komponente.</span>
</a>
<a class="standards-rule" href="#d05">
<strong>D05 Forms</strong>
<span>Komplette Field-Komponenten stehen standardmaessig 16px auseinander.</span>
</a>
<a class="standards-rule" href="#d06">
<strong>D06 Table Ownership</strong>
<span>Tabellen-Dichte kommt aus der Table-Komponente; Carbon nur als Referenz.</span>
</a>
<a class="standards-rule" href="#d07">
<strong>D07 Dialog Sizes</strong>
<span>XS 420, S 560, M 720, L 1200; Fullscreen max 2512px.</span>
</a>
<a class="standards-rule" href="#d08">
<strong>D08 Dialog Internal Gaps</strong>
<span>Title 8px, Field 16px, Section 24px, Footer Button 8px.</span>
</a>
<a class="standards-rule" href="#d09">
<strong>D09 States</strong>
<span>Empty/Error/No-Permission sind inline Komponenten-Zustaende, keine Modale.</span>
</a>
</div>
</div>
</details>
<section class="section">
<div class="section-head">
<div class="section-copy">
@@ -2097,6 +2335,9 @@
<div class="decision-panel">
<div>
<span class="decision-tag">Entscheidung D01</span>
<div class="rule-row">
<a class="rule-badge" href="#d01" data-tooltip="D01 ist die Grundlage fuer alle sichtbaren Abstaende in dieser Preview. Nur die freigegebenen Werte sollen fuer Layout-Gaps und Paddings genutzt werden.">D01 angewendet</a>
</div>
</div>
<div>
<p class="decision-kicker">Was du festlegst</p>
@@ -2123,6 +2364,10 @@
<div class="decision-question">
Entscheidung: Darf HiveGrid den 8px-Rhythmus mit 4px/12px-Ausnahmen nutzen?
</div>
<div class="rule-callout">
<a class="rule-badge" href="#d01" data-tooltip="Die Werte in der Skala sind die erlaubten Layout-Standardwerte. Einzelne Komponenten koennen eigene technische Werte besitzen, wenn sie intern notwendig sind.">D01 Spacing Scale</a>
<p>Die Skala darunter zeigt die erlaubten Standardwerte visuell. Werte ausserhalb dieser Skala sollen nicht als neue Layout-Standards eingefuehrt werden.</p>
</div>
</div>
<div class="scale">
<div class="scale-item">
@@ -2177,6 +2422,10 @@
dem Rand eines Containers und seinem Inhalt. Tuerkise Flaechen
zeigen Gap: Abstand zwischen getrennten Elementen.
</p>
<div class="rule-row">
<a class="rule-badge" href="#d02" data-tooltip="D02 wird in den lila Page-/Card-Flaechen und in den tuerkisen Grid-Gaps der Beispiele angewendet.">D02 sichtbar</a>
<a class="rule-badge" href="#d01" data-tooltip="Alle D02-Werte stammen aus der freigegebenen D01-Spacing-Skala.">D01 Werteskala</a>
</div>
<div class="legend">
<span class="legend-item">
<span class="legend-dot padding"></span>
@@ -2197,6 +2446,9 @@
<div class="decision-panel">
<div>
<span class="decision-tag">Entscheidung D02</span>
<div class="rule-row">
<a class="rule-badge" href="#d02" data-tooltip="Page Padding 24px, Card/Surface 16px und Grid/Card Gap 16px sind hier als Standard markiert.">D02 angewendet</a>
</div>
</div>
<div>
<p class="decision-kicker">Was du festlegst</p>
@@ -2229,6 +2481,10 @@
Grosse Detail-/Editorflaechen starten ebenfalls mit 16px; 32px ist
nur ueber die eigene Dialog-Variante erlaubt.
</div>
<div class="rule-callout">
<a class="rule-badge" href="#d02" data-tooltip="Diese Regel wird in den Standard-Desktop- und Settings-Beispielen umgesetzt. 32px ist bewusst nur als Dialog-Variante markiert.">D02 Page/Card/Grid</a>
<p>Die Beispiele darunter zeigen bewusst Vergleichswerte. Der blaue Rahmen markiert den validierten Standard; nicht jede gezeigte Variante ist automatisch freigegeben.</p>
</div>
</div>
<div class="reference-strip">
@@ -2641,6 +2897,9 @@
<div class="decision-panel">
<div>
<span class="decision-tag">Entscheidung D03</span>
<div class="rule-row">
<a class="rule-badge" href="#d03" data-tooltip="D03 definiert die Gaps zwischen Page-/Section-Textbloecken und dem folgenden Content.">D03 angewendet</a>
</div>
</div>
<div>
<p class="decision-kicker">Was du festlegst</p>
@@ -2679,6 +2938,12 @@
sowie 12px zwischen Section Beschreibung und Inhalt. Page-/Section-
Beschreibungen muessen dafuer 150%-Texttokens nutzen.
</div>
<div class="rule-callout">
<strong>D03 Text-Rhythmus:</strong> Die 0px-Gaps sind bewusst
definiert, weil 150%-Texttokens bereits optische Hoehe erzeugen.
Der stabile Abstand zum naechsten Inhalt bleibt 24px im Header und
12px in Sections.
</div>
</div>
<div class="rhythm-comparison">
@@ -2944,6 +3209,9 @@
<div class="decision-panel">
<div>
<span class="decision-tag">Komponenten-Ownership</span>
<div class="rule-row">
<a class="rule-badge" href="#d04" data-tooltip="D04 klaert, dass Button-Hoehen und Button-Paddings aus der Button-Komponente kommen.">D04 Ownership</a>
</div>
</div>
<div>
<p class="decision-kicker">Was fuer Screens gilt</p>
@@ -2970,6 +3238,11 @@
<div class="decision-question">
Keine eigene D04-Layoutentscheidung: Button Default/Medium 36px fuer Standardaktionen verwenden.
</div>
<div class="rule-callout">
<strong>D04 Button Ownership:</strong> Screens verwenden fuer
Standardaktionen die Default/Medium-Buttonvariante. Button-Groesse
und Innenpadding werden nicht in Screen-Prompts nachgebaut.
</div>
</div>
<div class="grid three">
<div class="card">
@@ -3011,6 +3284,9 @@
<div class="decision-panel">
<div>
<span class="decision-tag">Entscheidung D05</span>
<div class="rule-row">
<a class="rule-badge" href="#d05" data-tooltip="D05 betrifft nur den Abstand zwischen kompletten Field-Komponenten, nicht die innere Field-Anatomy.">D05 angewendet</a>
</div>
</div>
<div>
<p class="decision-kicker">Was du festlegst</p>
@@ -3038,6 +3314,11 @@
<div class="decision-question">
Entschieden: Form Field Gap 16px. Field-Anatomy selbst kommt aus der jeweiligen Komponente.
</div>
<div class="rule-callout">
<strong>D05 Form Gap:</strong> Komplette Field-Komponenten stehen
standardmaessig 16px auseinander. Label, Help, Error und Control
bleiben Aufgabe der jeweiligen Komponente.
</div>
</div>
<div class="grid two">
<div class="card">
@@ -3110,6 +3391,9 @@
<div class="decision-panel">
<div>
<span class="decision-tag">Komponenten-Ownership</span>
<div class="rule-row">
<a class="rule-badge" href="#d06" data-tooltip="D06 dokumentiert, dass Tabellen-Dichte und Tabellen-Padding durch die Table-Komponente kommen.">D06 Ownership</a>
</div>
</div>
<div>
<p class="decision-kicker">Carbon-Referenz</p>
@@ -3139,6 +3423,11 @@
<div class="decision-question">
Keine eigene D06-Layoutentscheidung: Table-Komponente nutzen; Carbon als Referenz fuer passende Row-Size-Systematik.
</div>
<div class="rule-callout">
<strong>D06 Table Ownership:</strong> Screens setzen Tabellen als
Komponente ein. Row-Height, Zellpadding und Tabellen-Dichte werden
dort gepflegt; Carbon dient nur als Referenz fuer die Systematik.
</div>
</div>
<div class="table-shell">
<table>
@@ -3192,6 +3481,9 @@
<div class="decision-panel">
<div>
<span class="decision-tag">Entscheidung D07</span>
<div class="rule-row">
<a class="rule-badge" href="#d07" data-tooltip="D07 definiert die validierten Dialog- und Fullscreen-Dialog-Groessen.">D07 angewendet</a>
</div>
</div>
<div>
<p class="decision-kicker">Was du festlegst</p>
@@ -3220,6 +3512,12 @@
Entschieden: XS 420px, S 560px, M 720px, L 1200px max.
Fullscreen Dialog nutzt Fill mit 24px aeusserem Rand pro Seite und `max-width: 2512px`.
</div>
<div class="rule-callout">
<strong>D07 Dialog Size:</strong> Normale Dialoge nutzen feste
Breitenklassen und wachsen auf grossen Monitoren nicht unendlich.
Fullscreen Dialoge fuellen die Flaeche, behalten aber 24px Rand und
eine maximale Breite von 2512px.
</div>
</div>
<div class="pattern-grid">
@@ -3442,6 +3740,9 @@
<div class="decision-panel">
<div>
<span class="decision-tag">Entscheidung D08 validiert</span>
<div class="rule-row">
<a class="rule-badge" href="#d08" data-tooltip="D08 legt die internen Dialog-Gaps fest: Header, Felder, Sections und Footer.">D08 angewendet</a>
</div>
</div>
<div>
<p class="decision-kicker">Was du festlegst</p>
@@ -3471,6 +3772,11 @@
<div class="decision-question">
Entschieden: Balanced wird Standard. Title Gap 8px, Field Gap 16px, Section Gap 24px, Button Gap 8px.
</div>
<div class="rule-callout">
<strong>D08 Dialog Internal Gaps:</strong> Balanced ist Standard:
8px Title Gap, 16px Field Gap, 24px Section Gap und 8px Button Gap.
Dialog-Padding selbst kommt aus den Dialog-Varianten.
</div>
</div>
<div class="dialog-gap-grid">
@@ -3682,6 +3988,9 @@
<div class="decision-panel">
<div>
<span class="decision-tag">Komponenten-Ownership</span>
<div class="rule-row">
<a class="rule-badge" href="#d09" data-tooltip="D09 macht States auffindbar, definiert aber keine neue Screen-Layout-Regel.">D09 Ownership</a>
</div>
</div>
<div>
<p class="decision-kicker">Was hier gemeint ist</p>
@@ -3709,6 +4018,12 @@
<div class="decision-question">
Keine neue D09-Layout-Regel: Screens sollen die vorhandenen State-Komponenten verwenden. No-Permission muss bei Bedarf als Komponentenfrage validiert werden.
</div>
<div class="rule-callout">
<strong>D09 States:</strong> Empty, Error und No-Permission sind
inline Inhaltszustaende. Sie werden ueber vorhandene Komponenten
abgebildet und sind nur dann ein eigener Screen, wenn daraus ein
echter Screen- oder Dialog-Zustand entsteht.
</div>
</div>
<div class="grid three">
<div class="state">
@@ -3740,11 +4055,17 @@
</main>
<script>
const gapToggle = document.getElementById("gapToggle");
const ruleToggle = document.getElementById("ruleToggle");
gapToggle?.addEventListener("click", () => {
const hidden = document.body.classList.toggle("hide-gap-markers");
gapToggle.setAttribute("aria-pressed", String(!hidden));
});
ruleToggle?.addEventListener("click", () => {
const hidden = document.body.classList.toggle("hide-rule-markers");
ruleToggle.setAttribute("aria-pressed", String(!hidden));
});
</script>
</body>
</html>
Tickets/Fertige Tickets/D-D0b Layout Standards.md
+3
View File
@@ -26,6 +26,8 @@ Full-Page-Preview: [D-D0b Full Page Preview](../../02%20Wireframes/D0%20Foundati
Lokale Arbeitskopie der Preview: `99 Temp/D-D0b Layout Preview/index.html`
Hinweis: Die HTML-Preview hat einen ausklappbaren Standards-Drawer und optionale Rule-Hints, damit die angewendeten Regeln direkt im Beispiel auffindbar sind.
## Kurzfassung
Fuer `D-D0b` wurden die grundlegenden Layout- und Composition-Standards fuer HiveGrid validiert, dokumentiert und in die dauerhaften Subframe UI Standards uebertragen.
@@ -45,6 +47,7 @@ Eine bereinigte Kopie der Preview liegt versioniert im D-D0b-Ordner, damit sie z
- Backlog-Punkte in eigene Backlog-Datei ausgelagert.
- Lokale Preview behalten und als lokale Referenzhilfe markiert.
- HTML-Preview und Full-Page-Preview als versionierte Referenzdateien im D-D0b-Ordner abgelegt.
- Regel-Inspector in der HTML-Preview ergaenzt, damit D01-D09 im Beispiel sichtbar und anspringbar sind.
## Validiert