# Système de design Poncho
## Aperçu de l’interface du système de design Poncho
Filtrez la grille native de panneaux, ouvrez un détail, puis revenez à l’activité choisie.
## Référence de conception du système de design Poncho
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.
### Typographie publiée de CSS
| 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. |
### Rôles des couleurs
| 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. |
### Dimensions de la grille et des composants
| 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. |
## Guide complet du système de design Poncho
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.
## Version et dépendances du système de design Poncho
### Un système Bootstrap 3
> 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.
Consultez la spécification associée
## Typographie et éléments de référence du système de design Poncho
### Résoudre les références contradictoires aux polices
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.
Consultez la spécification associée
## Couleurs et hiérarchie des actions du système de design Poncho
### Choisir une action selon sa signification
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.
- btn-primary : action forte classique ; évitez les actions concurrentes au sein d’un même groupe.
- btn-link : action secondaire ou informative, comme la réinitialisation du filtre.
- btn-success / btn-danger : à utiliser uniquement si l’action a réellement le sens documenté.
Consultez la spécification associée
## Grille et espacements du système de design Poncho
### Utiliser délibérément la grille héritée
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.
Consultez la spécification associée
## Anatomie d’un panneau cliquable du système de design Poncho
### Une destination par carte
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é.
```
```
Référence du code
Consultez la spécification associée
## Filtrage et état local du système de design Poncho
### Un véritable filtre, pas des pastilles décoratives
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.
1. Choisissez Arts et vérifiez que seul l’atelier de gravure reste affiché.
2. Ouvrez l’activité et consultez sa description, puis revenez au même panneau.
3. Réinitialisez le filtre et vérifiez que les trois activités sont de nouveau visibles.
Consultez la spécification associée
## Clavier et structure du contenu du système de design Poncho
### Ne reproduisez pas les états désactivés uniquement visuels
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.
Consultez la spécification associée
## Configuration native et périmètre du système de design Poncho
### Chargez uniquement les couches utilisées par l’exemple
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.
Consultez la spécification associée
## Exemples de composants du système de design Poncho
### Navigation par panneau entier
Une seule ancre englobe le contenu du panneau ; n’y imbriquez pas de commandes interactives.
```
```
Référence du code
### Répertoire complet des activités
Panneaux natifs Poncho, filtre fonctionnel par catégorie et vue détaillée qui rétablit le focus.
```
Community activities
COMMUNITY PROGRAMME · INDEPENDENT EXAMPLE
Find a local activity
Browse practical sessions at the community centre.
```
Référence du code
## Configuration de l’agent du système de design Poncho
### Point de départ de l’implémentation
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 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 pour votre projet
```
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.
```
## Sources et périmètre du système de design Poncho
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.
- Dépôt officiel et installation Configuration du paquet, dépendances et licence MIT du code.
- Anatomie d’un panneau Ancres englobant toute la carte, texte descriptif et variantes.
- Rôle des boutons Hiérarchie des actions, noms de classes et états.
- Typographie Familles de polices actuelles et recommandations pour le texte sémantique.
- CSS publié Déclarations réelles des couleurs, de la typographie et de la géométrie.
- Grille Bootstrap 3 Colonnes responsives, gouttières et largeurs de conteneur héritées.
- Télécharger l’exemple complet fonctionnel Archive ZIP comprenant le HTML complet, les dépendances locales CSS/JavaScript, les licences fournies et les instructions de lancement exactes. Aucune étape de build n’est nécessaire.
## Ressources connexes du système de design Poncho
### Queensland Government système de design
Découvrez l’implémentation de Bootstrap au Queensland grâce à un sélecteur de ressources illustré complet, avec les véritables rôles du thème, le style natif des cases à cocher et une boîte de dialogue de vérification accessible.
### Ripple
Découvrez les véritables rôles de couleur de Ripple, son échelle d’espacement en 14 étapes et ses références typographiques adaptatives grâce à un calendrier d’atelier complet proposant une divulgation progressive, une progression et le déplacement du focus vers l’étape suivante au clavier.
### Scottish Government système de design
Appliquez les rôles typographiques, d’espacement et de couleur adaptatifs du gouvernement écossais à un champ natif avec compteur de caractères, qui conserve le texte au-delà de la limite et permet de corriger la saisie.
- [Référence de mise en œuvre](https://argob.github.io/poncho/componentes/paneles/)
- [Source](https://github.com/argob/poncho/blob/master/dist/css/poncho.css)
- [Source](https://getbootstrap.com/docs/3.4/css/#grid)
- [Consultez la spécification associée](https://github.com/argob/poncho)
- [Consultez la spécification associée](https://argob.github.io/poncho/identidad/tipografia/)
- [Consultez la spécification associée](https://argob.github.io/poncho/componentes/botones/)
- [Consultez la spécification associée](https://getbootstrap.com/docs/3.4/css/#grid)
- [Référence du code](https://argob.github.io/poncho/componentes/paneles/)
- [Consultez la spécification associée](https://argob.github.io/poncho/componentes/paneles/)
- [Dépôt officiel et installation Configuration du paquet, dépendances et licence MIT du code.](https://github.com/argob/poncho)
- [Anatomie d’un panneau Ancres englobant toute la carte, texte descriptif et variantes.](https://argob.github.io/poncho/componentes/paneles/)
- [Rôle des boutons Hiérarchie des actions, noms de classes et états.](https://argob.github.io/poncho/componentes/botones/)
- [Typographie Familles de polices actuelles et recommandations pour le texte sémantique.](https://argob.github.io/poncho/identidad/tipografia/)
- [CSS publié Déclarations réelles des couleurs, de la typographie et de la géométrie.](https://github.com/argob/poncho/blob/master/dist/css/poncho.css)
- [Grille Bootstrap 3 Colonnes responsives, gouttières et largeurs de conteneur héritées.](https://getbootstrap.com/docs/3.4/css/#grid)