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.
Modules officiels de Pure CSS 3.1.0 et de grille adaptative ; JavaScript d’origine, sans framework. · Référence de mise en œuvre
02
Référence de conception du système de design Pure CSS
Modules du package compilé de Pure CSS 3.1.0. Il s’agit de valeurs de sélecteur littérales, et non d’un ensemble nommé de jetons de design API : Pure ne publie pas de thème sémantique à variables CSS comme Chakra ou Pico. L’application ajoute sa propre typographie, ses espacements de mise en page et un contour de focus plus visible.
Valeurs officielles des boutons et des formulaires
Le système de design Pure CSS : un petit ensemble de modules CSS
Un petit ensemble de modules CSS
Pure propose une normalisation de base, des grilles, des boutons, des formulaires, des menus et des tableaux. Ce catalogue utilise le bundle compilé du package ainsi qu’un fichier de grille adaptative séparé. Il n’importe ni framework JavaScript, ni fournisseur, ni environnement d’exécution de widgets. Le filtrage, le tri et la sélection sont implémentés dans le code de l’application, présenté intégralement ci-dessus.
Cette distinction est importante lorsque l’on compare Pure à une plateforme complète de composants. La classe pure-table applique un style aux cellules ; elle ne fournit ni tri, ni pagination, ni virtualisation, ni sémantique de sélection. pure-button est une classe visuelle qui peut être appliquée à un bouton natif. L’exemple conserve les éléments sémantiques sous-jacents au lieu de laisser penser que les noms de classe créent ces comportements.
Système de design Pure CSS littéral CSS — Des valeurs, pas un système de jetons inventé
Valeurs littérales de CSS, pas un système de jetons inventé
Les styles de boutons compilés de Pure utilisent un fond neutre #E6E6E6, un rayon de deux pixels et un remplissage exprimé en em. Le bouton principal facultatif est en rgb(0,120,231), avec un texte blanc. Les champs de formulaire ont un rayon de quatre pixels et leur propre remplissage. La référence du système expose ces différences réelles au lieu de les uniformiser dans une échelle de rayons commune fictive.
Ce catalogue ajoute une palette d’application volontairement sobre : texte bleu-gris foncé, séparateurs neutres et récapitulatif de sélection pâle. Ces choix ne sont pas les couleurs officielles de la marque Pure. Il n’y a pas de bouton de mode sombre, car cette version de l’exemple ne met pas en œuvre une palette d’application alternative complète. Un sélecteur de thème devrait s’appliquer de façon cohérente aux formulaires, aux en-têtes de tableau, aux bordures, au texte et aux états de focus.
Système de design Pure CSS : la typographie et l’espacement relèvent de l’application
La typographie et l’espacement relèvent de l’application
La couche de page d’origine utilise Arial/Helvetica en corps 16 pixels, avec une hauteur de ligne de 1.5, un titre de 34px et des titres de section de 18px. Sur les écrans étroits, le titre passe à 28px. Il s’agit de choix explicites, et non d’une affirmation selon laquelle Pure imposerait une échelle éditoriale. Toutes les valeurs nécessaires pour reproduire la composition figurent dans l’exemple CSS.
La grille de Pure ajuste le rendu du texte et l’espacement des lettres sur son conteneur afin de gérer les unités en ligne. Les règles des unités rétablissent le comportement normal du texte. Le catalogue attribue également sa famille de polices aux unités de la grille, évitant ainsi un changement de police inattendu dans la barre latérale et les résultats. Le remplissage de l’application est placé à l’intérieur des unités, avec un dimensionnement border-box, afin de préserver les largeurs fractionnaires.
Système de design Pure CSS : les fractions adaptatives nécessitent le module responsive
Les fractions adaptatives nécessitent le module responsive
La barre latérale associe pure-u-1 à pure-u-md-1-4 ; les résultats associent pure-u-1 à pure-u-md-3-4. Au départ, les deux occupent toute la largeur. Au seuil de média md, à 48em, elles passent respectivement au quart et aux trois quarts de la largeur. Le filtre conserve ainsi une proportion lisible sans calculs de mise en page JavaScript personnalisés.
Le bundle principal pure-min.css n’inclut pas les classes de requête média de la grille responsive. Si vous oubliez grids-responsive-min.css, les modificateurs md n’auront aucun effet. La configuration charge explicitement les deux fichiers. Sur mobile, la barre latérale précède le tableau et sa bordure est supprimée, pour offrir un parcours de lecture continu.
Système de design Pure CSS : le filtrage est distinct de la sélection
Le filtrage est distinct de la sélection
Le formulaire empilé comprend un champ de recherche avec libellé, un menu de sélection de catégorie et une case à cocher de disponibilité. Chaque modification d’un champ actualise les lignes visibles selon les trois critères. L’envoi du formulaire est empêché afin que la touche Entrée dans le champ de recherche ne déclenche pas de navigation. « Effacer les filtres » appelle la réinitialisation native, puis actualise l’affichage une fois que le navigateur a rétabli les valeurs par défaut.
La sélection est stockée dans un Set d’identifiants stables de kits. Masquer un élément sélectionné à l’aide d’un filtre ne le retire pas de ce Set. La liste de vérification, toujours visible, fait donc autorité quant aux éléments sélectionnés. Ce comportement est expliqué à côté du nombre d’éléments sélectionnés ; sans cela, l’utilisateur pourrait croire que les lignes filtrées correspondent à du matériel désélectionné.
Sélectionnez un enregistreur ou une caméra disponible.
Choisissez une autre catégorie avec le filtre et vérifiez que l’élément sélectionné figure toujours dans la liste de vérification.
Effacez la sélection pour supprimer tous les identifiants sélectionnés, indépendamment des filtres.
Système de design Pure CSS : préserver le sens du tableau sur les écrans étroits
Préservez le sens des tableaux sur les écrans étroits
Le tableau utilise caption, thead, tbody et des attributs scope pour les en-têtes de colonne. L’en-tête Equipment contient un bouton natif qui inverse l’ordre des noms. Son élément parent th reçoit aria-sort=ascending ou descending, en accord avec la flèche visible. Toutes les lignes conservent la même structure de colonnes pendant le tri.
Une largeur minimale de 540px préserve la lisibilité des colonnes Select, Equipment, Category et Availability. Sur un écran étroit, seule la zone du tableau identifiée par son libellé défile horizontalement. Elle peut recevoir le focus au clavier et affiche un contour de focus visible. La page elle-même ne s’élargit pas. Il s’agit d’un traitement délibéré des tableaux de données, plutôt que de forcer chaque ligne dans une carte visuellement sans rapport.
Système de design Pure CSS : les états désactivé, vide et de focus doivent être fonctionnels
Les états désactivé, vide et de focus doivent être fonctionnels
Les éléments prêtés restent dans la liste pour expliquer leur disponibilité, mais ne peuvent pas être sélectionnés : leurs cases à cocher natives sont désactivées. Le bouton « Effacer la sélection » est lui aussi désactivé lorsque le Set est vide. La règle d’opacité de Pure aide à signaler l’apparence désactivée, mais c’est l’attribut HTML qui empêche l’activation.
Lorsqu’un filtre ne renvoie aucun résultat, un message spécifique s’affiche et les en-têtes restent visibles. Le nombre de résultats se trouve dans une région d’état polie. La feuille de style d’origine ajoute un contour de focus-visible bien marqué, car le style de focus par défaut des boutons Pure est un dégradé avec réinitialisation du contour ; pour cet outil opérationnel, un indicateur clavier plus net est utile.
Les cases à cocher désactivées expliquent pourquoi certains kits ne sont pas disponibles, sans retirer leurs lignes.
L’état vide indique comment rétablir l’affichage en effaçant les filtres.
Les contours de focus s’appliquent aux boutons, aux champs de saisie, aux menus de sélection et à la zone de défilement.
Système de design Pure CSS : installer et reproduire l’intégralité du catalogue
Installer et reproduire l’intégralité du catalogue
Installez [email protected], copiez pure-min.css et grids-responsive-min.css dans le répertoire local des ressources, puis incluez-les dans cet ordre, avant style.css. Le corps de page complet, le script de l’application et le CSS sont fournis ci-dessus. Un serveur statique peut servir les fichiers obtenus ; le catalogue ne nécessite aucun environnement d’exécution de build.
Les modules du package sont également disponibles séparément si la taille du bundle impose une sélection plus restreinte. Veillez à conserver la cohérence entre les dépendances de base et de grille lorsque vous réduisez le CSS. Ne copiez pas uniquement une feuille de style de tableau en supposant que les classes de formulaire ou de bouton resteront stylées. L’exemple privilégie une configuration complète et reproductible plutôt qu’un bundle partiel sans explication.
Système de design Pure CSS : choisir les modules CSS sans perdre leurs dépendances
Choisissez les modules CSS sans perdre leurs dépendances
Le bundle compilé applique des styles aux boutons, aux formulaires et au tableau du catalogue, tandis que grids-responsive-min.css fournit les fractions associées aux points de rupture. La suppression du fichier responsive ne provoque aucune erreur : les classes md cessent simplement de modifier la mise en page. Vérifiez le comportement des colonnes lorsque vous réduisez le nombre de modules importés.
Les unités de grille rétablissent également le comportement du texte ajusté par le conteneur de grille pour sa disposition en ligne. Conservez l’affectation de la police de l’application sur les unités et ajoutez-y le remplissage avec un dimensionnement border-box. Si le catalogue intègre ultérieurement une pagination, conservez la sélection à l’aide d’identifiants stables dans l’état de l’application : ni le tableau CSS ni une fraction de grille ne mettent en œuvre ce comportement.
Les cases à cocher des équipements empruntés sont désactivées, et pas simplement atténuées.
État des filtres, du tri et de la sélection
Le comportement d’origine affiche six exemples d’équipements fixes et conserve la sélection à l’aide d’identifiants stables.
javascript
const data=[{id:'c1',name:'Compact camera kit',kind:'Camera',available:true},{id:'c2',name:'Cinema camera kit',kind:'Camera',available:false},{id:'a1',name:'Field recorder',kind:'Audio',available:true},{id:'a2',name:'Wireless microphone pair',kind:'Audio',available:true},{id:'l1',name:'Portable LED panel',kind:'Lighting',available:false},{id:'l2',name:'Softbox lighting kit',kind:'Lighting',available:true}];const selected=new Set();let ascending=true;const $=id=>document.getElementById(id);
function selection(){ $('selected-count').textContent=selected.size+(selected.size===1?' item selected':' items selected');$('clear-selection').disabled=!selected.size;const list=$('selection-list');list.replaceChildren();for(const x of data.filter(x=>selected.has(x.id))){const li=document.createElement('li');li.textContent=x.name;list.append(li);}if(!selected.size){const li=document.createElement('li');li.textContent='No equipment selected.';list.append(li);}}
function render(){const query=$('query').value.toLowerCase().trim();const visible=data.filter(x=>x.name.toLowerCase().includes(query)&&($('kind').value==='all'||x.kind===$('kind').value)&&(!$('available').checked||x.available)).sort((a,b)=>(ascending?1:-1)*a.name.localeCompare(b.name));$('count').textContent=visible.length+' of '+data.length+' kits shown';$('empty').hidden=visible.length!==0;$('rows').replaceChildren();for(const x of visible){const tr=document.createElement('tr');const choice=document.createElement('td');const input=document.createElement('input');input.type='checkbox';input.disabled=!x.available;input.checked=selected.has(x.id);input.setAttribute('aria-label','Select '+x.name);input.addEventListener('change',()=>{input.checked?selected.add(x.id):selected.delete(x.id);selection()});choice.append(input);tr.append(choice);for(const value of [x.name,x.kind,x.available?'Available':'On loan']){const td=document.createElement('td');td.textContent=value;tr.append(td);}$('rows').append(tr);}selection();}
$('filters').addEventListener('input',render);$('filters').addEventListener('submit',e=>e.preventDefault());$('filters').addEventListener('reset',()=>setTimeout(render,0));$('sort').addEventListener('click',()=>{ascending=!ascending;$('sort').textContent='Equipment '+(ascending?'↑':'↓');$('sort').parentElement.setAttribute('aria-sort',ascending?'ascending':'descending');render()});$('clear-selection').addEventListener('click',()=>{selected.clear();render()});render();
Ces valeurs sont des choix propres à l’application, et non des jetons officiels de Pure.
04
Configuration de l’agent du système de design Pure CSS
Point de départ de l’implémentation
Enregistrez les exemples CSS et JavaScript sous les noms style.css et app.js. Les classes de média de la grille responsive se trouvent dans un fichier distinct. L’aperçu hors ligne intègre les deux feuilles de style officielles et le code d’application d’origine. Le wrapper HTML comprend tout le balisage du corps ; enregistrez les exemples d’interaction et CSS fournis sous les noms de fichiers référencés ici.
html
<!-- npm install [email protected]
mkdir -p assets
cp node_modules/purecss/build/pure-min.css assets/
cp node_modules/purecss/build/grids-responsive-min.css assets/ -->
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Equipment catalog</title>
<link rel="stylesheet" href="assets/pure-min.css">
<link rel="stylesheet" href="assets/grids-responsive-min.css">
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script></head>
<body><main class="catalog"><header><p class="eyebrow">PURE CSS / LENDING DESK</p><h1>A small equipment catalog.</h1><p>Find a kit, select available items, and review the local selection.</p></header><div class="pure-g"><aside class="pure-u-1 pure-u-md-1-4"><div class="sidebar"><h2>Refine the list</h2><form class="pure-form pure-form-stacked" id="filters"><label for="query">Equipment name</label><input id="query" type="search" placeholder="Camera, recorder…"><label for="kind">Category</label><select id="kind"><option value="all">All categories</option><option>Camera</option><option>Audio</option><option>Lighting</option></select><label class="pure-checkbox"><input id="available" type="checkbox"> Available only</label><button class="pure-button" type="reset">Clear filters</button></form><div class="selection"><strong id="selected-count">0 items selected</strong><p>Selection is kept when a filter hides a row.</p><button id="clear-selection" class="pure-button" disabled>Clear selection</button></div></div></aside><section class="pure-u-1 pure-u-md-3-4"><div class="results"><p id="count" role="status"></p><div class="table-scroll" tabindex="0" role="region" aria-label="Equipment table, scroll horizontally on narrow screens"><table class="pure-table pure-table-horizontal"><caption>Studio lending kits — local sample records</caption><thead><tr><th scope="col">Select</th><th scope="col" aria-sort="ascending"><button id="sort" class="sort">Equipment ↑</button></th><th scope="col">Category</th><th scope="col">Availability</th></tr></thead><tbody id="rows"></tbody></table></div><p id="empty" hidden>No matching equipment. Clear the filters to see all six kits.</p><section class="summary" aria-labelledby="selection-title"><h2 id="selection-title">Selected for review</h2><ul id="selection-list"><li>No equipment selected.</li></ul><p>This is a browsing example. Selecting a kit does not reserve it.</p></section></div></section></div></main>
</body></html>
Un prompt pour votre projet
Prompt pour l’agent IA
Créez l’application à partir du catalogue d’équipements Pure CSS 3.1.0 fourni et chargez pure-min.css ainsi que grids-responsive-min.css. Conservez les unités de grille responsive un quart/trois quarts, les filtres étiquetés, un tableau triable sémantique et sa zone de défilement horizontal intégrée. Combinez les filtres de recherche, de catégorie et de disponibilité sans effacer les identifiants sélectionnés. Laissez désactivées les cases à cocher des équipements empruntés, mettez à jour aria-sort lorsque le tri de la colonne Equipment est inversé et conservez les éléments sélectionnés dans la liste de vérification lorsque les filtres les masquent. La sélection est locale et ne doit pas être présentée comme une réservation.
05
Sources et périmètre du système de design Pure CSS
Pure CSS 3.1.0. Les valeurs de sélecteur sont celles du package officiel ; la typographie, les couleurs, l’espacement et le comportement de l’application du catalogue sont d’origine. Aucune réservation n’est effectuée.
