Crea un escritorio editorial con la estructura real de campos y controles de Bulma, columnas adaptables, modificadores de color semánticos y variables de CSS, con el código de validación completo.
Bulma 1.0.4 CSS compilado y documentación oficial de diseño adaptable y utilidades. Los componentes HSL son valores predeterminados del paquete, no un sustituto de la paleta de marca. Las conversiones a rem presuponen una raíz de 16 px.
Sistema de diseño Bulma: un framework CSS con comportamiento explícito
Usa clases de Bulma en elementos semánticos de HTML
Bulma proporciona un vocabulario visual de elementos, componentes, utilidades de diseño y modificadores. No es un gestor del estado de formularios ni un entorno de ejecución de widgets de JavaScript. La mesa editorial carga la hoja de estilos oficial 1.0.4 y añade un pequeño script, mostrado íntegramente, para validar, previsualizar el texto en tiempo real y cambiar de tema. No hay ninguna dependencia de React ni proveedor de framework.
Un campo agrupa una etiqueta, un contenedor de control y un texto de ayuda. La clase de entrada se aplica al elemento de entrada propiamente dicho, mientras que select es un contenedor del elemento select nativo. Estas diferencias importan porque el contenedor se ocupa de la decoración y el espaciado. Reproducir únicamente la apariencia de una captura con div genéricos eliminaría el comportamiento nativo de edición y teclado.
Funciones HSL y temas claro/oscuro del sistema de diseño Bulma
Usa modificadores en lugar de ajustes codificados directamente
Bulma 1 almacena las familias de colores como componentes HSL y deriva los valores relacionados. La función de enlace se aplica al botón de revisión, a la etiqueta de sección y a los detalles de apoyo. Las etiquetas de advertencia y éxito indican «Borrador» y «Listo para revisión», pero la etiqueta de texto siempre permanece visible. El mensaje usa is-info porque explica los límites del proceso en lugar de informar de un error.
La demostración empieza con data-theme=light en html. El botón de apariencia alterna ese atributo entre light y dark. Todas las tarjetas, los campos, el texto de ayuda y los mensajes heredan juntos el tema correcto. Establecer directamente un fondo blanco en el cuadro interferiría con ese cambio. Para aplicar ajustes de marca, modifica las variables de función documentadas y comprueba los estados derivados, en lugar de cambiar únicamente el fondo final del botón.
Preferencias de fuentes y escala tipográfica usable del sistema de diseño Bulma
El paquete especifica preferencias, no proporciona fuentes
La pila de fuentes predeterminada empieza con Inter e incluye varias alternativas del sistema. Cargar Bulma no descarga Inter. Esta muestra sin conexión usa la fuente indicada que esté instalada, por lo que una compilación de producción que necesite una tipografía concreta debe proporcionar por separado el archivo de fuente y la política para cargarla. Las clases de título y subtítulo establecen una jerarquía visual sin cambiar el nivel del encabezado HTML.
El espacio editorial usa title is-2 para el título de la página, title is-4 para el formulario y title is-3 para el titular del artículo. Un ajuste para pantallas estrechas reduce el título de la página a 2rem; se trata explícitamente de un ajuste local. Los controles conservan el tamaño habitual de 1rem. El texto de ayuda permanece junto a su campo para que la persona usuaria no tenga que consultar instrucciones en una barra lateral aparte.
Sistema de diseño Bulma: utilidades de espaciado y columnas adaptables
Una distribución de siete y cinco columnas que se apila de forma natural
El contenedor columns usa is-variable is-6; sus elementos secundarios son column is-7 y column is-5. Esas proporciones reservan más espacio para el formulario que para la vista previa del artículo. El comportamiento predeterminado, pensado primero para móviles, apila las columnas en pantallas móviles, así que esta composición no añade is-mobile, que mantendría una distribución horizontal demasiado estrecha.
Los sufijos de las utilidades de espaciado no representan una escala lineal en píxeles. En particular, el sufijo cinco equivale a 1.5rem y el seis, a 3rem. La separación entre la tarjeta y el mensaje usa mt-5, mientras que las etiquetas pequeñas usan mb-3. La sección exterior aplica un ajuste de la aplicación de 2rem en vertical y 1.5rem en horizontal; el CSS adicional completo se incluye en la configuración.
Sistema de diseño Bulma: estructura de los campos y validación
El color es solo una parte del error
El titular y el resumen están asociados explícitamente con sus etiquetas y el texto de ayuda. Si se rechaza el envío, se añade is-danger al campo y al texto de ayuda, se establece aria-invalid=true y se enfoca el primer control no válido. El titular debe tener al menos cinco caracteres después de eliminar los espacios iniciales y finales; el resumen, al menos veinte. Son requisitos editoriales de ejemplo, no restricciones de Bulma.
También es necesario marcar la casilla de verificación del texto. El error explicativo asociado está vinculado mediante aria-describedby. Bulma puede mostrar estos estados, pero no puede determinar si el texto está listo. Esa decisión corresponde al script, que también impide la navegación nativa del formulario. No se inventa ningún resultado del servidor.
Borra el titular y envía el formulario para ver el campo no válido enfocado.
Restaura un titular y un resumen de al menos veinte caracteres.
Marca la verificación del texto y envía el formulario; luego vuelve a editarlo para que el borrador regrese al estado Borrador.
Sistema de diseño Bulma: tarjetas, mensajes y etiquetas de estado
Asigna una sola función a cada contenedor
La tarjeta del artículo separa card-header y card-content. El texto de la cabecera identifica el tema, mientras que una etiqueta muestra el estado editorial. El contenido incluye la sección dinámica, el titular y el resumen, seguidos de los metadatos. La vista previa prioriza deliberadamente el texto: quien redacta puede evaluar la jerarquía y la extensión sin que una imagen de marcador de posición distraiga del borrador.
El componente de mensaje usa message-header y message-body para explicar que la preparación para revisión es un estado local. Permanece visible independientemente de la validación. Una notificación de éxito temporal sería un sustituto inadecuado de esta aclaración permanente, ya que, si se descartara, podría hacer creer a la persona usuaria que el artículo se publicó.
Tarjeta: la composición actual del artículo.
Etiqueta: el estado explícito de borrador o revisión.
Mensaje: explicación permanente de lo que hace la acción.
Sistema de diseño Bulma: estado de la aplicación sin un entorno de ejecución de widgets
Evita mostrar un éxito obsoleto e insertar contenido inseguro en la vista previa
Cada evento de entrada actualiza la vista previa y restablece el estado a Borrador. Así se evita conservar la etiqueta Listo después de que quien redacta cambia el texto que se había revisado. La vista se actualiza con textContent, de modo que HTML escrito por el usuario se muestra como texto y no se interpreta como marcado. Estas son responsabilidades de la aplicación; la hoja de estilos de Bulma no puede encargarse de ellas.
Restaurar el borrador llama a form.reset, elimina las clases de validación y aria-invalid, borra la ayuda de la casilla y reconstruye la vista previa. Restaura el contenido original de ejemplo sin volver a cargar el documento. El párrafo de estado usa role=status para comunicar los cambios después del envío, mientras que la escritura normal en directo no mueve el foco repetidamente.
Sistema de diseño Bulma: instala CSS y mantén visible el comportamiento
Sin proveedor ni Bulma JavaScript empaquetado
Instala [email protected] y copia su CSS compilado en un recurso local, o importa ese CSS en un empaquetador existente. La configuración sencilla de HTML que se muestra aquí no requiere pasos de compilación una vez copiado el recurso. Coloca todo el marcado del espacio editorial en body y carga app.js con defer. No cargues un paquete JavaScript ajeno con la expectativa de que active los componentes de Bulma.
Si más adelante añades un modal o un menú desplegable, implementa deliberadamente el comportamiento correspondiente de teclado, foco y cierre. Una clase como is-active cambia la apariencia; no atrapa el foco. En este ejemplo, los campos de entrada y botones nativos mantienen el comportamiento acotado y fácil de revisar.
Sistema de diseño Bulma: personaliza en el ámbito adecuado
Inspecciona las variables del componente antes de sobrescribirlas
Las variables globales --bulma establecen el tema, pero los componentes también definen variables en sus propios selectores. Una asignación más específica del componente puede sobrescribir un valor definido en la raíz. Si una sobrescritura en la raíz no surte efecto, inspecciona la clase en el CSS compilado y aplica la sobrescritura al componente correspondiente, en lugar de acumular declaraciones que no guardan relación.
En un producto de larga duración, mantén separados los valores predeterminados del paquete, los ajustes de marca y las reglas de diseño específicas de cada pantalla. Los pequeños ajustes de contenedor y del título para móviles de este ejemplo son reglas de pantalla. Las tablas de referencia indican por separado los valores reales de Bulma, para distinguir claramente qué opciones pueden reutilizarse y cuáles pertenecen solo a este espacio editorial.
Estructura de field/control/label/help de Bulma, columnas 7/5, Card, Message y etiquetas de estado.
HTML
<section class="section"><div class="container"><div class="level"><div class="level-left"><div><p class="is-size-7 has-text-weight-bold has-text-link mb-3">BULMA / LOCAL EDITORIAL DESK</p><h1 class="title is-2">Shape the next issue.</h1><p class="subtitle is-5">An article brief, a preview, and an explicit editorial state.</p></div></div><div class="level-right"><button class="button is-light" id="theme">Dark appearance</button></div></div><div class="columns is-variable is-6"><div class="column is-7"><form id="brief" class="box" novalidate><h2 class="title is-4">Article brief</h2><div class="field"><label class="label" for="headline">Headline</label><div class="control"><input class="input" id="headline" value="A quieter way to work" maxlength="90" aria-describedby="headline-help"></div><p class="help" id="headline-help">Use 5–90 characters. This field updates the preview as you type.</p></div><div class="field"><label class="label" for="section">Section</label><div class="control"><div class="select is-fullwidth"><select id="section"><option>Design notes</option><option>Field research</option><option>Product craft</option></select></div></div></div><div class="field"><label class="label" for="summary">Summary</label><div class="control"><textarea class="textarea" id="summary" rows="3" aria-describedby="summary-help">How small choices in layout and language can make a demanding interface feel manageable.</textarea></div><p class="help" id="summary-help">Use at least 20 characters to give the reviewer enough context.</p></div><div class="field"><label class="checkbox"><input id="checked" type="checkbox" aria-describedby="checked-help" aria-describedby="checked-help"> I have checked the headline and summary</label><p class="help" id="checked-help"></p></div><div class="field is-grouped is-grouped-multiline"><div class="control"><button type="submit" class="button is-link">Mark ready for review</button></div><div class="control"><button id="reset" type="button" class="button is-light">Restore draft</button></div></div><p id="result" class="help" role="status">Draft changes stay in this page only.</p></form></div><div class="column is-5"><article class="card"><header class="card-header"><p class="card-header-title">Issue 08 / Article preview</p><span id="state" class="tag is-warning is-light mr-4 my-4">Draft</span></header><div class="card-content"><p class="is-size-7 has-text-link has-text-weight-bold mb-3" id="preview-section">Design notes</p><h2 class="title is-3" id="preview-title">A quieter way to work</h2><div class="content" id="preview-summary">How small choices in layout and language can make a demanding interface feel manageable.</div><hr><p class="is-size-7">Copy desk · Reading time assigned after editing</p></div></article><article class="message is-info mt-5"><div class="message-header"><p>Review is a separate step</p></div><div class="message-body">Ready for review is a local label. It does not publish this article, send a notification, or save a draft on a server.</div></article></div></div><p class="is-size-7">Official Bulma 1.0.4 CSS. Form validation and preview updates are original JavaScript.</p></div></section>
La biblioteca CSS no valida ni envía el formulario.
aria-describedby vincula los campos de entrada con el texto de ayuda.
La vista previa usa textContent para mostrar el texto introducido por el usuario.
Comportamiento de validación y vista previa local
Los controladores de eventos originales implementan el comportamiento que Bulma deja intencionadamente en manos de la aplicación.
javascript
const $=id=>document.getElementById(id);
const fields=['headline','summary'];
function draft(){ $('state').textContent='Draft';$('state').className='tag is-warning is-light mr-4 my-4';$('result').textContent='Draft changes stay in this page only.';}
function preview(){ $('preview-title').textContent=$('headline').value.trim()||'Untitled article';$('preview-summary').textContent=$('summary').value.trim()||'No summary yet.';$('preview-section').textContent=$('section').value;draft();}
for(const id of ['headline','summary','section','checked'])$(id).addEventListener('input',preview);
$('brief').addEventListener('submit',event=>{event.preventDefault();let first=null;for(const id of fields){const invalid=$(id).value.trim().length<(id==='headline'?5:20);$(id).classList.toggle('is-danger',invalid);$(id).setAttribute('aria-invalid',String(invalid));$(id+'-help').classList.toggle('is-danger',invalid);if(invalid&&!first)first=$(id);}$('checked-help').textContent=$('checked').checked?'':'Confirm the copy check before review.';$('checked-help').className='help is-danger';if(!$('checked').checked&&!first)first=$('checked');if(first){$('result').textContent='Check the highlighted brief fields.';first.focus();return;}$('state').textContent='Ready for review';$('state').className='tag is-success is-light mr-4 my-4';$('result').textContent='Marked ready in this local preview. Nothing was published.';});
$('reset').addEventListener('click',()=>{$('brief').reset();for(const id of fields){$(id).classList.remove('is-danger');$(id).removeAttribute('aria-invalid');$(id+'-help').classList.remove('is-danger');}$('checked-help').textContent='';preview();});
$('theme').addEventListener('click',()=>{const dark=document.documentElement.dataset.theme!=='dark';document.documentElement.dataset.theme=dark?'dark':'light';$('theme').textContent=dark?'Light appearance':'Dark appearance';});
Si el envío no es válido, se enfoca el primer campo que falta.
Al editar un borrador listo, este vuelve al estado Borrador.
El atributo data-theme controla la apariencia.
04
Configuración del agente de IA del sistema de diseño Bulma
Punto de partida para la implementación
Guarda el marcado completo y los ejemplos JavaScript tal como se indica. Bulma proporciona el CSS; el script de aplicación incluido implementa toda la validación y el estado local. La vista previa sin conexión integra ambos archivos. El contenedor HTML incluye todo el marcado del cuerpo; guarda los ejemplos de interacción y CSS proporcionados con los nombres de archivo que se indican aquí.
HTML
<!-- Install and copy the local asset:
npm install [email protected]
mkdir -p assets
cp node_modules/bulma/css/bulma.min.css assets/bulma.min.css
-->
<!doctype html>
<html lang="en" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Editorial desk</title>
<link rel="stylesheet" href="assets/bulma.min.css">
<style>.section{padding:2rem 1.5rem}.container{max-width:1080px!important}.card-header{align-items:center;flex-wrap:wrap}.title{overflow-wrap:anywhere}.level-left{min-width:0}@media(max-width:768px){.title.is-2{font-size:2rem}.level-right{margin-top:1rem}}</style>
<script src="app.js" defer></script>
</head>
<body><section class="section"><div class="container"><div class="level"><div class="level-left"><div><p class="is-size-7 has-text-weight-bold has-text-link mb-3">BULMA / LOCAL EDITORIAL DESK</p><h1 class="title is-2">Shape the next issue.</h1><p class="subtitle is-5">An article brief, a preview, and an explicit editorial state.</p></div></div><div class="level-right"><button class="button is-light" id="theme">Dark appearance</button></div></div><div class="columns is-variable is-6"><div class="column is-7"><form id="brief" class="box" novalidate><h2 class="title is-4">Article brief</h2><div class="field"><label class="label" for="headline">Headline</label><div class="control"><input class="input" id="headline" value="A quieter way to work" maxlength="90" aria-describedby="headline-help"></div><p class="help" id="headline-help">Use 5–90 characters. This field updates the preview as you type.</p></div><div class="field"><label class="label" for="section">Section</label><div class="control"><div class="select is-fullwidth"><select id="section"><option>Design notes</option><option>Field research</option><option>Product craft</option></select></div></div></div><div class="field"><label class="label" for="summary">Summary</label><div class="control"><textarea class="textarea" id="summary" rows="3" aria-describedby="summary-help">How small choices in layout and language can make a demanding interface feel manageable.</textarea></div><p class="help" id="summary-help">Use at least 20 characters to give the reviewer enough context.</p></div><div class="field"><label class="checkbox"><input id="checked" type="checkbox" aria-describedby="checked-help" aria-describedby="checked-help"> I have checked the headline and summary</label><p class="help" id="checked-help"></p></div><div class="field is-grouped is-grouped-multiline"><div class="control"><button type="submit" class="button is-link">Mark ready for review</button></div><div class="control"><button id="reset" type="button" class="button is-light">Restore draft</button></div></div><p id="result" class="help" role="status">Draft changes stay in this page only.</p></form></div><div class="column is-5"><article class="card"><header class="card-header"><p class="card-header-title">Issue 08 / Article preview</p><span id="state" class="tag is-warning is-light mr-4 my-4">Draft</span></header><div class="card-content"><p class="is-size-7 has-text-link has-text-weight-bold mb-3" id="preview-section">Design notes</p><h2 class="title is-3" id="preview-title">A quieter way to work</h2><div class="content" id="preview-summary">How small choices in layout and language can make a demanding interface feel manageable.</div><hr><p class="is-size-7">Copy desk · Reading time assigned after editing</p></div></article><article class="message is-info mt-5"><div class="message-header"><p>Review is a separate step</p></div><div class="message-body">Ready for review is a local label. It does not publish this article, send a notification, or save a draft on a server.</div></article></div></div><p class="is-size-7">Official Bulma 1.0.4 CSS. Form validation and preview updates are original JavaScript.</p></div></section>
</body>
</html>
Una instrucción para tu proyecto
Instrucción para el agente
Empieza con el escritorio editorial completo de Bulma 1.0.4. Conserva la estructura de campos, controles y ayuda, las columnas adaptables, los componentes de tarjetas y mensajes, y el tema claro/oscuro del documento. Al editar el titular y el resumen, la vista previa del artículo debe actualizarse mediante textContent y volver al estado «Borrador». Exige que el texto respete los límites después de quitar los espacios iniciales y finales, y que se confirme la revisión del texto antes de marcarlo como listo para revisión; vincula los campos no válidos con su ayuda y enfoca el primer error. Restaura el borrador original y borra su estado de validación sin dar a entender que se publicó.
05
Fuentes y alcance del sistema de diseño Bulma
Referencia de Bulma 1.0.4 CSS. Las reglas editoriales locales y JavaScript son código de ejemplo original; no se guarda ni se publica ningún borrador.
