Poncho-Designsystem.

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.

<div class="row">
  <div class="col-sm-4">
    <a class="panel panel-default" href="/activities/repair-cafe/">
      <div class="panel-body">
        <h3>Repair café</h3>
        <p class="text-muted">Skills · Saturday, 10:00</p>
      </div>
    </a>
  </div>
</div>

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

<div class="row">
  <div class="col-sm-4">
    <a class="panel panel-default" href="/activities/repair-cafe/">
      <div class="panel-body">
        <h3>Repair café</h3>
        <p class="text-muted">Skills · Saturday, 10:00</p>
      </div>
    </a>
  </div>
</div>

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Community activities</title><link rel="stylesheet" href="vendor/poncho-2.0.320/bootstrap.min.css"><link rel="stylesheet" href="vendor/poncho-2.0.320/poncho.min.css"><style>html,body{height:auto}body{padding:30px 0;font-family:Arial,sans-serif!important}h1,h2,h3{font-family:Georgia,serif!important}.container{max-width:100%}.panel{display:block}.filter{display:flex;gap:15px;flex-wrap:wrap;align-items:end;margin:30px 0}.filter>div{flex:1;min-width:180px}.panel:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #333;outline-offset:3px}#detail{border-left:5px solid var(--secondary);padding-left:20px;margin:25px 0}footer{font:14px/1.5 Arial;border-top:1px solid #ddd;padding-top:20px}[hidden]{display:none!important}</style><main class="container"><p class="text-muted">COMMUNITY PROGRAMME · INDEPENDENT EXAMPLE</p><h1>Find a local activity</h1><p class="lead">Browse practical sessions at the community centre.</p><div class="filter"><div><label for="category">Activity type</label><select id="category" class="form-control"><option value="all">All activities</option><option value="skills">Skills</option><option value="outdoors">Outdoors</option><option value="arts">Arts</option></select></div><button id="reset" class="btn btn-link" type="button">Reset filter</button></div><p id="count" role="status">3 activities</p><div class="row"><div class="col-sm-4" data-category="skills"><a class="panel panel-default" href="#detail" data-title="Repair café" data-copy="Bring one small household item to a supervised repair session. This demonstration does not reserve a place."><div class="panel-body"><h3>Repair café</h3><p class="text-muted">Skills · Saturday, 10:00</p></div></a></div><div class="col-sm-4" data-category="outdoors"><a class="panel panel-default" href="#detail" data-title="Community garden" data-copy="Meet at the garden gate for a planting session. Wear suitable footwear; tools are provided in this fictional programme."><div class="panel-body"><h3>Community garden</h3><p class="text-muted">Outdoors · Sunday, 09:30</p></div></a></div><div class="col-sm-4" data-category="arts"><a class="panel panel-default" href="#detail" data-title="Printmaking workshop" data-copy="Explore simple printing techniques in the studio. This local example has no registration service."><div class="panel-body"><h3>Printmaking workshop</h3><p class="text-muted">Arts · Tuesday, 16:00</p></div></a></div></div><section id="detail" hidden tabindex="-1"><h2 id="title"></h2><p id="copy"></p><button id="close" class="btn btn-primary">Back to activities</button></section><footer>Native Poncho 2.0.320 CSS with Bootstrap 3.4.1. Arial / Georgia fallbacks. Original activity data and filtering; no government identity or booking service.</footer></main><script>let opener;const select=document.querySelector('#category');function filter(){let n=0;document.querySelectorAll('[data-category]').forEach(x=>{x.hidden=select.value!=='all'&&x.dataset.category!==select.value;if(!x.hidden)n++});document.querySelector('#count').textContent=n+' activit'+(n===1?'y':'ies');document.querySelector('#detail').hidden=true}select.onchange=filter;document.querySelector('#reset').onclick=()=>{select.value='all';filter();select.focus()};document.querySelectorAll('[data-title]').forEach(a=>a.onclick=e=>{e.preventDefault();opener=a;document.querySelector('#title').textContent=a.dataset.title;document.querySelector('#copy').textContent=a.dataset.copy;document.querySelector('#detail').hidden=false;document.querySelector('#detail').focus()});document.querySelector('#close').onclick=()=>{document.querySelector('#detail').hidden=true;opener.focus()};</script></html>