diff --git a/02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md b/02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md index 52c39aea..4af0f3c7 100644 --- a/02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md +++ b/02 Wireframes/D0 Foundation/D-D0b Layout Standards/D-D0b Layout Standards.md @@ -22,9 +22,9 @@ HTML-Preview: - Versionierte Referenz: [D-D0b Layout Preview]() - Separate Full-Page-Vorschau: [D-D0b Full Page Preview]() -- 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. diff --git a/02 Wireframes/D0 Foundation/D-D0b Layout Standards/Preview/index.html b/02 Wireframes/D0 Foundation/D-D0b Layout Standards/Preview/index.html index 0807cadd..0f51df3b 100644 --- a/02 Wireframes/D0 Foundation/D-D0b Layout Standards/Preview/index.html +++ b/02 Wireframes/D0 Foundation/D-D0b Layout Standards/Preview/index.html @@ -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 @@ Spacing Tiles - Uebersicht Full Page D01 @@ -2219,53 +2028,6 @@ -
- Aktive Layout-Standards -
-

- Klick auf eine Regel springt zur passenden Stelle. Die Inline-Hinweise zeigen, wo diese Regel im Beispiel angewendet wird. -

-
- - D01 Grundraster - Erlaubte Werte: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96. - - - D02 Page/Card/Grid - Page 24px, Card/Surface 16px, Grid Gap 16px, kompakt lokal 12px. - - - D03 Text-Rhythmus - 0px / 24px / 0px / 12px mit 150%-Texttokens fuer Beschreibungen. - - - D04 Button Ownership - Button Default/Medium/36px; Button-Padding kommt aus der Komponente. - - - D05 Forms - Komplette Field-Komponenten stehen standardmaessig 16px auseinander. - - - D06 Table Ownership - Tabellen-Dichte kommt aus der Table-Komponente; Carbon nur als Referenz. - - - D07 Dialog Sizes - XS 420, S 560, M 720, L 1200; Fullscreen max 2512px. - - - D08 Dialog Internal Gaps - Title 8px, Field 16px, Section 24px, Footer Button 8px. - - - D09 States - Empty/Error/No-Permission sind inline Komponenten-Zustaende, keine Modale. - -
-
-
-
@@ -2335,9 +2097,6 @@
Entscheidung D01 -
- D01 angewendet -

Was du festlegst

@@ -2364,10 +2123,6 @@
Entscheidung: Darf HiveGrid den 8px-Rhythmus mit 4px/12px-Ausnahmen nutzen?
-
- D01 Spacing Scale -

Die Skala darunter zeigt die erlaubten Standardwerte visuell. Werte ausserhalb dieser Skala sollen nicht als neue Layout-Standards eingefuehrt werden.

-
@@ -2422,10 +2177,6 @@ dem Rand eines Containers und seinem Inhalt. Tuerkise Flaechen zeigen Gap: Abstand zwischen getrennten Elementen.

-
- D02 sichtbar - D01 Werteskala -
@@ -2446,9 +2197,6 @@
Entscheidung D02 -
- D02 angewendet -

Was du festlegst

@@ -2481,10 +2229,6 @@ Grosse Detail-/Editorflaechen starten ebenfalls mit 16px; 32px ist nur ueber die eigene Dialog-Variante erlaubt.
-
- D02 Page/Card/Grid -

Die Beispiele darunter zeigen bewusst Vergleichswerte. Der blaue Rahmen markiert den validierten Standard; nicht jede gezeigte Variante ist automatisch freigegeben.

-
@@ -2897,9 +2641,6 @@
Entscheidung D03 -
- D03 angewendet -

Was du festlegst

@@ -2938,12 +2679,6 @@ sowie 12px zwischen Section Beschreibung und Inhalt. Page-/Section- Beschreibungen muessen dafuer 150%-Texttokens nutzen.
-
- D03 Text-Rhythmus: 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. -
@@ -3209,9 +2944,6 @@
Komponenten-Ownership -
- D04 Ownership -

Was fuer Screens gilt

@@ -3238,11 +2970,6 @@
Keine eigene D04-Layoutentscheidung: Button Default/Medium 36px fuer Standardaktionen verwenden.
-
- D04 Button Ownership: Screens verwenden fuer - Standardaktionen die Default/Medium-Buttonvariante. Button-Groesse - und Innenpadding werden nicht in Screen-Prompts nachgebaut. -
@@ -3284,9 +3011,6 @@
Entscheidung D05 -
- D05 angewendet -

Was du festlegst

@@ -3314,11 +3038,6 @@
Entschieden: Form Field Gap 16px. Field-Anatomy selbst kommt aus der jeweiligen Komponente.
-
- D05 Form Gap: Komplette Field-Komponenten stehen - standardmaessig 16px auseinander. Label, Help, Error und Control - bleiben Aufgabe der jeweiligen Komponente. -
@@ -3391,9 +3110,6 @@
Komponenten-Ownership -
- D06 Ownership -

Carbon-Referenz

@@ -3423,11 +3139,6 @@
Keine eigene D06-Layoutentscheidung: Table-Komponente nutzen; Carbon als Referenz fuer passende Row-Size-Systematik.
-
- D06 Table Ownership: Screens setzen Tabellen als - Komponente ein. Row-Height, Zellpadding und Tabellen-Dichte werden - dort gepflegt; Carbon dient nur als Referenz fuer die Systematik. -
@@ -3481,9 +3192,6 @@
Entscheidung D07 -
- D07 angewendet -

Was du festlegst

@@ -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`.
-
- D07 Dialog Size: 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. -
@@ -3740,9 +3442,6 @@
Entscheidung D08 validiert -
- D08 angewendet -

Was du festlegst

@@ -3772,11 +3471,6 @@
Entschieden: Balanced wird Standard. Title Gap 8px, Field Gap 16px, Section Gap 24px, Button Gap 8px.
-
- D08 Dialog Internal Gaps: Balanced ist Standard: - 8px Title Gap, 16px Field Gap, 24px Section Gap und 8px Button Gap. - Dialog-Padding selbst kommt aus den Dialog-Varianten. -
@@ -3988,9 +3682,6 @@
Komponenten-Ownership -
- D09 Ownership -

Was hier gemeint ist

@@ -4018,12 +3709,6 @@
Keine neue D09-Layout-Regel: Screens sollen die vorhandenen State-Komponenten verwenden. No-Permission muss bei Bedarf als Komponentenfrage validiert werden.
-
- D09 States: 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. -
@@ -4055,17 +3740,11 @@ diff --git a/02 Wireframes/D0 Foundation/D-D0b Layout Standards/Preview/preview.html b/02 Wireframes/D0 Foundation/D-D0b Layout Standards/Preview/preview.html index 7f9bd695..f1a38ea1 100644 --- a/02 Wireframes/D0 Foundation/D-D0b Layout Standards/Preview/preview.html +++ b/02 Wireframes/D0 Foundation/D-D0b Layout Standards/Preview/preview.html @@ -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); + } } @@ -642,13 +830,21 @@ Dialog 32px + +
+ Hilfen + +
-
-
+
+ Aktive Layout-Daten Diese Werte aendern sich durch die Umschalter. -
+
ShellAn
@@ -689,11 +885,60 @@
Grid/Card Gap16px
Dialog Padding32px Variante
-
+ +
+ Layout-Standards +
+

+ Klick springt zur Regel auf der D-D0b-Entscheidungsseite. Die Badges + in der Preview zeigen, wo die Regel im Beispiel angewendet wird. +

+
+ + D01 Grundraster + Erlaubte Werte: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96. + + + D02 Page/Card/Grid + Page 24px, Card/Surface 16px, Grid Gap 16px, kompakt lokal 12px. + + + D03 Text-Rhythmus + 0px / 24px / 0px / 12px mit 150%-Texttokens fuer Beschreibungen. + + + D04 Button Ownership + Button Default/Medium/36px; Button-Padding kommt aus der Komponente. + + + D05 Forms + Komplette Field-Komponenten stehen standardmaessig 16px auseinander. + + + D06 Table Ownership + Tabellen-Dichte kommt aus der Table-Komponente; Carbon nur als Referenz. + + + D07 Dialog Sizes + XS 420, S 560, M 720, L 1200; Fullscreen max 2512px. + + + D08 Dialog Internal Gaps + Title 8px, Field 16px, Section 24px, Footer Button 8px. + + + D09 States + Empty/Error/No-Permission sind inline Komponenten-Zustaende, keine Modale. + +
+
+
+
-