# Système de design Pico CSS ## Aperçu de l’interface du système de design Pico CSS Modifiez la longueur de ligne et la taille de l’échantillon, changez l’apparence et consultez un profil local dans une boîte de dialogue native. ## Référence de conception du système de design Pico CSS Feuille de style compilée par défaut de Pico CSS 2.1.1. Les premières définitions de couleur correspondent au thème clair. La mise à l’échelle adaptative de la taille de police racine modifie la valeur en pixels de rem : ne partez pas du principe que la taille de la racine est de 16px sur chaque fenêtre d’affichage. Les largeurs de lecture et le point de rupture de composition à 800px sont des choix propres à l’application. ### Typographie et rythme | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --pico-font-family | var(--pico-font-family-sans-serif) | Alias de famille sans empattement du système. | | --pico-line-height | 1.5 | Interligne par défaut du corps de texte. | | --pico-font-size | 100% | Taille initiale de la racine, avant les règles média adaptatives. | | --pico-spacing | 1rem | Unité d’espacement de base. | | --pico-typography-spacing-vertical | 1rem | Rythme vertical du texte. | | --pico-grid-column-gap | var(--pico-spacing) | Espace entre les colonnes natives de .grid. | | --pico-border-radius | 0.25rem | Forme par défaut des commandes et des cartes. | | --pico-border-width | 0.0625rem | Épaisseur de bordure par défaut. | | --pico-outline-width | 0.125rem | Épaisseur du contour de focus. | | --pico-form-element-spacing-vertical | 0.75rem | Espacement vertical des champs et des boutons. | | --pico-form-element-spacing-horizontal | 1rem | Espacement horizontal des champs et des boutons. | ### Rôles principaux du thème clair | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --pico-primary | #0172ad | Couleur des liens et du texte principal. | | --pico-primary-background | #0172ad | Arrière-plan du bouton principal. | | --pico-primary-hover | #015887 | Texte principal au survol. | | --pico-primary-hover-background | #02659a | Surface du bouton principal au survol. | | --pico-primary-focus | rgba(2, 154, 232, 0.5) | Couleur de mise en évidence du focus. | | --pico-primary-inverse | #fff | Texte sur fond principal. | | --pico-background-color | #fff | Surface de la page. | | --pico-color | #373c44 | Texte du corps par défaut. | | --pico-muted-color | #646b79 | Texte secondaire. | ### Tailles de police racine adaptatives | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Base | 100% | 16px si la valeur par défaut du navigateur est de 16px. | | ≥576px | 106.25% | 17px dans les mêmes conditions. | | ≥768px | 112.5% | 18px. | | ≥1024px | 118.75% | 19px. | | ≥1280px | 125% | 20px. | | ≥1536px | 131.25% | 21px. | ### Tailles des titres et commandes de l’application | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | h1 | 2rem / 1.125 | Taille et interligne officiels du titre. | | h2 | 1.75rem / 1.15 | Titre officiel de deuxième niveau. | | h3 | 1.5rem / 1.175 | Titre officiel de troisième niveau. | | Reading measure | 48ch / 62ch / 72ch | Longueurs maximales de ligne sélectionnables d’origine. | | Sample scale | 90–125%; step 5 | Limites d’origine des curseurs, appliquées uniquement au texte d’exemple. | | Composition breakpoint | 800px | Règle d’origine de passage de deux colonnes à une seule. | ## Guide complet du système de design Pico CSS 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. ## Système de design Pico CSS : une surface HTML sémantique et épurée ### Une surface HTML sémantique et épurée > Pico met en forme les éléments HTML familiers sans imposer à chaque paragraphe, champ ou bouton une longue liste de classes de composants. Dans cet exemple, article sert de carte de préférences, son en-tête et son pied de page en délimitent les sections, et les libellés enveloppent les commandes natives input/select. L’élément main utilise container, car il s’agit de la version standard de Pico, et non de la distribution distincte sans classes. Pico convient ainsi aux outils compacts et aux interfaces axées sur le contenu, pour lesquels les commandes natives du navigateur suffisent. Il ne transforme pas à lui seul un formulaire en application. Le JavaScript complet gère l’échantillon de lecture, l’aperçu de vérification et le résultat local, tandis que le navigateur prend en charge les sémantiques élémentaires des champs. Consultez la spécification associée ## Variables de thème et rôles sémantiques du système de design Pico CSS ### Variables de thème et rôles sémantiques Le rôle principal par défaut n’est pas une couleur unique appliquée indistinctement. Pico distingue les valeurs du texte principal, de l’arrière-plan, du survol, du focus et de l’inversion. Le tableau de référence indique les définitions réelles du thème clair, afin qu’une personnalisation de marque puisse en préserver les relations. Les libellés de l’espace de lecture utilisent le rôle de texte principal ; les boutons héritent du style complet des composants de Pico. Le sélecteur d’apparence définit data-theme sur html. Un attribut explicite light ou dark prend le pas sur la sélection automatique du thème. Si vous le supprimez, Pico peut suivre le schéma de couleurs préféré dans le navigateur. La démo définit un mode initial explicite pour que la case à cocher et l’apparence restent synchronisées. Si vous introduisez une palette principale personnalisée, remplacez les deux définitions de schéma : modifier uniquement une valeur de la racine du thème clair ne suffit pas à créer un thème sombre complet. Consultez la spécification associée ## Système de design Pico CSS : la typographie adaptative transforme toute l’échelle ### La typographie adaptative transforme toute l’échelle Pico modifie la taille de police racine à plusieurs largeurs de fenêtre : 100% au départ, puis 106.25%, 112.5%, 118.75%, 125% et 131.25%. Avec une valeur par défaut du navigateur de 16px, cela correspond à 16–21px. Comme l’espacement des composants est défini en rem, la mise en page confortable s’agrandit en même temps que le texte. Un jeton défini comme une rem ne vaut donc pas toujours seize pixels. Le curseur de l’échantillon modifie uniquement la valeur de font-size de #sample, en la définissant en pourcentage de sa taille héritée. Il ne modifie ni la variable racine de Pico ni le réglage de zoom du navigateur. Cette distinction permet de garder les commandes de réglage stables et de délimiter clairement leur portée. L’élément natif output affiche le pourcentage sélectionné. Les tailles de titre conservent les valeurs par défaut de Pico : h1 est à 2rem et h2 à 1.75rem. Consultez la spécification associée ## Système de design Pico CSS : longueur de ligne et composition de lecture ### Longueur de ligne et composition de lecture Les trois longueurs de ligne sont des choix d’origine exprimés en unités ch. Elles définissent une largeur maximale sans obliger le texte à occuper toute la colonne. Sur mobile, l’échantillon peut être plus étroit que la largeur maximale sélectionnée : c’est le comportement attendu d’une largeur maximale adaptative. Il n’est pas nécessaire d’ajouter un défilement horizontal pour respecter une préférence de largeur importante. La mise en page de lecture personnalisée reading-layout comporte deux colonnes minmax et passe à une seule sous 800px. Ce seuil est propre à cette composition et ne correspond pas à un point de rupture officiel de Pico. Les boutons de vérification et de réinitialisation côte à côte utilisent l’assistant de grille de Pico, tandis que le pied de page de la boîte de dialogue utilise une rangée flex avec retour à la ligne. Sur les petits écrans, mieux vaut conserver un panneau de réglages lisible que maintenir une disposition à deux colonnes. Consultez la spécification associée ## Système de design Pico CSS : validation native avec une étape de vérification utile ### Validation native avec une étape de vérification utile Le nom du profil utilise les attributs required et minlength, accompagnés d’un court texte d’aide. La validation native des contraintes empêche l’envoi d’un formulaire vide. Le script vérifie également la valeur après suppression des espaces superflus, afin qu’une suite de deux espaces ne satisfasse pas la règle de l’application. Un événement invalid ajoute aria-invalid pour appliquer le style d’erreur de Pico ; la saisie efface l’erreur personnalisée et l’attribut invalid devenu obsolète. Les commandes select et range sont des contrôles de navigateur standard. Elles mettent immédiatement à jour l’exemple de lecture, tandis que Review profile crée un objet distinct en attente. Cet instantané fournit le texte affiché dans la boîte de dialogue et les données utilisées par Apply locally : la confirmation ne risque donc pas de décrire un ensemble de valeurs et d’en appliquer un autre. 1. Laissez le nom du profil vide et essayez Review profile. 2. Saisissez un nom, choisissez une largeur et modifiez la taille de l’exemple. 3. Examinez l’instantané, annulez pour continuer les modifications ou appliquez-le à l’état local. Consultez la spécification associée ## Système de design Pico CSS : une vraie boîte de dialogue, pas une simple superposition stylisée ### Une véritable boîte de dialogue modale, pas une simple superposition stylisée Pico applique des styles à dialog et à son contenu article, mais ne fournit pas la JavaScript de l’application. Cet exemple utilise HTMLDialogElement.showModal. Le navigateur place la boîte de dialogue au premier plan, rend le reste du document inerte et permet de la fermer nativement avec Échap. Le simple ajout de l’attribut open produirait un comportement différent, non modal ; cette méthode n’est pas utilisée ici. La boîte de dialogue possède un attribut aria-labelledby qui pointe vers son titre. Le bouton de fermeture comporte un libellé accessible explicite, tandis que Keep editing et Apply locally décrivent les deux résultats possibles. Les deux boutons d’annulation appellent close sans modifier l’état enregistré. L’application enregistre le profil en attente dans un texte visible, puis ferme la boîte de dialogue ; elle n’écrit pas dans localStorage et n’envoie aucune requête. Consultez la spécification associée ## Système de design Pico CSS : un élément natif de divulgation pour les explications complémentaires ### Un élément natif dépliable pour afficher une explication complémentaire La paire details/summary explique quels contrôles modifient l’exemple et lesquels n’ont aucun effet. Elle est réellement dépliable sans JavaScript, car ce comportement est intégré à l’élément HTML. Le résumé pose une question explicite et reste utilisable au clavier. L’explication est un contenu complémentaire ; elle n’interrompt donc pas le formulaire principal avec un autre panneau toujours ouvert. Ne remplacez pas details par un titre stylisé sous prétexte que l’apparence fermée est similaire dans une capture d’écran. De même, le contrôle d’apparence conserve type=checkbox avec role=switch : il possède ainsi un véritable état binaire. Pico applique ses styles aux structures sémantiques, qui portent une grande partie du contrat d’interaction. - article regroupe visuellement les préférences dans une même surface. - details et summary assurent une divulgation native. - La boîte de dialogue ouverte avec showModal définit un cadre de révision modal. Consultez la spécification associée ## Système de design Pico CSS : installer une seule fois et conserver un exemple reproductible ### Installer une seule fois et conserver un exemple reproductible Le package standard contient un fichier pico.min.css compilé. Copiez-le dans un dossier assets local, incluez-le avant les règles de mise en page de l’application, puis chargez le fichier app.js fourni avec defer. Le balisage complet, CSS et le script sont présentés ci-dessus. Cet exemple ne nécessite ni fournisseur de framework, ni police d’icônes, ni plugin JavaScript tiers. Utilisez la feuille de style standard avec ses classes container/grid. La version sans classes repose sur d’autres hypothèses de mise en page, tandis que la version conditionnelle applique les styles différemment. Remplacer une distribution par une autre sans vérifier le balisage n’est pas une optimisation neutre. Si vous ajoutez Pico à un site existant, vérifiez comment ses sélecteurs d’éléments interagissent avec les styles de formulaires et de typographie déjà en place avant de les appliquer à l’ensemble du site. Consultez la spécification associée ## Système de design Pico CSS : choisir la distribution avant d’adapter le balisage ### Choisissez la distribution avant d’adapter le balisage Cet exemple utilise la distribution standard et ses aides container et grid. La distribution sans classes modifie les hypothèses de mise en page, tandis que la distribution conditionnelle définit la portée des styles Pico. Considérez le choix d’une distribution comme une décision d’intégration, et non comme une simple optimisation interchangeable de la taille des fichiers. Sur un site existant, examinez la portée des sélecteurs d’éléments sur les titres, formulaires, articles et boîtes de dialogue déjà présents. La taille de police en pourcentage de l’exemple de lecture est une surcharge locale ; elle doit le rester. Modifier l’échelle à la racine changerait également les espacements et contrôles de Pico basés sur rem. Lors du choix des parties du document qui héritent du thème, veillez à ce que l’attribut d’apparence et les contrôles de préférences de l’application restent cohérents. Consultez la spécification associée ## Système de design Pico CSS : exemples de composants ### Interface de lecture sémantique complète Les libellés englobent leurs contrôles, article crée la carte des paramètres, details fournit la divulgation et dialog contient la révision. ```

PICO CSS / READING ROOM

A calmer reading setup

Adjust a local reading profile. Semantic HTML does most of the work.

Reading preferences

At least two characters. Saved only for this open preview.
No profile applied yet.

A SHORT SAMPLE

Make space for attention.

The margin is not leftover space. It gives each paragraph a clear beginning and lets the eye return to the next line without effort.

A reading interface can be quiet without becoming empty. Descriptive headings, useful contrast, and a predictable rhythm let the content remain in charge.

What changes in this preview?

Width changes the maximum line measure, text size scales only this sample, and the appearance switch changes Pico’s theme. These are local preferences, not browser accessibility settings.

Official Pico CSS 2.1.1. Native form, details, and dialog elements; original application behavior.

Review reading profile

 ``` Référence du code - Pico applique des styles à ces éléments ; les API du navigateur leur confèrent un comportement natif. - La boîte de dialogue s’ouvre avec showModal, et non par l’ajout de l’attribut open. ### Interaction d’origine du profil Styles dynamiques, validation native, texte de révision sécurisé et application/réinitialisation locales. ``` const $=id=>document.getElementById(id);let pending=null; function update(){ $('sample').style.maxWidth=$('measure').value+'ch';$('sample').style.fontSize=$('scale').value+'%';$('size-label').value=$('scale').value+'%';document.documentElement.dataset.theme=$('night').checked?'dark':'light';} for(const id of ['measure','scale','night'])$(id).addEventListener('input',update); $('preferences').addEventListener('submit',event=>{event.preventDefault();pending={name:$('reader').value.trim(),width:$('measure').value,size:$('scale').value,dark:$('night').checked};if(pending.name.length<2){$('reader').setCustomValidity('Use at least two non-space characters.');$('reader').reportValidity();return;}$('review-text').textContent=`${pending.name}: ${pending.width}-character maximum, ${pending.size}% sample text, ${pending.dark?'dark':'light'} appearance. This will apply only to this preview.`;$('review').showModal();}); $('reader').addEventListener('input',()=>{$('reader').setCustomValidity('');$('reader').removeAttribute('aria-invalid')});$('reader').addEventListener('invalid',()=>{$('reader').setAttribute('aria-invalid','true')}); for(const id of ['close','cancel'])$(id).addEventListener('click',()=>$('review').close()); $('apply').addEventListener('click',()=>{$('saved').textContent=`Applied ${pending.name} locally (${pending.width}ch, ${pending.size}%, ${pending.dark?'dark':'light'}). Reloading clears this profile.`;$('review').close();}); $('preferences').addEventListener('reset',()=>{setTimeout(()=>{$('reader').setCustomValidity('');$('reader').removeAttribute('aria-invalid');$('saved').textContent='No profile applied yet.';update()},0)});update(); ``` Référence du code - Le profil ne quitte jamais ce document. - Les noms ne contenant que des espaces sont rejetés avec setCustomValidity. ### Mise en page de lecture Des règles explicites de l’application séparent le panneau de paramètres de l’exemple. ``` main.container{max-width:1120px;padding:2rem 1rem}.kicker{font-size:.7rem;letter-spacing:.13em;font-weight:700;color:var(--pico-primary)}.reading-layout{display:grid;grid-template-columns:minmax(260px,.95fr) minmax(0,1.05fr);gap:2rem;align-items:start}.reading-copy{padding-top:1rem}#sample{transition:font-size .15s}output{float:right}#review article{max-width:560px}#review footer{display:flex;flex-wrap:wrap;gap:.5rem}#review footer button{flex:1}h1{max-width:20ch}header>p{max-width:65ch}@media(max-width:800px){.reading-layout{grid-template-columns:1fr;gap:1rem}} ``` Référence du code - Le point de rupture de 800px et les mesures en ch sont des choix personnalisés. ## Système de design Pico CSS Configuration de l’agent ### Point de départ de l’implémentation Enregistrez les exemples complets ci-dessus sous les noms body, style.css et app.js. L’aperçu autonome intègre le même CSS officiel et le code d’application d’origine. Il s’appuie sur la prise en charge actuelle des navigateurs pour l’élément natif dialog API. Le conteneur HTML comprend l’intégralité du balisage body ; enregistrez les exemples d’interaction et de CSS fournis en utilisant les noms de fichiers indiqués ici. ``` Reading room

PICO CSS / READING ROOM

A calmer reading setup

Adjust a local reading profile. Semantic HTML does most of the work.

Reading preferences

At least two characters. Saved only for this open preview.
No profile applied yet.

A SHORT SAMPLE

Make space for attention.

The margin is not leftover space. It gives each paragraph a clear beginning and lets the eye return to the next line without effort.

A reading interface can be quiet without becoming empty. Descriptive headings, useful contrast, and a predictable rhythm let the content remain in charge.

What changes in this preview?

Width changes the maximum line measure, text size scales only this sample, and the appearance switch changes Pico’s theme. These are local preferences, not browser accessibility settings.

Official Pico CSS 2.1.1. Native form, details, and dialog elements; original application behavior.

Review reading profile

 ``` ### Un prompt pour votre projet ``` Utilisez l’exemple de profil de lecture de Pico 2.1.1 avec sa feuille de style standard, son élément article sémantique, son formulaire natif et son élément de divulgation details. Limitez les modifications de la taille du texte et de la largeur de ligne à l’exemple, et synchronisez la case à cocher d’apparence avec data-theme. Validez le nom du profil après suppression des espaces superflus, créez un instantané de révision et ouvrez-le avec dialog.showModal ; une annulation ne doit pas appliquer les modifications. Appliquez uniquement le profil local capturé et réinitialisez les valeurs après restauration des valeurs par défaut du formulaire natif. Conservez l’échelle racine adaptative de Pico au lieu de la remplacer par le paramètre de taille du texte de l’exemple. ``` ## Pico CSS Sources et portée du système de design Pico CSS 2.1.1. Les jetons par défaut sont séparés des règles d’origine de mise en page de lecture et de gestion du profil. Aucune persistance ni aucun service distant n’est implémenté. - Variables CSS Définitions réelles des styles et des couleurs. - Typographie Titres et typographie sémantiques. - Formulaires Composition native des formulaires. - Fenêtre modale Style des fenêtres de dialogue et limites du comportement de l’application. - Grille Outil d’aide à la mise en page adaptative. - Accordéon Divulgation avec les éléments details et summary. ## Ressources associées au système de design Pico CSS ### Preline UI Un planificateur de sessions Preline natif avec des onglets liés, un plugin de saisie numérique à limites définies, les alias de thème installés, les véritables échelles Tailwind et une estimation locale du matériel qui se met à jour selon la session choisie. ### Prime UI Une implémentation PrimeVue dont la version est figée dans l’écosystème Prime UI : un arbre de documents au thème Aura avec les références réelles aux préréglages, l’expansion contrôlée, le filtrage, la sélection et l’épinglage local. ### Pure CSS Pure CSS est une feuille de style modulaire pour les grilles, formulaires, boutons, menus et tableaux, sans moteur d’exécution de widgets. Ce guide montre comment son module de grille adaptative facultatif s’associe aux éléments sémantiques natifs dans un catalogue d’équipement filtrable, avec un tri et une sélection explicitement implémentés. - [Référence de mise en œuvre](https://picocss.com/docs/forms) - [Source](https://picocss.com/docs/css-variables) - [Consultez la spécification associée](https://picocss.com/docs/forms) - [Consultez la spécification associée](https://picocss.com/docs/css-variables) - [Consultez la spécification associée](https://picocss.com/docs/typography) - [Consultez la spécification associée](https://picocss.com/docs/grid) - [Consultez la spécification associée](https://picocss.com/docs/modal) - [Consultez la spécification associée](https://picocss.com/docs/accordion) - [Référence du code](https://picocss.com/docs/modal) - [Référence du code](https://picocss.com/docs/forms) - [Référence du code](https://picocss.com/docs/grid) - [Variables CSS Définitions réelles des styles et des couleurs.](https://picocss.com/docs/css-variables) - [Typographie Titres et typographie sémantiques.](https://picocss.com/docs/typography) - [Formulaires Composition native des formulaires.](https://picocss.com/docs/forms) - [Fenêtre modale Style des fenêtres de dialogue et limites du comportement de l’application.](https://picocss.com/docs/modal) - [Grille Outil d’aide à la mise en page adaptative.](https://picocss.com/docs/grid) - [Accordéon Divulgation avec les éléments details et summary.](https://picocss.com/docs/accordion)