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
