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

Move D-D0b rule inspector to full preview

Browse Source
This commit is contained in:
david committed 2026-07-03 00:54:19 +02:00
1 parent 1f561321f7
commit e98d38e716
4 files changed
+274 -340
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
+2 -2
View File
@@ -22,9 +22,9 @@ HTML-Preview:
- Versionierte Referenz: [D-D0b Layout Preview](<Preview/index.html>)
- 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`
- Lokale Arbeitskopien fuer Self-Hosting: `99 Temp/D-D0b Layout Preview/index.html` und `99 Temp/D-D0b Layout Preview/preview.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 Full-Page-Preview enthaelt einen ausklappbaren Standards-Drawer und optionale Rule-Hints, damit sichtbar ist, welche Regel an welcher Stelle der realistischen Beispielseite 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,187 +162,6 @@
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;
@@ -2160,12 +1979,6 @@
display: none;
}
.standards-drawer {
right: 12px;
bottom: 12px;
width: calc(100vw - 24px);
}
.rhythm-card-row {
grid-template-columns: 1fr;
}
@@ -2183,10 +1996,6 @@
<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>
@@ -2219,53 +2028,6 @@
</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">
@@ -2335,9 +2097,6 @@
<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>
@@ -2364,10 +2123,6 @@
<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">
@@ -2422,10 +2177,6 @@
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>
@@ -2446,9 +2197,6 @@
<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>
@@ -2481,10 +2229,6 @@
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">
@@ -2897,9 +2641,6 @@
<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>
@@ -2938,12 +2679,6 @@
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">
@@ -3209,9 +2944,6 @@
<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>
@@ -3238,11 +2970,6 @@
<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">
@@ -3284,9 +3011,6 @@
<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>
@@ -3314,11 +3038,6 @@
<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">
@@ -3391,9 +3110,6 @@
<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>
@@ -3423,11 +3139,6 @@
<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>
@@ -3481,9 +3192,6 @@
<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>
@@ -3512,12 +3220,6 @@
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">
@@ -3740,9 +3442,6 @@
<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>
@@ -3772,11 +3471,6 @@
<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">
@@ -3988,9 +3682,6 @@
<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>
@@ -4018,12 +3709,6 @@
<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">
@@ -4055,17 +3740,11 @@
</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>
02 Wireframes/D0 Foundation/D-D0b Layout Standards/Preview/preview.html
+269 -14
View File
@@ -86,6 +86,11 @@
--preview-editor-pad: 32px;
}
.preview-page:has(#rule-hints:not(:checked)) .rule-badge,
.preview-page:has(#rule-hints:not(:checked)) .rule-callout {
display: none;
}
.preview-config {
position: sticky;
top: 0;
@@ -260,6 +265,183 @@
font-size: 13px;
}
.preview-values > summary.preview-values-head {
cursor: pointer;
list-style: none;
}
.preview-values > summary.preview-values-head::-webkit-details-marker {
display: none;
}
.preview-values > summary.preview-values-head::after {
content: "Auf/zu";
color: var(--muted);
font-size: 12px;
font-weight: 650;
}
.preview-values:not([open]) {
gap: 0;
}
.preview-values:not([open]) .value-set {
display: none !important;
}
.rule-scope {
position: relative;
}
.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(300px, 72vw);
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: #fff;
box-shadow: 0 12px 32px -8px rgb(15 23 42 / 0.22);
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-anchor {
position: absolute;
top: 10px;
right: 10px;
z-index: 8;
}
.preview-page-content > .rule-anchor {
top: var(--preview-page-pad);
right: var(--preview-page-pad);
}
.rule-callout {
display: grid;
gap: 8px;
margin-top: 12px;
padding: 12px 14px;
border: 1px solid #c7d2fe;
border-radius: 8px;
background: #f7f9ff;
color: #294268;
font-size: 12px;
line-height: 1.5;
}
.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: 0 16px 40px -14px rgb(15 23 42 / 0.3);
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;
}
.app-preview {
display: grid;
grid-template-columns: var(--preview-shell-sidebar) minmax(0, 1fr);
@@ -596,6 +778,12 @@
.preview-config-head {
display: grid;
}
.standards-drawer {
right: 12px;
bottom: 12px;
width: calc(100vw - 24px);
}
}
</style>
</head>
@@ -642,13 +830,21 @@
Dialog 32px
</label>
</fieldset>
<fieldset class="control-group">
<legend>Hilfen</legend>
<label class="segmented-option">
<input id="rule-hints" type="checkbox" checked />
Rule Hints
</label>
</fieldset>
</div>
<div class="preview-values">
<div class="preview-values-head">
<details class="preview-values">
<summary class="preview-values-head">
<strong>Aktive Layout-Daten</strong>
<span class="small">Diese Werte aendern sich durch die Umschalter.</span>
</div>
</summary>
<div class="value-set values-shell-on">
<div class="value-cell"><span>Shell</span><strong>An</strong></div>
@@ -689,11 +885,60 @@
<div class="value-cell"><span>Grid/Card Gap</span><strong>16px</strong></div>
<div class="value-cell"><span>Dialog Padding</span><strong>32px Variante</strong></div>
</div>
</div>
</details>
</section>
<details class="standards-drawer">
<summary>Layout-Standards</summary>
<div class="standards-drawer-body">
<p class="standards-drawer-note">
Klick springt zur Regel auf der D-D0b-Entscheidungsseite. Die Badges
in der Preview zeigen, wo die Regel im Beispiel angewendet wird.
</p>
<div class="standards-rule-list">
<a class="standards-rule" href="index.html#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="index.html#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="index.html#d03">
<strong>D03 Text-Rhythmus</strong>
<span>0px / 24px / 0px / 12px mit 150%-Texttokens fuer Beschreibungen.</span>
</a>
<a class="standards-rule" href="index.html#d04">
<strong>D04 Button Ownership</strong>
<span>Button Default/Medium/36px; Button-Padding kommt aus der Komponente.</span>
</a>
<a class="standards-rule" href="index.html#d05">
<strong>D05 Forms</strong>
<span>Komplette Field-Komponenten stehen standardmaessig 16px auseinander.</span>
</a>
<a class="standards-rule" href="index.html#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="index.html#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="index.html#d08">
<strong>D08 Dialog Internal Gaps</strong>
<span>Title 8px, Field 16px, Section 24px, Footer Button 8px.</span>
</a>
<a class="standards-rule" href="index.html#d09">
<strong>D09 States</strong>
<span>Empty/Error/No-Permission sind inline Komponenten-Zustaende, keine Modale.</span>
</a>
</div>
</div>
</details>
<div class="app-preview">
<aside class="preview-sidebar">
<aside class="preview-sidebar rule-scope">
<a class="rule-badge rule-anchor" href="index.html#d02" data-tooltip="Die App-Shell bleibt als Kontext sichtbar; die eigentlichen Page-Abstaende starten rechts im Content-Bereich.">Shell Kontext</a>
<div class="workspace-switcher">
<div class="workspace-mark">HG</div>
<div class="workspace-copy">
@@ -721,8 +966,10 @@
</div>
</header>
<main class="preview-page-content">
<div class="preview-page-head">
<main class="preview-page-content rule-scope">
<a class="rule-badge rule-anchor" href="index.html#d02" data-tooltip="D02: Der Content nutzt mindestens 24px Page Padding. Der Wert bleibt auch in kompakten Settings gleich.">D02 Page Padding</a>
<div class="preview-page-head rule-scope">
<a class="rule-badge rule-anchor" href="index.html#d03" data-tooltip="D03: Page Title und Beschreibung stehen ohne extra Gap zusammen; der Abstand zum ersten Content bleibt stabil.">D03 Text-Rhythmus</a>
<div>
<p class="eyebrow">Workspace overview</p>
<h2>Operations dashboard</h2>
@@ -732,13 +979,16 @@
</p>
</div>
<div class="preview-page-actions">
<a class="rule-badge" href="index.html#d04" data-tooltip="D04: Button-Hoehe und Innenpadding kommen aus der Button-Komponente. Standardaktionen nutzen Default/Medium.">D04 Buttons</a>
<span class="button secondary">Filter</span>
<span class="button">Create task</span>
</div>
</div>
<div class="preview-stat-grid">
<div class="preview-card">
<div class="preview-stat-grid rule-scope">
<a class="rule-badge rule-anchor" href="index.html#d02" data-tooltip="D02: Grid/Card Gap ist standardmaessig 16px und kann nur in kompakten Teilbereichen auf 12px reduziert werden.">D02 Grid Gap</a>
<div class="preview-card rule-scope">
<a class="rule-badge rule-anchor" href="index.html#d02" data-tooltip="D02: Card/Surface Padding bleibt 16px; es wird nicht pro Screen neu erfunden.">D02 Card Padding</a>
<p class="small">Open leads</p>
<div class="stat-value">128</div>
<p class="preview-meta">+12 this week</p>
@@ -761,7 +1011,8 @@
</div>
<div class="preview-workspace-grid">
<section class="preview-card">
<section class="preview-card rule-scope">
<a class="rule-badge rule-anchor" href="index.html#d02" data-tooltip="D02: Auch groessere Inhaltskarten nutzen 16px Innenpadding und den globalen Grid Gap.">D02 Card</a>
<h3>Recent work</h3>
<p class="preview-meta">Tasks, customers and approvals in one dense page area.</p>
<div class="preview-list">
@@ -789,7 +1040,8 @@
</div>
</section>
<aside class="preview-card">
<aside class="preview-card rule-scope">
<a class="rule-badge rule-anchor" href="index.html#d09" data-tooltip="D09: Empty/Error/No-Permission waeren inline States in genau diesem Inhaltsbereich, nicht automatisch ein Modal.">D09 States</a>
<h3>Workspace health</h3>
<p class="preview-meta">
Kompakte Settings- und Statusflaeche mit denselben
@@ -803,7 +1055,8 @@
</aside>
</div>
<section class="preview-card">
<section class="preview-card rule-scope">
<a class="rule-badge rule-anchor" href="index.html#d06" data-tooltip="D06: Tabellen-Dichte, Row Height und Zellpadding kommen aus der Table-Komponente.">D06 Table</a>
<div class="preview-page-head">
<div>
<h3>Employee access</h3>
@@ -852,7 +1105,8 @@
</div>
</section>
<section class="preview-card preview-editor-card">
<section class="preview-card preview-editor-card rule-scope">
<a class="rule-badge rule-anchor" href="index.html#d07" data-tooltip="D07/D08: Diese Flaeche simuliert die groessere Dialog-Variante. 32px kommt aus der Dialog-Komponente, nicht aus frei gesetztem Screen-Padding.">D07/D08 Dialog</a>
<h3>Dialog 32px Variante</h3>
<p class="preview-meta">
Dieser Modus macht nur diese grosse Arbeitsflaeche innen
@@ -866,7 +1120,8 @@
<span>Projects</span>
<span>Reports</span>
</div>
<div class="form">
<div class="form rule-scope">
<a class="rule-badge rule-anchor" href="index.html#d05" data-tooltip="D05: Komplette Field-Komponenten stehen 16px auseinander; Label/Help/Error gehoeren in die Komponente.">D05 Field Gap</a>
<div class="field">
<label>Role name</label>
<input value="Operations Lead" />
Tickets/Fertige Tickets/D-D0b Layout Standards.md
+3 -3
View File
@@ -24,9 +24,9 @@ HTML-Preview: [D-D0b Layout Preview](../../02%20Wireframes/D0%20Foundation/D-D0b
Full-Page-Preview: [D-D0b Full Page Preview](../../02%20Wireframes/D0%20Foundation/D-D0b%20Layout%20Standards/Preview/preview.html)
Lokale Arbeitskopie der Preview: `99 Temp/D-D0b Layout Preview/index.html`
Lokale Arbeitskopien der Preview: `99 Temp/D-D0b Layout Preview/index.html` und `99 Temp/D-D0b Layout Preview/preview.html`
Hinweis: Die HTML-Preview hat einen ausklappbaren Standards-Drawer und optionale Rule-Hints, damit die angewendeten Regeln direkt im Beispiel auffindbar sind.
Hinweis: Die Full-Page-Preview hat einen ausklappbaren Standards-Drawer und optionale Rule-Hints, damit die angewendeten Regeln direkt in der realistischen Beispielseite auffindbar sind.
## Kurzfassung
@@ -47,7 +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.
- Regel-Inspector in der Full-Page-Preview ergaenzt, damit D01-D09 im realistischen Beispiel sichtbar und anspringbar sind.
## Validiert