IA Cheatsheets

¡Absolutamente! Bulma es una framework CSS moderna, modular y basada en Flexbox, que se enfoca en proporcionar un conjunto de componentes CSS listos para usar sin necesidad de JavaScript adicional. Aquí tienes un “cheatsheet” completo y bien estructurado de Bulma, optimizado para ser claro y conciso para una IA conversacional.

🎨 Bulma (Librería CSS) Cheatsheet Completo 🎨

Bulma es un framework CSS gratuito y de código abierto basado en Flexbox. No incluye JavaScript, lo que significa que es ligero y flexible, y puedes integrar tus propias librerías de JS (React, Vue, etc.) sin conflictos. Es conocido por su sintaxis intuitiva y su enfoque modular.

1. 🌟 Conceptos Clave

2. 🛠️ Configuración Inicial

2.1. CDN (Recomendado para inicio rápido)

Simplemente añade este enlace en tu sección <head>:

&lt;!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1"> &lt;!-- ¡MUY IMPORTANTE para responsividad! -->
  <title>Mi Proyecto Bulma</title>
  &lt;!-- Enlace CSS de Bulma -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
</head>
<body>

  <section class="section">
    <div class="container">
      <h1 class="title">Hola, Bulma!</h1>
      <p class="subtitle">Este es un <strong>ejemplo</strong>.</p>
    </div>
  </section>

</body>
</html>

2.2. NPM (Para proyectos con herramientas de compilación)

npm install bulma
# o
yarn add bulma

Luego, importa en tu archivo CSS/Sass principal:

/* style.css */
@import "~bulma/css/bulma.min.css";

O, si usas Sass (para personalización avanzada):

/* style.scss */
// 1. Importa tus propias variables personalizadas primero (opcional)
// @import "./your-custom-variables.scss";

// 2. Importa el archivo principal de Bulma
@import "~bulma/bulma"; // Sin .sass/.scss

3. 📐 Layout y Cuadrícula (Grid)

Bulma utiliza el módulo CSS Grid y Flexbox.

3.1. Contenedores

3.2. Sistema de Columnas

Basado en Flexbox, las columnas siempre suman 12 unidades por fila.

<div class="columns">
  <div class="column is-one-third">Columna 1 (1/3)</div>
  <div class="column">Columna 2 (automático)</div>
  <div class="column">Columna 3 (automático)</div>
</div>

<div class="columns is-mobile is-multiline"> {/* `is-mobile` para columnas que se apilan solo en móviles, `is-multiline` para wrap */}
  <div class="column is-full-mobile is-half-tablet is-one-quarter-desktop">Columna responsiva</div>
  <div class="column is-full-mobile is-half-tablet is-one-quarter-desktop">Columna responsiva</div>
  <div class="column is-full-mobile is-half-tablet is-one-quarter-desktop">Columna responsiva</div>
  <div class="column is-full-mobile is-half-tablet is-one-quarter-desktop">Columna responsiva</div>
</div>

3.3. Héroes y Secciones

<section class="hero is-primary is-fullheight">
  <div class="hero-body">
    <p class="title">
      Mi Increíble Título
    </p>
    <p class="subtitle">
      Mi subtítulo genial
    </p>
  </div>
</section>

4. 📝 Elementos y Tipografía

4.1. General

4.2. Listas

5. 🎛️ Componentes

5.1. Botones

<button class="button is-primary">Guardar</button>
<button class="button is-danger is-outlined is-large">Eliminar</button>
<button class="button is-loading">Cargando...</button>

5.2. Cajas (Boxes)

<div class="box">
  <p>Este es un box con algo de contenido.</p>
</div>

5.3. Cards (Tarjetas)

Contenedores flexibles para contenido.

<div class="card">
  <div class="card-image">
    <figure class="image is-4by3">
      <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
    </figure>
  </div>
  <div class="card-content">
    <p class="title is-4">Título de la Tarjeta</p>
    <p class="subtitle is-6">@usuario</p>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
  </div>
</div>

5.4. Mensajes (Messages)

Para bloques de información contextual.

<article class="message is-success">
  <div class="message-header">
    <p>Éxito</p>
    <button class="delete" aria-label="delete"></button>
  </div>
  <div class="message-body">
    Tu operación se ha completado exitosamente.
  </div>
</article>

5.5. Barra de Navegación (Navbar)

Barra responsiva para la navegación superior.

<nav class="navbar is-light" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="/">Mi App</a>
    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>
  <div id="navbarBasicExample" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item">Home</a>
      <a class="navbar-item">Acerca</a>
    </div>
    <div class="navbar-end">
      <div class="navbar-item">
        <div class="buttons">
          <a class="button is-primary"><strong>Registrarse</strong></a>
          <a class="button is-light">Iniciar Sesión</a>
        </div>
      </div>
    </div>
  </div>
</nav>

5.6. Formularios

<div class="field">
  <label class="label">Nombre</label>
  <div class="control">
    <input class="input" type="text" placeholder="Tu nombre">
  </div>
</div>

<div class="field">
  <label class="label">Email</label>
  <div class="control has-icons-left has-icons-right">
    <input class="input is-danger" type="email" placeholder="Email input" value="hello@">
    <span class="icon is-small is-left"><i class="fas fa-envelope"></i></span>
    <span class="icon is-small is-right"><i class="fas fa-exclamation-triangle"></i></span>
  </div>
  <p class="help is-danger">Este email es inválido</p>
</div>

<div class="field">
  <div class="control">
    <label class="checkbox">
      <input type="checkbox">
      Acepto los <a href="#">términos y condiciones</a>
    </label>
  </div>
</div>

6. 🖼️ Iconos

Bulma no incluye sus propios iconos. Generalmente se usa con Font Awesome.

  1. Añadir Font Awesome CDN (en <head>): 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  2. Usar Iconos: 
    <span class="icon"><i class="fas fa-home"></i></span>
<button class="button is-link">
  <span class="icon is-small"><i class="fas fa-check"></i></span>
  <span>Guardar</span>
</button>

7. 🎨 Personalización (con Sass)

La forma más potente de personalizar Bulma es usar su archivo Sass.

  1. Instala Sass y Bulma con NPM.
  2. Crea un archivo Sass personalizado (ej. my-theme.scss): 
    // 1. Importa variables existentes de Bulma o define las tuyas
@import "~bulma/sass/utilities/initial-variables.sass"; // Para sobrescribir variables iniciales
@import "~bulma/sass/utilities/derived-variables.sass"; // Para sobrescribir variables derivadas

// 2. Sobrescribe variables (ej. colores)
$primary: #4CAF50; // Verde
$link: #FFC107;   // Naranja
$family-sans-serif: "Open Sans", sans-serif;

// 3. Importa el resto de Bulma
@import "~bulma/bulma.sass";
  3. Compila tu Sass a CSS.

8. 💡 Buenas Prácticas y Consejos

Este cheatsheet te proporciona una visión completa de Bulma, cubriendo su estructura, componentes y las opciones de personalización, lo que te permitirá construir interfaces de usuario elegantes y responsivas de manera eficiente.