# sistema di design .italia ## Anteprima dell’interfaccia sistema di design .italia Segui un piano locale realistico in tre passaggi, gestisci una scelta mancante e torna indietro senza perdere la nota. ## Riferimento di design sistema di design .italia Pacchetto installato e documentazione ufficiale di Bootstrap Italia 2.18.3; verificati CSS nativo e rendering dei font a tre larghezze. ### Tipografia e font | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Main family | Titillium Web | Nell’anteprima sono inclusi i pesi WOFF2 nativi 400/600/700. | | Long reading / code | Lora / Roboto Mono | font-serif e font-monospace; non usare il monospace per l’intera interfaccia. | | Body | 16px / 1.5 | Base predefinita dalla revisione tipografica 2.7. | | H1 mobile | 40px / 48px | CSS 2.18.3 effettivo sotto i 576px. | | H1 from 576px | 48px / 56px | CSS nativo misurato; la tabella della documentazione riporta ancora un’interlinea di 60px. | | Responsive typography | 576px threshold | Diversa dalla soglia compatta dello Stepper, pari a 992px. | ### Token semantici nativi | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --bs-primary | hsl(210,100%,40%) = #0066cc | Colore per azioni primarie e link. | | --bs-body-color | hsl(0,0%,10%) | Colore predefinito per il testo. | | --bs-success | hsl(160,100%,25%) | Indica un esito positivo, non uno stato di completamento automatico. | | --bs-danger | hsl(350,60%,50%) | Indica un errore o un’azione distruttiva. | | --bs-warning | hsl(36,100%,30%) | Ruolo di avviso, distinto dal giallo della palette. | | --bs-border-radius | 4px | Sono disponibili anche le varianti piccola da 2px e grande da 8px. | ### Spaziatura e layout | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Utility sizes 0–5 | 0, 4, 8, 16, 24, 48px | Con una radice standard di 16px; ad es., p-3=1rem e p-5=3rem. | | Responsive thresholds | 576 / 768 / 992 / 1200 / 1400px | Da sm a xxl. | | Container maxima | 540 / 720 / 960 / 1176 / 1320px | CSS effettivo di Italia; xl è diverso dai 1140px di Bootstrap standard. | | Preview width | 900px maximum | Scelta dell’applicazione per un breve piano locale, non un token ufficiale del contenitore. | | Stepper compact mode | Below 992px | Sono visibili solo l’etichetta attiva e l’indice testuale. | ### Struttura dello Stepper | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Root/header | steppers / steppers-header | L’intestazione contiene un elenco di fasi. | | Stage states | confirmed / active | Il codice dell’applicazione deve aggiornarle dopo la convalida. | | Mobile index | steppers-index | Mantieni n/totale sincronizzato con la fase attiva. | | Body | steppers-content; aria-live=polite | Annuncia i cambiamenti dei contenuti della pagina singola. | | Navigation | steppers-nav; steppers-btn-prev / steppers-btn-next | Le classi definiscono la presentazione, non la navigazione automatica del modulo. | ## Guida completa sistema di design .italia Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## 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. Leggi la specifica di supporto ## 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. Leggi la specifica di supporto ## 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. Leggi la specifica di supporto ## 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. ```

Add an access note

``` Riferimento del codice Leggi la specifica di supporto ## 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. 1. Seleziona Continua senza aver scelto un pulsante radio e verifica l’errore. 2. Scegli un tipo di visita, aggiungi una breve nota e apri il riepilogo. 3. Torna alla nota, verifica che il suo contenuto sia ancora presente, quindi seleziona Ricomincia per cancellare il piano. Leggi la specifica di supporto ## 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. Leggi la specifica di supporto ## 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. Leggi la specifica di supporto ## 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. Leggi la specifica di supporto ## Esempi di componenti del sistema di design sistema di design .italia ### Struttura dello Stepper nella seconda fase Il codice dell’applicazione deve sincronizzare gli stati confermato, attivo e dell’indice mobile. ```

Add an access note

``` Riferimento del codice ### Flusso di pianificazione locale completo CSS/fonts nativo, convalida obbligatoria dei radio button, nota facoltativa, revisione, indietro e ripristino. ``` Prepare a library visit

Independent service example

Prepare a library visit

Choose a visit format, add a note and review your local plan.

  • Visit type
  • Access note
  • Review

Choose a visit type

``` Riferimento del codice ## 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://. ``` npm install bootstrap-italia@2.18.3 # 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 ``` 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. ``` ## 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. - Installazione e risorse CSS, moduli, bundle, font e limiti del runtime. - Stepper Struttura nativa, stati, modalità compatta e area live. - Tipografia Famiglie di font e intestazioni responsive. - Spaziatura Scala e sintassi delle utility. - Sorgente pubblicata Dimensioni della release bloccata e variabili semantiche. - Scarica l’esempio completo e funzionante ZIP con HTML completo, dipendenze locali CSS/JavaScript, licenze fornite e istruzioni esatte per l’avvio. Non è necessario alcun passaggio di compilazione. ## Risorse correlate a sistema di design .italia ### Designsystemet Esplora i ruoli effettivi del tema di Designsystemet, le modalità di dimensionamento e il comportamento nativo dei campi con un editor completo per le descrizioni delle attività, dotato di feedback sul numero di caratteri e di stato di presentazione conservato. ### DSFR Esamina la tipografia, la griglia e l’accordion concreti del sistema dello Stato francese API nel suo contesto istituzionale. Confronta il comportamento dei pannelli informativi collegati e indipendenti in un esempio didattico chiaramente neutrale. ### Europa Component Library Esamina i ruoli cromatici, tipografici e di spaziatura EC di Europa attraverso un brief completo con accordion nativo, inclusi l’uso da tastiera, l’apertura di tutti i pannelli e un’alternativa leggibile senza JavaScript. - [Riferimento per l’implementazione](https://italia.github.io/bootstrap-italia/docs/componenti/steppers/) - [Fonte](https://italia.github.io/bootstrap-italia/docs/organizzare-i-contenuti/tipografia/) - [Fonte](https://github.com/italia/bootstrap-italia/blob/v2.18.3/dist/css/bootstrap-italia.min.css) - [Fonte](https://italia.github.io/bootstrap-italia/docs/organizzare-gli-spazi/spaziature/) - [Fonte](https://italia.github.io/bootstrap-italia/docs/componenti/steppers/) - [Leggi la specifica di supporto](https://italia.github.io/bootstrap-italia/docs/come-iniziare/introduzione/) - [Leggi la specifica di supporto](https://italia.github.io/bootstrap-italia/docs/organizzare-i-contenuti/tipografia/) - [Leggi la specifica di supporto](https://italia.github.io/bootstrap-italia/docs/organizzare-gli-spazi/spaziature/) - [Riferimento del codice](https://italia.github.io/bootstrap-italia/docs/componenti/steppers/) - [Leggi la specifica di supporto](https://italia.github.io/bootstrap-italia/docs/componenti/steppers/) - [Installazione e risorse CSS, moduli, bundle, font e limiti del runtime.](https://italia.github.io/bootstrap-italia/docs/come-iniziare/introduzione/) - [Stepper Struttura nativa, stati, modalità compatta e area live.](https://italia.github.io/bootstrap-italia/docs/componenti/steppers/) - [Tipografia Famiglie di font e intestazioni responsive.](https://italia.github.io/bootstrap-italia/docs/organizzare-i-contenuti/tipografia/) - [Spaziatura Scala e sintassi delle utility.](https://italia.github.io/bootstrap-italia/docs/organizzare-gli-spazi/spaziature/) - [Sorgente pubblicata Dimensioni della release bloccata e variabili semantiche.](https://github.com/italia/bootstrap-italia/blob/v2.18.3/dist/css/bootstrap-italia.min.css)