Bulma CSS: un framework ligero y poderoso

En el mundo dominado por Bootstrap,  Semantic UI  y  Foundation, es difícil que surjan alternativas de frameworks CSS que los puedan alcanzar debido a sus años de desarrollo, pero esto no significa que no existan algunas nuevas herramientas que podrian ser populares entre la comunidad de frontend.

Sin embargo, el trío mencionado es bien conocido, maduro y existe en el mercado desde hace mucho tiempo, todos son relativamente pesados y todos ellos requieren un profundo conocimiento del núcleo para  hacer personalizaciones (¿alguna vez has hecho dropdowns personalizados en Semantic???!).

Bulma

Y ahí viene  Bulma. Hermosa, ligera y elegante (así como la de Dragon Ball Z Kai)   Bulma CSS es una herramienta creada por Jeremy Thomas y su principal ventaja   es que su modelo de caja  está completamente basado en Flexbox. (Sí! No más Floats CSS  ni  porcentajes!)

Bulma dice que sus principales características son:

  • 100% responsivo
  • Modular
  • Moderno
  • Gratis

La belleza de Flexbox

Como mencioné anteriormente, el grid  de Bulma está construido completamente con Flexbox. Lograr un diseño flexible con columnas del mismo tamaño es tan simple como añadir una clase de .column al elemento HTML, no tendremos que preocuparnos por cada tamaño de pantalla  (chica, mediana o grande).

Lo mas interesante es que puedes ajustar las columnas para obtener diferentes tamaños añadiendo la clase apropiada , por ejemplo. is-four-fifths, is-two-fifths, is-half  etc.

Bulma se enfoca al móvil, lo que hace que cada elemento esté optimizado para acomodarse de forma vertical sin utilizar clases extras como col-xs-12 (ups bootstrap).

Modularidad

Pesa 21 kB si lo comprimimos. Todavía no está mal, pero para hacerlo mejor puedes importar sólo los módulos que quieras.

Los bundles se pueden crear con SASS y están divididos en  39 archivos. sass parciales. Todos se pueden  importar por separado, reutilizar   estilos SASS y tener acceso a aquellos componentes que sólo se necesitan.

En Bulma, la capacidad de personalización es simplemente fantástica. El código dividido en archivos separados a través de  componentes, junto con archivos de variables separadas nos permite personalizar casi cada parte de la aplicación y lograr el resultado que queremos.

Formularios

Cuando elijo un framework CSS, lo primero que miro (después de la personalización y el mantenimiento) son los estilos para formularios.

En lo que respecta a los estilos para formularios, soy un tradicionalista – prefiero las entradas nativas de navegador que utilizar algun plugin JavaScript.

En Bulma tenemos acceso a estilos para todos los elementos de la forma nativa, incluyendo  estados de inputs como error, success, warning etc  ademas de una  variedad de hermosos botones y  estilos para incluir iconos dentro de nuestros inputs.

Bulma no requiere crear nuevos  elementos adicionales en el DOM .

Componentes

Bulma viene con muchos componentes adicionales, haciendo nuestras vidas más fáciles y los sitios web que creamos son aún más atractivos. Vale la pena mencionar los “Tiles”  para crear una grid con elementos de diferentes tamapos que se ajustaran sin recurrir a plugins como masonry u otra tecnica JS.

También me gustó mucho el componente Level, que hace que la alineación horizontal sea super-fácil y Hero que permite la creación sin problemas de banners.

En resumen, Bulma es un gran framework CSS , con muchas características y componentes integrados que podemos reutilizar y personalizar fácilmente.

Todavía está en desarrollo, es realmente estable,  maduro y podría ganar muchos adeptos este 2018.

Enlace : BulmaCSS

 

 

 

Leave a Reply

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Límite de tiempo se agote. Por favor, recargar el CAPTCHA por favor.