Stella Nova ▸ Grilla y estilos

Grilla y estilos

Lo que Stella Nova pone a disposición de quien escribe una página: el sistema de columnas, las bandas de fondo, las imágenes a sangre, los avisos, los botones, las clases tipográficas y las palabras mágicas. Se escribe directamente en el wikitexto.

El conjunto se mantiene chico a propósito. Antes de pedir una clase nueva, revisar si alguna de estas sirve.

La grilla

El sistema de maquetación en columnas. Se activa envolviendo el contenido en un div con la clase grid: cada hijo directo del contenedor se convierte en una celda. El nombre es bilingüe, grid y grilla funcionan idéntico.

<div class="grid cols-3 gap-l align-center">
  Primer bloque
  Segundo bloque
  Tercer bloque
</div>

Los modificadores se suman como clases separadas por espacios. Se combinan libremente.

Grupo	Clases	Qué hace
Columnas	`cols-1` … `cols-6`	N columnas iguales.
Columnas	`cols-auto`	Tantas columnas de al menos 16 rem como quepan.
Columnas	`cols1-2` / `cols2-1`	Dos columnas asimétricas, en tercios.
Espaciado	`gap-0` · `gap-s` · `gap-m` · `gap-l`	Separación entre celdas.
Espaciado	`gap-h-` / `gap-v-`	Separación por eje, misma escala.
Flujo	`flujo-v` / `stack`	Apila las celdas en una columna vertical.
Alineación	`align-top` · `align-center` · `align-bottom` · `align-baseline`	Alinea el contenido de las celdas. Alias `arriba` · `centro` · `abajo`.
Margen	`sin-margen` / `flush`	Anula el margen vertical de la grilla.
Ancho	`full` / `completa`	Rompe el ancho de lectura y ocupa todo el campo.

Columnas iguales

<div class="grid cols-3">
  Celda 1
  Celda 2
  Celda 3
</div>

1

2

3

Tarjetas automáticas

Con cols-auto la grilla calcula cuántas columnas caben, cada una de al menos 16 rem. Es el patrón para tarjetas o miniaturas que deben reacomodarse solas: se decide un ancho mínimo y el navegador reparte.

<div class="grid cols-auto gap-l">
  Tarjeta A
  Tarjeta B
  Tarjeta C
  Tarjeta D
</div>

A

B

C

D

Columnas asimétricas

<div class="grid cols2-1">
  Bloque amplio (2/3)
  Bloque angosto (1/3)
</div>

2/3, bloque amplio

1/3

Es el arreglo natural para una imagen grande con su comentario al costado, o para un diagrama con su explicación.

Espaciado

<div class="grid cols-3 gap-0">
  sin separación
</div>

1

2

3

Con gap-h-* y gap-v-* se controla cada eje por separado, útil para una galería que necesita aire horizontal pero filas apretadas.

Pila vertical

stack, con alias flujo-v, apila las celdas en una sola columna, con el mismo sistema de separación.

<div class="grid stack gap-s">
  Fila 1
  Fila 2
  Fila 3
</div>

Fila 1

Fila 2

Fila 3

Alineación

Cuando las celdas tienen alturas distintas, por defecto se estiran a la misma altura. align-center centra su contenido verticalmente, y align-baseline alinea la primera línea de texto de cada celda, que es lo correcto cuando las celdas son bloques de texto.

<div class="grid cols2-1 align-center">
  Bloque con varias líneas
  Bloque corto
</div>

Bloque con varias líneas de contenido para mostrar la diferencia de altura

Bloque corto

A todo el campo

full, con alias completa, hace que la grilla trascienda el ancho de lectura y ocupe todo el campo. El siguiente ejemplo se sale de la columna de lectura:

<div class="grid cols-3 full">
  …
</div>

A todo el campo · 1

2

3

Comportamiento

Responsiva sola. Bajo 64 rem (alrededor de 1024 px) las grillas densas de cuatro a seis columnas reducen sus columnas, y bajo 48 rem, tablet vertical, todas colapsan a una sola. Es automático.
Sin desbordes. Las columnas usan minmax(0, 1fr), así que una celda con una URL larga o un bloque de código mantiene la grilla en su sitio.
Contenido en línea. Si las celdas son varios enlaces o span seguidos, MediaWiki los envuelve a todos en un solo párrafo. El skin lo detecta cuando ese párrafo es el único hijo y lo hace transparente, así que funciona igual.
flujo-v y las consultas semánticas. flujo-v aplica break-inside: avoid a sus hijos directos, de modo que una consulta #ask con format=ul se queda entera en una columna, porque la lista cuenta como un solo hijo. La solución es format=template con una plantilla de tarjeta, para que cada resultado sea una celda propia.

Bandas de fondo

Las clases fondo-* tienden un fondo de lado a lado del campo y devuelven el contenido al ancho de lectura. Sirven para dividir una página larga en zonas legibles. El alto es siempre un múltiplo entero de la línea base, así que la banda mantiene el ritmo vertical de la página.

<div class="fondo-ahuesado">
  <div class="grid cols-2">
    …
  </div>
</div>

Clase	Efecto
`fondo-ahuesado`	Hueso claro. La banda neutra por defecto.
`fondo-coral`	Lavado carmín.
`fondo-verde`	Lavado verde.
`fondo-ambar`	Lavado ámbar.
`fondo-info`	Lavado de información.
`fondo-noche`	Fuerza el tema oscuro en todo el bloque.
`fondo-dia`	Fuerza el tema claro.
`fondo-opuesto`	Invierte respecto al tema que esté vigente.

Las tres últimas redefinen el esquema de color del bloque completo, así que la tinta, los filetes y los enlaces de adentro voltean con él. fondo-opuesto es la más plástica, porque sostiene el contraste tanto si el lector está en claro como en oscuro.

Imágenes

A sangre

full-width revienta el margen lateral de la hoja y lleva la imagen de borde a borde del artículo. Tres formas válidas:

[[Archivo:foo.jpg|class=full-width]]
[[Archivo:foo.jpg|frameless|class=full-width]]
<div class="full-width">[[Archivo:foo.jpg]]</div>

La imagen se estira al 100 % del nuevo ancho, así que el original debe tener al menos 1600 px de ancho o se verá pixelado. La leyenda del thumb se mantiene al ancho de lectura, para que el pie siga legible.

Si es el primer elemento del cuerpo, también revienta el margen superior y se ancla al borde, produciendo un efecto de portada. En ese caso choca con el título de la página, así que se combina con __NOTITLE__. En modo lienzo va al ancho completo del viewport.

Recorte circular

[[Archivo:perfil.jpg|class=img-circle]]

Recorta la imagen en círculo sobre su cuadrado mayor inscrito y oculta el pie. Para retratos conviene subir la imagen ya cuadrada, o el recorte tomará el centro geométrico y no el rostro.

Avisos y botones

Aviso destacado

<div class="sn-notice">
Aviso importante para esta página.
</div>

Aviso importante para esta página.

Filete carmín a la izquierda, fondo lavado, texto en cuerpo pequeño. Hay una sola variante. Si hace falta distinguir gravedades, la distinción va en las palabras.

Botón

wiki-btn convierte un enlace en un botón de píldora con contorno. Su alto es exactamente el de una línea base, así que mantiene cuadrado el párrafo donde vive. Admite las variantes red y green.

<span class="wiki-btn">[[Página destino|Texto del botón]]</span>
<span class="wiki-btn red">[[Página destino|Acción destacada]]</span>

Tablas

Las tablas ya vienen tematizadas: solo filetes horizontales, sin contorno exterior, sin colores alternados, cabecera transparente y texto algo menor. Funcionan sin estilo propio.

plantilla, con alias template, es el modificador de ficha: sobre una wikitable convierte la tabla en una lista vertical de pares clave y valor, con la etiqueta en versalita. Sirve para datos de identificación, y para datos comparables va una tabla corriente.

{| class="wikitable plantilla"
! Autor
| Herbert Spencer
|-
! Año
| 2026
|}

Autor	Herbert Spencer
Año	2026

El skin aplica display: block a las tablas para darles scroll horizontal en pantallas angostas. La consecuencia es que una tabla se queda en el ancho de su contenido y no se estira al 100 % disponible. Si una tabla concreta debe estirarse, hay que devolverle display: table desde la hoja de estilo de su plantilla, con un selector acotado a esa tabla.

Clases tipográficas

Cinco ejes ortogonales para dar tamaño, familia, énfasis, alineación y color a un fragmento. Se combinan libremente en el mismo atributo, y puestos en un contenedor alcanzan al texto de adentro.

<div class="lg serif center nova">
Una línea destacada
</div>

Una línea destacada

Eje	Clases
Tamaño	`jumbo` · `lg` · `sm` · `xs`, con el cuerpo como valor por defecto, sin clase.
Familia	`serif` · `sans` · `mono`
Énfasis	`uppercase` · `italic` · `bold`
Alineación	`left` · `center` · `right` · `justify`
Color	`nova` · `ok` · `warn` · `danger`

Los colores nombran el rol, así que voltean solos entre tema claro y oscuro; escribir un hexadecimal en su lugar rompe ese comportamiento. Y el color por sí solo no debe ser el único portador del significado: un danger va acompañado de palabras que digan qué pasó.

Dos procedencias. Estas clases tipográficas viven en MediaWiki:Common.css, el CSS propio de esta wiki, y el skin no las trae. Las otras que documenta esta página (grid, fondo-*, full-width, img-circle, plantilla, sn-notice, wiki-btn, fw-*) viajan dentro del skin. Si Stella Nova se instalara en otra wiki, las segundas funcionarían de inmediato y las primeras habría que copiarlas. El espécimen gráfico las replica para poder iterarlas, aunque editarlas ahí no las despliega en ninguna parte.

Ancho de fuente

Las tipografías del skin son variables: traen un eje continuo de ancho que el navegador interpola. Las clases fw-* dan acceso a ese eje. Van de diez en diez, de fw-50 a fw-150, con tres pasos intermedios adicionales: fw-75, fw-85 y fw-95.

El navegador recorta la escala al rango de la fuente. IBM Plex Sans cubre 75–100 % y Roboto Serif 62,5–100 %, y ninguna de las dos pasa de 100, así que fw-110 y superiores se quedan en 100, y por debajo del mínimo de cada familia el valor se pega a ese mínimo. IBM Plex Mono carece de eje de ancho y las ignora todas. Además la familia del cuerpo la elige el lector, de modo que un mismo fw-70 se ve distinto según su preferencia: si el ancho importa, hay que fijar también la familia en el mismo elemento.

El skin trae además tres clases de familia propias, útiles para exhibir la tipografía:

Clase	Qué hace
`sn-fam-sans`	Fuerza IBM Plex Sans.
`sn-fam-serif`	Fuerza Roboto Serif, con tamaño óptico automático.
`sn-fam-spec`	Muestra de espécimen: cuerpo algo mayor, peso medio, en línea. Para exhibir la fuente, y no para texto corrido.

<span class="sn-fam-serif fw-70">texto condensado en serif</span>

Usarlas con parquedad. El cuerpo de Casiopea ya corre condensado al 80 % por decisión del sistema, y las cabeceras vuelven solas al 100 %, así que forzar el ancho en un párrafo suelto suele delatarse.

Palabras mágicas

Cadenas con doble guión bajo que se escriben en cualquier parte del wikitexto y cambian cómo se renderiza la página. Son sensibles a mayúsculas (__notitle__ no hace nada) y no producen salida visible.

Modo lienzo

__PANTALLACOMPLETA__, con sinónimo __FULLSCREEN__, la aporta Stella Nova. Declara la página en modo lienzo: el skin suprime cabecera, pie, panel de preferencias y portlets, y queda solo el cuerpo con una salida mínima, un modal arriba a la izquierda con el isotipo y la navegación de escape, donde la tecla Escape siempre cierra.

Es la herramienta para páginas experimentales con canvas o iframe, para trabajos de p5.js o three.js, para visualizaciones, y para portadas a borde de pantalla donde el cromo compite con el contenido.

Consecuencias: el contenedor deja de ser la hoja y pasa a ocupar el ancho del viewport; el título sigue visible, así que para ocultarlo hay que sumar __NOTITLE__; y se pierde la pestaña «Editar», de modo que para editar hay que navegar a ?action=edit o usar el modal de salida.

En modo lienzo el contenido corre libre, sin columna central de lectura, así que la grilla es la herramienta para maquetar ahí.

Las demás

Palabra	Qué hace
`__NOTITLE__`	Oculta el título grande. Necesaria junto a una imagen `full-width` como primer elemento. Evitarla en páginas que dependen del título como ancla.
`__TOC__` · `__NOTOC__` · `__FORCETOC__`	Controlan la tabla de contenidos. El skin respeta la posición que le da MediaWiki y solo la reviste. Un slot fijo a la derecha se intentó y se revirtió, porque ignorar `__TOC__` rompía páginas que dependen de su colocación.
`__NOEDITSECTION__`	Suprime los enlaces de edición por sección.
`noprint` (clase)	El elemento desaparece al imprimir o exportar a PDF. Útil para banners, botones y módulos interactivos.

La combinación canónica para una portada a sangre es __NOTITLE__ más __PANTALLACOMPLETA__ más una primera imagen full-width.

Al documentar una palabra mágica hay que envolverla en <nowiki>, o se aplica a la página que la documenta. Es el error que tuvo esta misma página: nombraba __NOTITLE__ y __NOTOC__ en crudo, y por eso se ocultaban su propio título y su tabla de contenidos.

Lo que ocurre solo

Sin escribir ninguna clase, el skin ya aplica:

Párrafos del cuerpo justificados con partición silábica automática, que depende de que la página esté declarada en español.
Tablas wikitable, smwtable y broadtable tematizadas.
blockquote y poem con la familia de contraste. blockquote está reservado a citas reales, y usarlo como recurso gráfico para destacar texto rompe la voz editorial de la página.
Imágenes con ancho máximo del 100 % y alto automático.
Enlaces externos con ícono.

Antes de pedir una clase nueva

¿Lo cubre un token existente?
¿Lo cubre una de las clases de esta página?
Si la respuesta a ambas es no, conversarlo antes: escribir a wiki@ead.cl. El conjunto se mantiene chico, y por eso sigue siendo aprendible.

Véase también

Stella Nova — la portada del skin.
Stella Nova/Tokens — el vocabulario de variables detrás de todas estas clases.
Stella Nova/Plantillas — para llevar estos recursos a una plantilla propia.

Stella Nova/Grilla