# Système de design Pure CSS

## Aperçu de l’interface du système de design Pure CSS

Filtrez les six kits, triez-les par nom, sélectionnez les articles disponibles et conservez votre sélection lorsque les filtres changent.

## 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

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| .pure-button padding | 0.5em 1em | S’adapte à la taille de texte héritée du bouton. |
| .pure-button radius | 2px | Forme d’angle par défaut du bouton. |
| .pure-button background | #E6E6E6 | Fond neutre du bouton. |
| .pure-button-primary background | rgb(0, 120, 231) | Fond principal/sélectionné facultatif. |
| .pure-button disabled opacity | 0.40 | Utilisez également l’attribut disabled pour le comportement. |
| .pure-form input padding | 0.5em 0.6em | Espacement intérieur courant des champs de saisie. |
| .pure-form input border | 1px solid #ccc | Bordure par défaut du champ de saisie. |
| .pure-form input radius | 4px | La forme du champ de saisie diffère du rayon du bouton. |
### Valeurs officielles des tableaux

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| .pure-table border | 1px solid #cbcbcb | Bordure extérieure du tableau. |
| .pure-table td / th padding | 0.5em 1em | Espacement lisible des cellules. |
| .pure-table thead background | #e0e0e0 | Fond de l’en-tête de colonne. |
| .pure-table-striped odd-row fill | #f2f2f2 | Bandes facultatives ; cet exemple utilise des lignes horizontales. |
| .pure-table-horizontal | Bottom borders only | Préserve la structure des lignes sans séparateurs verticaux. |
### Points de rupture de la grille adaptative

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| sm | 35.5em | 568px avec la taille par défaut de 16px du navigateur. |
| md | 48em | 768px ; la barre latérale passe à un quart de la largeur. |
| lg | 64em | 1024px. |
| xl | 80em | 1280px. |
| xxl | 120em | 1920px dans la grille adaptative installée de la version 3.1.0. |
### Style d’origine du catalogue

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| Body | 16px / 1.5 Arial, Helvetica, sans-serif | Typographie explicite de l’application. |
| Page heading | 34px / 1.15; 28px on mobile | Hiérarchie éditoriale d’origine. |
| Section heading | 18px / 1.3 | Barre latérale et titre de sélection d’origine. |
| Content gutters | 24px desktop, 16px mobile | Marge extérieure d’origine. |
| Focus outline | 3px solid #0078e7; offset 3px | Amélioration de l’application par rapport au dégradé de focus par défaut du bouton. |
| Table minimum width | 540px | Préserve le sens des colonnes dans une zone défilante locale. |
## Guide complet du système de design Pure 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.

## 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.

Consultez la spécification associée

## 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.

Consultez la spécification associée

## 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.

Consultez la spécification associée

## 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.

Consultez la spécification associée

## 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é.

1. Sélectionnez un enregistreur ou une caméra disponible.

2. 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.

3. Effacez la sélection pour supprimer tous les identifiants sélectionnés, indépendamment des filtres.

Consultez la spécification associée

## 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.

Consultez la spécification associée

## 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.

Consultez la spécification associée

## Système de design Pure CSS : installer et reproduire l’intégralité du catalogue

### Installer et reproduire l’intégralité du catalogue

Installez purecss@3.1.0, 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.

Consultez la spécification associée

## 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.

Consultez la spécification associée

## Exemples de composants du système de design Pure CSS

### Balisage du catalogue avec les modules Pure

Disposition responsive un quart/trois quarts, formulaire empilé et tableau avec lignes horizontales.

```
<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>
```

Référence du code

- grids-responsive-min.css est chargé séparément.

- 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.

```
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();
```

Référence du code

- Le filtrage ne supprime pas silencieusement les identifiants sélectionnés.

- La recherche saisie par l’utilisateur ne devient jamais HTML.

### Typographie de l’application et focus CSS

Une couche visuelle complète qui complète la bibliothèque volontairement minimaliste.

```
*{box-sizing:border-box}body{font:16px/1.5 Arial,Helvetica,sans-serif;color:#263238;background:#fff}.catalog{max-width:1120px;margin:auto;padding:32px 24px}h1{font-size:34px;line-height:1.15;letter-spacing:-.03em;margin:12px 0}h2{font-size:18px;line-height:1.3}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:700;color:#435c68}header{border-bottom:3px solid #263238;padding-bottom:24px;margin-bottom:24px}.pure-g [class*=pure-u]{font-family:Arial,Helvetica,sans-serif}.sidebar{padding-right:24px}.results{padding-left:24px;border-left:1px solid #d7dfe3}.pure-form input[type=search],.pure-form select{width:100%;max-width:100%}.pure-form label{margin-top:16px}.selection{border-top:1px solid #d7dfe3;margin-top:28px;padding-top:20px;font-size:14px}.table-scroll{overflow:auto}table{width:100%;min-width:540px}.pure-table caption{text-align:left;font-style:normal;color:#52616a}.sort{border:0;background:none;padding:0;color:inherit;text-align:left;font-weight:700;cursor:pointer}.summary{padding:16px 20px;background:#f3f6f7;margin-top:24px}.summary p{font-size:14px;color:#52616a}.pure-button:focus-visible,.sort:focus-visible,.table-scroll:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #0078e7;outline-offset:3px}#empty{padding:20px;border:1px dashed #83919a}@media(max-width:767px){.catalog{padding:24px 16px}h1{font-size:28px}.sidebar{padding:0}.results{padding:24px 0 0;border-left:0}.selection{margin-bottom:24px}}
```

Référence du code

- Ces valeurs sont des choix propres à l’application, et non des jetons officiels de Pure.

## 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.

```
<!-- npm install purecss@3.1.0
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

```
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.
```

## 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.

- Dépôt officiel Limites entre les modules, fichiers de build, inclusion de la grille responsive et licence.

- Implémentation de la grille Gestion du texte du conteneur et des unités de grille.

- Code source du package Code source au niveau des sélecteurs servant à vérifier les modules installés en version 3.1.0.

## Ressources associées au système de design Pure CSS

### Quasar

Un parcours guidé natif Quasar avec les véritables valeurs de marque et d’espacement, la validation QForm, un créateur de brief en trois étapes, des choix de format par boutons radio et un ordre du jour dynamique de quarante-cinq minutes.

### React Native Elements

Créez un compositeur de plan de concentration complet avec React Native Elements 5.0.0 : véritables rôles du thème, champs et sélections contrôlés, validation, confirmation locale et version web testée.

### React Suite

Un calendrier de révision natif React Suite avec les variables CSS v6 vérifiées, des marqueurs sur les cellules de date, un ordre du jour pour la journée sélectionnée, la validation modale et des règles de planification locale explicites.


- [Référence de mise en œuvre](https://github.com/pure-css/pure)
- [Source](https://github.com/pure-css/pure)
- [Consultez la spécification associée](https://github.com/pure-css/pure)
- [Référence du code](https://github.com/pure-css/pure)
- [Dépôt officiel Limites entre les modules, fichiers de build, inclusion de la grille responsive et licence.](https://github.com/pure-css/pure)
- [Implémentation de la grille Gestion du texte du conteneur et des unités de grille.](https://github.com/pure-css/pure/blob/main/src/grids/css/grids-core.css)
- [Code source du package Code source au niveau des sélecteurs servant à vérifier les modules installés en version 3.1.0.](https://github.com/pure-css/pure/tree/main/src)