# Sistema di progettazione Poncho
## Anteprima dell’interfaccia del sistema di progettazione sistema di design Poncho
Filtra la griglia di pannelli nativi, apri un dettaglio e torna all’attività scelta.
## Riferimento di progettazione del sistema di progettazione sistema di design Poncho
ar-poncho 2.0.320 CSS e Bootstrap 3.4.1; valori calcolati verificati a 1440, 768 e 390px. I font di fallback sono indicati esplicitamente.
### Tipografia pubblicata di CSS
| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| Package inspected | ar-poncho 2.0.320 | Non usare il banner obsoleto v0.3.3 come versione del pacchetto. |
| Font documentation | Lora headings / Montserrat body | Pagina tipografica attuale e importazione dei font di CSS; il vecchio README del repository indica ancora Encode Sans. |
| Body | 16px / 1.42857143; weight 500 | Misurato con Bootstrap 3.4.1 e Poncho; l’anteprima locale usa Arial. |
| H1 | 2.5rem = 40px / 44px | Il titolo dell’anteprima resta di 40px sui dispositivi mobili. |
| H2 / H3 | 2rem / 1.75rem | Titoli di base; le regole specifiche dei pannelli hanno la precedenza. |
| Panel H3 | 20px / 26px | Contesto del componente, CSS nativo misurato. |
| Lead | 18px / 1.2; weight 500 | Una breve introduzione, non un titolo. |
### Ruoli cromatici
| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --primary | #242C4F | Blu navy per il collegamento o l’azione principale. |
| --secondary | #45658D | Blu secondario. |
| --success | #2e7d33 | Ruolo dell’azione principale/di successo; non una decorazione arbitraria. |
| --danger | #c62828 | Ruolo dell’azione distruttiva o dell’errore. |
| --warning | #E7BA61 | Ruolo di attenzione; è comunque necessario verificare il contrasto del testo. |
| --gray-base | #333333 | Testo predefinito. |
| --gray-lighter | #f2f2f2 | Superficie neutra chiara. |
### Dimensioni della griglia e dei componenti
| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| Grid | 12 columns; 30px gutter | Bootstrap 3.4.1: padding di 15px su ciascun lato della colonna. |
| Breakpoints | 768 / 992 / 1200px | sm, md, lg; col-sm-4 crea tre colonne a partire da 768px. |
| Containers | 750 / 970 / 1170px | Alle rispettive larghezze di breakpoint; larghezza fluida sotto i 768px. |
| Panel body | 15px 20px | Override del componente Poncho. |
| Panel radius / spacing | 10px / 30px bottom margin | CSS nativo, come utilizzato in questo esempio. |
| Button | 16px; 8px 20px padding; 3px border; 30px radius | Stile arrotondato delle azioni di Poncho; non la geometria predefinita di Bootstrap. |
| Section spacing | 30px default; 20px small; 40px large | Regole section, section-sm e section-lg. |
## Guida completa al sistema di progettazione sistema di design Poncho
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.
## Versione e dipendenze del sistema di progettazione sistema di design Poncho
### Un sistema Bootstrap 3
> Poncho aggiunge stili per i servizi pubblici argentini a Bootstrap 3.4.1. La pagina di installazione menziona ancora una direzione sperimentale Bootstrap 4; questo non rende le classi Bootstrap 5 compatibili con gli esempi pubblicati. Questa risorsa fissa ar-poncho 2.0.320 e Bootstrap 3.4.1, così è possibile esaminare insieme l’anatomia dei pannelli e il comportamento responsive.
Il banner di CSS riporta v0.3.3, anche se il pacchetto installato è la versione 2.0.320. Fai riferimento al manifest del pacchetto e al lockfile, non solo al banner. L’anteprima indipendente usa CSS nativo per pannelli, pulsanti e griglia; il filtraggio delle attività è originale di JavaScript, non è un componente di ricerca di Poncho.
Leggi la specifica di supporto
## Tipografia e fonti del sistema di progettazione sistema di design Poncho
### Risolvi i riferimenti ai font in conflitto
La documentazione tipografica attuale indica Lora per i titoli e Montserrat per il testo corrente. Il foglio di stile scaricato importa queste famiglie, ma contiene anche dichiarazioni meno recenti per Encode Sans. Il README di configurazione del repository consiglia ancora Encode Sans. Si tratta di un’effettiva incongruenza tra versione e fonte; prima di una migrazione in produzione, esamina la cascata finale della versione scelta invece di presumere che ogni riferimento storico descriva un tema uniforme.
L’anteprima dichiara esplicitamente i fallback Arial e Georgia e rimuove l’importazione dei font esterni per garantire l’affidabilità offline. La geometria nativa resta visibile: testo del body di 16px, H1 di 40px e introduzione di 18px. I titoli dei pannelli hanno una dimensione specifica di 20px; copiare in una scheda la scala H3 di base modificherebbe il componente.
Leggi la specifica di supporto
## Colori e gerarchia delle azioni del sistema di progettazione sistema di design Poncho
### Scegli l’azione in base al suo significato
La documentazione dei pulsanti distingue le azioni di collegamento predefinite, i collegamenti secondari, un’unica azione principale o di successo e le azioni distruttive. btn-primary è la normale azione forte con stile da collegamento; btn-link è adatto alle azioni secondarie. btn-success contrassegna l’azione principale di avanzamento e le linee guida ne limitano l’uso a una per pagina. btn-danger è riservato alle azioni distruttive o irreversibili.
Il browser delle attività usa un’azione secondaria di ripristino e un’azione principale per tornare al dettaglio espanso. Non include un pulsante verde di registrazione, perché non può registrare nessuno. Non mostrare mai un messaggio di successo solo perché un visitatore ha aperto un pannello locale.
- btn-primary: azione forte ordinaria; evita azioni concorrenti nello stesso gruppo.
- btn-link: azione secondaria o informativa, come il ripristino del filtro.
- btn-success / btn-danger: usali solo quando l’azione effettiva corrisponde al significato documentato.
Leggi la specifica di supporto
## Griglia e spaziatura del sistema di progettazione sistema di design Poncho
### Usa consapevolmente la griglia ereditata
Bootstrap 3 usa una griglia a 12 colonne con gutter di 30px. Una riga compensa il padding di 15px delle colonne. col-sm-4 assegna ai tre pannelli delle attività colonne di uguale larghezza a partire da 768px; sotto tale larghezza diventano blocchi a tutta larghezza. Nei breakpoint documentati, i container passano a 750px, 970px e 1170px.
Poncho aggiunge la spaziatura dei componenti: il corpo dei pannelli usa 15px in verticale e 20px in orizzontale, con un margine inferiore di 30px. I pulsanti hanno un raggio di 30px, un bordo di 3px e un padding di 8px per 20px. Questi valori spiegano la differenza visibile rispetto a una pagina Bootstrap non modificata; non sostituirli con un tema generico di schede arrotondate.
Leggi la specifica di supporto
## Anatomia dei pannelli interattivi del sistema di progettazione sistema di design Poncho
### Una sola destinazione per scheda
Gli esempi ufficiali di pannello racchiudono l’intero pannello in un anchor, con panel-body al suo interno e il titolo e il testo di supporto inclusi in quel body. In questo modo, una voce compatta di directory costituisce un’unica destinazione coerente. Evita di annidare un altro collegamento o pulsante all’interno dell’anchor: si creerebbero destinazioni interattive in conflitto.
Lo snippet di produzione rimanda a un percorso reale dell’attività. L’anteprima locale intercetta invece lo stesso anchor semantico per mostrare il testo originale del dettaglio. Memorizza l’elemento che l’ha aperto, sposta il focus sulla nuova area di dettaglio e lo ripristina quando il visitatore la chiude. Si tratta di un comportamento applicativo aggiunto al markup del pannello documentato.
```
```
Riferimento del codice
Leggi la specifica di supporto
## Filtri e stato locale del sistema di progettazione sistema di design Poncho
### Un filtro effettivo, non chip decorativi
Il menu select per il tipo di attività ha un’etichetta esplicita e tre categorie. Quando cambia, nasconde i wrapper dei pannelli che non corrispondono e aggiorna un messaggio di stato con il nuovo conteggio. Il conteggio indica le attività visibili, non il numero totale di iscrizioni né la disponibilità. Il ripristino mostra di nuovo tutte e tre le attività e riporta il focus sul filtro.
La modifica di una categoria chiude i dettagli aperti, evitando che i contenuti di un’attività ora nascosta restino scollegati dai risultati. L’apertura di un pannello non modifica il filtro. Sono regole volutamente semplici, ma abbastanza complete da consentire di verificare la relazione tra controlli, risultati e dettagli.
1. Seleziona Arti e verifica che rimanga solo Laboratorio di incisione.
2. Apri l’attività e leggi la descrizione, poi torna allo stesso pannello.
3. Reimposta il filtro e verifica che tutte e tre le attività siano di nuovo visibili.
Leggi la specifica di supporto
## Sistema di design Poncho: tastiera e struttura dei contenuti
### Non copiare stati disabilitati solo visivi
La tabella ufficiale dei pulsanti mostra una classe CSS disabilitata. Anche un pulsante HTML che deve essere disabilitato deve avere l’attributo disabled: la sola classe non impedisce l’attivazione da tastiera. Per i link, valuta se la destinazione è ancora valida, invece di considerare lo stile disabilitato un modello di interazione completo.
Usa un solo H1 e una gerarchia coerente. Questa directory usa H3 all’interno dei pannelli perché i dettagli espansi costituiscono una sezione H2; per un elenco autonomo senza sezioni intermedie, adatta i livelli delle intestazioni alla struttura effettiva del documento. Le librerie di icone decorative sono facoltative e qui sono omesse, perché le etichette testuali comunicano tutte le azioni.
Leggi la specifica di supporto
## Sistema di design Poncho: configurazione nativa e ambito
### Carica solo i livelli usati nell’esempio
Carica Bootstrap CSS prima di Poncho CSS, così il tema sovrascrive le impostazioni di base. La griglia di base e i pannelli non richiedono Bootstrap JavaScript né jQuery. Se l’applicazione aggiunge componenti interattivi Bootstrap, carica una versione compatibile di jQuery prima di Bootstrap 3.4.1 JavaScript e verifica i componenti effettivamente utilizzati.
È uno stack di dipendenze legacy con un limite di compatibilità definito. Installare Bootstrap moderno insieme a questo stack non è una strategia di migrazione. Distingui il riutilizzo del codice, soggetto alla licenza MIT del repository, dall’identità governativa, dai loghi ufficiali e dalla licenza dei contenuti mostrata nelle pagine governative. L’anteprima usa attività comunitarie fittizie e non si presenta come un servizio del governo argentino.
Leggi la specifica di supporto
## Esempi di componenti del sistema di design Poncho
### Navigazione sull’intero pannello
Un unico anchor racchiude il corpo del pannello; non inserire al suo interno altri controlli interattivi.
```
```
Riferimento del codice
### Directory completa delle attività
Pannelli Poncho nativi, filtro per categoria funzionante e vista dettagli che ripristina il focus.
```
Community activities
COMMUNITY PROGRAMME · INDEPENDENT EXAMPLE
Find a local activity
Browse practical sessions at the community centre.
```
Riferimento del codice
## Configurazione dell’agente sistema di design Poncho
### Punto di partenza per l’implementazione
Configurazione CSS nativa. Questa anteprima non richiede Bootstrap JavaScript, perché la logica di filtro e dettagli è stata sviluppata appositamente. Lo ZIP con l’esempio completo e funzionante, disponibile in Sources, include anche le dipendenze esatte dell’anteprima e il documento completo. Estrailo, esegui python3 -m http.server 8080 nella directory e poi apri http://localhost:8080/poncho.html. Non aprire gli esempi basati su moduli tramite 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.
```
### Un prompt per il tuo progetto
```
Usa ar-poncho 2.0.320 con Bootstrap 3.4.1. Crea una directory accessibile con una griglia a 12 colonne e schede a pannello con un solo anchor. Mantieni i colori semantici dei pulsanti nativi, il padding e i raggi. Fornisci filtri con etichette, conteggi dei risultati e ripristino del focus. Verifica la cascata dei font rispetto al pacchetto fissato; non combinare le API di Bootstrap 5 né inventare conferme di registrazione.
```
## Sistema di design Poncho: fonti e ambito
Esempio indipendente OpenDesign che usa CSS nativo, senza identità governativa. La documentazione attuale e il README precedente indicano famiglie di font diverse; per questa anteprima fanno fede il pacchetto CSS fissato e il fallback esplicito.
- Repository ufficiale e installazione Configurazione del pacchetto, dipendenze e licenza MIT del codice.
- Anatomia dei pannelli Anchor sull’intera scheda, testo di supporto e varianti.
- Significato dei pulsanti Gerarchia delle azioni, nomi delle classi e stati.
- Tipografia Famiglie di font attuali e indicazioni per il testo semantico.
- CSS pubblicato Dichiarazioni effettive di colori, tipografia e geometria.
- Griglia Bootstrap 3 Colonne responsive, gutter e larghezze dei contenitori ereditati.
- 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 al sistema di design Poncho
### Queensland Government sistema di design
Esplora l’implementazione Bootstrap del Queensland attraverso un selettore di risorse illustrato e completo, con ruoli tema reali, stile nativo delle caselle di controllo e un dialogo di revisione accessibile.
### Ripple
Esplora i ruoli cromatici effettivi di Ripple, la scala di spaziatura a 14 livelli e i riferimenti tipografici responsive attraverso una timeline completa per un workshop, con visualizzazione progressiva, indicatore di avanzamento e focus da tastiera sul passaggio successivo.
### Scottish Government sistema di design
Applica la tipografia responsive, le spaziature e i ruoli cromatici del governo scozzese a un campo nativo con conteggio dei caratteri, che conserva il testo oltre il limite e consente di correggerlo.
- [Riferimento per l’implementazione](https://argob.github.io/poncho/componentes/paneles/)
- [Fonte](https://github.com/argob/poncho/blob/master/dist/css/poncho.css)
- [Fonte](https://getbootstrap.com/docs/3.4/css/#grid)
- [Leggi la specifica di supporto](https://github.com/argob/poncho)
- [Leggi la specifica di supporto](https://argob.github.io/poncho/identidad/tipografia/)
- [Leggi la specifica di supporto](https://argob.github.io/poncho/componentes/botones/)
- [Leggi la specifica di supporto](https://getbootstrap.com/docs/3.4/css/#grid)
- [Riferimento del codice](https://argob.github.io/poncho/componentes/paneles/)
- [Leggi la specifica di supporto](https://argob.github.io/poncho/componentes/paneles/)
- [Repository ufficiale e installazione Configurazione del pacchetto, dipendenze e licenza MIT del codice.](https://github.com/argob/poncho)
- [Anatomia dei pannelli Anchor sull’intera scheda, testo di supporto e varianti.](https://argob.github.io/poncho/componentes/paneles/)
- [Significato dei pulsanti Gerarchia delle azioni, nomi delle classi e stati.](https://argob.github.io/poncho/componentes/botones/)
- [Tipografia Famiglie di font attuali e indicazioni per il testo semantico.](https://argob.github.io/poncho/identidad/tipografia/)
- [CSS pubblicato Dichiarazioni effettive di colori, tipografia e geometria.](https://github.com/argob/poncho/blob/master/dist/css/poncho.css)
- [Griglia Bootstrap 3 Colonne responsive, gutter e larghezze dei contenitori ereditati.](https://getbootstrap.com/docs/3.4/css/#grid)