Esamina la griglia a 3 di Bootstrap, i colori semantici delle azioni e i pannelli dei servizi interamente cliccabili di Poncho attraverso un catalogo di attività funzionante.
Filtra la griglia di pannelli nativi, apri un dettaglio e torna all’attività scelta.
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.
| 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. |
| 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. |
| 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. |
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.
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.
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.
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.
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.
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.
<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>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.
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.
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.
Un unico anchor racchiude il corpo del pannello; non inserire al suo interno altri controlli interattivi.
<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>Pannelli Poncho nativi, filtro per categoria funzionante e vista dettagli che ripristina il focus.
<!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>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 [email protected] [email protected] # 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.
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.
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.
