Examinez la grille Bootstrap 3 de Poncho, ses couleurs d’action sémantiques et ses panneaux de service entièrement cliquables au fil d’un annuaire d’activités fonctionnel.
Filtrez la grille native de panneaux, ouvrez un détail, puis revenez à l’activité choisie.
ar-poncho 2.0.320 CSS et Bootstrap 3.4.1 ; valeurs calculées vérifiées à 1440, 768 et 390px. Les polices de remplacement sont explicites.
| Nom / règle | Valeur / configuration | Utilisation |
|---|---|---|
Package inspected | ar-poncho 2.0.320 | Ne prenez pas la bannière obsolète v0.3.3 pour la version du package. |
Font documentation | Lora headings / Montserrat body | Page de typographie actuelle et importation de polices CSS ; l’ancien fichier README du dépôt mentionne encore Encode Sans. |
Body | 16px / 1.42857143; weight 500 | Mesuré avec Bootstrap 3.4.1 et Poncho ; l’aperçu local utilise Arial. |
H1 | 2.5rem = 40px / 44px | Le titre de l’aperçu reste à 40px sur mobile. |
H2 / H3 | 2rem / 1.75rem | Titres de base ; les règles propres aux titres des panneaux prévalent. |
Panel H3 | 20px / 26px | Contexte du composant, CSS natif mesuré. |
Lead | 18px / 1.2; weight 500 | Une courte introduction plutôt qu’un titre. |
| Nom / règle | Valeur / configuration | Utilisation |
|---|---|---|
--primary | #242C4F | Bleu marine des liens/actions principaux. |
--secondary | #45658D | Bleu secondaire. |
--success | #2e7d33 | Rôle des actions principales/de réussite ; pas une décoration arbitraire. |
--danger | #c62828 | Rôle des actions destructrices ou des erreurs. |
--warning | #E7BA61 | Rôle d’avertissement ; le contraste du texte reste à vérifier. |
--gray-base | #333333 | Texte par défaut. |
--gray-lighter | #f2f2f2 | Surface neutre claire. |
| Nom / règle | Valeur / configuration | Utilisation |
|---|---|---|
Grid | 12 columns; 30px gutter | Bootstrap 3.4.1 : 15px de marge intérieure de chaque côté des colonnes. |
Breakpoints | 768 / 992 / 1200px | sm, md, lg ; col-sm-4 crée trois colonnes à partir de 768px. |
Containers | 750 / 970 / 1170px | Aux points de rupture correspondants ; largeur fluide en dessous de 768px. |
Panel body | 15px 20px | Remplacement du composant Poncho. |
Panel radius / spacing | 10px / 30px bottom margin | CSS natif tel qu’utilisé dans cet exemple. |
Button | 16px; 8px 20px padding; 3px border; 30px radius | Style arrondi des actions de Poncho ; géométrie par défaut différente de celle de Bootstrap. |
Section spacing | 30px default; 20px small; 40px large | Règles section, section-sm et section-lg. |
Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle.
Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources.
Poncho superpose les styles des services publics argentins à Bootstrap 3.4.1. Sa page d’installation mentionne encore une orientation expérimentale pour Bootstrap 4 ; cela ne rend pas les classes de Bootstrap 5 compatibles avec les exemples publiés. Cette ressource fixe ar-poncho 2.0.320 et Bootstrap 3.4.1 afin de pouvoir examiner ensemble l’anatomie des panneaux et le comportement adaptatif.
La bannière de CSS affiche v0.3.3 alors que le package installé est en version 2.0.320. Fiez-vous au manifeste du package et au fichier de verrouillage, pas uniquement à la bannière. L’aperçu indépendant utilise CSS natif pour les panneaux, les boutons et la grille ; le filtrage des activités est d’origine JavaScript, et non un composant de recherche Poncho.
La documentation typographique actuelle recommande Lora pour les titres et Montserrat pour le corps du texte. La feuille de style téléchargée importe ces familles, mais contient aussi d’anciennes déclarations Encode Sans. Le fichier README de configuration du dépôt recommande toujours Encode Sans. Il s’agit d’une véritable incohérence entre versions et sources ; avant une migration en production, il faut examiner la cascade finale de la version retenue plutôt que de supposer que toutes les références historiques décrivent un thème uniforme.
L’aperçu indique explicitement Arial et Georgia comme polices de remplacement et supprime l’importation de polices externe pour assurer un fonctionnement hors ligne fiable. La géométrie native reste visible : corps de texte de 16px, H1 de 40px et introduction de 18px. Les titres des panneaux ont leur propre taille de 20px ; reprendre l’échelle H3 de base dans une carte modifierait le composant.
La documentation des boutons distingue les actions de lien par défaut, les liens secondaires, une action principale ou de réussite et les actions destructrices. btn-primary correspond à une action de lien classique et bien visible ; btn-link convient aux actions secondaires. btn-success signale l’action principale qui fait avancer le parcours ; les recommandations limitent son usage à une seule par page. btn-danger est réservé aux actions destructrices ou irréversibles.
Le navigateur d’activités utilise une action secondaire pour réinitialiser le filtre et une action principale pour revenir au détail développé. Il ne comporte aucun bouton d’inscription vert, car il ne permet d’inscrire personne. N’affichez jamais de message de réussite simplement parce qu’un visiteur a ouvert un panneau local.
Bootstrap 3 utilise une grille à 12 colonnes avec des gouttières de 30px. Une ligne compense les marges intérieures de 15px de ses colonnes. col-sm-4 répartit les trois panneaux d’activité en colonnes égales à partir de 768px ; en dessous, ils s’affichent sur toute la largeur. La largeur des conteneurs passe à 750px, 970px et 1170px aux points de rupture documentés.
Poncho ajoute des espacements aux composants : le contenu des panneaux utilise 15 px à la verticale et 20 px à l’horizontale, avec une marge inférieure de 30 px. Les boutons ont un rayon de 30 px, une bordure de 3 px et un espacement intérieur de 8 px par 20 px. Ces valeurs expliquent la différence visible avec une page Bootstrap non modifiée ; ne les remplacez pas par un thème générique à cartes arrondies.
Dans les exemples officiels, un lien englobe le panneau entier, avec le contenu du panneau à l’intérieur, puis le titre et le texte descriptif dans ce contenu. Une entrée de répertoire compacte constitue ainsi une destination cohérente. Évitez d’imbriquer un autre lien ou bouton dans cette ancre : cela crée des cibles interactives contradictoires.
L’extrait de production pointe vers une véritable route d’activité. Dans l’aperçu local, cette même ancre sémantique est interceptée pour afficher le texte descriptif d’origine. L’aperçu mémorise l’élément qui a ouvert le détail, place le focus sur la nouvelle zone de détail et le rétablit lorsque la personne ferme celle-ci. Il s’agit d’un comportement de l’application ajouté au balisage de panneau documenté.
<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>Le menu de sélection du type d’activité possède un libellé explicite et propose trois catégories. Lorsqu’une catégorie change, les conteneurs des panneaux qui ne correspondent pas sont masqués et un message d’état indique le nouveau nombre de résultats. Ce nombre correspond aux activités visibles, et non au nombre total d’inscriptions ou de places disponibles. La réinitialisation réaffiche les trois activités et replace le focus sur le filtre.
Lorsqu’une catégorie change, tout détail ouvert est fermé afin que le contenu d’une activité désormais masquée ne soit pas dissocié des résultats. L’ouverture d’un panneau ne modifie pas le filtre. Ces règles sont volontairement simples, mais suffisamment complètes pour tester la relation entre les commandes, les résultats et le détail.
Le tableau officiel des boutons présente une classe CSS pour l’état désactivé. Un véritable bouton HTML à désactiver doit aussi avoir l’attribut disabled ; une classe seule n’empêche pas son activation au clavier. Pour les liens, déterminez s’il existe toujours une destination valide au lieu de considérer le style désactivé comme un modèle d’interaction complet.
Utilisez un seul H1 et une hiérarchie cohérente. Ce répertoire utilise H3 dans les panneaux, car le détail développé est une section H2 ; pour une liste autonome sans section intermédiaire, adaptez les niveaux de titre à la structure réelle du document. Les bibliothèques d’icônes décoratives sont facultatives et ne sont pas utilisées ici, car les libellés textuels décrivent chaque action.
Chargez Bootstrap CSS avant Poncho CSS afin que le thème puisse remplacer les styles de base. La grille de base et les panneaux ne nécessitent ni Bootstrap JavaScript ni jQuery. Si l’application ajoute des composants interactifs Bootstrap, chargez une version compatible de jQuery avant Bootstrap 3.4.1 JavaScript et testez les composants réellement utilisés.
Il s’agit d’une pile de dépendances héritée, dont les limites de compatibilité sont définies. Installer une version moderne de Bootstrap à ses côtés ne constitue pas une stratégie de migration. Distinguez la réutilisation du code, régie par la licence MIT du dépôt, de l’identité gouvernementale, des logos officiels et de la licence du contenu affiché sur les pages gouvernementales. L’aperçu utilise des activités communautaires fictives et ne prétend pas être un service du gouvernement argentin.
Une seule ancre englobe le contenu du panneau ; n’y imbriquez pas de commandes interactives.
<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>Panneaux natifs Poncho, filtre fonctionnel par catégorie et vue détaillée qui rétablit le 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>Configuration native CSS. Cet aperçu n’a pas besoin de Bootstrap JavaScript, car la logique de filtrage et de détail est originale. Le ZIP de l’exemple fonctionnel complet, disponible dans les sources, contient aussi les dépendances exactes de l’aperçu et le document complet. Extrayez-le, exécutez python3 -m http.server 8080 dans ce répertoire, puis ouvrez http://localhost:8080/poncho.html. N’ouvrez pas les exemples utilisant des modules avec 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.
Utilisez ar-poncho 2.0.320 avec Bootstrap 3.4.1. Créez un répertoire accessible avec une grille de 12 colonnes et des panneaux cliquables dotés d’une seule ancre. Respectez les couleurs, les espacements intérieurs et les rayons natifs des rôles de bouton. Proposez un filtre avec libellé, le nombre de résultats et le rétablissement du focus. Vérifiez la cascade des polices par rapport au paquet verrouillé ; ne mélangez pas les API de Bootstrap 5 et n’inventez pas de confirmation d’inscription.
Exemple OpenDesign indépendant utilisant CSS natif, sans identité gouvernementale. La documentation actuelle et l’ancien README ne concordent pas sur les familles de polices ; le paquet CSS verrouillé et la police de remplacement explicite définissent cet aperçu.
