Clean up D-D0b preview references

This commit is contained in:
david committed 2026-07-03 00:34:30 +02:00
1 parent a18acf4900
commit 91180a82bf
6 files changed
+968 -49

No files matched your search

@@ -3,7 +3,7 @@ kind: final-planning
ticket: D-D0b
area: Layout Standards
status: Abgeschlossen
stand: 2026-07-02
stand: 2026-07-03
---
# D-D0b Layout Standards
@@ -18,11 +18,13 @@ Source of Truth fuer spaetere Screen-Arbeit:
- [Subframe UI Standards / Entscheidungen](<../../../04 Standards/Subframe UI Standards/02_Entscheidungen.md>)
- [D-D0b Backlog](<D-D0b Backlog.md>)
Lokale Vorschau:
HTML-Preview:
- Versioniertes Ticket-Artefakt: [D-D0b Layout Preview](<../../../Tickets/Fertige Tickets/Assets/D-D0b-Layout-Preview.html>)
- `99 Temp/D-D0b Layout Preview/index.html`
- Die Preview bleibt als lokale Arbeitskopie erhalten, ist aber kein Source of Truth.
- 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`
- Die versionierte Preview liegt bewusst im D-D0b-Ordner, damit sie zusammen mit den Layout-Entscheidungen auffindbar bleibt.
- 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.
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>D-D0b Layout Preview Lab</title>
<title>D-D0b Layout Preview</title>
<style>
:root {
--bg: #f6f8fa;
@@ -1988,29 +1988,32 @@
<body>
<header class="topbar">
<div class="brand">
<div class="mark">D0</div>
<span>D-D0b Layout Preview Lab</span>
<div class="mark">D0b</div>
<span>D-D0b Layout Preview</span>
</div>
<div class="topbar-actions">
<button class="marker-toggle" id="gapToggle" type="button" aria-pressed="true">
<span>Spacing Tiles</span>
<span class="marker-toggle-switch" aria-hidden="true"></span>
</button>
<a class="button sm secondary" href="preview.html">Preview</a>
<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>
<a class="button sm secondary" href="#d02">D02</a>
<a class="button sm secondary" href="#d03">D03</a>
<a class="button sm secondary" href="#d04">D04</a>
<a class="button sm secondary" href="#d05">D05</a>
<a class="button sm secondary" href="#d06">D06</a>
<a class="button sm secondary" href="#d07">D07</a>
<a class="button sm secondary" href="#d08">D08</a>
<a class="button sm secondary" href="#d09">D09</a>
</div>
</header>
<main class="page">
<section class="hero">
<section id="overview" class="hero">
<div>
<p class="eyebrow">Local reference preview</p>
<p class="eyebrow">Versioned reference preview</p>
<h1>Layout, spacing and sizing decisions</h1>
<p class="subtitle">
This page preserves the visual examples used for D-D0b. It helps
@@ -2019,9 +2022,9 @@
</p>
</div>
<div class="note">
Kept intentionally: this local HTML preview remains available for
visual review. Final rules live in the Obsidian Markdown files and in
the Subframe UI Standards.
Kept intentionally: this HTML preview is stored with the D-D0b
planning files for visual review. Final rules live in the Obsidian
Markdown files and in the Subframe UI Standards.
</div>
</section>
@@ -2038,7 +2041,7 @@
</div>
<div class="decision-map">
<a class="decision-link" href="preview.html">
<strong>Preview Page</strong>
<strong>Full Page Preview</strong>
<span>Oeffnet eine eigene Full-Page-Dummyseite mit App Shell und Layout-Umschaltern.</span>
</a>
<a class="decision-link" href="#d01">
@@ -2075,7 +2078,7 @@
</a>
<a class="decision-link" href="#d09">
<strong>D09 States</strong>
<span>Wie viel Platz bekommen Empty, Error und No-Permission?</span>
<span>States sind inline Komponenten-Zustaende, keine eigenen Layout-Screens.</span>
</a>
</div>
</section>
@@ -2085,8 +2088,9 @@
<div class="section-copy">
<h2>D01 Grundraster / Spacing Scale</h2>
<p class="section-desc">
Candidate rhythm based on 4/8px multiples. Use this to decide
which gaps feel too tight, balanced or too loose.
Validierter 8px-Rhythmus mit erlaubten Zwischenwerten. Nutze
diese Ansicht als visuelle Referenz fuer die freigegebenen
Layout-Abstaende.
</p>
</div>
</div>
@@ -2642,10 +2646,10 @@
<p class="decision-kicker">Was du festlegst</p>
<h3>Wie eng stehen Textbloecke und der erste Inhalt zusammen?</h3>
<p>
Diese Entscheidung ist noch nicht final. D03 betrifft nur die
vertikalen Gaps zwischen gerenderten Textbloecken und Inhalt.
Die Text-Token bleiben eigene Token-Regeln, beeinflussen aber die
optische Hoehe des Blocks.
D03 ist validiert. Die Regel betrifft die vertikalen Gaps
zwischen gerenderten Textbloecken und Inhalt. Beschreibende
Page- und Section-Texte muessen 150%-Texttokens nutzen, weil
die Line-height die optische Hoehe des Blocks beeinflusst.
</p>
<div class="rhythm-legend">
<span class="value-chip">Title -> Description</span>
@@ -2996,7 +3000,7 @@
<section id="d05" class="section">
<div class="section-head">
<div class="section-copy">
<h2>D05 Form composition</h2>
<h2>D05 Form Layout Gap</h2>
<p class="section-desc">
Formular-Layout meint hier nur den Abstand zwischen kompletten
Field-Komponenten. Label, Beschreibung, Control und Message
@@ -3177,10 +3181,11 @@
<section id="d07" class="section">
<div class="section-head">
<div class="section-copy">
<h2>D07 Dialog width candidates</h2>
<h2>D07 Dialog Sizes</h2>
<p class="section-desc">
These are static width previews. In Subframe this must still be
built with real Dialog layouts.
Validierte Breiten fuer zentrierte Dialoge und Fullscreen
Dialoge. In Subframe muessen diese Beispiele mit echten Dialog
Layouts gebaut werden.
</p>
</div>
</div>
@@ -0,0 +1,885 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>D-D0b Full Page Preview</title>
<style>
:root {
--bg: #f6f8fa;
--surface: #ffffff;
--surface-subtle: #f1f4f7;
--border: #dce3ea;
--border-strong: #b8c4cf;
--text: #172635;
--muted: #5c6f82;
--muted-2: #74879a;
--primary: #2458d3;
--danger: #b42318;
--success: #147a46;
--warning: #9a5b00;
--radius: 8px;
--control-h: 40px;
font-family:
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", sans-serif;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-size: 14px;
line-height: 1.5;
}
button,
input,
select,
textarea {
font: inherit;
}
h1,
h2,
h3,
p {
margin: 0;
}
.preview-page {
--preview-page-pad: 24px;
--preview-card-pad: 16px;
--preview-gap: 16px;
--preview-section-gap: 24px;
--preview-editor-pad: 16px;
--preview-shell-sidebar: 232px;
min-height: 100vh;
background: #fff;
}
.preview-page:has(#density-compact:checked) {
--preview-page-pad: 24px;
--preview-card-pad: 16px;
--preview-gap: 12px;
--preview-section-gap: 24px;
--preview-editor-pad: 16px;
}
.preview-page:has(#density-standard:checked) {
--preview-page-pad: 24px;
--preview-card-pad: 16px;
--preview-gap: 16px;
--preview-section-gap: 24px;
--preview-editor-pad: 16px;
}
.preview-page:has(#density-editor:checked) {
--preview-page-pad: 24px;
--preview-card-pad: 16px;
--preview-gap: 16px;
--preview-section-gap: 24px;
--preview-editor-pad: 32px;
}
.preview-config {
position: sticky;
top: 0;
z-index: 20;
display: grid;
gap: 16px;
padding: 16px 24px;
border-bottom: 1px solid var(--border);
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(10px);
}
.preview-config-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
}
.preview-config-copy {
max-width: 760px;
}
.eyebrow {
margin: 0 0 8px;
color: var(--muted-2);
font-size: 12px;
font-weight: 700;
letter-spacing: 0;
text-transform: uppercase;
}
.preview-config h1 {
font-size: 24px;
line-height: 1.25;
}
.section-desc {
margin-top: 6px;
color: var(--muted);
}
.preview-controls {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.control-group {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px;
border: 1px solid var(--border);
border-radius: 8px;
background: #fff;
}
.control-group legend {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
white-space: nowrap;
}
.segmented-option {
position: relative;
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 0 10px;
border-radius: 6px;
color: var(--muted);
font-size: 13px;
font-weight: 650;
cursor: default;
}
.segmented-option input {
position: absolute;
inset: 0;
opacity: 0;
}
.segmented-option:has(input:checked) {
background: var(--text);
color: #fff;
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--control-h);
padding: 0 16px;
border: 1px solid transparent;
border-radius: 6px;
background: var(--primary);
color: #fff;
font-weight: 650;
text-decoration: none;
cursor: default;
}
.button.secondary {
border-color: var(--border-strong);
background: #fff;
color: var(--text);
}
.button.sm {
min-height: 32px;
padding: 0 12px;
font-size: 13px;
}
.preview-values {
display: grid;
gap: 12px;
padding: 16px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface-subtle);
}
.preview-values-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
}
.small {
color: var(--muted);
font-size: 12px;
}
.value-set {
display: none;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
}
.preview-page:has(#shell-on:checked) .values-shell-on,
.preview-page:has(#shell-off:checked) .values-shell-off,
.preview-page:has(#density-standard:checked) .values-density-standard,
.preview-page:has(#density-compact:checked) .values-density-compact,
.preview-page:has(#density-editor:checked) .values-density-editor {
display: grid;
}
.value-cell {
display: grid;
gap: 2px;
min-height: 56px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: #fff;
}
.value-cell span {
color: var(--muted);
font-size: 12px;
}
.value-cell strong {
font-size: 13px;
}
.app-preview {
display: grid;
grid-template-columns: var(--preview-shell-sidebar) minmax(0, 1fr);
min-height: calc(100vh - 260px);
background: #fff;
}
.preview-page:has(#shell-off:checked) .app-preview {
grid-template-columns: minmax(0, 1fr);
}
.preview-page:has(#shell-off:checked) .preview-sidebar,
.preview-page:has(#shell-off:checked) .preview-app-topbar {
display: none;
}
.preview-sidebar {
display: flex;
flex-direction: column;
gap: 16px;
padding: 16px;
border-right: 1px solid var(--border);
background: #f8fafc;
}
.workspace-switcher {
display: flex;
align-items: center;
gap: 10px;
min-height: 40px;
}
.workspace-mark {
display: grid;
width: 32px;
height: 32px;
place-items: center;
border-radius: 8px;
background: var(--text);
color: #fff;
font-size: 12px;
font-weight: 800;
}
.workspace-copy {
display: grid;
min-width: 0;
}
.workspace-copy strong,
.workspace-copy span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.workspace-copy span {
color: var(--muted);
font-size: 12px;
}
.preview-nav {
display: grid;
gap: 4px;
}
.preview-nav a {
display: flex;
align-items: center;
gap: 10px;
min-height: 36px;
padding: 0 10px;
border-radius: 6px;
color: var(--muted);
text-decoration: none;
}
.preview-nav a.active {
background: #fff;
color: var(--text);
box-shadow: 0 0 0 1px var(--border);
}
.nav-icon {
width: 16px;
height: 16px;
border: 1px solid currentColor;
border-radius: 4px;
opacity: 0.68;
}
.preview-app-main {
min-width: 0;
background: var(--bg);
}
.preview-app-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 56px;
padding: 0 16px;
border-bottom: 1px solid var(--border);
background: #fff;
}
.preview-search {
width: min(420px, 100%);
min-height: var(--control-h);
padding: 0 12px;
border: 1px solid var(--border-strong);
border-radius: 6px;
background: #fff;
color: var(--text);
}
.preview-user-area {
display: flex;
align-items: center;
gap: 8px;
}
.avatar-dot {
width: 32px;
height: 32px;
border-radius: 999px;
background: linear-gradient(135deg, #dbe4ff, #bdd8ff);
border: 1px solid var(--border);
}
.preview-page-content {
display: grid;
gap: var(--preview-gap);
padding: var(--preview-page-pad);
}
.preview-page-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.preview-page-head h2 {
font-size: 24px;
line-height: 1.25;
}
.preview-page-actions,
.toolbar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.preview-stat-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--preview-gap);
}
.preview-card {
padding: var(--preview-card-pad);
border: 1px solid var(--border);
border-radius: 8px;
background: #fff;
}
.preview-card h3 {
font-size: 15px;
}
.preview-editor-card {
padding: var(--preview-editor-pad);
}
.preview-meta {
color: var(--muted);
font-size: 12px;
}
.stat-value {
margin-top: 8px;
font-size: 24px;
font-weight: 750;
line-height: 1.2;
}
.preview-workspace-grid {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.9fr);
gap: var(--preview-gap);
}
.preview-list {
display: grid;
gap: 12px;
margin-top: 12px;
}
.preview-list-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 16px;
min-height: 48px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: #fff;
}
.preview-list-row strong {
display: block;
}
.pill {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 0 8px;
border-radius: 999px;
background: #e8f6ee;
color: var(--success);
font-size: 12px;
font-weight: 700;
}
.pill.warning {
background: #fff2d6;
color: var(--warning);
}
.preview-table {
overflow: hidden;
margin-top: 12px;
border: 1px solid var(--border);
border-radius: 8px;
}
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
height: 52px;
padding: 0 16px;
border-bottom: 1px solid var(--border);
text-align: left;
vertical-align: middle;
}
th {
color: var(--muted);
font-size: 12px;
font-weight: 700;
}
tr:last-child td {
border-bottom: 0;
}
.preview-editor-body {
display: grid;
grid-template-columns: 180px minmax(0, 1fr);
gap: var(--preview-gap);
margin-top: 12px;
}
.preview-editor-side {
display: grid;
gap: 6px;
align-content: start;
}
.preview-editor-side span {
padding: 8px 10px;
border-radius: 6px;
color: var(--muted);
}
.preview-editor-side span.active {
background: var(--surface-subtle);
color: var(--text);
font-weight: 650;
}
.form {
display: grid;
gap: 20px;
}
.field {
display: grid;
gap: 8px;
}
label {
color: var(--text);
font-size: 13px;
font-weight: 650;
}
input,
textarea {
width: 100%;
min-height: var(--control-h);
padding: 0 12px;
border: 1px solid var(--border-strong);
border-radius: 6px;
background: #fff;
color: var(--text);
}
textarea {
min-height: 88px;
padding-top: 10px;
resize: vertical;
}
@media (max-width: 980px) {
.preview-config-head,
.value-set,
.preview-stat-grid,
.preview-workspace-grid,
.preview-editor-body {
grid-template-columns: 1fr;
}
.preview-config-head {
display: grid;
}
}
</style>
</head>
<body class="preview-page">
<section class="preview-config">
<div class="preview-config-head">
<div class="preview-config-copy">
<p class="eyebrow">Full-page preview</p>
<h1>D-D0b Preview Page</h1>
<p class="section-desc">
Eigene Full-Page-Vorschau fuer App-Shell-Breite, Page Padding,
Card Padding und Grid-Gaps. Diese Seite ist bewusst von der
D-Entscheidungsseite getrennt.
</p>
</div>
<a class="button sm secondary" href="index.html#d02">Zurueck zu D02</a>
</div>
<div class="preview-controls">
<fieldset class="control-group">
<legend>App Shell</legend>
<label class="segmented-option">
<input id="shell-on" type="radio" name="shell" checked />
Mit App Shell
</label>
<label class="segmented-option">
<input id="shell-off" type="radio" name="shell" />
Ohne App Shell
</label>
</fieldset>
<fieldset class="control-group">
<legend>Layout-Dichte</legend>
<label class="segmented-option">
<input id="density-standard" type="radio" name="density" checked />
Admin Standard
</label>
<label class="segmented-option">
<input id="density-compact" type="radio" name="density" />
Kompakt
</label>
<label class="segmented-option">
<input id="density-editor" type="radio" name="density" />
Dialog 32px
</label>
</fieldset>
</div>
<div class="preview-values">
<div class="preview-values-head">
<strong>Aktive Layout-Daten</strong>
<span class="small">Diese Werte aendern sich durch die Umschalter.</span>
</div>
<div class="value-set values-shell-on">
<div class="value-cell"><span>Shell</span><strong>An</strong></div>
<div class="value-cell"><span>Sidebar</span><strong>232px</strong></div>
<div class="value-cell"><span>Topbar</span><strong>56px sichtbar</strong></div>
<div class="value-cell"><span>Content-Breite</span><strong>Viewport minus 232px</strong></div>
<div class="value-cell"><span>Bewertung</span><strong>Produktansicht</strong></div>
</div>
<div class="value-set values-shell-off">
<div class="value-cell"><span>Shell</span><strong>Aus</strong></div>
<div class="value-cell"><span>Sidebar</span><strong>0px</strong></div>
<div class="value-cell"><span>Topbar</span><strong>ausgeblendet</strong></div>
<div class="value-cell"><span>Content-Breite</span><strong>volle Preview-Breite</strong></div>
<div class="value-cell"><span>Bewertung</span><strong>Canvas/Modal-Kontext</strong></div>
</div>
<div class="value-set values-density-standard">
<div class="value-cell"><span>Modus</span><strong>Admin Standard</strong></div>
<div class="value-cell"><span>Page Padding</span><strong>24px</strong></div>
<div class="value-cell"><span>Card Padding</span><strong>16px</strong></div>
<div class="value-cell"><span>Grid/Card Gap</span><strong>16px</strong></div>
<div class="value-cell"><span>Detail-/Editor Padding</span><strong>16px</strong></div>
</div>
<div class="value-set values-density-compact">
<div class="value-cell"><span>Modus</span><strong>Kompakt</strong></div>
<div class="value-cell"><span>Page Padding</span><strong>24px min</strong></div>
<div class="value-cell"><span>Card Padding</span><strong>16px</strong></div>
<div class="value-cell"><span>Grid/Card Gap</span><strong>12px</strong></div>
<div class="value-cell"><span>Detail-/Editor Padding</span><strong>16px</strong></div>
</div>
<div class="value-set values-density-editor">
<div class="value-cell"><span>Modus</span><strong>Dialog 32px</strong></div>
<div class="value-cell"><span>Page Padding</span><strong>24px</strong></div>
<div class="value-cell"><span>Card Padding</span><strong>16px</strong></div>
<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>
</section>
<div class="app-preview">
<aside class="preview-sidebar">
<div class="workspace-switcher">
<div class="workspace-mark">HG</div>
<div class="workspace-copy">
<strong>HiveGrid Demo</strong>
<span>Workspace</span>
</div>
</div>
<nav class="preview-nav" aria-label="Preview navigation">
<a href="#" class="active"><span class="nav-icon"></span>Overview</a>
<a href="#"><span class="nav-icon"></span>Customers</a>
<a href="#"><span class="nav-icon"></span>Projects</a>
<a href="#"><span class="nav-icon"></span>Tasks</a>
<a href="#"><span class="nav-icon"></span>Reports</a>
<a href="#"><span class="nav-icon"></span>Settings</a>
</nav>
</aside>
<div class="preview-app-main">
<header class="preview-app-topbar">
<input class="preview-search" value="Search anything" aria-label="Search anything" />
<div class="preview-user-area">
<span class="button sm secondary">New</span>
<span class="button sm secondary">Export</span>
<div class="avatar-dot" aria-hidden="true"></div>
</div>
</header>
<main class="preview-page-content">
<div class="preview-page-head">
<div>
<p class="eyebrow">Workspace overview</p>
<h2>Operations dashboard</h2>
<p class="section-desc">
Beispielseite fuer App-Shell-Breite, Page Padding,
Card-Padding und Grid-Gaps im laufenden Produktkontext.
</p>
</div>
<div class="preview-page-actions">
<span class="button secondary">Filter</span>
<span class="button">Create task</span>
</div>
</div>
<div class="preview-stat-grid">
<div class="preview-card">
<p class="small">Open leads</p>
<div class="stat-value">128</div>
<p class="preview-meta">+12 this week</p>
</div>
<div class="preview-card">
<p class="small">Active projects</p>
<div class="stat-value">42</div>
<p class="preview-meta">8 need review</p>
</div>
<div class="preview-card">
<p class="small">Team workload</p>
<div class="stat-value">76%</div>
<p class="preview-meta">Balanced</p>
</div>
<div class="preview-card">
<p class="small">Pending approvals</p>
<div class="stat-value">9</div>
<p class="preview-meta">3 overdue</p>
</div>
</div>
<div class="preview-workspace-grid">
<section class="preview-card">
<h3>Recent work</h3>
<p class="preview-meta">Tasks, customers and approvals in one dense page area.</p>
<div class="preview-list">
<div class="preview-list-row">
<div>
<strong>Review onboarding workspace</strong>
<span class="preview-meta">Assigned to Admin Team</span>
</div>
<span class="pill warning">Due today</span>
</div>
<div class="preview-list-row">
<div>
<strong>Prepare customer import</strong>
<span class="preview-meta">CRM setup</span>
</div>
<span class="pill">Active</span>
</div>
<div class="preview-list-row">
<div>
<strong>Approve role changes</strong>
<span class="preview-meta">Security settings</span>
</div>
<span class="pill warning">Review</span>
</div>
</div>
</section>
<aside class="preview-card">
<h3>Workspace health</h3>
<p class="preview-meta">
Kompakte Settings- und Statusflaeche mit denselben
D02-Basiswerten wie die Standardseite.
</p>
<div class="preview-list">
<div class="preview-list-row"><span>Members</span><strong>24</strong></div>
<div class="preview-list-row"><span>2FA coverage</span><strong>91%</strong></div>
<div class="preview-list-row"><span>Open invites</span><strong>3</strong></div>
</div>
</aside>
</div>
<section class="preview-card">
<div class="preview-page-head">
<div>
<h3>Employee access</h3>
<p class="preview-meta">Table area for judging page width inside and outside the shell.</p>
</div>
<div class="toolbar">
<input style="width: 220px" value="Search employees" />
<span class="button sm secondary">Role</span>
</div>
</div>
<div class="preview-table">
<table>
<thead>
<tr>
<th>Name</th>
<th>Role</th>
<th>Department</th>
<th>Status</th>
<th style="text-align: right">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>David Bertram</td>
<td>Admin</td>
<td>Operations</td>
<td><span class="pill">Active</span></td>
<td style="text-align: right">...</td>
</tr>
<tr>
<td>Anna Keller</td>
<td>Finance Lead</td>
<td>Finance</td>
<td><span class="pill">Active</span></td>
<td style="text-align: right">...</td>
</tr>
<tr>
<td>Max Hoffmann</td>
<td>Employee</td>
<td>Support</td>
<td><span class="pill warning">Pending</span></td>
<td style="text-align: right">...</td>
</tr>
</tbody>
</table>
</div>
</section>
<section class="preview-card preview-editor-card">
<h3>Dialog 32px Variante</h3>
<p class="preview-meta">
Dieser Modus macht nur diese grosse Arbeitsflaeche innen
groesser. Das steht fuer die groessere Subframe-Dialog-Variante,
nicht fuer frei gesetztes Padding auf normalen Surfaces.
</p>
<div class="preview-editor-body">
<div class="preview-editor-side">
<span class="active">Role</span>
<span>Contacts</span>
<span>Projects</span>
<span>Reports</span>
</div>
<div class="form">
<div class="field">
<label>Role name</label>
<input value="Operations Lead" />
</div>
<div class="field">
<label>Description</label>
<textarea>Can review operations, assign team tasks and manage project handoffs.</textarea>
</div>
</div>
</div>
</section>
</main>
</div>
</div>
</body>
</html>
@@ -51,6 +51,32 @@ Offen:
## Verlauf
### 2026-07-03 00:32:55 Europe/Berlin - D-D0b Preview und Abschlussstruktur bereinigt
Kontext:
- David hat kritisiert, dass die HTML-Preview nicht sauber auffindbar war und in der Navigation D04/D09 fehlten.
- Die finale D-D0b-Datei sollte nicht mehr als Brainstorming-Datei erscheinen.
- Backlog, Entscheidungen und Preview-Referenzen sollten eindeutiger sortiert sein.
Betroffene Dateien:
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md`
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Backlog.md`
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/Preview/index.html`
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/Preview/preview.html`
- `Tickets/Fertige Tickets/D-D0b Layout Standards.md`
- [[AI/08_AI-Change-History]]
Aenderungen:
- D-D0b-Hauptdatei von Brainstorming auf finalen Standards-Dateinamen umgestellt.
- Preview-Dateien in den D-D0b-Ordner verschoben, damit sie zusammen mit den Layout-Entscheidungen auffindbar sind.
- Top-Navigation der HTML-Preview auf D01 bis D09 vervollstaendigt.
- Alte nicht-finale Preview-Texte bereinigt.
- D09 in der Preview als State-/Component-Ownership statt als Padding-Frage beschrieben.
- Ticket-Handoff auf die neuen Preview- und Standards-Pfade aktualisiert.
Offen:
- Keine.
### 2026-07-03 00:20:15 Europe/Berlin - Subframe-MCP Nutzung der Layout-Standards festgeschrieben
Kontext:
@@ -59,12 +85,12 @@ Kontext:
Betroffene Dateien:
- `AI README.md`
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Brainstorming.md`
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md`
- `04 Standards/Subframe UI Standards/Layout/README.md`
- [[AI/07_AI-References]]
- [[AI/08_AI-Change-History]]
- `Tickets/Fertige Tickets/D-D0b Layout Standards.md`
- `Tickets/Fertige Tickets/Assets/D-D0b-Layout-Preview.html`
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/Preview/index.html`
Aenderungen:
- Pflichtregel ergaenzt, dass Subframe-MCP-Prompts und Edits die validierten Layout-Standards als aktive Referenz nutzen muessen.
@@ -83,7 +109,7 @@ Kontext:
- Backlog-Punkte sollten aus der Abschlussdoku in eine eigene Seite ausgelagert werden.
Betroffene Dateien:
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Brainstorming.md`
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md`
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Backlog.md`
- `04 Standards/Subframe UI Standards/Layout/README.md`
- [[02_Entscheidungen]]
@@ -112,7 +138,7 @@ Kontext:
- Die Preview sollte 0px sichtbar machen, ohne selbst Abstand zu erzeugen.
Betroffene Dateien:
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Brainstorming.md`
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md`
- `Layout/README.md`
- [[02_Entscheidungen]]
- [[AI/08_AI-Change-History]]
@@ -136,7 +162,7 @@ Kontext:
- D03 Text-Rhythmus musste in der Preview sichtbarer und verstaendlicher werden.
Betroffene Dateien:
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Brainstorming.md`
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md`
- `Layout/README.md`
- [[02_Entscheidungen]]
- [[AI/08_AI-Change-History]]
@@ -160,7 +186,7 @@ Kontext:
- Blockierende Error-/Result-Dialoge sollen spaeter separat als Overlay-/Feedback-Komponenten betrachtet werden.
Betroffene Dateien:
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Brainstorming.md`
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md`
- [[06_Backlog]]
- [[AI/08_AI-Change-History]]
@@ -181,7 +207,7 @@ Kontext:
- Mehrzeilige Texte nutzen die 150%-Texttoken, wodurch Textbloecke selbst hoeher werden.
Betroffene Dateien:
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Brainstorming.md`
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md`
- `Layout/README.md`
- [[02_Entscheidungen]]
- [[06_Backlog]]
@@ -205,7 +231,7 @@ Kontext:
- Als obere Grenze wurde die Breite eines 2K-Monitors abzüglich des validierten aeusseren Dialogrands verwendet.
Betroffene Dateien:
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Brainstorming.md`
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md`
- `Layout/README.md`
- [[02_Entscheidungen]]
- [[AI/08_AI-Change-History]]
@@ -226,7 +252,7 @@ Kontext:
- Fullscreen Dialog soll Fill in Breite und Hoehe nutzen, aber mit sichtbarem aeusserem Rand.
Betroffene Dateien:
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Brainstorming.md`
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md`
- `Layout/README.md`
- [[02_Entscheidungen]]
- [[AI/08_AI-Change-History]]
@@ -267,7 +293,7 @@ Kontext:
- Die Definition ist Voraussetzung, bevor Dialogbreiten sinnvoll validiert werden koennen.
Betroffene Dateien:
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Brainstorming.md`
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md`
- `Layout/README.md`
- [[02_Entscheidungen]]
- [[AI/08_AI-Change-History]]
@@ -291,7 +317,7 @@ Kontext:
- Stattdessen bekommt die Subframe-`Dialog`-Komponente zwei Varianten: 16px Default und 32px groesser/ruhiger.
Betroffene Dateien:
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Brainstorming.md`
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md`
- `Layout/README.md`
- [[02_Entscheidungen]]
- [[AI/08_AI-Change-History]]
@@ -314,7 +340,7 @@ Kontext:
- 32px Innenabstand sollte zu diesem Zeitpunkt nicht frei als Standard gelten. Kurz danach wurde er als eigene Subframe-`Dialog`-Variante validiert.
Betroffene Dateien:
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Brainstorming.md`
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md`
- `Layout/README.md`
- [[02_Entscheidungen]]
- [[AI/08_AI-Change-History]]
@@ -338,7 +364,7 @@ Kontext:
- Detail-/Editor-Surface Padding wurde zu diesem Zeitpunkt noch als offener Sonderfall notiert und am 2026-07-02 auf 16px als Standard praezisiert.
Betroffene Dateien:
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Brainstorming.md`
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md`
- `Layout/README.md`
- [[02_Entscheidungen]]
- [[AI/08_AI-Change-History]]
@@ -364,7 +390,7 @@ Kontext:
- Mobile soll aus der aktiven Preview entfernt bleiben und grosse Detail-/Editorflaechen sind noch unklar.
Betroffene Dateien:
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Brainstorming.md`
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md`
- `Layout/README.md`
- [[02_Entscheidungen]]
- [[AI/08_AI-Change-History]]
@@ -389,7 +415,7 @@ Kontext:
- David hat entschieden, Mobile vorerst nicht in D02 zu validieren, sondern in den Backlog zu legen.
Betroffene Dateien:
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Brainstorming.md`
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md`
- [[06_Backlog]]
- [[AI/08_AI-Change-History]]
- `99 Temp/D-D0b Layout Preview/index.html`
@@ -410,7 +436,7 @@ Kontext:
- Gleichzeitig wurde geklaert, dass Layout-Standards nicht gegen bestehende Subframe-Komponenten-Defaults arbeiten sollen.
Betroffene Dateien:
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Brainstorming.md`
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md`
- `Layout/README.md`
- [[02_Entscheidungen]]
- [[AI/08_AI-Change-History]]
@@ -471,7 +497,7 @@ Betroffene Dateien:
- `AI README.md`
- `01 Regeln/Obsidian Struktur.md`
- `01 Regeln/Screen Agent Workflow.md`
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Brainstorming.md`
- `02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md`
Aenderungen:
- HiveGrid-Kontext, Zweck, Abgrenzung und Aenderungsschutz fuer das Subframe UI Standards dokumentiert.
@@ -5,14 +5,14 @@ ticket: D-D0b
area: Foundation / Layout Standards
status: Fertig / Review
repo: https://git.tool-ctrl.de/david/Hivegrid-Wireframes
stand: 2026-07-02
stand: 2026-07-03
---
# D-D0b Layout Standards
Repo: https://git.tool-ctrl.de/david/Hivegrid-Wireframes
Arbeitsbereich im Repo: [D-D0b Layout Standards](../../02%20Wireframes/D0%20Foundation/D-D0b%20Layout%20Standards/D-D0b%20Layout%20Brainstorming.md)
Arbeitsbereich im Repo: [D-D0b Layout Standards](../../02%20Wireframes/D0%20Foundation/D-D0b%20Layout%20Standards/D-D0b%20Layout%20Standards.md)
Backlog: [D-D0b Backlog](../../02%20Wireframes/D0%20Foundation/D-D0b%20Layout%20Standards/D-D0b%20Backlog.md)
@@ -20,7 +20,9 @@ Dauerhafte Standards: [Subframe UI Standards / Layout](../../04%20Standards/Subf
Entscheidungslog: [Subframe UI Standards / Entscheidungen](../../04%20Standards/Subframe%20UI%20Standards/02_Entscheidungen.md)
HTML-Preview-Artefakt: [D-D0b Layout Preview](<Assets/D-D0b-Layout-Preview.html>)
HTML-Preview: [D-D0b Layout Preview](../../02%20Wireframes/D0%20Foundation/D-D0b%20Layout%20Standards/Preview/index.html)
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`
@@ -30,7 +32,7 @@ Fuer `D-D0b` wurden die grundlegenden Layout- und Composition-Standards fuer Hiv
Die HTML-Preview bleibt lokal erhalten, ist aber nicht Source of Truth. Die verbindlichen Regeln stehen in den Markdown-Dateien.
Eine bereinigte Kopie der Preview liegt als Ticket-Artefakt im Repo, damit sie spaeter direkt aus dem fertigen Ticket heraus referenziert werden kann.
Eine bereinigte Kopie der Preview liegt versioniert im D-D0b-Ordner, damit sie zusammen mit den Layout-Entscheidungen auffindbar bleibt und aus diesem Ticket heraus referenziert werden kann.
## Gemacht
@@ -42,7 +44,7 @@ Eine bereinigte Kopie der Preview liegt als Ticket-Artefakt im Repo, damit sie s
- Dialog-interne Gaps validiert.
- Backlog-Punkte in eigene Backlog-Datei ausgelagert.
- Lokale Preview behalten und als lokale Referenzhilfe markiert.
- HTML-Preview als versioniertes Ticket-Artefakt abgelegt.
- HTML-Preview und Full-Page-Preview als versionierte Referenzdateien im D-D0b-Ordner abgelegt.
## Validiert
-1
View File
@@ -7,7 +7,6 @@ Dieser Bereich ist der Handoff-Index fuer Ticket-Zusammenfassungen.
| Pfad | Zweck |
|---|---|
| `Fertige Tickets/` | fertige oder handofffaehige Ticket-Zusammenfassungen |
| `Fertige Tickets/Assets/` | referenzierbare Zusatzartefakte fuer fertige Tickets, z. B. HTML-Previews |
## Regel