Système de design Decanter.

Système de design Decanter : un préréglage Tailwind, pas un SDK

Fixez la version de la procédure d’installation documentée

Le package Decanter vérifié est la version 7.5.3 et déclare Tailwind CSS ^3.4.17. Son point d’entrée public est un préréglage de configuration Tailwind. Ajoutez require("decanter") à presets, indiquez les vrais fichiers source dans content et compilez la feuille de style des utilitaires. Il n’existe pas de fournisseur React Decanter à importer.

La documentation mentionne les suppressions prévues en v8, tout en désignant encore la procédure d’installation comme celle de la v7. Cette référence fixe la version 7.5.3 et évite les utilitaires foggy, slab et modular-text plus anciens, désormais obsolètes. L’aperçu autonome est une interprétation clairement identifiée des règles de mise en page, et non une compilation Tailwind revendiquée.

Consultez la spécification associée

Typographie modulaire adaptative du système de design Decanter

L’échelle dépend de sa base

Source Sans 3 et Source Serif 4 sont les familles sans sérif et avec sérif principales, avec Helvetica/Arial et Georgia/Times comme polices de remplacement. Les utilitaires type-* définissent des rôles proportionnels plutôt que des titres de taille fixe en pixels. Leur facteur d’échelle est de 1,15 sur mobile, 1,2 sur tablette et 1,25 sur ordinateur.

L’exemple choisit la configuration basefont-23 documentée : 18px de XS à SM, 21px de MD à XL et 23px en 2XL. Le titre utilise la taille type-3 afin que l’affichage reste proportionné dans un exemple intégré compact. Un projet qui choisit une autre taille de base doit recalculer les tailles obtenues, plutôt que de reprendre les valeurs en pixels de cet aperçu.

Consultez la spécification associée

Conteneur fluide et grille du système de design Decanter

Les marges de l’écran font partie de la mise en page

Le conteneur cc utilise des marges soigneusement définies : 20px en XS, 30px en SM, 50px en MD, 80px en LG et 100px en XL. Il s’élargit jusqu’à atteindre une largeur maximale de contenu de 1500px pour une fenêtre de 1700px. Il s’agit d’un système fluide avec des règles de marge explicites, et non d’un simple conteneur fixe de 1200px.

L’exemple respecte ces marges et passe de deux cartes éditoriales à une seule colonne sous MD. Le contenu des cartes suit l’ordre normal du document, de sorte que la navigation au clavier respecte la même séquence de lecture lorsque la mise en page est empilée.

Consultez la spécification associée

Espacement adaptatif du système de design Decanter

Utilisez les utilitaires adaptatifs à bon escient

Decanter fournit les familles rs-m-* et rs-p-* pour les marges et les espacements internes adaptatifs. Un niveau sélectionné varie selon les plages documentées ; il ne s’agit pas d’un alias d’espacement fixe Tailwind. L’exemple de code utilise rs-p-1 autour d’une carte et un espacement fixe ordinaire pour son action.

Pour garantir la reproductibilité de la référence, l’interprétation autonome identifie chaque ajustement CSS comme du code applicatif. Pour une compilation native, utilisez l’utilitaire généré par le préréglage plutôt que de définir une seconde règle concurrente portant le même nom. Évitez les fragments dynamiques tels que "rs-p-" + size lorsque l’analyseur de compilation ne peut pas détecter la classe complète.

Consultez la spécification associée

Couleurs d’identité et couleurs interactives du système de design Decanter

Le rouge Cardinal et le rouge numérique ont des rôles distincts

Le rouge Cardinal principal de Stanford est #8c1515. Le rouge numérique #b1040e est une couleur interactive/d’accentuation et ne remplace pas le Cardinal dans l’identité de l’université. Le bleu numérique #006cb8 est utilisé pour les liens, avec #00548f pour l’état d’interaction plus sombre.

L’exemple utilise le rouge numérique pour l’action qui développe les détails et des surfaces neutres sobres. Il ne comporte ni logotype Stanford, ni sceau, ni bandeau d’identité officiel. Toute utilisation par un établissement doit respecter les règles de marque de l’université et employer des éléments d’identité autorisés ; une référence technique ne vaut pas approbation.

Consultez la spécification associée

Cartes éditoriales et actions du système de design Decanter

Composez le contenu au lieu de supposer l’existence d’un composant API

Les exemples officiels de cartes sont des HTML sémantiques, auxquels des utilitaires apportent espacement, typographie, surfaces et actions. Notre composition distingue la catégorie de l’événement de son titre, affiche la date et le lieu sous forme de texte, et utilise un véritable bouton pour révéler un résumé sur place. Elle ne prétend pas qu’il existe une propriété API Card pour Decanter.

Un titre cliquable conviendrait si le résultat attendu était une navigation. Ici, l’action développe le contenu sur place : un bouton doté de aria-expanded et aria-controls communique ce comportement. L’aperçu utilise des noms d’événements et des résumés originaux, sans reprendre les actualités de l’université.

• Utilisez le titre de l’événement comme titre de la carte.
• Laissez la date et le lieu visibles avant le développement.
• Utilisez un bouton pour afficher ou masquer du contenu, et un lien uniquement pour une véritable navigation.

Consultez la spécification associée

Filtres et divulgation du système de design Decanter

Gardez le contenu accessible quelle que soit la mise en page

Le sélecteur de sujets filtre les deux cartes originales d’événements de recherche et met à jour un décompte des résultats visible. L’option sans résultat illustre volontairement un état vide et permet de revenir à l’affichage initial. Le filtre ne modifie pas la hiérarchie des titres et ne transforme pas les cartes en options de formulaire sélectionnables.

Chaque résumé possède son propre état de bouton. Lorsqu’une carte est refermée, le focus reste sur le même déclencheur. Si le filtre change, les résumés masqués sont refermés : le retour à un sujet affiche ainsi une vue d’ensemble cohérente. Ces comportements des commandes, ajoutés à une approche de conception fondée sur des utilitaires, ne font pas partie d’un JavaScript Decanter fourni en package.

Consultez la spécification associée

Compiler et valider le résultat du système de design Decanter

Les classes générées nécessitent l’analyse des fichiers source

La configuration fournie cible Tailwind 3 et le préréglage Decanter 7.5.3 vérifié. Elle comprend les directives d’entrée, le glob de contenu, la commande de sortie et une composition de carte originale. Liez la feuille de style obtenue dans l’en-tête du document. Chargez séparément les fichiers de polices approuvés ou conservez délibérément les polices de remplacement documentées.

L’aperçu n’a pas été généré avec cette chaîne d’outils, comme l’indique son libellé d’implémentation. Pour une intégration en production, compilez l’ensemble des classes nécessaires et examinez le résultat généré, en particulier après une mise à niveau majeure susceptible de modifier les utilitaires obsolètes.

1. Verrouillez les versions de Decanter et de la version majeure compatible de Tailwind.
2. Enregistrez le preset et analysez le véritable répertoire source.
3. Compilez les trois couches de directives Tailwind.
4. Vérifiez la police de base choisie, les bords de l’écran et les actions des cartes aux points de rupture indiqués.

Consultez la spécification associée

Exemples de composants du système de design Decanter

<article class="bg-white border border-solid border-black-20 rs-p-1">
  <p class="font-semibold text-digital-red">Research conversation</p>
  <h2 class="type-2 font-serif leading-display">Reading the changing coast</h2>
  <p class="leading-normal">An original example event about field observations.</p>
  <button type="button" class="bg-digital-red text-white px-26 py-10
    hocus:bg-cardinal-red-dark focus:outline focus:outline-2">
    Show session details
  </button>
</article>

module.exports = {
  presets: [require('decanter')],
  content: ['./src/**/*.{html,js}']
};

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Decanter editorial composition</title><style>*{box-sizing:border-box}body{margin:0;background:#f6f5f2;color:#2e2d29;font:18px/1.5 'Helvetica Neue',Helvetica,Arial,sans-serif}.cc{margin-inline:20px;max-width:1500px;padding-block:40px}h1{font-family:Georgia,serif;font-size:1.520875em;line-height:1.2;margin:24px 0}h2{font:700 1.3225em/1.25 Georgia,serif;margin:12px 0}p{margin:16px 0}.overline{letter-spacing:.12em;font-size:14px;font-weight:700}.filters{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding-block:24px;border-block:1px solid #c0c0bf;margin-block:32px}select{font:inherit;background:white;border:1px solid #767674;padding:8px}.cards{display:grid;grid-template-columns:1fr;gap:20px}article{background:white;padding:24px;border-top:4px solid #8c1515}article time{font-size:16px;color:#53565a}.topic{font-size:14px;font-weight:600;letter-spacing:.04em}.abstract{border-top:1px solid #d5d5d4;padding-top:16px}.action{font:600 16px/1.3 Arial,sans-serif;background:#b1040e;color:white;border:0;padding:12px 20px;cursor:pointer}.action:hover{background:#820000;text-decoration:underline}.reset{font:inherit;color:#006cb8;background:none;border:0;text-decoration:underline;padding:8px 0;cursor:pointer}:focus-visible{outline:3px solid #00548f;outline-offset:4px}small{display:block;font-size:14px;color:#53565a;margin-top:32px}[hidden]{display:none!important}@media(min-width:576px){.cc{margin-inline:30px}}@media(min-width:768px){body{font-size:21px}.cc{margin-inline:50px}h1{font-size:1.728em}h2{font-size:1.44em}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:992px){.cc{margin-inline:80px}.cards{gap:36px}h1{font-size:1.953125em}h2{font-size:1.5625em}}@media(min-width:1200px){.cc{margin-inline:100px}.cards{gap:40px}}@media(min-width:1500px){body{font-size:23px}.cards{gap:48px}}@media(min-width:1700px){.cc{margin-inline:auto}}
</style><main class="cc"><p class="overline">RESEARCH CONVERSATIONS · ORIGINAL EXAMPLES</p><h1>Ideas take shape in conversation.</h1><p>A compact editorial collection interpreting Decanter’s responsive type and screen-edge rules.</p><div class="filters"><label for="topic">Topic</label><select id="topic"><option value="all">All topics</option><option value="environment">Environment</option><option value="archives">Archives</option><option value="astronomy">Astronomy</option></select><span id="count" role="status">2 example events</span></div><div class="cards"><article data-topic="environment"><p class="topic">ENVIRONMENT</p><h2>Reading the changing coast</h2><time datetime="2026-10-12">12 October · Fictional seminar room</time><p>How field notes reveal changes that a single measurement cannot capture.</p><button class="action" type="button" aria-expanded="false" aria-controls="coast">Show session details</button><div class="abstract" id="coast" hidden><p>This original sample session compares written observations, sketches and repeat measurements. The conversation asks how researchers describe uncertainty when a landscape changes gradually.</p></div></article><article data-topic="archives"><p class="topic">ARCHIVES</p><h2>The stories between records</h2><time datetime="2026-10-19">19 October · Fictional reading room</time><p>Exploring how context connects objects in a community archive.</p><button class="action" type="button" aria-expanded="false" aria-controls="archive">Show session details</button><div class="abstract" id="archive" hidden><p>This original example considers correspondence, oral history and catalogue descriptions together. It examines how a collection can preserve disagreement without erasing individual perspectives.</p></div></article></div><div id="empty" hidden><h2>No events in this example topic</h2><p>Choose another topic or return to the full collection.</p><button type="button" class="reset" id="reset">Show all topics</button></div><small>Independent OpenDesign specimen. Original content, local font fallbacks and interpreted Decanter layout rules. No Stanford identity or real event listing.</small></main><script>const topic=document.querySelector('#topic'),cards=[...document.querySelectorAll('article')];function filter(){let count=0;cards.forEach(c=>{c.hidden=topic.value!=='all'&&topic.value!==c.dataset.topic;if(!c.hidden)count++;const b=c.querySelector('button');b.setAttribute('aria-expanded','false');b.textContent='Show session details';c.querySelector('.abstract').hidden=true});document.querySelector('#count').textContent=count+' example events';document.querySelector('#empty').hidden=count!==0}topic.onchange=filter;document.querySelector('#reset').onclick=()=>{topic.value='all';filter();topic.focus()};document.querySelectorAll('.action').forEach(b=>b.onclick=()=>{let open=b.getAttribute('aria-expanded')!=='true';b.setAttribute('aria-expanded',String(open));b.textContent=open?'Hide session details':'Show session details';document.getElementById(b.getAttribute('aria-controls')).hidden=!open});</script></html>