Patrones de artículo

Avisos

Cuatro señales para una trampa, un consejo, una precaución o una nota neutra, cada una con su propio color e icono. Extraen un único punto importante del flujo sin romperlo.

Cita en bloque

Una cita destacada, resaltada por una línea verde a la izquierda sobre un panel con tinte. Se usa para una cita real, no para enfatizar; para eso está la negrita.

Código

El código en línea va en un chip con tinte. Los bloques llevan una cabecera con el lenguaje y los controles Copiar y Expandir, con resaltado de sintaxis mediante Shiki en un tema claro y uno oscuro, y se extienden a sangre hasta los bordes de la pantalla en el móvil para que una línea larga tenga espacio.

const tokens = getDesignTokens();
renderTable(tokens.colors);

Un bloque de código puede llevar además una cabecera con la ruta del archivo: una franja mono sobre el código que nombra el archivo al que pertenece. En el móvil, un tercer control se une a Copiar y Expandir: Ajustar, que pliega las líneas largas en vez de desplazarlas.

Tablas

Un artículo nunca usa una tabla HTML desnuda. Una tabla clásica va dentro de una tarjeta con borde, con la primera columna fija y una franja de cabecera en monoespaciada; y donde las filas pelearían con la columna del teléfono, los datos se convierten en una tarjeta a medida. Los cinco patrones, renderizados desde las clases reales:

Tabla sencilla

La tabla ligera de esta documentación: una franja de cabecera en mono mayúsculas sobre el tinte de insignia, separadores muy finos y una tarjeta redondeada con desplazamiento. Para datos de token y valor que caben en tres o cuatro columnas; lo más ancho pertenece a los patrones de tabla a medida de arriba. Las clases table-mini.

Cuando una fila lleva más de tres o cuatro columnas, no la dejes desplazarse de lado: añade table-stack y da a cada celda un data-label. Desde 700 píxeles es la misma tabla; en el móvil la fila de cabecera se oculta y cada fila se apila en pares etiqueta-valor: la escala tipográfica de la página de Tipografía se lee así. Marca la celda de título de la fila con stack-lead y una nota final con stack-end. Y cuando hasta los pares se quedan anchos, renuncia a la tabla: las muestras de color se dibujan como una lista que fluye.

<div class="table-mini-wrap">
  <table class="table-mini table-stack">
    <thead>…</thead>
    <tbody>
      <tr>
        <td class="stack-lead"><code>--fs-h1</code></td>
        <td data-label="Escritorio">34px</td>
        <td data-label="Móvil">30px</td>
      </tr>
    </tbody>
  </table>
</div>

Tarjetas de consejo

Nacieron en esta documentación y se promocionaron al sitio: una pareja de tarjetas Hazlo / No lo hagas para dar consejo sin un muro de texto. Cada tarjeta es una figure con cabecera etiquetada, un escenario de ejemplo y un pie. Disponible para los artículos como HTML plano con las clases dodont.

<div class="dodont-grid">
  <figure class="dodont dodont-do">
    <p class="dodont-head">Hazlo</p>
    <div class="dodont-stage">…ejemplo…</div>
    <figcaption class="dodont-caption">Por qué funciona.</figcaption>
  </figure>
  …
</div>

Columnas comparadas

Dos columnas con borde, la favorecida coronada en verde y la otra en neutro: qué se traduce frente a qué se conserva, qué da una librería frente a lo que cuesta. Las clases compare, disponibles para los artículos.

• Hazlo

  • compare-yes

• No lo hagas

  • compare-no

Separadores y listas de puntos

Una regla horizontal en un artículo se dibuja como una barra verde corta y centrada, el separador de sección. Y la lista de puntos verdes, la viñeta de las descripciones de rol y la página de reservas, está disponible para los artículos como dot-list.

• Separadores y listas de puntos
• Columnas comparadas

Diagramas

Los diagramas de arquitectura son imágenes estáticas dibujadas con los propios tokens del sitio: al lector no le llega ninguna librería de diagramas. Los tokens dan tema al resultado (nodos verdes, flechas neutras), así que se recolorea con el tema como todo lo demás, y el control de la esquina lo abre a pantalla completa. Este es un diagrama real de un artículo publicado:

Índice

Un artículo largo lleva su índice: el componente Toc real se renderiza como una tarjeta lateral fija a partir de 1024 píxeles, y por debajo de ese ancho los mismos encabezados alimentan la hoja del índice tras el anillo de progreso de la barra de lectura.

Navegación de serie

Un post que pertenece a una serie se abre con una estantería horizontal de tarjetas de parte numeradas: la parte actual con contorno verde, las demás enlazando a lo largo de la serie. En móvil la estantería se desplaza libremente; en escritorio se añaden controles de flecha.

Suscripción

La banda de boletín que cierra un post: un breve reclamo, un campo de correo electrónico y una nota sobre la doble confirmación. Este es el componente real, renderizado en vivo.

Dónde vive

global.css: .prose blockquote.callout-*, .code-block-* y .prose pre, la familia .dt-card, además de SubscribeForm.astro.