Reorganize repo structure and standards references

2026-06-29 05:03:42 +02:00
1 parent 3cb93a81be
commit be2054274d
@@ -0,0 +1,157 @@
+---
+kind: brainstorming
+ticket: D-D0b
+area: Layout Standards
+status: In Planung
+---
+
+# D-D0b Layout Brainstorming
+
+## Ziel
+
+D-D0b wird fuer diese Runde als Layout- und Composition-Standard geplant, nicht als Komponenten-Katalog.
+
+Fokus:
+- Layout-Raster und Page Padding
+- Textabstaende und vertikale Rhythmik
+- Breiten fuer kleine, normale und grosse Dialoge
+- Form-, Tabellen-, Listen- und Settings-Composition
+- Zustandsflaechen wie Empty, Loading, Error, No Permission
+
+Nicht Fokus:
+- konkrete Subframe-Komponenten
+- App-Shell-Definition
+- fachliche Feature-Flows
+- Backend-/Datenmodell-Logik
+
+## Temporaeres Preview-Lab
+
+Lokales Preview-Lab:
+
+`99 Temp/D-D0b Layout Preview/index.html`
+
+Dieses Lab dient nur dazu, Layoutgroessen und Abstaende visuell zu entscheiden. Es ist kein Source of Truth und darf nicht als finaler Screen oder Komponentenbibliothek behandelt werden.
+
+Wichtig:
+- Der Ordner `99 Temp/` ist per `.gitignore` ausgeschlossen.
+- Nach Abschluss der D-D0b-Brainstorming- und Validierungsrunde muss `99 Temp/D-D0b Layout Preview/` geloescht werden.
+- Validierte Entscheidungen werden danach in diese D-D0b-Dokumentation uebertragen.
+- Nicht validierte Varianten bleiben nicht als finale Regel stehen.
+
+## Preview-Visualisierung
+
+Im lokalen Preview-Lab werden Abstaende visuell markiert:
+
+- Lila = `Padding` / Innenabstand.
+- Tuerkis = `Gap` / Abstand zwischen getrennten Elementen.
+- Weiss = eigentlicher Inhalt / Content.
+
+Begriffe:
+
+- `Padding`: Innenabstand innerhalb eines Containers. Beispiel: Abstand zwischen Kartenrand und Karteninhalt, zwischen Dialogrand und Dialoginhalt, zwischen Tabellenzellenrand und Zelltext oder zwischen Buttonrand und Buttonlabel.
+- `Gap`: Abstand zwischen mehreren Elementen innerhalb eines Layouts. Beispiel: Abstand zwischen Formularfeldern, Karten, Buttons oder Layout-Spalten.
+- `Margin`: Aussenabstand eines einzelnen Elements zu anderen Bereichen. In den HiveGrid-Layout-Regeln soll bevorzugt mit Auto Layout/Flex/Grid-Gaps gearbeitet werden, weil das konsistenter steuerbar ist.
+
+Regel fuer das Preview:
+
+- Die Preview-Seite muss sich selbst an die Regeln halten, die sie gerade testet. Keine zusaetzlichen Zufallsabstaende nur fuer die Demo.
+- Nur der jeweils relevante Abstand soll visuell markiert werden.
+- Wenn es um Card Padding geht, wird die Card-Innenflaeche markiert.
+- Wenn es um Dialog Padding geht, wird Header/Body/Footer-Innenabstand markiert.
+- Wenn es um Tabellen geht, wird Cell Padding markiert.
+- Wenn es um Formularabstaende geht, muss klar unterschieden werden zwischen Input-Padding und Field-Gap.
+
+## Carbon-Referenzen
+
+- 2x Grid: https://carbondesignsystem.com/elements/2x-grid/overview/
+- Spacing: https://carbondesignsystem.com/elements/spacing/overview/
+- Modal Usage: https://carbondesignsystem.com/components/modal/usage/
+- Forms Pattern: https://carbondesignsystem.com/patterns/forms-pattern/
+
+## Subframe UI Standards als zentrale Shell
+
+Die Subframe UI Standards liegen als eigenes Standards-Projekt im Repo:
+
+- [00_HiveGrid-Einordnung](<../../../04 Standards/Subframe UI Standards/00_HiveGrid-Einordnung.md>)
+- [Subframe UI Standards Start](<../../../04 Standards/Subframe UI Standards/00_Start.md>)
+- [Layout-Regeln](<../../../04 Standards/Subframe UI Standards/Layout/README.md>)
+
+Zweck:
+
+- D-D0b bleibt der Arbeits- und Validierungsort fuer Layout-Entscheidungen.
+- Die Subframe UI Standards sind die dauerhafte Zielstruktur fuer systemweite Subframe-, Komponenten- und Layout-Standards.
+- Nach Davids Validierung koennen D-D0b-Entscheidungen in den Layout-Bereich der Subframe UI Standards uebertragen werden.
+
+Abgrenzung:
+
+- Keine Regel in den Subframe UI Standards wird durch diese D-D0b-Datei automatisch geaendert.
+- Keine unvalidierten D-D0b-Werte werden als finale Subframe-Regel gespeichert.
+- Wenn eine Layout-Regel uebertragen wird, muss klar sein, ob sie allgemein gilt oder nur fuer bestimmte Layout-Archetypen.
+
+## Erste Entscheidungsbereiche
+
+Die Entscheidungen werden einzeln validiert. David muss nicht die komplette Seite auf einmal abnehmen.
+
+Validierungsreihenfolge:
+
+| ID | Entscheidung | Worum es geht |
+|---|---|---|
+| D01 | Grundraster / Spacing Scale | Welche Abstandswerte sind erlaubt? |
+| D02 | Page & Card Padding | Wie viel Innenabstand bekommen Seiten, Karten, Dialogbereiche, Tabellenzellen und Buttons? |
+| D03 | Text-Rhythmus | Wie nah stehen Titel, Beschreibung und erster Inhalt zusammen? |
+| D04 | Buttons | Welche Button-Hoehen und horizontalen Innenabstaende wirken richtig? |
+| D05 | Formulare | Wie dicht stehen Formularfelder, Labels und Help/Error-Texte? |
+| D06 | Tabellen | Welche Row Height und welches Cell Padding gelten fuer Admin-Tabellen? |
+| D07 | Dialoge | Welche Breiten gelten fuer kleine, normale und grosse Dialoge? |
+| D08 | States | Wie gross sind Empty, Error und No-Permission-Bereiche? |
+
+Arbeitsregel:
+- Der Agent fuehrt David immer nur durch die naechste offene Entscheidung.
+- Jede Entscheidung wird erst dokumentiert, wenn David sie explizit validiert hat.
+- Wenn eine Entscheidung spaeter geaendert wird, muss ein Impact-Check auf die anderen Layout-Regeln erfolgen.
+
+### 1. Grundraster
+
+Zu klaeren:
+- Ist ein 8px-Rhythmus als Hauptstandard passend?
+- Welche Zwischenwerte sind erlaubt: 4px, 12px, 20px?
+- Welche Abstaende gelten fuer eng verwandte Elemente, Feldgruppen und grosse Sections?
+
+### 2. Page Padding
+
+Zu klaeren:
+- Standard Desktop Page Padding
+- kompakter Admin-/Settings-Padding-Standard
+- Umgang mit Tabellen: full width vs. constrained
+
+### 3. Text-Rhythmik
+
+Zu klaeren:
+- Abstand Page Title zu Subtitle
+- Abstand Subtitle zu erstem Content
+- Abstand Section Title zu Beschreibung
+- Abstand Beschreibung zu Inhalt
+
+### 4. Formulare
+
+Zu klaeren:
+- Label/Input-Abstand
+- Input/Help/Error-Abstand
+- Abstand zwischen Feldern
+- Abstand zwischen Form-Sections
+
+### 5. Dialogbreiten
+
+Zu klaeren:
+- kleine Confirm-Dialoge
+- normale Formular-Dialoge
+- grosse Editor-Dialoge
+- maximale Breite relativ zum Viewport
+
+### 6. Listen und Tabellen
+
+Zu klaeren:
+- Toolbar zu Tabelle
+- Row Height
+- Zell-Padding
+- Empty/Loading/Error-Bereich