Saltar al contenido principal

Descripción general de Bulma.

Bulma es un popular framework CSS de código abierto que proporciona un sistema de rejilla adaptable y un conjunto de componentes listos para usar. Su objetivo es simplificar el desarrollo web ofreciendo un conjunto de herramientas flexibles y fáciles de usar. En este tutorial, exploraremos la introducción, historia, características y ejemplos de Bulma CSS.

Introducción a Bulma CSS​

Bulma CSS es un framework CSS ligero y moderno que permite a los desarrolladores crear rápidamente diseños web adaptables. Sigue un enfoque de diseño móvil primero, asegurando que los sitios web se vean geniales en todos los tamaños de pantalla, desde dispositivos móviles hasta escritorios.

Historia de Bulma CSS​

Bulma fue creado por Jeremy Thomas en 2016 y ha ganado una gran popularidad desde entonces. Inicialmente se inspiró en otros frameworks CSS como Bootstrap y Foundation, pero buscaba ofrecer una alternativa más simple y personalizable.

Características de Bulma CSS​

Sistema de rejilla adaptable​

Una de las características clave de Bulma es su sistema de rejilla adaptable. Permite a los desarrolladores crear diseños flexibles que se ajustan automáticamente según el tamaño de la pantalla. El sistema de rejilla se basa en un diseño de 12 columnas y proporciona clases para definir el ancho de las columnas en diferentes puntos de interrupción.

<div class="columns">
  <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
    <!-- Contenido -->
  </div>
  <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
    <!-- Contenido -->
  </div>
</div>

En el ejemplo anterior, la clase columns crea una fila y la clase column define el ancho de cada columna en diferentes puntos de interrupción. La clase is-half-mobile hace que las columnas ocupen la mitad del ancho de la pantalla en dispositivos móviles, is-one-third-tablet las hace un tercio en tabletas y is-one-quarter-desktop las hace un cuarto en escritorios.

Componentes listos para usar​

Bulma proporciona una amplia gama de componentes listos para usar que se pueden incorporar fácilmente a tu diseño web. Algunos de los componentes comúnmente utilizados incluyen:

  • Navbar: El componente navbar crea una barra de navegación adaptable en la parte superior de la página.
<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <!-- Logotipo y otros elementos de marca -->
  </div>
  <div class="navbar-menu">
    <!-- Enlaces de navegación -->
  </div>
</nav>
  • Botones: Bulma ofrece una variedad de estilos y tamaños de botones que se pueden personalizar utilizando diferentes clases.
<button class="button is-primary">Botón primario</button>
<button class="button is-success is-large">Botón grande de éxito</button>
  • Elementos de formulario: Bulma proporciona estilos para elementos de formulario como campos de entrada, casillas de verificación y botones de radio.
<input class="input" type="text" placeholder="Nombre de usuario">
<input class="checkbox" type="checkbox" id="checkbox">
<label for="checkbox">Recuérdame</label>

Personalizable y extensible​

Bulma CSS es altamente personalizable y te permite modificar sus estilos predeterminados para que se adapten a los requisitos de tu proyecto. Proporciona varias variables SASS que se pueden sobrescribir para cambiar colores, fuentes y otros aspectos visuales.

Ejemplos de Bulma CSS​

Vamos a explorar algunos ejemplos para mostrar el poder y la flexibilidad de Bulma CSS.

Ejemplo 1: Sección de héroe​

La sección de héroe es un componente común utilizado en muchos sitios web. Normalmente contiene un título grande, un subtítulo y un botón de llamada a la acción. Bulma proporciona una clase hero que simplifica la creación de esta sección.

<section class="hero is-primary is-bold">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        Bienvenido a Bulma CSS
      </h1>
      <h2 class="subtitle">
        Un framework CSS ligero y poderoso
      </h2>
      <a class="button is-white is-large" href="#">Empezar</a>
    </div>
  </div>
</section>

El código anterior crea una sección de héroe con un color de fondo primario, texto en negrita y un botón de llamada a la acción blanco.

Ejemplo 2: Tabla de precios​

Las tablas de precios se encuentran comúnmente en sitios web que ofrecen servicios basados en suscripción. Bulma proporciona una clase table que se puede utilizar para crear una elegante tabla de precios.

<table class="table is-bordered is-striped is-narrow is-hoverable">
  <thead>
    <tr>
      <th>Plan</th>
      <th>Características</th>
      <th>Precio</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Básico</td>
      <td>Característica 1, Característica 2</td>
      <td>$9.99/mes</td>
    </tr>
    <tr>
      <td>Pro</td>
      <td>Característica 1, Característica 2, Característica 3</td>
      <td>$19.99/mes</td>
    </tr>
  </tbody>
</table>

En el ejemplo anterior, la clase table agrega estilos a la tabla, mientras que las clases is-bordered, is-striped, is-narrow e is-hoverable mejoran aún más la apariencia y funcionalidad de la tabla.

Para obtener más información sobre Bulma CSS y explorar su extensa documentación, visita el sitio web oficial.