Componi pagine editoriali accademiche con il preset Tailwind di Decanter, la scala tipografica responsive e margini fluidi. Esplora schede di eventi originali con filtri tematici funzionanti e abstract espandibili.
Interpretazione originale HTML/CSS della tipografia modulare, dei margini dello schermo e dei ruoli cromatici di Decanter v7; non è un runtime del preset compilato. · Riferimento per l’implementazione
02
Riferimento di progettazione del sistema di design Decanter
Pacchetto Decanter 7.5.3 e convenzioni e istruzioni ufficiali per l’installazione di v7. Le rimozioni di v8 sono trattate come note di migrazione. L’anteprima è un’interpretazione etichettata HTML/CSS, con font di fallback locali e senza elementi identificativi dell’università.
Sistema di design Decanter: un preset Tailwind, non un SDK
Fissa il percorso di generazione documentato
Il pacchetto Decanter verificato è la versione 7.5.3 e dichiara Tailwind CSS ^3.4.17. Il suo punto di ingresso pubblico è un preset di configurazione Tailwind. Aggiungi require("decanter") a presets, indica in content i file sorgente effettivi e compila il foglio di stile delle utility. Non esiste alcun provider React Decanter da importare.
La documentazione include rimozioni previste per v8, pur indicando ancora v7 come percorso d’installazione. Questo riferimento blocca la versione v7.5.3 ed evita le utility obsolete foggy, slab e le versioni precedenti delle utility per il testo modulare. L’anteprima autonoma è un’interpretazione chiaramente etichettata delle regole di layout, non una presunta compilazione Tailwind.
Sistema di design Decanter: tipografia modulare responsive
La scala dipende dalla base
Source Sans 3 e Source Serif 4 sono le famiglie sans e serif principali, con Helvetica/Arial e Georgia/Times come fallback. Le utility type-* definiscono ruoli proporzionali, non titoli con dimensioni in pixel fisse. Il moltiplicatore della scala è 1.15 su dispositivi mobili, 1.2 su tablet e 1.25 su desktop.
L’esempio sceglie la configurazione basefont-23 documentata: 18px da XS a SM, 21px da MD a XL e 23px a 2XL. Usa per il titolo una dimensione type-3, così da mantenere proporzioni adeguate in un esempio compatto incorporato. Se il progetto sceglie una base diversa, deve ricalcolare le dimensioni risultanti invece di copiare i valori in pixel dell’anteprima.
Sistema di design Decanter: contenitore fluido e griglia
Il margine dello schermo fa parte del layout
Il contenitore cc usa spaziature laterali selezionate: 20px a XS, 30px a SM, 50px a MD, 80px a LG e 100px a XL. Si espande fino a raggiungere una larghezza massima del contenuto di 1500px, con una viewport di 1700px. È un sistema fluido con regole esplicite per i margini, non un semplice contenitore fisso da 1200px.
L’esempio rispetta questi margini e dispone le due schede editoriali su una sola colonna al di sotto di MD. Il contenuto delle schede segue il normale ordine del documento, quindi, quando il layout si dispone in verticale, la navigazione da tastiera segue la stessa sequenza di lettura.
Decanter fornisce le famiglie rs-m-* e rs-p-* per margini e padding responsive. Il valore selezionato cambia negli intervalli documentati; non è un alias per la spaziatura fissa di Tailwind. Il codice di esempio usa rs-p-1 attorno a una scheda e un normale padding fisso per la relativa azione.
Per rendere riproducibile il riferimento, l’interpretazione autonoma indica come codice dell’applicazione ogni modifica a CSS. Per una build nativa, usa l’utility generata dal preset invece di definire una seconda regola concorrente con lo stesso nome. Evita frammenti dinamici come "rs-p-" + size quando lo scanner della build non può rilevare la classe completa.
Sistema di design Decanter: colore dell’identità e interattivo
Il Cardinal e il rosso digitale hanno funzioni diverse
Il rosso Cardinal primario di Stanford è #8c1515. Il rosso digitale #b1040e è un colore interattivo/di accento e non sostituisce il Cardinal nell’identità universitaria. Il blu digitale #006cb8 è usato per i link, con #00548f per il relativo stato di interazione più scuro.
L’esempio usa il rosso digitale per l’azione che espande i dettagli e superfici neutre dai toni sobri. Non include il logotipo, il sigillo o la barra ufficiale dell’identità di Stanford. Un’implementazione istituzionale deve usare elementi identificativi autorizzati e attenersi alle regole del brand dell’università; un riferimento tecnico non implica alcuna approvazione.
Sistema di design Decanter: schede editoriali con azioni
Componi i contenuti invece di ipotizzare una API di componente API
Gli esempi ufficiali di schede sono HTML semantici, con utility per spaziatura, tipografia, superfici e azioni. Nella nostra composizione la categoria dell’evento è distinta dal titolo, data e luogo sono mostrati in testo e un pulsante reale rivela l’abstract nella stessa pagina. Non si inventa una API API per un componente Card Decanter.
Un titolo con link sarebbe adatto se il risultato effettivo fosse la navigazione. In questo caso il risultato è un’espansione locale, quindi un pulsante con aria-expanded e aria-controls comunica il comportamento. L’anteprima usa nomi di eventi e abstract originali, anziché copiare notizie dell’università.
Usa il titolo dell’evento come intestazione della scheda.
Mantieni visibili data e luogo anche prima dell’espansione.
Usa un pulsante per mostrare o nascondere i dettagli e un link solo per una navigazione effettiva.
Il selettore di argomenti filtra le due schede originali degli eventi di ricerca e aggiorna il conteggio visibile dei risultati. L’opzione senza corrispondenze dimostra intenzionalmente uno stato vuoto e la possibilità di reimpostare il filtro. Il filtro non modifica la gerarchia delle intestazioni né trasforma le schede in opzioni selezionabili di un modulo.
Ogni scheda di approfondimento ha un proprio stato del pulsante. Quando si chiude una scheda, il focus rimane sullo stesso elemento di attivazione. Modificando il filtro, le schede nascoste si chiudono: tornando a un argomento si riparte da una panoramica coerente. I controlli sono comportamenti dell’applicazione aggiunti a un approccio di design basato sulle utility, non fanno parte del pacchetto Decanter JavaScript.
Sistema di design Decanter: build e convalida del risultato
Le classi generate richiedono sorgenti sottoposte a scansione
La configurazione fornita è destinata a Tailwind 3 e al preset Decanter 7.5.3 verificato. Include le direttive di input, il glob dei contenuti, il comando di output e una composizione originale di schede. Collega il foglio di stile risultante dall’intestazione del documento. Carica separatamente i file dei font approvati oppure mantieni intenzionalmente i fallback documentati.
L’anteprima non è stata generata con questa toolchain, come indicato nell’etichetta di implementazione. Per un’adozione in produzione, compila l’intero set di classi e controlla l’output generato, soprattutto dopo un aggiornamento di major version che modifica le utility deprecate.
Blocca Decanter e la major version di Tailwind compatibile.
Registra il preset e sottoponi a scansione la directory sorgente effettiva.
Compila i tre livelli di direttive Tailwind.
Verifica il font di base scelto, i margini dello schermo e le azioni delle schede nei breakpoint documentati.
Il documento completo include layout, controlli e inizializzazione. Estrai l’archivio di esempio collegato per ottenere gli esatti asset vendor relativi, quindi avvialo tramite HTTP.
html
<!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>
Scarica l’esempio completo dalla sezione Fonti. Il README indica il comando esatto per avviarlo in locale.
Mantieni i percorsi vendor relativi a questo documento; l’archivio include tutti gli asset usati da questa anteprima.
04
Configurazione dell’agente del sistema di design Decanter
Punto di partenza per l’implementazione
Entry point di build del preset verificato sul sorgente; non eseguito per l’anteprima autonoma interpretata. Collega dist/styles.css nell’intestazione del documento. I font e le risorse di identità istituzionale sono decisioni separate. Lo ZIP completo dell’esempio funzionante nelle Fonti include anche le dipendenze esatte dell’anteprima e il documento completo. Estrailo, esegui python3 -m http.server 8080 nella directory e apri http://localhost:8080/stanford-decanter.html. Non aprire gli esempi basati su moduli tramite file://.
Componi una pagina editoriale di eventi con Decanter 7.5.3/Tailwind 3. Usa il preset, scegli esplicitamente basefont e applica la scala type-* e i margini cc dello schermo. Distingui argomento, titolo, orario e luogo in schede semantiche. Implementa il filtro locale per argomento e i controlli degli approfondimenti con aria-expanded. Evita le utility foggy/slab deprecate, le storie universitarie copiate e i marchi identificativi. Distingui chiaramente qualsiasi anteprima interpretata manualmente da una build di Decanter compilata.
05
Fonti e ambito del sistema di design Decanter
Composizione didattica indipendente di OpenDesign, non pagina ufficiale di un evento universitario. Contenuti originali e nessun marchio Stanford. L’adozione del codice e l’uso dell’identità autorizzato dal brand sono aspetti distinti.
