Hoja de trucos del framework Bulma CSS

Bulma Bulma es un framework de CSS moderno y de código abierto basado completamente en Flexbox.

Puntos de ruptura responsivos (Breakpoints)

         768px       1024px              1216px       1408px
<---------^------------^------------------^-------------^------------->
  Mobile      Tablet         Desktop         Widescreen      FullHD

• Móvil: hasta 768px
• Tableta: desde 769px
• Escritorio: desde 1024px
• Pantalla ancha: desde 1216px
• FullHD: desde 1408px

---

Sistema de cuadrícula de columnas

Envuelva elementos hijos .column dentro de un contenedor flex .columns:

<div class="columns">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
</div>

Modificadores de ancho de columna

<div class="column is-half">Medio ancho</div>
<div class="column is-one-third">1/3 de ancho</div>
<div class="column is-three-quarters">3/4 de ancho</div>
<div class="column is-4">4 / 12 (1/3)</div>

---

Modificadores principales

Colores

• .is-primary: Turquesa
• .is-link: Azul
• .is-info: Cian
• .is-success: Verde
• .is-warning: Amarillo
• .is-danger: Rojo

Tamaños

• .is-small
• .is-normal
• .is-medium
• .is-large

Estados

• .is-outlined: Fondo transparente con borde coloreado
• .is-loading: Indicador de carga animado integrado
• .is-disabled: Visualmente inactivo

---

Ayudantes de tipografía

Tamaños de fuente

Alineación y transformación de texto

• .has-text-centered: Alineación centrada
• .has-text-left: Alineación a la izquierda
• .has-text-right: Alineación a la derecha
• .has-text-justified: Texto justificado
• .is-capitalized: Mayúscula inicial en cada palabra
• .is-lowercase: Todo en minúsculas
• .is-uppercase: Todo en mayúsculas

---

Contenedor de contenido WYSIWYG

Utilice .content para formatear texto markdown o contenido de usuarios desde CMS:

<div class="content">
  <h1>Título principal</h1>
  <p>Párrafo estándar con escala tipográfica automática.</p>
  <ul>
    <li>Elemento de lista 1</li>
    <li>Elemento de lista 2</li>
  </ul>
</div>