Erstellen Sie Universitätsseiten mit der tatsächlichen Tokenskala von Rivet, der Komponentenstruktur von HTML und nativen Tastaturinteraktionen. Entdecken Sie eine kompakte Detailseite zu einem Workshop mit barrierefreien Tabs zu Besuchsinformationen.
Natives Rivet 2.9.1 CSS und JavaScript; eigene fiktive Inhalte, Arial als Schrift-Fallback und Anwendungs-Wrapper. · Implementierungsreferenz
02
Designreferenz zum Rivet-Designsystem
Veröffentlichtes CSS 2.9.1 Rivet sowie offizielle Dokumentation zu Tokens und Hilfsfunktionen. rem-Umrechnungen gehen von einem Root-Wert von 16px aus; im lokalen Muster werden Arial/Georgia als Schriftarten verwendet und eine eigene äußere Breite von 64rem festgelegt.
Rivet-Designsystem für Aufgaben im Hochschulbereich
Ein Komponentensystem mit einem Einstiegspunkt für HTML
Rivet stellt CSS, JavaScript, Hilfsklassen und Seitenlayouts für Oberflächen der Indiana University bereit. Das funktionierende Beispiel verwendet direkt das Browser-Bundle 2.9.1: Es benötigt weder React noch einen Komponenten-Compiler. Es dient als kleine Detailseite für einen Workshop mit ergänzenden Besuchsinformationen und ist keine als Dashboard getarnte Zulassungsanwendung.
Institutionelle Identität und Beispielinhalte bleiben getrennt. Diese Seite bildet kein IU-Emblem nach, behauptet nicht, einen Besuch anzumelden, und bestätigt keine reale Einrichtung. Verwenden Sie für einen produktiven Universitätsdienst die genehmigten Markenelemente und das Verfahren der Universität zur Freigabe von Inhalten. Die Code-Lizenz macht erfundene Veranstaltungsdetails nicht zu offiziellen Informationen.
Schriftgrößenskala und Schriftrollen im Rivet-Designsystem
Exakte Größendienstprogramme auf Text anwenden
Die serifenlose Schriftfamilie von Rivet beginnt mit BentonSans; die Serifenschriftfamilie mit GeorgiaPro. Das lokale Muster verwendet bewusst Arial- und Georgia-Fallbacks und lädt keine Schriftarten aus dem Internet. In einer Produktivumsetzung müssen die Berechtigungen für institutionelle Schriftarten und deren Bereitstellung geklärt werden; Schriftdateien dürfen nicht einfach aus dieser Vorschau kopiert werden.
Die numerische Skala folgt einer gerundeten Major-Second-Folge. Der Beispieltitel verwendet rvt-ts-32, die Bereichsüberschrift rvt-ts-23; ihre kompilierten Größen betragen 2rem beziehungsweise 1.4375rem. Der Grundtext hat die Größe 1rem. Verwenden Sie rvt-lh-base für eine Zeilenhöhe von 1.5, rvt-lh-tight für 1.2 und rvt-lh-loose für 1.65. Wenden Sie diese Klassen auf Textelemente an, damit Steuerelemente in einem Container nicht unbeabsichtigt eine Darstellungsgröße übernehmen.
Die Referenzpalette unterscheidet Karmesinrot-500 (#990000) von Blau-500 (#006298). Das Muster verwendet Karmesinrot als zurückhaltende obere Linie und native Rivet-Steuerelemente für die interaktive Gestaltung. Der Text ist in Schwarz-500 (#243142) gehalten; Schwarz-000 (#f8f9fa) dient als unterstützende Informationsfläche und Schwarz-100 (#e2e7e9) als Trennlinie. Dies sind tatsächliche Paletteneinträge und keine aus einem Screenshot übernommenen Werte.
Ein Farbname garantiert nicht, dass jede Kombination ausreichenden Kontrast bietet. Behalten Sie die native Tab-Fokusanzeige und den ausgewählten Zustand zusammen mit dem sichtbaren Inhalt und dem Wert von aria-selected bei. Kennzeichnen Sie einen aktiven Bereich nicht ausschließlich dadurch, dass seine Beschriftung karmesinrot wird. Der Hinweis zur fiktiven Veranstaltung bleibt im Beispiel als normaler, gut lesbarer Text über der Umschaltung sichtbar.
Eine benannte Skala mit bewusst großen Abständen zwischen den Stufen
Die Abstände von Rivet bilden keine Folge gleichmäßiger Schritte von jeweils vier Pixeln. Bei einem Root-Wert von 16px reicht die Skala von xxs mit 4px über xs mit 8px, sm mit 16px, md mit 24px, lg mit 32px, xl mit 40px und xxl mit 64px bis zu 3-xl mit 128px und 4-xl mit 192px. Das Beispiel verwendet sm für den Seiteninnenabstand auf Mobilgeräten, md für den Rhythmus neben dem Bereich und lg für größere vertikale Abstände.
Der maximale Lesebereich des Beispiels von 64rem ist eine Anwendungsentscheidung und kein behauptetes Rivet-Container-Token. Innerhalb dieses Bereichs beträgt das Breiten-Token 4-xl 48rem/768px; spacing-4-xl beträgt 12rem/192px. Der gemeinsame Suffix bedeutet nicht, dass die Abmessungen identisch sind. Radius-sm beträgt .125rem, md .25rem und lg .5rem. Ersetze nicht alle Komponenten durch eine einheitliche Ästhetik mit großen abgerundeten Karten.
Eine Tab-Gruppe besteht aus einem rvt-tabs-Wrapper, einer rvt-tabs__tablist mit aussagekräftigem aria-label, Schaltflächen als Auslösern und benachbarten rvt-tabs__panel-Elementen. Die Werte von data-rvt-tab und data-rvt-tab-panel müssen für jedes Paar übereinstimmen. Die Markierung für die anfängliche Auswahl, data-rvt-tab-init, gehört zu einem Panel, nicht zu seiner Schaltfläche. Rivet kann Kennungen generieren, aber explizite Paare lassen sich in diesem Beispiel leichter überprüfen.
Rivet.init() fügt Tab-Rollen, den Auswahlzustand, Beziehungen zwischen Panels und Tastaturverhalten hinzu. Implementiere keinen zweiten Klick-Handler, der unabhängig davon hidden umschaltet: Zwei konkurrierende Zustandsverantwortliche können dazu führen, dass der ausgewählte Tab und das sichtbare Panel nicht mehr übereinstimmen. Das vollständige Markup unten enthält eigens verfasste Kurztexte und kann im Setup zwischen die Stylesheet- und Script-Tags eingefügt werden.
html
<div class="rvt-tabs" data-rvt-tabs="visit">
<div class="rvt-tabs__tablist" aria-label="Plan your workshop visit" data-rvt-tablist>
<button class="rvt-tabs__tab" data-rvt-tab="overview">Overview</button>
<button class="rvt-tabs__tab" data-rvt-tab="arrival">Arrival</button>
<button class="rvt-tabs__tab" data-rvt-tab="access">Access</button>
</div>
<div class="rvt-tabs__panel" data-rvt-tab-panel="overview" data-rvt-tab-init>
<h2 class="rvt-ts-23 rvt-text-bold">A practical introduction to archives</h2>
<p>Compare a photograph, a newspaper page, and a handwritten letter. A facilitator will explain how to record a source and distinguish an observation from an interpretation.</p>
</div>
<div class="rvt-tabs__panel" data-rvt-tab-panel="arrival">
<h2 class="rvt-ts-23 rvt-text-bold">Arrive at the learning studio</h2>
<p>In this fictional example, the welcome desk opens at 9:45. The workshop starts at 10:00 in Room 204. Bring a notebook; all source materials are provided.</p>
</div>
<div class="rvt-tabs__panel" data-rvt-tab-panel="access">
<h2 class="rvt-ts-23 rvt-text-bold">Choose a comfortable way to participate</h2>
<p>The example session offers large-print copies and a quiet reading space. Visitors can work with a partner or review material independently. These are specimen details, not verified campus facilities.</p>
</div>
</div>
Was gehört außerhalb der Tabs im Rivet-Designsystem?
Wichtige Informationen zum Besuch im Blick behalten
Der Veranstaltungstitel, das Datum, die Dauer und der Hinweis auf das fiktive Beispiel bleiben außerhalb der Tabs. Besucher sollten nicht erst ein verborgenes Panel öffnen müssen, um zu erfahren, ob der Inhalt eine echte Buchung beschreibt. Jedes Panel enthält eine kurze Überschrift und einen Absatz. Die drei Bezeichnungen sind kurz genug, um auch auf schmalen Bildschirmen in einer Zeile zu bleiben.
Tabs eignen sich, wenn zusammengehörige Inhalte getrennt voneinander gelesen werden können. Für den Vergleich mehrerer Programmgebühren oder zweier Studienpläne sind sie ungeeignet, da beim Wechsel jeweils eine Vergleichsseite ausgeblendet wird. Dafür eignen sich eine Tabelle oder eine offene Liste besser.
Verwende „Übersicht“, „Anreise“ und „Zugang“ für jeweils eigenständig nützliche ergänzende Erläuterungen.
Fristen, Stornierungshinweise und die zentrale Aktion müssen außerhalb der Tab-Panels sichtbar bleiben.
Verwende eine Vergleichstabelle, wenn Leser Werte aus mehreren Kategorien gleichzeitig prüfen müssen.
Responsives Verhalten und Tastaturbedienung im Rivet-Designsystem
Fünf Breakpoints nach Mobile-first-Prinzip
Die Breakpoints von Rivet liegen bei 30em, 46.25em, 67.5em, 78.75em und 87.5em. Bei der üblichen anfänglichen Schriftgröße von 16px entsprechen sie 480, 740, 1080, 1260 und 1400px. Der mittlere Breakpoint liegt bei 740px, nicht bei der übernommenen Konvention von 768px. Responsive Utilities erhalten den Breakpoint und -up als Suffix, zum Beispiel rvt-ts-32-md-up.
Die Tab-Leiste darf sich nicht in mehrere Zeilen umbrechen. Halte die Bezeichnungen kurz und prüfe den tatsächlichen Text bei schmalen Ansichten. Die Schrift zu verkleinern, damit alles passt, ist kein Ersatz für die Wahl der passenden Navigationskomponente. Bei der nativen Bedienung wechseln die Pfeiltasten nach links und rechts den Fokus zwischen den Tabs; an den Enden springt der Fokus jeweils zum anderen Ende. Enter oder Leertaste aktiviert den fokussierten Tab. Ausgeblendete Panels dürfen ihre interaktiven Elemente nicht in der Tab-Reihenfolge belassen.
Beispiel im Rivet-Designsystem installieren und überprüfen
Browser-Bundle mit einmaliger Initialisierung
Die Installationsanleitung pinnt Version 2.9.1 und kopiert das veröffentlichte CSS sowie das minimierte Browser-JavaScript in das statische Verzeichnis der Website. Stelle diese Assets bereit, bevor du Rivet.init() aufrufst. Wenn ein Framework das HTML später einbindet, nutze den dokumentierten Integrationslebenszyklus von JavaScript, statt davon auszugehen, dass der anfängliche Seitenscan die neuen Knoten erfasst hat.
Die eigenständige Vorschau verwendet diese offiziellen CSS- und JavaScript-Assets lokal. Der Fallback für die Typografie und die Breite des Wrappers sind explizite Anwendungsüberschreibungen. Es gibt keine Netzwerkanfrage für eine Buchung, keine Persistenz, keine Analyse und keine generierte Bestätigung. Die nativen Tabs sind die vollständige hier demonstrierte Interaktion.
Lade das lokale Stylesheet und prüfe vor der Initialisierung, ob alle drei Tab-Auslöser und Panels vorhanden sind.
Initialisiere Rivet und wechsle mit einem Zeigegerät durch alle Tabs. Wiederhole den Test anschließend mit den Pfeiltasten sowie Enter oder Leertaste.
Prüfe den ausgewählten Auslöser, das sichtbare Panel, den Fokusring und die Dokumentbreite auf großen und schmalen mobilen Bildschirmen.
Umschalter mit drei Panels für Besuchsinformationen
Explizit übereinstimmende Datenattribute und ein anfängliches Panel; das native Rivet verwaltet Fokus und Sichtbarkeit.
html
<div class="rvt-tabs" data-rvt-tabs="visit">
<div class="rvt-tabs__tablist" aria-label="Plan your workshop visit" data-rvt-tablist>
<button class="rvt-tabs__tab" data-rvt-tab="overview">Overview</button>
<button class="rvt-tabs__tab" data-rvt-tab="arrival">Arrival</button>
<button class="rvt-tabs__tab" data-rvt-tab="access">Access</button>
</div>
<div class="rvt-tabs__panel" data-rvt-tab-panel="overview" data-rvt-tab-init>
<h2 class="rvt-ts-23 rvt-text-bold">A practical introduction to archives</h2>
<p>Compare a photograph, a newspaper page, and a handwritten letter. A facilitator will explain how to record a source and distinguish an observation from an interpretation.</p>
</div>
<div class="rvt-tabs__panel" data-rvt-tab-panel="arrival">
<h2 class="rvt-ts-23 rvt-text-bold">Arrive at the learning studio</h2>
<p>In this fictional example, the welcome desk opens at 9:45. The workshop starts at 10:00 in Room 204. Bring a notebook; all source materials are provided.</p>
</div>
<div class="rvt-tabs__panel" data-rvt-tab-panel="access">
<h2 class="rvt-ts-23 rvt-text-bold">Choose a comfortable way to participate</h2>
<p>The example session offers large-print copies and a quiet reading space. Visitors can work with a partner or review material independently. These are specimen details, not verified campus facilities.</p>
</div>
</div>
Veranstaltungstitel und wichtige Angaben außerhalb der Panels belassen.
Das veröffentlichte CSS und JavaScript einbinden und Rivet.init() einmal aufrufen.
Mit den Pfeiltasten den Fokus verschieben; mit Enter oder Leertaste den fokussierten Tab aktivieren.
Vollständiges eigenständiges Beispiel
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"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Workshop visit — Rivet specimen</title><link rel="stylesheet" href="vendor/rivet-2.9.1/rivet.min.css"><style>:root{--rvt-font-sans:Arial,sans-serif;--rvt-font-serif:Georgia,serif}body,body *,body *::before,body *::after{font-family:Arial,sans-serif!important}body{border-top:8px solid #990000;margin:0;background:#fff;color:#243142}.shell{max-width:64rem;margin:auto;padding:2rem 1rem 3rem}.eyebrow{font-size:.875rem;letter-spacing:.06em;color:#4c5a69}.intro{max-width:48rem}.facts{display:flex;gap:1.5rem;flex-wrap:wrap;padding:1.5rem;margin:2rem 0;background:#f8f9fa;border:1px solid #e2e7e9}.facts p{margin:0}.facts strong{display:block;font-size:.875rem}.rvt-tabs__panel{min-height:13rem}footer{margin-top:2rem;padding-top:1rem;border-top:1px solid #e2e7e9;font-size:.875rem;color:#4c5a69}h1{margin:.5rem 0 1rem}@media(min-width:46.25em){.shell{padding:3rem 2rem}.rvt-tabs__panel{min-height:12rem}}</style></head><body><main class="shell"><p class="eyebrow">LEARNING STUDIO · RIVET COMPONENT EXAMPLE</p><h1 class="rvt-ts-32 rvt-text-bold rvt-lh-tight">Reading the archive</h1><p class="intro rvt-ts-18">A hands-on introduction to working with historical sources. Explore the visit information below.</p><div class="facts"><p><strong>Session</strong>Saturday · 10:00–11:30</p><p><strong>Format</strong>Small-group workshop</p><p><strong>Location</strong>Learning studio · Room 204</p></div><p class="rvt-ts-14 rvt-m-bottom-lg">Fictional event for interface demonstration. No reservation is made.</p><div class="rvt-tabs" data-rvt-tabs="visit">
<div class="rvt-tabs__tablist" aria-label="Plan your workshop visit" data-rvt-tablist>
<button class="rvt-tabs__tab" data-rvt-tab="overview">Overview</button>
<button class="rvt-tabs__tab" data-rvt-tab="arrival">Arrival</button>
<button class="rvt-tabs__tab" data-rvt-tab="access">Access</button>
</div>
<div class="rvt-tabs__panel" data-rvt-tab-panel="overview" data-rvt-tab-init>
<h2 class="rvt-ts-23 rvt-text-bold">A practical introduction to archives</h2>
<p>Compare a photograph, a newspaper page, and a handwritten letter. A facilitator will explain how to record a source and distinguish an observation from an interpretation.</p>
</div>
<div class="rvt-tabs__panel" data-rvt-tab-panel="arrival">
<h2 class="rvt-ts-23 rvt-text-bold">Arrive at the learning studio</h2>
<p>In this fictional example, the welcome desk opens at 9:45. The workshop starts at 10:00 in Room 204. Bring a notebook; all source materials are provided.</p>
</div>
<div class="rvt-tabs__panel" data-rvt-tab-panel="access">
<h2 class="rvt-ts-23 rvt-text-bold">Choose a comfortable way to participate</h2>
<p>The example session offers large-print copies and a quiet reading space. Visitors can work with a partner or review material independently. These are specimen details, not verified campus facilities.</p>
</div>
</div><footer>Native Rivet 2.9.1 tabs · Arial font fallback · Original example content<br>Keyboard: use Left and Right to move between tabs, then Enter or Space to activate.</footer></main><script src="vendor/rivet-2.9.1/rivet.min.js"></script><script>Rivet.init();</script></body></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
Einrichtung des KI-Agenten für das Rivet-Designsystem
Ausgangspunkt für die Implementierung
Die Pfade zu den veröffentlichten Browser-Assets von rivet-core 2.9.1 wurden anhand der offiziellen Kurzanleitung überprüft. Passe das öffentliche Verzeichnis an deinen Server an. Die Vorschau verwendet lokale Kopien und einen Schrift-Fallback. Das vollständige ZIP-Archiv mit dem funktionierenden Beispiel unter „Sources“ enthält außerdem genau die Abhängigkeiten der Vorschau und das vollständige Dokument. Entpacke es, führe in diesem Verzeichnis python3 -m http.server 8080 aus und öffne anschließend http://localhost:8080/indiana-rivet.html. Öffne Beispiele auf Basis von Modulen nicht über file://.
bash
npm install [email protected]
mkdir -p public/vendor/rivet
cp node_modules/rivet-core/css/rivet.min.css public/vendor/rivet/
cp node_modules/rivet-core/js/rivet.min.js public/vendor/rivet/
# Add these tags to the HTML served from public/:
# <link rel="stylesheet" href="/vendor/rivet/rivet.min.css">
# ...component markup...
# <script src="/vendor/rivet/rivet.min.js"></script>
# <script>Rivet.init();</script>
Ein Prompt für dein Projekt
Agenten-Prompt
Erstelle eine Detailseite für einen fiktiven Hochschulworkshop mit den nativen Tabs von HTML, Version 2.9.1. Binde rivet.min.css und rivet.min.js ein und rufe Rivet.init() auf. Verwende übereinstimmende Werte für data-rvt-tab/data-rvt-tab-panel, eine aussagekräftige Bezeichnung für die Tab-Leiste und data-rvt-tab-init für das erste Panel. Titel, Datum und wichtige Hinweise bleiben außerhalb der Tabs. Verwende eine Fließtextgröße von 16px, Panel-Titel mit 23px, einen Seitentitel mit 32px und die Abstandstokens von Rivet. Berücksichtige die Breakpoints 480/740/1080/1260/1400px. Halte die Panels kurz, bewahre das Tastaturverhalten für Fokus und Auswahl und kennzeichne alle erfundenen Veranstaltungsdetails als Demonstrationsinhalte. Verwende die IU-Kennzeichen nicht ohne Genehmigung.
05
Quellen und Geltungsbereich des Rivet-Designsystems
Eine technische Referenz zu Rivet und eine fiktive Workshop-Demonstration. Für institutionelle Kennzeichen und Schriftarten gelten weiterhin die Vorschriften der Indiana University; echte Besichtigungen oder Buchungen werden nicht angeboten.
