Gestalten Sie akademische Editorial-Seiten mit dem Tailwind-Preset, der responsiven Schriftgrößenskala und den fließenden Bildschirmrändern von Decanter. Entdecken Sie eigens entwickelte Veranstaltungskarten mit funktionierenden Themenfiltern und aufklappbaren Kurzbeschreibungen.
Originale Interpretation von Decanter v7 mit HTML/CSS für modulare Typografie, Bildschirmränder und Farbrollen; keine Laufzeitumgebung eines kompilierten Presets. · Implementierungsreferenz
02
Decanter-Designsystem: Designreferenz
Paket Decanter 7.5.3 und offizielle Installationsanleitung sowie Konventionen für v7. Die eingestellten Funktionen in v8 werden als Migrationshinweise behandelt. Die Vorschau ist eine gekennzeichnete Interpretation mit HTML/CSS, verwendet lokale Schrift-Fallbacks und enthält keine Identitätskennzeichen einer Universität.
Decanter-Designsystem: ein Tailwind-Preset, kein SDK
Dokumentierten Installationspfad festlegen
Das verifizierte Paket Decanter hat die Version 7.5.3 und gibt Tailwind CSS ^3.4.17 an. Der öffentliche Einstiegspunkt ist ein Tailwind-Konfigurations-Preset. Füge require("decanter") zu den Presets hinzu, verweise content auf die tatsächlichen Quelldateien und kompiliere das Utility-Stylesheet. Es gibt keinen Decanter-React-Provider, den du importieren könntest.
Die Dokumentation enthält für v8 angekündigte Entfernungshinweise, bezeichnet den Installationspfad aber weiterhin als v7. Diese Referenz legt v7.5.3 fest und vermeidet die veralteten foggy-, slab- und älteren modular-text-Utilities. Die eigenständige Vorschau ist eine klar gekennzeichnete Interpretation der Layoutregeln und keine vorgebliche Tailwind-Kompilierung.
Source Sans 3 und Source Serif 4 sind die primären serifenlosen und Serifenschriften; als Fallbacks dienen Helvetica/Arial und Georgia/Times. Die type-*-Utilities stehen für proportionale Rollen und nicht für Überschriften mit festen Pixelmaßen. Ihr Skalierungsfaktor beträgt auf Mobilgeräten 1.15, auf Tablets 1.2 und auf Desktop-Geräten 1.25.
Das Beispiel verwendet die dokumentierte Konfiguration basefont-23: 18px bei XS–SM, 21px bei MD–XL und 23px bei 2XL. Die Überschrift hat die Größe type-3, damit die Darstellung in einem kompakten eingebetteten Beispiel proportional bleibt. Wer eine andere Basis wählt, muss die daraus entstehenden Größen neu berechnen, statt die Pixelwerte aus dieser Vorschau zu übernehmen.
Decanter-Designsystem: fließender Container und Raster
Der Bildschirmrand ist Teil des Layouts
Der cc-Container verwendet kuratierte Abstände zum Bildschirmrand: 20px bei XS, 30px bei SM, 50px bei MD, 80px bei LG und 100px bei XL. Er wächst, bis bei einer Viewport-Breite von 1700px eine maximale Inhaltsbreite von 1500px erreicht ist. Es handelt sich um ein fließendes System mit expliziten Regeln für die Abstände zum Rand, nicht einfach um einen festen Container mit 1200px Breite.
Das Beispiel folgt diesen Abständen und ordnet die beiden redaktionellen Karten unterhalb von MD in einer einzelnen Spalte an. Die Karteninhalte folgen der normalen Dokumentreihenfolge, sodass die Tastaturnavigation beim Stapeln des Layouts dieselbe Lesereihenfolge verwendet.
Decanter stellt die Familien rs-m-* und rs-p-* für responsive Außen- und Innenabstände bereit. Ein ausgewählter Schritt ändert sich in den dokumentierten Bereichen; er ist kein Alias für einen festen Tailwind-Abstand. Der Beispielcode verwendet rs-p-1 für den Innenabstand einer Karte und einen gewöhnlichen festen Innenabstand für ihre Aktion.
Damit die Referenz reproduzierbar bleibt, kennzeichnet die eigenständige Interpretation jede Anpassung an CSS als Anwendungscode. Verwende für eine native Implementierung das vom Preset erzeugte Utility, statt eine zweite, konkurrierende Regel mit demselben Namen zu definieren. Vermeide dynamische Fragmente wie "rs-p-" + size, wenn der Build-Scanner die vollständige Klasse nicht erkennen kann.
Decanter-Designsystem: Identitäts- und Interaktionsfarben
Kardinalrot und Digitalrot erfüllen unterschiedliche Aufgaben
Das primäre Cardinalrot von Stanford ist #8c1515. Digitalrot #b1040e ist eine interaktive Akzentfarbe und ersetzt Cardinalrot nicht in der Universitätsidentität. Digitalblau #006cb8 ist für Links vorgesehen, #00548f für den dunkleren Interaktionszustand.
Das Beispiel verwendet Digitalrot für die Aktion zum Aufklappen von Details und zurückhaltende neutrale Oberflächen. Es enthält weder ein Stanford-Wortzeichen noch ein Siegel oder einen offiziellen Identitätsbalken. Bei einer institutionellen Nutzung müssen autorisierte Identitätsressourcen und die Markenrichtlinien der Universität verwendet werden. Eine technische Referenz stellt keine Befürwortung dar.
Decanter Designsystem: redaktionelle Karten mit Aktionen
Inhalte zusammenstellen, statt eine Komponente zu erraten API
Die offiziellen Kartenbeispiele sind semantisch aufgebaut HTML und verwenden Utilities für Abstände, Typografie, Oberflächen und Aktionen. Unsere Zusammenstellung trennt die Veranstaltungskategorie vom Titel, zeigt Datum und Veranstaltungsort als Text und verwendet eine echte Schaltfläche, um eine Zusammenfassung direkt an Ort und Stelle einzublenden. Sie erfindet keine Decanter Card-Prop API.
Ein verlinkter Titel wäre passend, wenn tatsächlich eine Navigation das Ergebnis wäre. Hier wird der Inhalt lokal erweitert. Deshalb kommuniziert eine Schaltfläche mit aria-expanded und aria-controls dieses Verhalten. Die Vorschau verwendet eigens verfasste Veranstaltungsnamen und Zusammenfassungen, statt Universitätsnachrichten zu kopieren.
Den Veranstaltungstitel als Überschrift der Karte verwenden.
Zeit und Ort vor dem Aufklappen sichtbar lassen.
Für das Aufklappen eine Schaltfläche verwenden und einen Link nur für tatsächliche Navigation.
Decanter Designsystem: Filter und aufklappbare Inhalte
Inhalte über verschiedene Layouts hinweg verfügbar halten
Der Themenfilter filtert die beiden eigens verfassten Karten zu Forschungsveranstaltungen und aktualisiert die sichtbare Trefferzahl. Die Option ohne Treffer veranschaulicht bewusst einen leeren Zustand und eine Möglichkeit zum Zurücksetzen. Der Filter verändert weder die Überschriftenhierarchie noch macht er aus den Karten auswählbare Formularoptionen.
Jede Zusammenfassung hat einen eigenen Schaltflächenzustand. Beim Schließen einer Karte bleibt der Fokus auf derselben Auslöseschaltfläche. Wird der Filter geändert, werden ausgeblendete Zusammenfassungen geschlossen, damit beim Zurückkehren zu einem Thema wieder eine einheitliche Übersicht angezeigt wird. Die Steuerelemente ergänzen einen utilitybasierten Designansatz um Anwendungsverhalten; sie sind keine gebündelten Decanter JavaScript.
Die bereitgestellte Einrichtung ist für Tailwind 3 und das verifizierte Preset Decanter 7.5.3 ausgelegt. Sie umfasst die Input-Direktiven, den content-Glob, den Ausgabebefehl und eine eigens erstellte Kartenkomposition. Binden Sie das resultierende Stylesheet im Dokumentkopf ein. Laden Sie zugelassene Schriftdateien separat oder verwenden Sie bewusst die dokumentierten Fallbacks.
Die Vorschau wurde nicht mit dieser Toolchain erstellt; darauf weist auch ihre Implementierungskennzeichnung hin. Bei einer produktiven Übernahme sollte der vollständige Klassensatz selbst kompiliert und die generierte Ausgabe geprüft werden, insbesondere nach einem Wechsel der Hauptversion, durch den veraltete Utilities geändert werden.
Decanter und die dazu passende Tailwind-Hauptversion festschreiben.
Das Preset registrieren und das tatsächliche Quellverzeichnis scannen.
Die drei Tailwind-Direktiv-Ebenen kompilieren.
Die gewählte Grundschrift, Bildschirmränder und Kartenaktionen an den dokumentierten Breakpoints überprüfen.
Das vollständige Dokument enthält Layout, Steuerelemente und Initialisierung. Entpacken Sie das verknüpfte Beispielarchiv, um die exakten relativen Vendor-Assets zu erhalten, und stellen Sie es anschließend über HTTP bereit.
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>
Laden Sie das vollständige Beispiel unter Sources herunter. Die README enthält den genauen lokalen Startbefehl.
Behalten Sie die Vendor-Pfade relativ zu diesem Dokument bei. Das Archiv enthält alle Assets, die in dieser Vorschau verwendet werden.
04
Decanter Designsystem: Einrichtung des AI-Agenten
Ausgangspunkt für die Implementierung
Ein quellverifizierter Einstiegspunkt für den Preset-Build; für die interpretierte eigenständige Vorschau nicht ausgeführt. Binden Sie dist/styles.css im Dokumentkopf ein. Schriftarten und institutionelle Identitätsressourcen sind separate Entscheidungen. Das vollständige ZIP-Beispiel in den Quellen enthält auch die exakten Vorschau-Abhängigkeiten und das vollständige Dokument. Entpacken Sie es, führen Sie python3 -m http.server 8080 in diesem Verzeichnis aus und öffnen Sie dann http://localhost:8080/stanford-decanter.html. Öffnen Sie modulbasierte Beispiele nicht über file://.
Erstellen Sie eine redaktionelle Veranstaltungsseite mit Decanter 7.5.3/Tailwind 3. Verwenden Sie das Preset, eine explizite Auswahl der Grundschrift, die Skala type-* und die Bildschirmränder cc. Halten Sie Thema, Titel, Zeit und Ort in semantischen Karten voneinander getrennt. Implementieren Sie einen lokalen Themenfilter und Steuerelemente für Zusammenfassungen mit aria-expanded. Vermeiden Sie veraltete foggy-/slab-Utilities, kopierte Universitätsgeschichten und Identitätskennzeichen. Kennzeichnen Sie jede manuell interpretierte Vorschau separat von einem kompilierten Decanter-Build.
05
Decanter Designsystem: Quellen und Umfang
Unabhängige, lehrreiche OpenDesign-Zusammenstellung, keine offizielle Veranstaltungsseite der Universität. Eigene Inhalte und keine Stanford-Kennzeichen. Die Codeübernahme und die autorisierte Verwendung der Markenidentität sind getrennte Aspekte.
