Designsystem .italia.

Designsystem .italia-System und Implementierung

Designers Italia und seine Codebibliothek

Designers Italia umfasst mehr als ein CSS-Paket: Dazu gehören Leitlinien für Service Design, Kits und Implementierungsressourcen. Dieses Beispiel konzentriert sich auf die dokumentierte Implementierung von Bootstrap Italia, festgelegt auf Version 2.18.3. Es suggeriert weder, dass die Installation der Bibliothek das Design eines öffentlichen Dienstes abschließt, noch dass damit alle Anforderungen an eine kommunale Website erfüllt sind.

Bootstrap Italia enthält in der geprüften Version Bootstrap 5.2.3 und passt es an. Binde nicht zusätzlich ein zweites Standard-Bootstrap-Bundle ein. Die Vorschau nutzt das native CSS und lokal bereitgestellte Schriftdateien von Titillium Web sowie einen eigens entwickelten dreistufigen Ablauf zur Planung eines Bibliotheksbesuchs.

Unterstützende Spezifikation lesen

Designsystem .italia-Typografie und exakte Werte

Schriften mit unterschiedlichen Aufgaben

Titillium Web ist die Standardschrift für die Oberfläche. Lora ist die Serifenschrift für längere Texte, Roboto Mono eignet sich für Code oder Inhalte mit fester Zeichenbreite. Die Vorschau lädt die tatsächlich verwendeten Schriftschnitte von Titillium Web und berücksichtigt die Schriftlizenz, statt unbemerkt eine Systemschrift einzusetzen.

Der Fließtext bleibt bei 16px. Die Überschriften ändern sich bei 576px: Auf kleinen Bildschirmen ist H1 40px groß und hat einen Zeilenabstand von 48px; im installierten CSS ist H1 48px groß und hat einen Zeilenabstand von 56px. In der Dokumentationstabelle wird für den Desktop ein Zeilenabstand von 60px angegeben. Die Referenztabelle hier dokumentiert die geprüfte Version und erläutert die Abweichung, statt Werte aus zwei Quellen zu vermischen.

Unterstützende Spezifikation lesen

Designsystem .italia-Responsive Stufen und Abstände

Zwei Breakpoints erfüllen unterschiedliche Aufgaben

Die Typografie wechselt bei 576px, während sich die Darstellung des Stepper-Headers unter 992px ändert. Auf kompakten Bildschirmen bleiben die aktuelle Beschriftung und der Index n/total sichtbar. Die anderen Schrittnamen werden nicht in unleserlich schmale Spalten gequetscht. Auch auf Mobilgeräten muss der aktuelle Schritt angekündigt werden; das Beispiel setzt dies mit Fokus auf die Überschrift und barrierefreiem Statustext um.

Die Abstands-Utilities folgen der geprüften rem-Skala: 4, 8, 16, 24 und 48px für die Größen 1 bis 5 bei normaler Root-Größe. Die maximalen Breiten des Grid-Containers umfassen 1176px bei xl und weichen damit vom Standardwert Bootstrap ab, der oft aus dem Gedächtnis übernommen wird. Der eigenständige Plan verwendet als bewusste Anwendungsentscheidung eine engere Begrenzung auf 900px.

Unterstützende Spezifikation lesen

Designsystem .italia Stepper: Aufbau und Zuständigkeiten

Der Header steuert den Ablauf nicht

Die dokumentierte Struktur trennt steppers-header, steppers-content und steppers-nav. Listenelemente im Header erhalten die Klassen confirmed und active; der Index gibt die Position an. Die Schaltflächen für Zurück und Weiter erhalten ihre jeweiligen Klassen. Diese Klassen beschreiben die Darstellung. Die Anwendung muss entscheiden, ob das aktuelle Formular gültig ist und ob ein späterer Schritt aufgerufen werden kann.

Das Beispiel verwendet gewöhnliche Abschnitte für die einzelnen Schritte und lässt die Steuerelemente im DOM, während inaktive Abschnitte ausgeblendet werden. Wenn Sie zum Schritt mit der Zugangsbemerkung zurückkehren, bleibt die Bemerkung daher erhalten. Ein Prüfschritt liest die vorhandenen Steuerelemente aus; er erstellt sie nicht anhand eines vermuteten Serverergebnisses neu.

<div class="steppers">
  <div class="steppers-header">
    <ul>
      <li class="confirmed">Visit type <span class="visually-hidden">Completed</span></li>
      <li class="active" aria-current="step">Access note <span class="visually-hidden">Current step</span></li>
      <li>Review</li>
    </ul>
    <span class="steppers-index" aria-hidden="true">2/3</span>
  </div>
  <div class="steppers-content" aria-live="polite">
    <h2>Add an access note</h2>
    <label for="note">Access note (optional)</label>
    <textarea id="note" class="form-control" rows="3"></textarea>
  </div>
  <nav class="steppers-nav" aria-label="Plan steps">
    <button class="btn btn-outline-primary steppers-btn-prev">Back</button>
    <button class="btn btn-primary steppers-btn-next">Continue</button>
  </nav>
</div>

Code-Referenz

Unterstützende Spezifikation lesen

Designsystem .italia Validierung und aussagekräftiger Fortschritt

Erst nach Auswahl der erforderlichen Option fortfahren

Die Besuchsart ist erforderlich. Wird ohne Auswahl fortgefahren, bleibt der erste Schritt aktiv, eine spezifische Fehlermeldung wird angezeigt und der Fokus wird auf das erste Optionsfeld gesetzt. Wird eine Besuchsart ausgewählt und fortgefahren, wird der erste Schritt als abgeschlossen markiert. Die optionale Bemerkung kann leer bleiben; in diesem Fall steht in der Übersicht, dass keine Bemerkung hinzugefügt wurde.

Mit Zurück gelangen Sie zum vorherigen Schritt, ohne die Auswahl oder Bemerkung zu löschen. Mit Erneut beginnen werden beide bewusst gelöscht und der Ablauf auf den Anfang zurückgesetzt. Der letzte Bildschirm heißt „Lokaler Plan“: Er behauptet niemals, dass eine Buchung übermittelt, genehmigt oder gespeichert wurde.

1. Klicken Sie ohne ausgewähltes Optionsfeld auf Weiter und prüfen Sie die Fehlermeldung.
2. Wählen Sie eine Besuchsart aus, fügen Sie eine kurze Bemerkung hinzu und öffnen Sie die Übersicht.
3. Kehren Sie zur Bemerkung zurück und prüfen Sie, ob ihr Wert erhalten bleibt. Setzen Sie anschließend den Plan mit „Erneut beginnen“ zurück.

Unterstützende Spezifikation lesen

Designsystem .italia Zugänglicher Status und Fokus

Visuelle und gesprochene Positionsangaben aufeinander abstimmen

Das aktive Listenelement erhält aria-current="step" und eine visuell ausgeblendete Beschriftung für den aktuellen Schritt. Frühere Schritte erhalten zusätzlich zur Klasse confirmed einen Abschlusstext. Der kompakte numerische Index wird vor Hilfstechnologien verborgen, da die aktuelle Überschrift und die Semantik des Schritts die Position bereits vermitteln. Zur visuellen Orientierung bleibt er sichtbar.

Der wechselnde Inhaltsbereich verwendet aria-live="polite", wie in den offiziellen Empfehlungen für eine einseitige Schrittfolge vorgesehen. Im Beispiel wird außerdem die neue Überschrift fokussiert, damit Tastaturnutzende einen vorhersehbaren Einstiegspunkt zum Lesen haben. Testen Sie diese Kombination mit den von Ihnen unterstützten Hilfstechnologien, um bei komplexeren Formularen übermäßig häufige Ankündigungen zu vermeiden.

• Verwenden Sie für den Schrittwechsel echte Schaltflächen. Deaktivieren Sie die Schaltfläche Zurück im ersten Schritt mit disabled.
• Verknüpfen Sie Beschriftungen mit den Optionsfeldern und dem Textfeld; Platzhaltertext ist keine Beschriftung.
• Geben Sie aktuelle und abgeschlossene Zustände durch Text an, nicht nur durch blaue Farbe oder ein Symbol.

Unterstützende Spezifikation lesen

Designsystem .italia Native Assets und Initialisierung

CSS, Schriftarten und optionales JavaScript

Das Paket enthält CSS, ein gebündeltes Skript, Schriftdateien und einen SVG-Sprite. Dieses Stepper-Beispiel benötigt CSS und die ausgewählten Schriftarten; die Navigation ist Anwendungslogik. Andere Widgets werden für die automatische Initialisierung über data-bs-toggle oder die dokumentierten Datenattribute eingebunden. Kombinieren Sie die automatische Initialisierung nicht mit einer zweiten manuellen Instanz desselben Widgets.

Bei Verwendung von Modulen sollten Sie nur die Komponenten importieren, die die Anwendung benötigt. Die offiziellen Hinweise besagen, dass Übergangsmethoden zurückkehren, bevor der Übergang beendet ist, und dass Aufrufe während eines Übergangs ignoriert werden können. Warten Sie bei diesen Komponenten auf das entsprechende Abschlussereignis, bevor Sie abhängige Aktionen ausführen. Dieser einfache Stepper erfindet keine nativen Übergänge mit API.

Unterstützende Spezifikation lesen

Designsystem .italia Integrationsgrenzen

Nutzen Sie das Kit, ohne einen abgeschlossenen Service vorzutäuschen

Die Bibliotheksdokumentation empfiehlt, die Version aktuell zu halten, und rät von einer öffentlichen CDN-Abhängigkeit in der Produktion ab. In der Einrichtung ist die geprüfte Version festgelegt; das lokale Beispiel enthält eigene Assets und Lizenzen. Ein echter Service benötigt weiterhin Content Design, Datenverarbeitung, serverseitige Validierung und eine bestätigte Übermittlungsantwort.

Das Beispiel zeigt einen allgemeinen Bibliotheksbesuch ohne kommunales Logo oder Hoheitszeichen. Es handelt sich um ein OpenDesign Lehrbeispiel, nicht um einen Service einer Behörde. Machen Sie diesen Unterschied auch in jedem Prototyp deutlich, damit eine visuell ausgefeilte Übersichtsansicht nicht für einen echten Antrag gehalten wird.

Unterstützende Spezifikation lesen

Designsystem .italia Komponentenbeispiele des Designsystems

<div class="steppers">
  <div class="steppers-header">
    <ul>
      <li class="confirmed">Visit type <span class="visually-hidden">Completed</span></li>
      <li class="active" aria-current="step">Access note <span class="visually-hidden">Current step</span></li>
      <li>Review</li>
    </ul>
    <span class="steppers-index" aria-hidden="true">2/3</span>
  </div>
  <div class="steppers-content" aria-live="polite">
    <h2>Add an access note</h2>
    <label for="note">Access note (optional)</label>
    <textarea id="note" class="form-control" rows="3"></textarea>
  </div>
  <nav class="steppers-nav" aria-label="Plan steps">
    <button class="btn btn-outline-primary steppers-btn-prev">Back</button>
    <button class="btn btn-primary steppers-btn-next">Continue</button>
  </nav>
</div>

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Prepare a library visit</title><link rel="stylesheet" href="vendor/bootstrap-italia-2.18.3/bootstrap-italia.min.css"><link rel="stylesheet" href="vendor/bootstrap-italia-2.18.3/fonts.css"><style>body{padding:32px 16px}main{max-width:900px;margin:auto}.steppers-content{padding:24px 0}.steppers-nav{display:flex;gap:16px;justify-content:space-between}.form-check{margin-bottom:16px}footer{font-size:14px;margin-top:32px;border-top:1px solid #ccc;padding-top:16px}[hidden]{display:none!important}.error{color:var(--bs-danger)}@media(max-width:575px){body{padding:24px 16px}}</style><main><p class="text-uppercase">Independent service example</p><h1>Prepare a library visit</h1><p class="lead">Choose a visit format, add a note and review your local plan.</p><div class="steppers"><div class="steppers-header"><ul id="steps"><li class="active" aria-current="step">Visit type <span class="visually-hidden">Current step</span></li><li>Access note</li><li>Review</li></ul><span class="steppers-index" id="index" aria-hidden="true">1/3</span></div><div class="steppers-content" aria-live="polite"><section data-step="0"><h2 tabindex="-1">Choose a visit type</h2><fieldset><legend class="visually-hidden">Visit type</legend><div class="form-check"><input id="guided" type="radio" name="visit" value="Guided introduction"><label for="guided">Guided introduction</label></div><div class="form-check"><input id="quiet" type="radio" name="visit" value="Quiet reading visit"><label for="quiet">Quiet reading visit</label></div></fieldset><p id="error" class="error" role="alert" hidden>Choose a visit type before continuing.</p></section><section data-step="1" hidden><h2 tabindex="-1">Add an access note</h2><p id="hint">Optional. Describe what would help you use the space; avoid sensitive personal information.</p><label for="note">Access note</label><textarea id="note" rows="3" class="form-control" aria-describedby="hint" maxlength="200"></textarea></section><section data-step="2" hidden><h2 tabindex="-1">Review your local plan</h2><dl><dt>Visit type</dt><dd id="review-type"></dd><dt>Access note</dt><dd id="review-note"></dd></dl><p>This is a local plan only. No booking or request has been sent.</p></section></div><nav class="steppers-nav" aria-label="Plan steps"><button id="back" class="btn btn-outline-primary steppers-btn-prev" disabled>Back</button><button id="next" class="btn btn-primary steppers-btn-next">Continue</button><button id="reset" class="btn btn-primary" hidden>Start again</button></nav></div><footer>Native Bootstrap Italia 2.18.3 CSS and Titillium Web. Original local planning flow; no municipal identity or booking service.</footer></main><script>let step=0;const labels=['Visit type','Access note','Review'];function render(){document.querySelectorAll('[data-step]').forEach(x=>x.hidden=Number(x.dataset.step)!==step);document.querySelectorAll('#steps li').forEach((li,i)=>{li.className=i===step?'active':i<step?'confirmed':'';li.removeAttribute('aria-current');li.textContent=labels[i];const state=document.createElement('span');state.className='visually-hidden';state.textContent=i===step?' Current step':i<step?' Completed':'';li.append(state);if(i===step)li.setAttribute('aria-current','step')});document.querySelector('#index').textContent=(step+1)+'/3';document.querySelector('#back').disabled=step===0;document.querySelector('#next').hidden=step===2;document.querySelector('#reset').hidden=step!==2;if(step===2){document.querySelector('#review-type').textContent=document.querySelector('[name=visit]:checked').value;document.querySelector('#review-note').textContent=document.querySelector('#note').value.trim()||'No note added'}document.querySelector('[data-step="'+step+'"] h2').focus()}document.querySelector('#next').onclick=()=>{if(step===0&&!document.querySelector('[name=visit]:checked')){document.querySelector('#error').hidden=false;document.querySelector('#guided').focus();return}document.querySelector('#error').hidden=true;step++;render()};document.querySelector('#back').onclick=()=>{step--;render()};document.querySelector('#reset').onclick=()=>{document.querySelectorAll('[name=visit]').forEach(x=>x.checked=false);document.querySelector('#note').value='';step=0;render()};</script></html>