Crea pagine universitarie con la scala effettiva dei token di Rivet, l’anatomia dei componenti HTML e le interazioni native da tastiera. Esplora una pagina compatta con i dettagli di un workshop e schede accessibili per le informazioni sulle visite.
Rivet 2.9.1 nativo CSS e JavaScript; contenuti originali fittizi, font di ripiego Arial e wrapper dell’applicazione. · Riferimento per l’implementazione
02
Riferimento di progettazione del sistema di progettazione sistema di design Rivet
Rivet 2.9.1 pubblicato da CSS e documentazione ufficiale di token e utility. Le conversioni in rem presuppongono una radice di 16 px; l’esempio locale usa font Arial/Georgia e imposta una larghezza esterna di 64rem.
Sistema di progettazione sistema di design Rivet per le attività universitarie
Un sistema di componenti con un punto di ingresso HTML
Rivet fornisce CSS, JavaScript, classi di utilità e layout di pagina per le interfacce dell’Indiana University. L’esempio funzionante usa direttamente il bundle browser 2.9.1: non richiede né React né un compilatore di componenti. Lo scopo è realizzare una piccola pagina di dettaglio di un workshop con informazioni secondarie sulla visita, non un’applicazione di ammissione camuffata da dashboard.
L’identità istituzionale e i contenuti d’esempio restano separati. Questa pagina non riproduce un marchio IU, non dichiara di registrare un visitatore né conferma l’esistenza di una struttura reale. Per un servizio universitario di produzione, segui la procedura approvata dall’università per l’uso del marchio e la titolarità dei contenuti. La licenza del codice non rende ufficiali i dettagli inventati dell’evento.
Sistema di design Rivet: scala tipografica e ruoli dei font
Usa utilità con dimensioni esatte per il testo
La famiglia sans serif di Rivet inizia con BentonSans; la famiglia serif con GeorgiaPro. Il campione locale usa intenzionalmente Arial e Georgia come font alternativi e non effettua richieste di font remoti. Un’implementazione di produzione deve verificare le autorizzazioni istituzionali per l’uso e la distribuzione dei font, invece di copiare i file dei font da questa anteprima.
La scala numerica segue una progressione arrotondata di seconda maggiore. Il titolo dell’esempio usa rvt-ts-32 e il titolo del pannello rvt-ts-23; le dimensioni compilate sono rispettivamente 2rem e 1.4375rem. Il testo di base è 1rem. Usa rvt-lh-base per un’interlinea di 1.5, rvt-lh-tight per 1.2 e rvt-lh-loose per 1.65. Applica queste classi agli elementi di testo, così che i controlli annidati in un contenitore non ereditino una dimensione tipografica da titolo non voluta.
Sistema di design Rivet: scelte di colore e superfici
Il cremisi non è l’unico colore
La palette di riferimento distingue crimson-500 (#990000) da blue-500 (#006298). Il campione usa il cremisi con moderazione come bordo superiore e i controlli nativi di Rivet per gli elementi interattivi. Il testo usa black-500 (#243142), mentre la superficie informativa di supporto usa black-000 (#f8f9fa) e i separatori black-100 (#e2e7e9). Sono voci effettive della palette, non valori ricavati da uno screenshot.
Il nome di un colore non garantisce che ogni combinazione superi i requisiti di contrasto. Mantieni lo stile di focus nativo delle schede e lo stato selezionato, insieme al contenuto visibile e al valore aria-selected. Non indicare un pannello attivo soltanto colorandone di cremisi l’etichetta. L’avviso relativo all’evento fittizio dell’esempio resta un testo normale e leggibile sopra il selettore.
Sistema di design Rivet: spaziatura, larghezze e angoli
Una scala con nomi e ampi intervalli intenzionali
La spaziatura di Rivet non è un elenco di incrementi consecutivi di quattro pixel. Passa da xxs 4px a xs 8px, sm 16px, md 24px, lg 32px, xl 40px, xxl 64px, 3-xl 128px e 4-xl 192px, con una radice di 16px. L’esempio usa sm per il margine interno della pagina su dispositivi mobili, md per la spaziatura attorno al pannello e lg per le principali separazioni verticali.
Il contenitore di lettura del campione, con una larghezza massima di 64rem, è una scelta applicativa, non un token di contenitore dichiarato di Rivet. All’interno del contenitore, il token di larghezza 4-xl è 48rem/768px; spacing-4-xl è 12rem/192px. La stessa desinenza non implica la stessa dimensione. Radius-sm è .125rem, md .25rem e lg .5rem; non sostituire tutti i componenti con un’estetica uniforme di grandi schede arrotondate.
Sistema di design Rivet: struttura e stato delle schede
Fai corrispondere i valori dei dati, poi inizializza
Un gruppo di schede comprende un wrapper rvt-tabs, un rvt-tabs__tablist con un aria-label significativo, pulsanti di attivazione e pannelli rvt-tabs__panel adiacenti. I valori di data-rvt-tab e data-rvt-tab-panel devono corrispondere per ogni coppia. L’indicatore di selezione iniziale data-rvt-tab-init va inserito in un pannello, non nel relativo pulsante. Rivet può generare gli identificatori, ma le coppie esplicite rendono questo esempio più facile da esaminare.
Rivet.init() aggiunge i ruoli delle schede, lo stato di selezione, le relazioni tra pannelli e il comportamento da tastiera. Non implementare un secondo gestore di clic che alterni autonomamente lo stato hidden: due gestori dello stato in conflitto possono desincronizzare la scheda selezionata e il pannello visibile. Il markup completo qui sotto contiene brevi testi originali e può essere inserito tra i tag del foglio di stile e dello script nella configurazione.
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>
Sistema di design Rivet: cosa tenere fuori dalle schede
Metti in evidenza le informazioni essenziali sulla visita
Il titolo dell’evento, la data, la durata e l’avviso che specifica che si tratta di un esempio fittizio restano fuori dalle schede. Un visitatore non dovrebbe dover aprire un pannello nascosto per scoprire se il contenuto riguarda una prenotazione reale. Ogni pannello contiene un breve titolo e un paragrafo; le tre etichette sono abbastanza brevi da stare su una sola riga anche su uno schermo stretto.
Le schede sono adatte quando i contenuti correlati possono essere letti separatamente. Sono poco indicate per confrontare le quote di più programmi o due piani di studio, perché il passaggio da una scheda all’altra nasconde una delle opzioni. Per questo tipo di attività, è meglio usare una tabella o un elenco aperto.
Usa Panoramica, Arrivo e Accessibilità per spiegazioni di supporto utili anche singolarmente.
Mantieni visibili, fuori dai pannelli delle schede, le scadenze, gli avvisi di annullamento e l’azione principale.
Usa una tabella comparativa quando il lettore deve esaminare contemporaneamente i valori di più categorie.
Sistema di design Rivet: adattabilità e uso da tastiera
Cinque breakpoint mobile-first
I breakpoint di Rivet sono 30em, 46.25em, 67.5em, 78.75em e 87.5em. Con la consueta dimensione iniziale del font di 16px, corrispondono a 480, 740, 1080, 1260 e 1400px. Il breakpoint medio è 740px, non il valore convenzionale di 768px preso da un altro sistema. Le utilità responsive aggiungono il breakpoint e -up, per esempio rvt-ts-32-md-up.
La barra delle schede non deve trasformarsi in più righe sovrapposte. Mantieni brevi le etichette e prova il testo effettivo su schermi stretti; ridurre la dimensione del testo per farlo stare non sostituisce la scelta del componente di navigazione corretto. Nell’interazione nativa, i tasti Freccia sinistra e Freccia destra spostano il focus tra le schede e ricominciano dall’estremità opposta quando si raggiunge un limite. Invio o Spazio attivano la scheda selezionata con il focus. I pannelli chiusi non devono lasciare i relativi elementi interattivi nell’ordine di tabulazione.
Sistema di design Rivet: installazione e verifica dell’esempio
Un bundle browser con una sola inizializzazione
L’installazione fornita fissa la versione 2.9.1 e copia il suo CSS pubblicato e il JavaScript browser minificato nella directory statica del sito. Distribuisci queste risorse prima di chiamare Rivet.init(). Se un framework monta HTML in un secondo momento, usa il ciclo di vita di integrazione documentato di JavaScript, anziché presumere che la scansione iniziale della pagina abbia individuato i nuovi nodi.
L’anteprima autonoma esegue localmente le risorse ufficiali CSS e JavaScript. I font alternativi e la larghezza del contenitore sono override applicativi espliciti. Non invia richieste di prenotazione in rete, non salva dati, non raccoglie dati analitici e non genera conferme. Le schede native costituiscono l’intera interazione dimostrata.
Carica il foglio di stile locale e verifica che tutti e tre i pulsanti delle schede e i relativi pannelli esistano prima dell’inizializzazione.
Inizializza Rivet, cambia scheda con il puntatore, poi ripeti usando i tasti freccia e Invio o Spazio.
Verifica il pulsante selezionato, il pannello visibile, l’anello di focus e la larghezza del documento su desktop e su dispositivi mobili con schermi stretti.
Un selettore di informazioni sulla visita con tre pannelli
Attributi dei dati con corrispondenze esplicite e un pannello iniziale; le schede native di Rivet gestiscono focus e visibilità.
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>
Mantieni il titolo dell’evento e le informazioni essenziali fuori dai pannelli.
Includi CSS e JavaScript pubblicati e chiama Rivet.init() una sola volta.
I tasti freccia spostano il focus; Invio o Spazio attivano la scheda selezionata.
Esempio autonomo completo
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"><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>
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
Sistema di design Rivet: configurazione dell’agente
Punto di partenza per l’implementazione
I percorsi delle risorse browser pubblicate di rivet-core 2.9.1 sono stati verificati con la guida ufficiale introduttiva. Adatta la directory pubblica al tuo server; l’anteprima usa copie locali e un font alternativo. Lo ZIP completo dell’esempio funzionante, disponibile in Fonti, include anche le dipendenze esatte dell’anteprima e il documento completo. Estrailo, esegui python3 -m http.server 8080 in quella directory, quindi apri http://localhost:8080/indiana-rivet.html. Non aprire gli esempi basati su moduli tramite 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>
Un prompt per il tuo progetto
Prompt per l’agente
Crea una pagina di dettaglio per un workshop universitario con Rivet 2.9.1 e le schede native di HTML. Carica rivet.min.css e rivet.min.js e chiama Rivet.init(). Usa valori corrispondenti per data-rvt-tab e data-rvt-tab-panel, un’etichetta significativa per l’elenco delle schede e data-rvt-tab-init sul primo pannello. Mantieni titolo, data e avvisi essenziali fuori dalle schede. Usa 16px per il testo del corpo, 23px per i titoli dei pannelli, 32px per il titolo della pagina e i token di spaziatura di Rivet. Rispetta i breakpoint di 480/740/1080/1260/1400px. Mantieni brevi i pannelli e conserva il comportamento da tastiera per il focus e la selezione; indica che tutti i dettagli inventati dell’evento sono contenuti dimostrativi. Non usare i simboli dell’identità IU senza autorizzazione.
05
Sistema di design Rivet: fonti e ambito
Un riferimento tecnico Rivet e una dimostrazione fittizia per un workshop. L’uso dei simboli istituzionali e dei font resta soggetto alle norme dell’Indiana University; non si offrono visite né prenotazioni reali.
