Crea páginas universitarias con la escala real de tokens de Rivet, la anatomía de componentes de HTML y las interacciones de teclado nativas. Explora una página compacta de detalles de un taller con pestañas accesibles para la información de la visita.
Rivet 2.9.1 CSS y JavaScript nativos; contenido ficticio original, fuente Arial alternativa y contenedor de la aplicación. · Referencia de implementación
02
Referencia de diseño del sistema de diseño de Rivet
Rivet 2.9.1 publicado CSS y documentación oficial de tokens/utilidades. Las conversiones a rem presuponen una raíz de 16px; el ejemplo local sustituye las fuentes por Arial/Georgia y elige un ancho exterior propio de 64rem.
Sistema de diseño de Rivet para tareas universitarias
Un sistema de componentes con un punto de entrada HTML
Rivet proporciona CSS, JavaScript, clases de utilidad y diseños de página para las interfaces de Indiana University. El ejemplo funcional utiliza directamente el paquete para navegador de la versión 2.9.1: no requiere React ni un compilador de componentes. Su propósito es mostrar una pequeña página de detalles de un taller con información secundaria sobre la visita, no una solicitud de admisión disfrazada de panel de control.
La identidad institucional y el contenido de muestra se mantienen separados. Esta página no reproduce una firma de IU, no afirma registrar a un visitante ni confirma la existencia de una instalación real. Para un servicio universitario en producción, sigue el proceso aprobado por la universidad para el uso de la marca y la titularidad del contenido. La licencia del código no convierte los detalles inventados del evento en información oficial.
Sistema de diseño de Rivet: escala tipográfica y roles de las fuentes
Aplica utilidades de tamaño exacto al texto
La familia sans serif de Rivet parte de BentonSans; la familia serif, de GeorgiaPro. La muestra local utiliza deliberadamente Arial y Georgia como alternativas y no solicita fuentes remotas. En una implementación de producción, hay que gestionar los permisos institucionales y la distribución de las fuentes, en lugar de copiar los archivos de fuentes de esta vista previa.
La escala numérica sigue una progresión de segunda mayor redondeada. El título del ejemplo usa rvt-ts-32 y el encabezado del panel, rvt-ts-23; sus tamaños compilados son 2rem y 1.4375rem, respectivamente. El texto base es 1rem. Usa rvt-lh-base para un interlineado de 1.5, rvt-lh-tight para 1.2 y rvt-lh-loose para 1.65. Aplica estas clases a los elementos de texto para evitar que los controles anidados en un contenedor hereden una escala tipográfica de presentación no deseada.
La paleta de referencia distingue crimson-500 (#990000) de blue-500 (#006298). La muestra usa el carmesí como una franja superior discreta y controles nativos de Rivet para los elementos interactivos. El texto utiliza black-500 (#243142), black-000 (#f8f9fa) para la superficie de información complementaria y black-100 (#e2e7e9) para los separadores. Son colores reales de la paleta, no valores extraídos de una captura de pantalla.
El nombre de un color no garantiza que todas las combinaciones tengan suficiente contraste. Mantén el tratamiento nativo del foco de las pestañas y su estado seleccionado, junto con el contenido visible y el valor aria-selected. No indiques que un panel está activo únicamente cambiando el color de su etiqueta a carmesí. El aviso de evento ficticio del ejemplo sigue siendo texto legible y corriente, situado encima del selector.
Sistema de diseño de Rivet: espaciado, anchos y esquinas
Una escala con nombre y saltos amplios deliberados
El espaciado de Rivet no es una lista de incrementos consecutivos de cuatro píxeles. Pasa de xxs 4px a xs 8px, sm 16px, md 24px, lg 32px, xl 40px, xxl 64px, 3-xl 128px y 4-xl 192px con una raíz de 16px. El ejemplo usa sm para el margen interior de la página en móviles, md para el ritmo junto al panel y lg para las separaciones verticales principales.
El contenedor de lectura de 64rem como ancho máximo de la muestra es una decisión de la aplicación, no un supuesto token de contenedor de Rivet. Dentro de ese contenedor, el token de ancho 4-xl es 48rem/768px; spacing-4-xl es 12rem/192px. Compartir el mismo sufijo no implica compartir el mismo valor dimensional. radius-sm es .125rem, md .25rem y lg .5rem; no reemplaces todos los componentes por una estética uniforme de tarjetas muy redondeadas.
Sistema de diseño de Rivet: estructura y estados de las pestañas
Haz coincidir los valores de los datos y, después, inicializa
Un conjunto de pestañas consta de un contenedor rvt-tabs, una lista rvt-tabs__tablist con un aria-label significativo, botones activadores y paneles hermanos rvt-tabs__panel. Los valores de data-rvt-tab y data-rvt-tab-panel deben coincidir en cada pareja. El marcador de selección inicial data-rvt-tab-init debe ir en un panel, no en su botón. Rivet puede generar identificadores, pero las parejas explícitas hacen que este ejemplo sea más fácil de inspeccionar.
Rivet.init() añade los roles de pestaña, el estado de selección, las relaciones entre paneles y el comportamiento del teclado. No implementes un segundo controlador de clics que alterne por separado el atributo hidden: dos responsables del estado pueden hacer que la pestaña seleccionada y el panel visible dejen de estar sincronizados. El marcado completo de abajo contiene texto original breve y puede colocarse entre las etiquetas de hoja de estilos y de script de la configuración.
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 de diseño de Rivet: qué debe quedar fuera de las pestañas
Mantén visible la información esencial de la visita
El título del evento, la fecha, la duración y el aviso de ejemplo ficticio deben quedar fuera de las pestañas. Los visitantes no deberían tener que descubrir un panel oculto para saber si el contenido describe una reserva real. Cada panel incluye un encabezado breve y un párrafo; las tres etiquetas son lo bastante cortas como para permanecer en una sola fila en una pantalla estrecha.
Las pestañas son adecuadas cuando se puede leer por separado el material relacionado. No son apropiadas para comparar varias tarifas de programas o dos planes de estudio, porque al cambiar de pestaña se oculta uno de los elementos de la comparación. Para esa tarea, es mejor usar una tabla o una lista desplegada.
Usa «Resumen», «Llegada» y «Acceso» para explicaciones complementarias que sean útiles por separado.
Mantén los plazos, los avisos de cancelación y la acción principal visibles fuera de los paneles de pestañas.
Usa una tabla comparativa cuando el lector deba consultar valores de varias categorías al mismo tiempo.
Sistema de diseño de Rivet: diseño adaptable y uso del teclado
Cinco puntos de ruptura con prioridad para móviles
Los puntos de ruptura de Rivet son 30em, 46.25em, 67.5em, 78.75em y 87.5em. Con el tamaño de fuente inicial habitual de 16px, equivalen a 480, 740, 1080, 1260 y 1400px. El punto de ruptura medio es 740px, no el valor convencional de 768px tomado de otro sistema. Las utilidades adaptables añaden el punto de ruptura y -up, como en rvt-ts-32-md-up.
La franja de pestañas no debe dividirse en varias filas apiladas. Mantén las etiquetas cortas y comprueba cómo se ve el texto real en anchos reducidos; reducir el tamaño del texto para que quepa no sustituye a elegir el componente de navegación adecuado. En la interacción nativa, las flechas izquierda y derecha mueven el foco entre las pestañas y permiten avanzar desde el final hasta el principio, y viceversa. Enter o Espacio activa la pestaña enfocada. Los paneles ocultos no deben dejar sus elementos interactivos en el orden de tabulación.
Sistema de diseño de Rivet: instala y verifica el ejemplo
Un paquete para navegador con una sola inicialización
La instalación proporcionada fija la versión 2.9.1 y copia el CSS publicado y el JavaScript minimizado para navegador al directorio estático del sitio. Sirve esos recursos antes de llamar a Rivet.init(). Si un framework monta el HTML más tarde, usa el ciclo de vida de integración documentado de JavaScript, en lugar de dar por sentado que el análisis inicial de la página detectó los nodos nuevos.
La vista previa independiente ejecuta localmente esos recursos oficiales de CSS y JavaScript. La fuente alternativa y el ancho del contenedor son ajustes explícitos de la aplicación. No incluye solicitudes de reserva por red, persistencia, analítica ni confirmaciones generadas. Las pestañas nativas son toda la interacción que se muestra.
Carga la hoja de estilos local y verifica que los tres activadores de pestaña y sus paneles estén presentes antes de inicializar.
Inicializa Rivet, cambia de pestaña con el puntero y luego repite la prueba con las teclas de flecha y Enter o Espacio.
Comprueba el activador seleccionado, el panel visible, el indicador de foco y el ancho del documento en tamaños de escritorio y de móvil estrecho.
Ejemplos de componentes del sistema de diseño Rivet
Selector de información de visita con tres paneles
Atributos de datos coincidentes y explícitos, y un panel inicial; Rivet nativo controla el foco y la visibilidad.
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>
Mantén el título del evento y la información esencial fuera de los paneles.
Incluye el CSS y el JavaScript publicados y llama a Rivet.init() una vez.
Las teclas de flecha mueven el foco; Enter o Espacio activa la pestaña enfocada.
Ejemplo independiente completo
El documento completo incluye su estructura, controles e inicialización. Extrae el archivo de ejemplo enlazado para obtener los recursos del proveedor con sus rutas relativas exactas y luego sírvelo mediante 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>
Descarga el ejemplo completo desde Fuentes. El README contiene el comando exacto para ejecutarlo en local.
Mantén las rutas de los recursos del proveedor relativas a este documento; el archivo incluye todos los recursos que utiliza esta vista previa.
04
Configuración del agente del sistema de diseño Rivet
Punto de partida para la implementación
Rutas de recursos de navegador publicados de rivet-core 2.9.1 verificadas con la guía oficial de inicio. Ajusta el directorio público a tu servidor; la vista previa usa copias locales y una fuente alternativa. El ZIP del ejemplo funcional completo que aparece en Fuentes también incluye las dependencias exactas de la vista previa y el documento completo. Extráelo, ejecuta python3 -m http.server 8080 en ese directorio y abre http://localhost:8080/indiana-rivet.html. No abras ejemplos basados en módulos mediante 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>
Una instrucción para tu proyecto
Instrucción para el agente
Crea una página de detalles de un taller universitario con Rivet 2.9.1 y pestañas nativas de HTML. Carga rivet.min.css y rivet.min.js y llama a Rivet.init(). Usa valores coincidentes para data-rvt-tab/data-rvt-tab-panel, una etiqueta descriptiva para tablist y data-rvt-tab-init en el primer panel. Mantén el título, la fecha y los avisos esenciales fuera de las pestañas. Usa texto del cuerpo de 16px, títulos de panel de 23px, un título de página de 32px y los tokens de espaciado de Rivet. Respeta los puntos de interrupción de 480/740/1080/1260/1400px. Mantén los paneles breves, conserva el comportamiento del foco y la selección con teclado, e identifica todos los detalles inventados del evento como contenido de demostración. No uses marcas de identidad de IU sin autorización.
05
Fuentes y alcance del sistema de diseño Rivet
Una referencia técnica de Rivet y una demostración ficticia de taller. El uso de marcas institucionales y fuentes sigue sujeto a las normas de Indiana University; no se ofrecen visitas ni reservas reales.
