89 lines
4.7 KiB
Markdown
89 lines
4.7 KiB
Markdown
---
|
|
kind: ticket-handoff
|
|
project: HiveGrid Screen Project
|
|
ticket: D-D0b
|
|
area: Foundation / Layout Standards
|
|
status: Fertig / Review
|
|
repo: https://git.tool-ctrl.de/david/Hivegrid-Wireframes
|
|
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%20Standards.md)
|
|
|
|
Backlog: [D-D0b Backlog](../../02%20Wireframes/D0%20Foundation/D-D0b%20Layout%20Standards/D-D0b%20Backlog.md)
|
|
|
|
Dauerhafte Standards: [Subframe UI Standards / Layout](../../04%20Standards/Subframe%20UI%20Standards/Layout/README.md)
|
|
|
|
Entscheidungslog: [Subframe UI Standards / Entscheidungen](../../04%20Standards/Subframe%20UI%20Standards/02_Entscheidungen.md)
|
|
|
|
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 Arbeitskopien der Preview: `99 Temp/D-D0b Layout Preview/index.html` und `99 Temp/D-D0b Layout Preview/preview.html`
|
|
|
|
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
|
|
|
|
Fuer `D-D0b` wurden die grundlegenden Layout- und Composition-Standards fuer HiveGrid validiert, dokumentiert und in die dauerhaften Subframe UI Standards uebertragen.
|
|
|
|
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 versioniert im D-D0b-Ordner, damit sie zusammen mit den Layout-Entscheidungen auffindbar bleibt und aus diesem Ticket heraus referenziert werden kann.
|
|
|
|
## Gemacht
|
|
|
|
- 8px-basiertes Spacing-System mit erlaubten Standardwerten festgelegt.
|
|
- Page-, Card-, Surface-, Grid- und Section-Abstaende validiert.
|
|
- Token-aware Text-Rhythmus fuer Page-/Section-Header validiert.
|
|
- Button-, Form-, Table- und State-Ownership abgegrenzt, damit Screen-Layouts Komponentenstandards nicht nachbauen.
|
|
- Dialog- und Fullscreen-Dialog-Groessen validiert.
|
|
- Dialog-interne Gaps validiert.
|
|
- 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 Full-Page-Preview ergaenzt, damit D01-D09 im realistischen Beispiel sichtbar und anspringbar sind.
|
|
|
|
## Validiert
|
|
|
|
- `D01 Spacing Scale`: `4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96`.
|
|
- `D02 Page/Card/Grid`: Page 24px minimum, Card/Surface 16px, Grid/Card Gap 16px, kompakt lokal 12px, Section Gap 24px.
|
|
- `D03 Text-Rhythmus`: `0 / 24 / 0 / 12`, nur zusammen mit 150%-Texttokens fuer beschreibende Page-/Section-Texte.
|
|
- `D04 Button Ownership`: Standardaktionen nutzen Button Default/Medium/36px; Button-Padding und Varianten kommen aus der Button-Komponente.
|
|
- `D05 Form Layout Gap`: Komplette Field-Komponenten stehen 16px auseinander; Field-Anatomy kommt aus der Input-Komponente.
|
|
- `D06 Table Ownership`: Tabellen-Dichte kommt aus der Table-Komponente; Carbon ist nur Referenz.
|
|
- `D07 Dialog Sizes`: XS 420, S 560, M 720, L 1200; Fullscreen `width: calc(100vw - 48px)`, `max-width: 2512px`, `height: calc(100vh - 48px)`.
|
|
- `D08 Dialog Internal Gaps`: Balanced mit Title/Description 8px, Field/Form Row 16px, Section 24px, Footer Button 8px.
|
|
- `D09 States`: Empty/Error/No-Permission sind inline State-Komponenten, keine Modale.
|
|
|
|
## Wichtige Arbeitsregeln fuer neue Screens
|
|
|
|
- Komponenten-Defaults verwenden, wenn sie den validierten Standard bereits abbilden.
|
|
- Padding oder Gap nicht manuell nachbauen, wenn die zuständige Komponente dafuer bereits Varianten, Props oder Auto Layout besitzt.
|
|
- Modale in Subframe als echte Dialog-Komponenten bauen, nicht als Fake-Modal.
|
|
- Page-/Section-Beschreibungen als 150%-Texttokens setzen, wenn sie umbrechen koennen.
|
|
- `0px` bei D03 ist bewusst definiert und darf nicht automatisch durch 4px/8px ersetzt werden.
|
|
|
|
## Backlog / Offen
|
|
|
|
Nicht blockierend fuer den Handoff:
|
|
|
|
- Mobile Layout Standards.
|
|
- Drawer / Side Panel Breitenregeln.
|
|
- Button-/Action-Semantik.
|
|
- Error-/Result-Dialog-Komponenten.
|
|
- No-Permission-Komponente und Table No-Permission State.
|
|
- Fill Buttons fuer XS/S Dialoge.
|
|
- Weitere Accessibility- und Carbon-Recherche.
|
|
|
|
Details: [D-D0b Backlog](../../02%20Wireframes/D0%20Foundation/D-D0b%20Layout%20Standards/D-D0b%20Backlog.md)
|
|
|
|
## Hinweis fuer Ticket-System
|
|
|
|
Diese Datei ist der kompakte Handoff fuer `D-D0b`. Fuer verbindliche Regeln sind die [Subframe UI Standards / Layout](../../04%20Standards/Subframe%20UI%20Standards/Layout/README.md) massgeblich.
|