Laravel 5.8 & Bulma Framework CSS

Eleazar Resendez

Eleazar Resendez

April 22 — 3 mins read
Bulma.io Framework

Bulma.io Framework

Bulma es un framework CSS opensource, basado en Flexbox, full responsive, modular y provee un sistema simple de grid.

Es una colección de clases CSS, consiste en 39 archivos .sass los cuales pueden ser importados individualmente. Es sencillo, ligero y fácil de usar.

Requerimientos

1.- Usar el doctype HTML5:

<!DOCTYPE html>

2.- Agregar el meta tag responsive viewport:

<meta name="viewport" content="width=device-width, initial-scale=1">

Instalación

Bulma se puede instalar de diferentes maneras:

Por ejemplo si compilamos assets con Laravel Mix:

  1. npm install bulma
  2. Removemos el import de Bootstrap (puesto que existen colisiones de clases si se usan ambos frameworks) en el archivo app.scss
  3. Y en el mismo archivo app.scss incluir:
@import "~bulma/bulma.sass";

4.- npm run dev

Podemos ver que la instalación ha sido correcta, añadiendo el siguiente código en cualquier vista, por ejemplo welcome.blade.php:

<progress class="progress is-primary" value="30" max="100">30%</progress>
<progress class="progress is-info" value="45" max="100">45%</progress>
<progress class="progress is-success" value="60" max="100">60%</progress>
<progress class="progress is-warning" value="75" max="100">75%</progress>
<progress class="progress is-danger" value="90" max="100">90%</progress>

Responsividad

Cada elemento de Bulma es mobile-first y es optimizado para lectura vertical.

  • Las columnas, las cuales considero que es una de las partes más interesantes del framework, se apilan verticalmente gracias a las propiedades flex. Más información de columnas.
  • Su navbar menú, tiene muchas opciones, por ejemplo en dispositivos móviles se adapta para esconderse tras un navbar-burger. Más información del navbar.
Aunque, también se puede forzar un layout horizontal si añadimos la clase modificador is-mobile.

Bulma tiene 5 breakpoints:

  • mobile: arriba de 768px
  • tablet: de 769px
  • desktop: de 1024px
  • widescreen: de 1216px
  • fullhd: de 1408px

Bulma usa 9 responsive mixins:

  • =mobile hasta 768px
  • =tablet de 769px
  • =tablet-only de 769px y hasta 1023px
  • =touch hasta 1023px
  • =desktop de 1024px
  • =desktop-only de 1024px y hasta 1215px
  • =widescreen de 1216px
  • =widescreen-only de 1216px y hasta 1407px
  • =fullhd de 1408px

Modificadores

Bulma cuenta con clases de utilidad o modificadores, lo que permite obtener estilos alternativos para casi todos sus elementos. Estos modificadores se nombran de la siguiente manera: is-* o has-*. Por ejemplo:

Para convertir un botón normal en botón de Bulma, simplemente agregamos la clase button.

<button class="button">Hello world</button>

Ahora, es posible cambiar el estilo al botón anterior añadiendo un modificador:

<button class="button is-large is-success is-rounded has-text-weight-bold">Hello world</button>

Lo anterior crea un botón grande, is-success contiene un background-color: #22c65b y color: #fff, con borde redondo y texto en negritas.

Columnas

Una de las cosas más importantes de cualquier framework CSS, es como resuelven el tema de las columnas. Bulma se basa en flexbox y de la siguiente manera se crea una fila con tres columnas:

<div class="columns">
  <div class="column">
    Columna uno
  </div>
  <div class="column">
    Columna dos
  </div>
  <div class="column">
    Columna tres
  </div>
</div>

Una vez mas, utilizando los modificadores podemos controlar el tamaño del ancho de las columnas, algunos ejemplo:

  • is-three-quarters
  • is-two-thirds
  • is-half
  • is-one-third
  • is-one-quarter
  • is-four-fifths
  • is-three-fifths
  • is-two-fifths
  • is-one-fifth

Otros recursos / documentación

Lo mejor de todo es que el resto de la biblioteca es muy intuitiva y fácil. Entonces, el resto se entiende sin problemas. Lo mejor es instalar el framework, jugar con el y aprender si no puede ser de utilidad. Por cierto, este website usa Bulma.


bulma laravel
Siguiente nota

¿Cuál es una nomenclatura adecuada para una foreign-key en MySQL?

Daniel Vasallo comparte su manera de nombrar foreign keys en MySQL.Aunque si no se asigna un nombre, InnoDB creará un nombre automáticamente...

Te puede interesar

Laravel - función sync para una relación Has Many

Laravel tiene un método de sincronización para crear asociaciones con una relación de muchos a muchos. El método de sincronización acepta un...

Laravel 5.8 & Bulma Framework CSS
Compartir