# Poncho-Designsystem
## Poncho-Designsystem: Oberflächenvorschau
Filtern Sie das native Grid mit den Feldern, öffnen Sie eine Detailansicht und kehren Sie zur ausgewählten Aktivität zurück.
## Poncho-Designsystem: Gestaltungsreferenz
ar-poncho 2.0.320 CSS plus Bootstrap 3.4.1; berechnete Werte bei 1440, 768 und 390px überprüft. Schriftart-Fallbacks sind ausdrücklich angegeben.
### Veröffentlichte Typografie von CSS
| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Package inspected | ar-poncho 2.0.320 | Verwenden Sie das veraltete v0.3.3-Banner nicht als Paketversion. |
| Font documentation | Lora headings / Montserrat body | Aktuelle Typografieseite und CSS-Schriftimport; in der älteren README des Repositorys wird noch Encode Sans genannt. |
| Body | 16px / 1.42857143; weight 500 | Mit Bootstrap 3.4.1 und Poncho gemessen; die lokale Vorschau verwendet Arial. |
| H1 | 2.5rem = 40px / 44px | Die Überschrift der Vorschau bleibt auf Mobilgeräten 40px groß. |
| H2 / H3 | 2rem / 1.75rem | Grundlegende Überschriften; für Felder gelten abweichende Überschriftenregeln. |
| Panel H3 | 20px / 26px | Komponentenkontext, gemessen mit nativem CSS. |
| Lead | 18px / 1.2; weight 500 | Eine kurze Einleitung statt einer Überschrift. |
### Farbrollen
| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --primary | #242C4F | Marineblau für Hauptlinks und -aktionen. |
| --secondary | #45658D | Sekundärblau. |
| --success | #2e7d33 | Rolle für Haupt- und Erfolgsaktionen; keine beliebige Dekoration. |
| --danger | #c62828 | Rolle für destruktive Aktionen oder Fehler. |
| --warning | #E7BA61 | Rolle für Hinweise; Textkontrast muss weiterhin geprüft werden. |
| --gray-base | #333333 | Standardtext. |
| --gray-lighter | #f2f2f2 | Helle neutrale Oberfläche. |
### Abmessungen von Grid und Komponenten
| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Grid | 12 columns; 30px gutter | Bootstrap 3.4.1: 15px Innenabstand auf jeder Spaltenseite. |
| Breakpoints | 768 / 992 / 1200px | sm, md, lg; col-sm-4 erstellt ab 768px drei Spalten. |
| Containers | 750 / 970 / 1170px | An den jeweiligen Breakpoints; unter 768px flexible Breite. |
| Panel body | 15px 20px | Poncho-Komponentenüberschreibung. |
| Panel radius / spacing | 10px / 30px bottom margin | Natives CSS wie in diesem Beispiel verwendet. |
| Button | 16px; 8px 20px padding; 3px border; 30px radius | Abgerundete Aktionsgestaltung von Poncho; nicht die Standardgeometrie von Bootstrap. |
| Section spacing | 30px default; 20px small; 40px large | Regeln für section, section-sm und section-lg. |
## Poncho-Designsystem: Vollständiger Leitfaden
Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface.
Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen.
## Poncho-Designsystem: Version und Abhängigkeiten
### Ein Bootstrap 3-System
> Poncho legt argentinische Styles für öffentliche Dienste über Bootstrap 3.4.1. Auf der Installationsseite wird noch eine experimentelle Richtung mit Bootstrap 4 erwähnt; dadurch werden Bootstrap 5-Klassen jedoch nicht mit den veröffentlichten Beispielen kompatibel. Diese Ressource legt ar-poncho 2.0.320 und Bootstrap 3.4.1 fest, damit sich Panel-Aufbau und responsives Verhalten gemeinsam untersuchen lassen.
Im Banner steht v0.3.3, obwohl das installierte Paket die Version 2.0.320 hat. Maßgeblich sind das Paketmanifest und die Sperrdatei, nicht allein das Banner. Die unabhängige Vorschau verwendet native CSS für Panels, Schaltflächen und das Raster. Die Filterung der Aktivitäten ist eine eigene Implementierung in JavaScript und keine Suchkomponente von Poncho.
Unterstützende Spezifikation lesen
## Typografie und Belege des Poncho-Designsystems
### Widersprüchliche Schriftangaben abgleichen
In der aktuellen Typografiedokumentation werden Lora für Überschriften und Montserrat für Fließtext genannt. Das heruntergeladene Stylesheet importiert diese Schriftfamilien, enthält aber auch ältere Deklarationen für Encode Sans. In der README zur Einrichtung des Repositorys wird weiterhin Encode Sans empfohlen. Hier liegt ein tatsächlicher Versions- und Quellenwiderspruch vor. Bei einer Migration in die Produktion muss die endgültige Kaskade der gewählten Version geprüft werden, statt anzunehmen, dass alle historischen Angaben ein einheitliches Theme beschreiben.
In der Vorschau sind die Schriftalternativen Arial und Georgia ausdrücklich angegeben. Auf den Import externer Schriftarten wird zugunsten zuverlässiger Offline-Nutzung verzichtet. Die nativen Größen bleiben sichtbar: 16px für den Fließtext, 40px für H1 und 18px für den Vorspann. Panel-Überschriften verwenden eine eigene Größe von 20px. Wer die H3-Grundgröße auf eine Karte überträgt, verändert daher die Komponente.
Unterstützende Spezifikation lesen
## Farbe und Aktionshierarchie im Poncho-Designsystem
### Aktionen nach ihrer Bedeutung auswählen
In der Schaltflächendokumentation werden Standardaktionen als Links, sekundäre Links, eine zentrale oder erfolgreiche Aktion sowie destruktive Aktionen unterschieden. btn-primary ist die übliche hervorgehobene Aktion im Link-Stil; btn-link eignet sich für sekundäre Aktionen. btn-success kennzeichnet die zentrale Aktion zum Fortfahren. Laut Richtlinie darf es davon pro Seite nur eine geben. btn-danger ist destruktiven oder unumkehrbaren Aktionen vorbehalten.
Der Aktivitätenbrowser verwendet eine sekundäre Schaltfläche zum Zurücksetzen und eine primäre Schaltfläche zum Zurückkehren in der erweiterten Detailansicht. Eine grüne Schaltfläche zur Anmeldung gibt es nicht, da über diese Vorschau keine Anmeldungen möglich sind. Behaupte niemals einen Erfolg, nur weil jemand ein lokales Panel geöffnet hat.
- btn-primary: übliche hervorgehobene Aktion; in einer Aktionsgruppe keine konkurrierenden Schaltflächen verwenden.
- btn-link: sekundäre oder informative Aktion, etwa zum Zurücksetzen des Filters.
- btn-success / btn-danger: nur verwenden, wenn die tatsächliche Aktion der dokumentierten Bedeutung entspricht.
Unterstützende Spezifikation lesen
## Raster und Abstände im Poncho-Designsystem
### Das übernommene Raster bewusst einsetzen
Bootstrap 3 verwendet ein Raster mit 12 Spalten und 30px Spaltenabstand. Die Zeile gleicht die 15px Innenabstand der Spalten aus. Ab 768px Breite sorgt col-sm-4 für drei gleich breite Aktivitätspanels; darunter erstrecken sie sich über die volle Breite. An den dokumentierten Breakpoints wechseln Container zu 750px, 970px und 1170px.
Poncho ergänzt darüber hinaus Abstände für Komponenten: Die Inhaltsbereiche der Panels haben vertikal 15px und horizontal 20px Innenabstand; der untere Außenabstand der Panels beträgt 30px. Schaltflächen haben einen Radius von 30px, einen 3px breiten Rahmen und 8px mal 20px Innenabstand. Diese Werte erklären den sichtbaren Unterschied zu einer unveränderten Bootstrap-Seite. Ersetze sie nicht durch ein beliebiges Theme mit abgerundeten Karten.
Unterstützende Spezifikation lesen
## Aufbau anklickbarer Panels im Poncho-Designsystem
### Pro Karte genau ein Ziel
In offiziellen Panel-Beispielen ist das gesamte Panel in einen Anker eingeschlossen. Darin befindet sich der Panel-Inhalt, der Überschrift und ergänzenden Text enthält. So wird ein kompakter Verzeichniseintrag zu einem einzigen, klaren Navigationsziel. Verschachtle darin keinen weiteren Link und keine Schaltfläche, da sonst widersprüchliche interaktive Ziele entstehen.
Das Snippet für die Produktion verweist auf eine tatsächliche Aktivitätsseite. In der lokalen Vorschau wird derselbe semantische Anker stattdessen abgefangen, um den eigens verfassten Detailtext einzublenden. Dabei wird das auslösende Element gespeichert, der Fokus auf den neuen Detailbereich gesetzt und beim Schließen dorthin zurückgeführt. Dieses Anwendungsverhalten ergänzt das dokumentierte Panel-Markup.
```
```
Code-Referenz
Unterstützende Spezifikation lesen
## Filterung und lokaler Zustand im Poncho-Designsystem
### Ein echter Filter statt rein dekorativer Chips
Das Auswahlfeld für Aktivitätstypen hat eine eindeutige Beschriftung und drei Kategorien. Bei einer Änderung werden nicht passende Panel-Container ausgeblendet und eine Statusmeldung mit der aktualisierten Anzahl angezeigt. Die Anzahl bezieht sich auf sichtbare Aktivitäten, nicht auf Anmeldungen insgesamt oder auf die Verfügbarkeit. Beim Zurücksetzen werden alle drei Aktivitäten wieder angezeigt und der Fokus kehrt zum Filter zurück.
Beim Wechsel der Kategorie wird eine geöffnete Detailansicht geschlossen, damit keine Inhalte einer nun ausgeblendeten Aktivität losgelöst von den Ergebnissen zurückbleiben. Das Öffnen eines Panels ändert den Filter nicht. Diese Regeln sind bewusst einfach gehalten, aber vollständig genug, um das Zusammenspiel von Bedienelementen, Ergebnissen und Details zu prüfen.
1. Wähle „Kunst“ und prüfe, ob nur noch der Druckgrafik-Workshop angezeigt wird.
2. Öffne die Aktivität, lies ihre Beschreibung und kehre dann zum selben Panel zurück.
3. Setze den Filter zurück und prüfe, ob wieder alle drei Aktivitäten angezeigt werden.
Unterstützende Spezifikation lesen
## Tastaturbedienung und Inhaltsstruktur im Poncho-Designsystem
### Nur visuelle Zustände nicht als Deaktivierung übernehmen
In der offiziellen Schaltflächentabelle wird eine deaktivierte Klasse CSS gezeigt. Eine echte HTML-Schaltfläche, die deaktiviert sein muss, benötigt außerdem das Attribut disabled; eine Klasse allein verhindert keine Aktivierung per Tastatur. Bei Links ist zu prüfen, ob weiterhin ein gültiges Ziel vorhanden ist, statt den deaktivierten Stil als vollständiges Interaktionsmodell zu behandeln.
Verwende eine H1 und eine schlüssige Überschriftenhierarchie. Dieses Verzeichnis nutzt H3 in den Panels, da der erweiterte Detailbereich eine H2-Überschrift hat. Steht eine eigenständige Liste ohne übergeordnete Zwischenüberschrift, sind die Überschriftenebenen an das tatsächliche Dokument anzupassen. Dekorative Symbolbibliotheken sind optional und werden hier weggelassen, da Textbeschriftungen alle Aktionen verständlich machen.
Unterstützende Spezifikation lesen
## Native Einrichtung und Geltungsbereich im Poncho-Designsystem
### Nur die vom Beispiel verwendeten Ebenen laden
Lade Bootstrap CSS vor Poncho CSS, damit das Theme die Grundlage überschreiben kann. Für das einfache Raster und die Panels werden weder Bootstrap JavaScript noch jQuery benötigt. Wenn die Anwendung interaktive Widgets von Bootstrap hinzufügt, lade eine kompatible jQuery-Version vor Bootstrap 3.4.1 JavaScript und teste die tatsächlich verwendeten Widgets.
Dies ist ein veralteter Abhängigkeits-Stack mit klar definierter Kompatibilitätsgrenze. Bootstrap zusätzlich zu installieren, ist keine Migrationsstrategie. Unterscheiden Sie die Wiederverwendung von Code unter der MIT-Lizenz des Repositorys von staatlicher Identität, offiziellen Logos und der auf Regierungsseiten sichtbaren Inhaltslizenz. Die Vorschau zeigt fiktive Gemeinschaftsaktivitäten und gibt nicht vor, ein Dienst der argentinischen Regierung zu sein.
Unterstützende Spezifikation lesen
## Komponentenbeispiele für das Poncho-Designsystem
### Navigation über das gesamte Panel
Ein einzelner Anker umschließt den Panel-Inhalt; verschachteln Sie keine interaktiven Steuerelemente.
```
```
Code-Referenz
### Vollständiges Aktivitätenverzeichnis
Native Poncho-Panels sowie ein funktionierender Kategorienfilter und eine Detailansicht, die den Fokus wiederherstellt.
```
Community activities
COMMUNITY PROGRAMME · INDEPENDENT EXAMPLE
Find a local activity
Browse practical sessions at the community centre.
```
Code-Referenz
## Einrichtung für Agents des Poncho-Designsystems
### Ausgangspunkt für die Implementierung
Einrichtung mit nativen CSS. Diese Vorschau benötigt kein Bootstrap JavaScript, da Filter- und Detailansicht eigens dafür entwickelt wurden. Das vollständige ZIP mit funktionierendem Beispiel unter Sources enthält außerdem die genauen Abhängigkeiten der Vorschau und das vollständige Dokument. Entpacken Sie es, führen Sie in diesem Verzeichnis python3 -m http.server 8080 aus und öffnen Sie anschließend http://localhost:8080/poncho.html. Öffnen Sie Beispiele mit Modulen nicht über file://.
```
npm install ar-poncho@2.0.320 bootstrap@3.4.1
# Copy the following package assets into your site's public vendor directory:
# node_modules/bootstrap/dist/css/bootstrap.min.css
# node_modules/ar-poncho/dist/css/poncho.min.css
# Load Bootstrap first, then Poncho.
# Optional Bootstrap JS components also need jQuery before bootstrap.min.js.
```
### Ein Prompt für dein Projekt
```
Verwenden Sie ar-poncho 2.0.320 mit Bootstrap 3.4.1. Erstellen Sie ein barrierefreies Verzeichnis mit einem 12-Spalten-Raster und Panel-Karten mit jeweils einem einzelnen Anker. Behalten Sie die nativen Farben, Innenabstände und Radien der Button-Rollen bei. Bieten Sie beschriftete Filter, Ergebniszahlen und eine Wiederherstellung des Fokus. Prüfen Sie die Schriftarten-Kaskade anhand des festgelegten Pakets; mischen Sie keine Bootstrap-5-APIs und erfinden Sie keine Erfolgsmeldung zur Registrierung.
```
## Quellen und Geltungsbereich des Poncho-Designsystems
Eigenständiges OpenDesign-Beispiel mit nativen CSS-Elementen und ohne staatliche Identität. Die aktuelle Dokumentation und die ältere README nennen unterschiedliche Schriftfamilien; für diese Vorschau sind das festgelegte CSS-Paket und die explizite Ausweichschrift maßgeblich.
- Offizielles Repository und Installation Paketeinrichtung, Abhängigkeiten und MIT-Code-Lizenz.
- Aufbau eines Panels Anker für die gesamte Karte, ergänzender Text und Varianten.
- Bedeutung von Buttons Aktionshierarchie, Klassennamen und Zustände.
- Typografie Aktuelle Schriftfamilien und semantische Texthinweise.
- Veröffentlichtes CSS Tatsächliche Farb-, Typografie- und Geometriedeklarationen.
- Raster mit Bootstrap 3 Geerbte responsive Spalten, Stege und Containerbreiten.
- Vollständiges funktionsfähiges Beispiel herunterladen ZIP-Datei mit dem vollständigen HTML, lokalen Abhängigkeiten für CSS/JavaScript, mitgelieferten Lizenzen und genauen Startanweisungen. Ein Build-Schritt ist nicht erforderlich.
## Weiterführende Ressourcen zum Poncho-Designsystem
### Queensland Government Designsystem
Entdecken Sie die Implementierung von Bootstrap in Queensland anhand einer vollständig illustrierten Ressourcenauswahl mit echten Theme-Rollen, nativer Checkbox-Gestaltung und einem barrierefreien Prüfdialog.
### Ripple
Entdecken Sie die tatsächlichen Farbfunktionen von Ripple, die 14-stufige Abstandsfolge und responsive Typografiereferenzen anhand eines vollständigen Workshop-Ablaufs mit schrittweiser Offenlegung, Fortschrittsanzeige und Tastaturfokus auf den nächsten Schritt.
### Scottish Government Designsystem
Verwenden Sie die responsiven Schrift-, Abstands- und Farbrollen der schottischen Regierung in einem nativen Feld mit Zeichenzähler, das Texte auch bei Überschreitung des Limits beibehält und eine Korrektur ermöglicht.
- [Implementierungsreferenz](https://argob.github.io/poncho/componentes/paneles/)
- [Quelle](https://github.com/argob/poncho/blob/master/dist/css/poncho.css)
- [Quelle](https://getbootstrap.com/docs/3.4/css/#grid)
- [Unterstützende Spezifikation lesen](https://github.com/argob/poncho)
- [Unterstützende Spezifikation lesen](https://argob.github.io/poncho/identidad/tipografia/)
- [Unterstützende Spezifikation lesen](https://argob.github.io/poncho/componentes/botones/)
- [Unterstützende Spezifikation lesen](https://getbootstrap.com/docs/3.4/css/#grid)
- [Code-Referenz](https://argob.github.io/poncho/componentes/paneles/)
- [Unterstützende Spezifikation lesen](https://argob.github.io/poncho/componentes/paneles/)
- [Offizielles Repository und Installation Paketeinrichtung, Abhängigkeiten und MIT-Code-Lizenz.](https://github.com/argob/poncho)
- [Aufbau eines Panels Anker für die gesamte Karte, ergänzender Text und Varianten.](https://argob.github.io/poncho/componentes/paneles/)
- [Bedeutung von Buttons Aktionshierarchie, Klassennamen und Zustände.](https://argob.github.io/poncho/componentes/botones/)
- [Typografie Aktuelle Schriftfamilien und semantische Texthinweise.](https://argob.github.io/poncho/identidad/tipografia/)
- [Veröffentlichtes CSS Tatsächliche Farb-, Typografie- und Geometriedeklarationen.](https://github.com/argob/poncho/blob/master/dist/css/poncho.css)
- [Raster mit Bootstrap 3 Geerbte responsive Spalten, Stege und Containerbreiten.](https://getbootstrap.com/docs/3.4/css/#grid)