Sistema de diseño Tabler.

Sistema de diseño de Tabler: usar el tema que corresponda a la versión de Tabler

Usa el tema que corresponde a la versión de Tabler

El diario del proyecto está creado con Tabler 1.6.1. Su paleta compilada usa colores OKLCH, mientras que las variables semánticas usan light-dark y color-mix. Por eso, la referencia muestra esas expresiones reales en lugar de copiar valores hexadecimales de una guía antigua de Bootstrap o Tabler. La acción principal, las insignias de estado y las funciones de las superficies provienen de esta versión instalada.

Tabler amplía el vocabulario de componentes de Bootstrap con sus propios patrones de diseño y presentación de información. El ejemplo usa las clases nativas de cronología, encabezado de página, datagrid y avatar, junto con tarjetas, formularios y un modal conocidos. Estos detalles hacen que sea una composición de Tabler, en lugar de una cuadrícula genérica de tarjetas con otro logotipo.

Consulta la especificación complementaria

Sistema de diseño de Tabler: el modo de color cambia las superficies, además del texto

El modo de color cambia las superficies, además del texto

El control del tema cambia data-bs-theme en el elemento html y actualiza su propio estado de activación y la etiqueta de acción. A continuación, las expresiones semánticas de Tabler seleccionan los valores claros u oscuros. Para este ejemplo sencillo de dos estados no hace falta un gestor de temas independiente de JavaScript, y la preferencia no se guarda fuera de la página.

Decisión, Prototipo y Revisión usan las clases nativas de tonos azul, morado y verde. Sus etiquetas de texto conservan el significado sin depender únicamente del color. La ilustración del estudio de portadas mantiene su paleta original, inspirada en el papel, en ambos modos; las tarjetas circundantes, la página y el texto usan el tema real del componente.

Consulta la especificación complementaria

Sistema de diseño de Tabler: texto de cuerpo compacto con una jerarquía de página independiente

Tipografía compacta para el cuerpo y jerarquía de página independiente

El tamaño predeterminado del texto de cuerpo es 0.875rem, con una altura de línea cercana a 1.4286, lo que da un texto de unos catorce píxeles con una raíz de dieciséis píxeles. La pila de fuentes instalada usa fuentes sans serif del sistema, así que esta vista previa no requiere fuentes remotas. Los títulos de las tarjetas y los metadatos conservan sus clases nativas, mientras que el título de la página tiene un tamaño original de treinta y dos píxeles.

Los valores nativos de espaciado progresan por 0, 0.25, 0.5, 1, 1.5, 2 y 2.5rem. Son variables con nombre en CSS, no una escala inventada. El relleno predeterminado del cuerpo de la tarjeta es de 1.25rem en ambas direcciones. El nodo de la cronología mide 2.5rem y su conector usa la variable de relleno de página para cubrir el espacio entre entradas.

Consulta la especificación complementaria

Sistema de diseño de Tabler: una cronología es más que un borde vertical

Una cronología es más que un borde vertical

Cada hito es un elemento de lista timeline-event con timeline-event-icon y timeline-event-card. El CSS nativo posiciona el nodo, dibuja el conector entre las entradas que no son la última y separa la tarjeta de contenido una distancia equivalente al ancho del nodo más el relleno de página. El ejemplo no simula la línea con una imagen de fondo ni depende de posiciones absolutas para cada tarjeta.

El contenido de las tarjetas varía. Una registra una decisión estructural, otra incluye tres estudios de portada reales y una tercera registra una revisión de referencias. El contexto del proyecto queda fuera de la secuencia porque el formato y el foco actual son atributos permanentes, no eventos fechados. En pantallas pequeñas, la barra lateral aparece después de la cronología en el orden del documento.

Consulta la especificación complementaria

Sistema de diseño de Tabler: usar datagrid para grupos pequeños de etiquetas y valores

Usa Datagrid para grupos pequeños de etiquetas y valores

La tarjeta Contexto del proyecto usa pares de datagrid-item, datagrid-title y datagrid-content. Formato, Equipo, Hitos y Foco actual son atributos paralelos, por lo que se presentan en un datagrid nativo compacto en lugar de una tabla con encabezados de fila redundantes. Los avatares usan iniciales de texto y no necesitan imágenes remotas.

El recuento de hitos es el único valor de contexto que modifica este ejemplo. Al añadir una entrada local, el recuento pasa de tres a cuatro, mientras la descripción original del proyecto permanece intacta. Así se evitan métricas de panel inventadas: el número corresponde directamente a las entradas visibles de la lista.

Consulta la especificación complementaria

Sistema de diseño de Tabler: el modal incluido controla la visibilidad y el foco

El modal integrado controla la visibilidad y el foco

Añadir hito abre el modal nativo mediante data-bs-toggle y data-bs-target. El JavaScript incluido en Tabler proporciona la implementación del modal. Un listener de shown.bs.modal enfoca el campo del título después de la transición, cuando la entrada ya está visible. Cerrar y Cancelar usan data-bs-dismiss para seguir el mismo ciclo de vida del componente.

El modal contiene un formulario real. Las restricciones de campos obligatorios y longitud rechazan los campos incompletos antes de que se ejecute el controlador de envío. El controlador también comprueba la longitud después de eliminar los espacios iniciales y finales, porque una cadena de espacios no es un título ni un motivo útil. La validación conserva el texto introducido para que pueda corregirse; el formulario solo se restablece después de añadir correctamente una entrada.

1. Abre el modal y envía los campos vacíos para comprobar cuál es el primer control no válido.
2. Escribe un título, elige un tipo de hito y explica el motivo.
3. Envía el formulario y comprueba que la nueva entrada y el recuento de contexto se actualicen a la vez.

Consulta la especificación complementaria

Sistema de diseño de Tabler: añadir texto seguro y etiquetar el ámbito local

Añade texto seguro y etiqueta el límite local

La aplicación crea una estructura de tarjeta conocida e inserta el título y el motivo con textContent. Solo una asignación fija de los tres tipos del selector determina la clase de tono. El texto proporcionado por el usuario nunca se interpola en la tarjeta HTML. La nueva entrada se añade al principio con una etiqueta clara de ENTRADA LOCAL, en lugar de una marca de tiempo del servidor inventada.

Tras insertar la entrada, se oculta la instancia del modal existente y un aviso de estado identifica el nuevo hito. También indica explícitamente que no se actualizó ningún servicio del proyecto. Un diario colaborativo real necesitaría persistencia, identidad del autor y garantías de orden; añadir un elemento al DOM local no proporciona esas capacidades.

Consulta la especificación complementaria

Sistema de diseño de Tabler: mantener legible el contenido denso en una cronología estrecha

Mantén legible el contenido denso en una cronología estrecha

La cuadrícula principal usa col-lg-8 y col-lg-4. Por debajo del punto de corte grande nativo, el contexto del proyecto se apila debajo del diario. La hoja de estilos original para pantallas pequeñas reduce el espacio lateral de la cronología, permite que los grupos de título e insignia ocupen varias líneas y cambia el tamaño de los estudios de portada, sin modificar el texto ni las acciones.

La cronología puede quedar demasiado apretada cuando una columna de iconos, el relleno de las tarjetas y un título largo compiten por el mismo espacio. La muestra móvil mantiene el nodo como guía estable, pero con un desplazamiento compacto. Los estudios de portada originales se conservan como tres pequeñas comparaciones porque su relación es importante; sus pies son complementarios al párrafo explicativo contiguo.

• Procura que el título y el tipo de punto de control se lean bien al ajustarse a varias líneas.
• Conserva el texto que explica el motivo en lugar de truncar cada elemento de la cronología.
• En móvil, coloca la tarjeta de contexto después de la secuencia principal de lectura.

Consulta la especificación complementaria

Sistema de diseño Tabler Carga un solo paquete CSS compatible de JavaScript

Carga una pareja de CSS y JavaScript que coincidan

La configuración usa @tabler/core 1.6.1 y copia sus recursos dist a un directorio público local. Carga tabler.min.css antes de la hoja de estilos de la aplicación y tabler.min.js antes del código de interacción local. Añadir un segundo paquete Bootstrap no relacionado podría inicializar los mismos atributos de datos dos veces; este ejemplo usa únicamente el paquete Tabler compatible.

La hoja de estilos actual usa funciones de color modernas. Consulta las recomendaciones de compatibilidad con navegadores de Tabler antes de adoptarla en un producto que deba admitir navegadores antiguos. La muestra local se comprobó en Chromium para validar el modal nativo, la inserción en la cronología, el modo oscuro y una disposición de 390 px; no es una implementación en producción ni una garantía para todos los navegadores posibles.

Consulta la especificación complementaria

Tabler Ejemplos de componentes del sistema de diseño

<main class="project-log"><header class="page-header d-print-none"><div class="row align-items-center"><div class="col"><div class="page-pretitle">TABLER · PROJECT JOURNAL</div><h1 class="page-title">Atlas field notes</h1><p class="text-secondary mt-2 mb-0">Decisions, prototypes and review checkpoints for a small editorial project.</p></div><div class="col-auto d-flex gap-2"><button id="theme" class="btn" aria-pressed="false">Dark mode</button><button id="add" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#entry-modal">Add checkpoint</button></div></div></header><div class="row g-4 mt-1"><section class="col-lg-8" aria-label="Project checkpoints"><ul id="timeline" class="timeline"><li class="timeline-event"><div class="timeline-event-icon bg-blue-lt" aria-hidden="true">AM</div><div class="card timeline-event-card"><div class="card-body"><div class="d-flex justify-content-between gap-3"><h2 class="card-title mb-1">A clearer route through the issue</h2><span class="badge bg-blue-lt">Decision</span></div><div class="text-secondary small mb-3">Alex Morgan · 02 OCT</div><p class="mb-0">Group the field essays by landscape rather than author. Each chapter opens with a short map and a single question.</p></div></div></li><li class="timeline-event"><div class="timeline-event-icon bg-purple-lt" aria-hidden="true">JC</div><div class="card timeline-event-card"><div class="card-body"><div class="d-flex justify-content-between gap-3"><h2 class="card-title mb-1">Three cover directions</h2><span class="badge bg-purple-lt">Prototype</span></div><div class="text-secondary small mb-3">Jules Chen · 01 OCT</div><div class="cover-strip" aria-label="Three original cover studies"><div><b>ATLAS</b><i></i><small>RIDGE / 01</small></div><div><b>ATLAS</b><i></i><small>RIVER / 02</small></div><div><b>ATLAS</b><i></i><small>PLAIN / 03</small></div></div><p class="mt-3 mb-0">Compare the quiet title treatment against the stronger geographic silhouette before selecting a direction.</p></div></div></li><li class="timeline-event"><div class="timeline-event-icon bg-green-lt" aria-hidden="true">SR</div><div class="card timeline-event-card"><div class="card-body"><div class="d-flex justify-content-between gap-3"><h2 class="card-title mb-1">Reference package reviewed</h2><span class="badge bg-green-lt">Review</span></div><div class="text-secondary small mb-3">Sam Rivera · 30 SEP</div><p class="mb-0">Image captions, credit lines and print dimensions are recorded alongside each selected reference.</p></div></div></li></ul></section><aside class="col-lg-4"><div class="card"><div class="card-header"><h2 class="card-title">Project context</h2></div><div class="card-body"><div class="datagrid"><div class="datagrid-item"><div class="datagrid-title">Format</div><div class="datagrid-content">Editorial field journal</div></div><div class="datagrid-item"><div class="datagrid-title">Team</div><div class="datagrid-content"><span class="avatar avatar-xs me-1">AM</span><span class="avatar avatar-xs me-1">JC</span><span class="avatar avatar-xs">SR</span></div></div><div class="datagrid-item"><div class="datagrid-title">Checkpoints</div><div id="count" class="datagrid-content">3 recorded</div></div><div class="datagrid-item"><div class="datagrid-title">Current focus</div><div class="datagrid-content">Cover selection</div></div></div></div><div class="card-footer text-secondary">Sample project. New entries stay in this page.</div></div><div class="card mt-4"><div class="card-body"><h2 class="card-title">A useful checkpoint</h2><p class="text-secondary">Record the decision and the reason together. A future reader should understand what changed without reopening the meeting.</p><p class="mb-0 small">Choose Decision, Prototype or Review when adding a local entry.</p></div></div></aside></div><div id="notice" class="alert alert-success mt-3" role="status" hidden></div></main><div id="entry-modal" class="modal modal-blur fade" tabindex="-1" aria-labelledby="entry-title" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><form id="entry-form"><div class="modal-header"><h2 id="entry-title" class="modal-title">Add a local checkpoint</h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><div class="mb-3"><label for="entry-name" class="form-label">Title</label><input id="entry-name" class="form-control" required minlength="5" maxlength="80" placeholder="What changed?"></div><div class="mb-3"><label for="entry-type" class="form-label">Kind</label><select id="entry-type" class="form-select"><option>Decision</option><option>Prototype</option><option>Review</option></select></div><div><label for="entry-detail" class="form-label">Reason or evidence</label><textarea id="entry-detail" class="form-control" required minlength="15" maxlength="360" rows="4" placeholder="Explain why this checkpoint matters."></textarea></div></div><div class="modal-footer"><button type="button" class="btn" data-bs-dismiss="modal">Cancel</button><button class="btn btn-primary" type="submit">Add to journal</button></div></form></div></div></div>

const q=s=>document.querySelector(s),modalEl=q('#entry-modal');let count=3;
modalEl.addEventListener('shown.bs.modal',()=>q('#entry-name').focus());
q('#theme').onclick=e=>{let dark=document.documentElement.dataset.bsTheme!=='dark';document.documentElement.dataset.bsTheme=dark?'dark':'light';e.currentTarget.setAttribute('aria-pressed',String(dark));e.currentTarget.textContent=dark?'Light mode':'Dark mode';};
q('#entry-form').onsubmit=e=>{e.preventDefault();const title=q('#entry-name'),detail=q('#entry-detail'),kind=q('#entry-type').value;if(title.value.trim().length<5){title.setCustomValidity('Use at least five non-space characters.');title.reportValidity();return;}if(detail.value.trim().length<15){detail.setCustomValidity('Use at least fifteen non-space characters.');detail.reportValidity();return;}const li=document.createElement('li');li.className='timeline-event';const color={Decision:'blue',Prototype:'purple',Review:'green'}[kind];li.innerHTML=`<div class="timeline-event-icon bg-${color}-lt" aria-hidden="true">YOU</div><div class="card timeline-event-card"><div class="card-body"><div class="d-flex justify-content-between gap-3"><h2 class="card-title mb-1"></h2><span class="badge bg-${color}-lt"></span></div><div class="text-secondary small mb-3">You · LOCAL ENTRY</div><p class="mb-0"></p></div></div>`;li.querySelector('h2').textContent=title.value.trim();li.querySelector('.badge').textContent=kind;li.querySelector('p').textContent=detail.value.trim();q('#timeline').prepend(li);q('#count').textContent=`${++count} recorded`;tabler.Modal.getInstance(modalEl).hide();q('#notice').hidden=false;q('#notice').textContent=`Local ${kind.toLowerCase()} added: ${title.value.trim()}. No project service was updated.`;e.target.reset();};['#entry-name','#entry-detail'].forEach(s=>q(s).oninput=e=>e.target.setCustomValidity(''));

html,body{min-height:0;height:auto}body{margin:0}.project-log{max-width:1160px;padding:32px;margin:auto}.project-log .page-header{margin:0 0 24px}.project-log .page-title{font-size:32px;line-height:1.2}.cover-strip{display:flex;gap:12px}.cover-strip>div{flex:1;min-width:0;height:155px;padding:14px;background:#d6dfd2;color:#334834;position:relative;overflow:hidden;border-radius:4px}.cover-strip>div:nth-child(2){background:#cbdbe3;color:#2d4857}.cover-strip>div:nth-child(3){background:#e9d9bc;color:#6a5439}.cover-strip b{letter-spacing:.15em;font-size:14px}.cover-strip i{position:absolute;width:120px;height:90px;border-radius:50%;background:currentColor;opacity:.2;left:20%;top:38%;transform:rotate(-25deg)}.cover-strip>div:nth-child(2) i{width:40px;height:150px;top:30%;left:50%;border-radius:40%}.cover-strip>div:nth-child(3) i{width:160px;height:60px;top:45%;left:10%;border-radius:0;transform:rotate(-12deg)}.cover-strip small{position:absolute;bottom:12px;left:14px;font-size:9px;letter-spacing:.12em}[hidden]{display:none!important}.timeline-event-card .badge{height:fit-content;white-space:nowrap}.timeline-event-card p{line-height:1.65}.timeline-event-icon{font-size:11px;font-weight:700}@media(max-width:650px){.project-log{padding:24px 14px}.project-log .page-title{font-size:27px}.page-header .col-auto{width:100%;margin-top:16px}.cover-strip{gap:6px}.cover-strip>div{height:120px;padding:8px}.cover-strip b{font-size:10px}.cover-strip small{left:8px;font-size:7px}.timeline-event-card .d-flex{flex-wrap:wrap}.timeline-event-card{margin-inline-start:calc(var(--tblr-timeline-icon-size) + 12px)}}