# Sistema de diseño Bulma

## Vista previa de la interfaz del sistema de diseño Bulma

Edita un titular y un resumen, valida el informe, márcalo como listo y cambia entre los modos claro y oscuro.

## Referencia de diseño del sistema de diseño Bulma

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.

### Fundamentos de tipografía y controles

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --bulma-family-primary | Inter, SF Pro, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif | Pila de fuentes preferidas; el paquete no descarga estos archivos de fuentes. |
| --bulma-size-normal | 1rem | Tamaño predeterminado de controles y texto del cuerpo. |
| --bulma-size-small | 0.75rem | Tamaño compacto para controles auxiliares. |
| --bulma-size-medium | 1.25rem | Tamaño del modificador mediano. |
| --bulma-size-large | 1.5rem | Tamaño del modificador grande. |
| --bulma-weight-semibold | 600 | Etiquetas y texto de interfaz más destacado. |
| --bulma-block-spacing | 1.5rem | Espaciado entre elementos de bloque. |
| --bulma-radius | 0.375rem | Radio predeterminado de 6 px con una raíz de 16 px. |
| --bulma-radius-small | 0.25rem | Radio pequeño de 4 px. |
| --bulma-radius-large | 0.75rem | Radio grande de 12 px. |
| --bulma-control-height | 2.5em | 2.5em equivale a 40 px con un tamaño de control de 16 px. |
| --bulma-control-border-width | 1px | Grosor compartido del borde de los controles. |
| --bulma-control-line-height | 1.5 | Altura de línea compartida del texto de los controles. |
### Composición del color

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --bulma-primary-h / -s / -l | 171deg / 100% / 41% | Componentes HSL del color primario base. |
| --bulma-link-h / -s / -l | 233deg / 100% / 63% | Función de acción y enlace que usa is-link. |
| --bulma-scheme-h / -s | 221 / 14% | Tono y saturación del esquema neutro. |
| --bulma-scheme-main-l | 100% in light mode | Luminancia de la superficie clara principal. |
| --bulma-text-l | 29% in light mode | Luminancia del texto en el esquema normal. |
| --bulma-text-title-l | 14% in light mode | Luminancia del texto de título más destacado. |
### Utilidades de espaciado

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| mb-0 | 0 | Utilidad de margen inferior; las demás direcciones usan la misma escala de sufijos. |
| mb-1 | 0.25rem | Utilidad de margen inferior; las demás direcciones usan la misma escala de sufijos. |
| mb-2 | 0.5rem | Utilidad de margen inferior; las demás direcciones usan la misma escala de sufijos. |
| mb-3 | 0.75rem | Utilidad de margen inferior; las demás direcciones usan la misma escala de sufijos. |
| mb-4 | 1rem | Utilidad de margen inferior; las demás direcciones usan la misma escala de sufijos. |
| mb-5 | 1.5rem | Utilidad de margen inferior; las demás direcciones usan la misma escala de sufijos. |
| mb-6 | 3rem | Utilidad de margen inferior; las demás direcciones usan la misma escala de sufijos. |
### Puntos de ruptura adaptables

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| mobile | ≤768px | Columnas y pila de nivel, salvo que se añada is-mobile. |
| tablet | ≥769px | Las columnas predeterminadas pasan a ser horizontales. |
| desktop | ≥1024px | Se activan los modificadores específicos para escritorio. |
| widescreen | ≥1216px | Rango más amplio para contenedores y diseños. |
| fullhd | ≥1408px | Rango predeterminado más amplio. |
## Guía completa del sistema de diseño Bulma

Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real.

Orientación completa, un punto de partida para la implementación y enlaces al código fuente.

## 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.

Consulta la especificación complementaria

## 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.

Consulta la especificación complementaria

## 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.

Consulta la especificación complementaria

## 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.

Consulta la especificación complementaria

## 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.

1. Borra el titular y envía el formulario para ver el campo no válido enfocado.

2. Restaura un titular y un resumen de al menos veinte caracteres.

3. Marca la verificación del texto y envía el formulario; luego vuelve a editarlo para que el borrador regrese al estado Borrador.

Consulta la especificación complementaria

## 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.

Consulta la especificación complementaria

## 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.

Consulta la especificación complementaria

## Sistema de diseño Bulma: instala CSS y mantén visible el comportamiento

### Sin proveedor ni Bulma JavaScript empaquetado

Instala bulma@1.0.4 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.

Consulta la especificación complementaria

## 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.

Consulta la especificación complementaria

## Sistema de diseño Bulma: ejemplos de componentes

### Marcado completo del espacio editorial

Estructura de field/control/label/help de Bulma, columnas 7/5, Card, Message y etiquetas de estado.

```
<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>
```

Referencia de código

- 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.

```
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';});
```

Referencia de código

- 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.

## 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í.

```
<!-- Install and copy the local asset:
npm install bulma@1.0.4
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

```
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ó.
```

## 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.

- Descripción general Requisitos de configuración y documento solo para CSS.

- Variables de CSS Alcance global y de los componentes.

- Controles de formulario Composición de campos y controles.

- Adaptabilidad Límites oficiales de las ventanas gráficas.

- Utilidades de espaciado Valores de sufijo de utilidades.

- Modo oscuro Selección del tema.

- Mensaje Estructura del contenedor de mensajes.

## Recursos relacionados con el sistema de diseño Bulma

### Chakra UI

Una referencia de Chakra UI v3 para tokens, funciones semánticas del color, recetas y componentes de formulario compuestos. Examina las escalas reales de espaciado y tipografía; después, prueba un formulario nativo de perfil de espacio de trabajo con validación, una simulación de error al guardar y opciones de apariencia clara y oscura.

### CoreUI

Una cola de revisión de CoreUI creada con las variables reales del tema 5.9, pestañas nativas, selección múltiple con casillas y una notificación persistente que permite deshacer la última operación de archivado local.

### daisyUI

Un estudio de invitaciones nativo de CSS que muestra los temas semánticos 5 de daisyUI, colores de contenido emparejados, grupos de botones de opción, controles de rango, validación del navegador y un paso de revisión con un diálogo real.


- [Referencia de implementación](https://bulma.io/documentation/form/general/)
- [Fuente](https://bulma.io/documentation/features/css-variables/)
- [Fuente](https://bulma.io/documentation/features/color-palettes/)
- [Fuente](https://bulma.io/documentation/helpers/spacing-helpers/)
- [Fuente](https://bulma.io/documentation/start/responsiveness/)
- [Consulta la especificación complementaria](https://bulma.io/documentation/start/overview/)
- [Consulta la especificación complementaria](https://bulma.io/documentation/features/dark-mode/)
- [Consulta la especificación complementaria](https://bulma.io/documentation/helpers/typography-helpers/)
- [Consulta la especificación complementaria](https://bulma.io/documentation/start/responsiveness/)
- [Consulta la especificación complementaria](https://bulma.io/documentation/form/general/)
- [Consulta la especificación complementaria](https://bulma.io/documentation/components/message/)
- [Consulta la especificación complementaria](https://bulma.io/documentation/features/css-variables/)
- [Referencia de código](https://bulma.io/documentation/form/general/)
- [Referencia de código](https://bulma.io/documentation/start/overview/)
- [Descripción general Requisitos de configuración y documento solo para CSS.](https://bulma.io/documentation/start/overview/)
- [Variables de CSS Alcance global y de los componentes.](https://bulma.io/documentation/features/css-variables/)
- [Controles de formulario Composición de campos y controles.](https://bulma.io/documentation/form/general/)
- [Adaptabilidad Límites oficiales de las ventanas gráficas.](https://bulma.io/documentation/start/responsiveness/)
- [Utilidades de espaciado Valores de sufijo de utilidades.](https://bulma.io/documentation/helpers/spacing-helpers/)
- [Modo oscuro Selección del tema.](https://bulma.io/documentation/features/dark-mode/)
- [Mensaje Estructura del contenedor de mensajes.](https://bulma.io/documentation/components/message/)