Compón páginas editoriales académicas con el preset de Tailwind de Decanter, una escala tipográfica adaptable y bordes de pantalla fluidos. Explora tarjetas de eventos originales con filtros de temas funcionales y resúmenes expandibles.
Interpretación original HTML/CSS de la tipografía modular, los márgenes de pantalla y las funciones del color de Decanter v7; no es un entorno de ejecución del ajuste preestablecido compilado. · Referencia de implementación
02
Referencia de diseño del sistema de diseño Decanter
Paquete Decanter 7.5.3 e instalación y convenciones oficiales de v7. Las obsolescencias de v8 se tratan como notas de migración. La vista previa es una interpretación etiquetada HTML/CSS, usa fuentes locales alternativas y no incluye marcas de identidad universitaria.
Sistema de diseño Decanter: un ajuste preestablecido de Tailwind, no un SDK
Fija la ruta de generación documentada
El paquete Decanter verificado es la versión 7.5.3 y declara Tailwind CSS ^3.4.17. Su punto de entrada público es un ajuste preestablecido de configuración de Tailwind. Añade require("decanter") a presets, indica en content las rutas de los archivos fuente reales y compila la hoja de estilos de utilidades. No existe ningún proveedor React de Decanter que importar.
La documentación incluye eliminaciones previstas para v8, aunque sigue indicando que la instalación corresponde a v7. Esta referencia fija la versión 7.5.3 y evita las utilidades obsoletas foggy, slab y las versiones antiguas de modular-text. La vista previa independiente, claramente identificada como interpretación de las reglas de diseño, no pretende ser una compilación de Tailwind.
Tipografía modular adaptable del sistema de diseño Decanter
La escala depende de su base
Source Sans 3 y Source Serif 4 son las familias sans serif y serif principales, con Helvetica/Arial y Georgia/Times como alternativas. Las utilidades type-* representan funciones proporcionales, no encabezados con tamaños fijos en píxeles. El multiplicador de escala es 1.15 en móviles, 1.2 en tabletas y 1.25 en escritorio.
La muestra elige la configuración basefont-23 documentada: 18px en XS–SM, 21px en MD–XL y 23px en 2XL. Usa un titular de tamaño type-3 para que la presentación mantenga las proporciones en un ejemplo integrado compacto. Si un proyecto elige otra base, debe recalcular los tamaños resultantes en lugar de copiar los valores en píxeles de esta vista previa.
Sistema de diseño de Decanter: contenedor fluido y cuadrícula
El borde de la pantalla forma parte de la maquetación
El contenedor cc usa espaciados laterales definidos: 20px en XS, 30px en SM, 50px en MD, 80px en LG y 100px en XL. Crece hasta alcanzar un ancho máximo de contenido de 1500px en una ventana de 1700px. Es un sistema fluido con reglas laterales explícitas, no simplemente un contenedor fijo de 1200px.
La muestra respeta esos márgenes y transforma sus dos tarjetas editoriales en una sola columna por debajo de MD. El contenido de las tarjetas sigue el orden normal del documento, por lo que la navegación con teclado mantiene la misma secuencia de lectura cuando se apilan.
Sistema de diseño de Decanter: espaciado adaptable
Usa las utilidades adaptables de forma deliberada
Decanter ofrece las familias rs-m-* y rs-p-* para márgenes y rellenos adaptables. El valor elegido cambia en los rangos documentados; no es un alias del espaciado fijo de Tailwind. El código de ejemplo usa rs-p-1 alrededor de una tarjeta y un relleno fijo normal para su acción.
Para que la referencia sea reproducible, la interpretación independiente identifica cada ajuste de CSS como código de la aplicación. En una implementación nativa, usa la utilidad generada por el preset en lugar de definir una segunda regla que compita con ella usando el mismo nombre. Evita fragmentos dinámicos como "rs-p-" + size cuando el analizador de compilación no pueda detectar la clase completa.
Sistema de diseño de Decanter: identidad y color interactivo
El rojo Cardinal y el rojo digital cumplen funciones distintas
El rojo Cardinal principal de Stanford es #8c1515. El rojo digital #b1040e es un color interactivo o de acento, y no sustituye al Cardinal en la identidad de la universidad. El azul digital #006cb8 se usa para los enlaces y #00548f para su estado de interacción más oscuro.
La muestra usa el rojo digital en la acción que despliega los detalles y superficies neutras discretas. No incluye el logotipo denominativo, el sello ni la franja de identidad oficial de Stanford. Una implementación institucional debe utilizar recursos de identidad autorizados y respetar las normas de marca de la universidad; una referencia técnica no implica respaldo institucional.
Sistema de diseño de Decanter: tarjetas editoriales con acciones
Combina contenido en lugar de adivinar un componente de API
Los ejemplos oficiales de tarjetas son elementos semánticos HTML con utilidades para espaciado, tipografía, superficies y acciones. Nuestra composición separa la categoría del evento del título, muestra la fecha y el lugar en texto y usa un botón real para desplegar el resumen en el mismo sitio. No inventa una propiedad Card de Decanter API.
Un título enlazado sería apropiado si la acción realmente llevara a otra página. En este caso, el resultado es una expansión local, así que un botón con aria-expanded y aria-controls comunica ese comportamiento. La vista previa usa nombres y resúmenes de eventos originales, en lugar de copiar noticias de la universidad.
Usa el título del evento como encabezado de la tarjeta.
Mantén la hora y el lugar visibles antes de desplegar el contenido.
Usa un botón para desplegar información y un enlace solo para navegar a otro destino.
Sistema de diseño de Decanter: filtros y contenido desplegable
Mantén el contenido disponible en todas las maquetaciones
El selector de temas filtra las dos tarjetas originales de eventos de investigación y actualiza el recuento visible de resultados. La opción sin coincidencias muestra deliberadamente un estado vacío y una forma de restablecer el filtro. El filtro no modifica la jerarquía de encabezados ni convierte las tarjetas en opciones seleccionables de un formulario.
Cada resumen tiene su propio estado de botón. Al cerrar una tarjeta, el foco permanece en el mismo control. Al cambiar el filtro, se cierran los resúmenes ocultos, de modo que al volver a un tema se muestra una vista general uniforme. Estos controles son un comportamiento de la aplicación añadido a un enfoque de diseño basado en utilidades, no Decanter empaquetados de JavaScript.
Sistema de diseño de Decanter: compilar y validar el resultado
Las clases generadas requieren fuentes analizadas
La configuración proporcionada está pensada para Tailwind 3 y el preset Decanter 7.5.3 verificado. Incluye las directivas de entrada, el patrón de contenido, el comando de salida y una composición de tarjetas original. Enlaza la hoja de estilos resultante desde la cabecera del documento. Carga por separado los archivos de fuentes aprobados o conserva deliberadamente las alternativas documentadas.
La vista previa no se compiló con esa cadena de herramientas, y así se indica en su etiqueta de implementación. Para una adopción en producción, compila el conjunto completo de clases del proyecto e inspecciona el resultado generado, especialmente después de una actualización de versión principal que modifique utilidades obsoletas.
Fija la versión de Decanter y la versión principal de Tailwind compatible.
Registra el preset y analiza el directorio de código fuente real.
Compila las tres capas de directivas de Tailwind.
Verifica la fuente base elegida, los márgenes de pantalla y las acciones de las tarjetas en los puntos de ruptura documentados.
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"><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>
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
Sistema de diseño de Decanter: configuración del agente
Punto de partida para la implementación
Punto de entrada de compilación del preset verificado a partir del código fuente; no se ejecutó para la vista previa independiente interpretada. Enlaza dist/styles.css desde la cabecera del documento. Las fuentes y los recursos de identidad institucional son decisiones independientes. El ZIP del ejemplo funcional completo 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/stanford-decanter.html. No abras ejemplos basados en módulos mediante file://.
Compón una página editorial de eventos con Decanter 7.5.3 y Tailwind 3. Usa el preset, la opción explícita de fuente base, la escala type-* y los márgenes de pantalla cc. Mantén diferenciados el tema, el título, la hora y el lugar en tarjetas semánticas. Implementa el filtrado local por tema y controles de resúmenes con aria-expanded. Evita las utilidades obsoletas foggy/slab, las noticias universitarias copiadas y los elementos de identidad. Identifica por separado cualquier vista previa interpretada manualmente, en lugar de presentarla como una compilación de Decanter.
05
Sistema de diseño de Decanter: fuentes y alcance
Composición educativa independiente de OpenDesign; no es una página oficial de un evento universitario. Contenido original, sin emblemas de Stanford. La adopción del código y el uso de una identidad autorizada por la marca son cuestiones distintas.
