Implementa una sequenza di servizio leggibile con la tipografia reale di Bootstrap Italia, la struttura responsive di Stepper e uno stato locale del modulo ripristinabile.
Sistema e implementazione sistema di design .italia
Designers Italia attraverso la sua libreria di codice
Designers Italia è più ampio di un pacchetto CSS: include indicazioni per la progettazione dei servizi, kit e risorse per l’implementazione. Questo esempio si concentra sull’implementazione documentata di Bootstrap Italia, fissata alla versione 2.18.3. Non implica che installare la libreria basti a progettare un servizio pubblico o a soddisfare tutti i requisiti di un sito comunale.
Nella versione esaminata, Bootstrap Italia include e personalizza Bootstrap 5.2.3. Non sovrapporre un secondo bundle standard di Bootstrap. L’anteprima usa il suo CSS nativo e i file dei font Titillium Web forniti localmente, con un flusso originale in tre fasi per pianificare una visita in biblioteca.
Tipografia e valori esatti di sistema di design .italia
Font con funzioni distinte
Titillium Web è il carattere principale dell’interfaccia. Lora è l’opzione serif per i testi più lunghi, mentre Roboto Mono è adatto al codice o ai contenuti a larghezza fissa. L’anteprima carica i pesi effettivi di Titillium Web che utilizza e mantiene la licenza del font, anziché sostituirlo senza dichiararlo con un carattere di sistema.
Il testo del corpo resta a 16px. Le intestazioni cambiano a 576px: H1 è di 40px con interlinea di 48px sugli schermi piccoli, poi di 48px con interlinea di 56px nell’installazione di CSS. La tabella della documentazione indica un’interlinea desktop di 60px; la tabella di riferimento qui riporta i valori della versione esaminata e spiega la discrepanza, invece di mescolare due fonti.
Breakpoint responsive e spaziatura di sistema di design .italia
Due breakpoint per esigenze diverse
La soglia tipografica è 576px, mentre l’intestazione dello Stepper cambia presentazione sotto i 992px. Sugli schermi compatti restano visibili l’etichetta corrente e l’indice n/totale. I nomi delle altre fasi non vengono compressi in colonne illeggibili. Chi usa il servizio da dispositivo mobile deve comunque poter sapere qual è la fase corrente: l’esempio lo comunica tramite il focus sull’intestazione e il testo degli stati accessibili.
Le utility di spaziatura seguono la scala rem verificata: 4, 8, 16, 24 e 48px per le dimensioni da 1 a 5 con una radice standard. Le larghezze massime del contenitore della griglia includono 1176px a xl, anziché il valore standard di Bootstrap da 1140px, spesso ricordato in modo errato. Il piano indipendente usa una larghezza massima più contenuta, pari a 900px, come scelta esplicita dell’applicazione.
Struttura e responsabilità dello Stepper sistema di design .italia
L’intestazione non gestisce il flusso
La struttura documentata separa steppers-header, steppers-content e steppers-nav. Gli elementi dell’elenco dell’intestazione ricevono le classi confirmed e active; l’indice indica la posizione. Ai pulsanti Precedente e Avanti vengono assegnate le rispettive classi. Queste classi descrivono la presentazione. Spetta all’applicazione decidere se il modulo corrente è valido e se è possibile passare a una fase successiva.
L’esempio usa sezioni normali per ogni passaggio e mantiene i controlli nel DOM, nascondendo le sezioni inattive. Tornando al passaggio della nota di accesso, la nota viene quindi conservata. Il passaggio di riepilogo legge i controlli esistenti; non li ricrea sulla base di un risultato server ipotizzato.
Convalida e avanzamento significativo di sistema di design .italia
Avanza solo dopo aver effettuato la scelta obbligatoria
Il tipo di visita è obbligatorio. Se si seleziona Continua senza averlo scelto, la prima fase resta attiva, viene mostrato un messaggio di errore specifico e il focus passa al primo pulsante radio. Dopo aver scelto un tipo e aver selezionato Continua, la prima fase viene contrassegnata come completata. La nota è facoltativa e può restare vuota; in tal caso, il riepilogo indica che non è stata aggiunta alcuna nota.
Indietro passa alla fase precedente senza cancellare la selezione o la nota. Ricomincia cancella esplicitamente entrambi i dati e riporta all’inizio. La schermata finale è presentata come piano locale: non afferma mai che una prenotazione sia stata inviata, approvata o salvata.
Seleziona Continua senza aver scelto un pulsante radio e verifica l’errore.
Scegli un tipo di visita, aggiungi una breve nota e apri il riepilogo.
Torna alla nota, verifica che il suo contenuto sia ancora presente, quindi seleziona Ricomincia per cancellare il piano.
Stati accessibili e focus di sistema di design .italia
Allinea la posizione visiva a quella annunciata
L’elemento dell’elenco attivo ha aria-current="step" e un’etichetta visivamente nascosta che indica la fase corrente. Le fasi precedenti ricevono un testo di completamento oltre alla classe confirmed. L’indice numerico compatto è nascosto alle tecnologie assistive, perché l’intestazione corrente e la semantica della fase comunicano già la posizione; resta visibile per orientarsi visivamente.
Come raccomandato dalle indicazioni ufficiali per una sequenza su pagina singola, il contenuto che cambia usa aria-live="polite". L’esempio porta inoltre il focus sulla nuova intestazione, così chi usa la tastiera ha un punto di partenza prevedibile per la lettura. Verifica questa combinazione con le tecnologie assistive supportate per evitare annunci eccessivamente ripetitivi nei moduli più complessi.
Usa pulsanti reali per cambiare fase e disabilita Indietro nella prima fase.
Associa le etichette ai pulsanti radio e all’area di testo; il testo segnaposto non è un’etichetta.
Comunica gli stati corrente e completato anche con il testo, non solo tramite il colore blu o un’icona.
Asset nativi e inizializzazione di sistema di design .italia
CSS, font e JavaScript facoltativo
Il pacchetto include CSS, uno script integrato, i font sorgente e uno sprite SVG. Questo esempio di Stepper richiede CSS e i font scelti; la navigazione è gestita dalla logica dell’applicazione. Gli altri widget usano data-bs-toggle o gli attributi data descritti nella documentazione per l’inizializzazione automatica. Non combinare l’inizializzazione automatica con una seconda istanza manuale dello stesso widget.
Se usi i moduli, importa solo i componenti necessari all’applicazione. Le indicazioni ufficiali specificano che i metodi di transizione restituiscono il controllo prima che la transizione sia terminata e che le chiamate effettuate durante una transizione possono essere ignorate. Per concatenare azioni dipendenti in questi componenti, attendi l’evento di completamento pertinente; questo semplice Stepper non inventa un API di transizione nativo.
Limiti dell’integrazione di sistema di design .italia
Usa il kit senza suggerire che il servizio sia stato completato
La documentazione della libreria consiglia di mantenerla aggiornata e sconsiglia di dipendere da una CDN pubblica in produzione. La configurazione fissa la versione verificata e l’esempio locale include i propri asset e le relative licenze. Un servizio reale richiede comunque progettazione dei contenuti, gestione dei dati, convalida lato server e una risposta di conferma dell’invio.
L’esempio mostra una visita generica in biblioteca, senza logo comunale né emblemi ufficiali. È un esempio didattico di OpenDesign, non un servizio di un’autorità pubblica. Mantieni chiara questa distinzione in ogni prototipo, affinché un riepilogo curato dal punto di vista visivo non venga scambiato per la registrazione di una richiesta reale.
CSS/fonts nativo, convalida obbligatoria dei radio button, nota facoltativa, revisione, indietro e ripristino.
html
<!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>
Configurazione dell’agente sistema di design .italia
Punto di partenza per l’implementazione
Configurazione nativa di CSS e dei font. La navigazione tra i passaggi è gestita dalla logica dell’applicazione; di seguito è disponibile un esempio completo funzionante. Lo ZIP dell’esempio completo funzionante, in Sources, include anche le dipendenze esatte per l’anteprima e il documento completo. Estrailo, esegui python3 -m http.server 8080 in quella directory, quindi apri http://localhost:8080/designers-italia.html. Non aprire gli esempi basati su moduli tramite file://.
bash
npm install [email protected]
# Copy dist/css/bootstrap-italia.min.css into public/vendor.
# Copy the needed src/fonts/Titillium_Web WOFF2 files and declare @font-face.
# CSS is sufficient for the Stepper presentation; application code owns navigation.
# For data-bs-toggle widgets, load dist/js/bootstrap-italia.bundle.min.js once.
Un prompt per il tuo progetto
Prompt per l’agente
Usa Bootstrap Italia 2.18.3 nativo CSS e Titillium Web. Crea la struttura documentata di stepper/header/content/nav, mantenendo sincronizzati gli stati attivo e confermato e l’indice per dispositivi mobili. Gestisci convalida e navigazione nel codice dell’applicazione, conserva i valori quando si torna indietro e assegna un’etichetta allo stato finale in base a una risposta reale del backend. Non combinare un secondo runtime Bootstrap né dichiarare che una revisione locale è stata inviata.
05
Fonti e ambito di sistema di design .italia
Esempio indipendente di OpenDesign, incentrato su Bootstrap Italia. Non rappresenta un’identità di un’autorità pubblica né un servizio di prenotazione reale.
