Para la entrada de hoy eh decidido hacer una lista de los frameworks css que eh utilizado y me han dado resultados. Ademas explicaré por que me parecen buenos, algunos pros y contras de los mas conocidos y al final por que utilizo el framework ganador de mi lista.


1: Bootstrap

Framework Bootstrap para el desarrollo de aplicaciones web
Bootstrap

Como se describe en su propia web: Bootstrap es un kit de herramientas de código abierto para la maquetacion con CSS y HTML. Con esta herramienta podemos agilizar significativamente nuestros prototipos de aplicaciones web.

Inicialmente creado como una solución interna de twitter y posteriormente liberado, en el tiempo después de su liberación la comunidad apoyo activamente este proyecto hasta convertirlo en lo que es hoy en su versión 4.

El sistema de grids de bootstrap esta construido con flexbox lo cual le da nuevas funcionalidades si lo comparamos con su versión anterior. Este sistema trabaja con un sistema de grid de 12 columnas que son totalmente adaptadas a dispositivos móviles.

Sistema de grids bootstrap 4
Grid de bootstrap

Bootstrap Pros

  • Creación rápida de prototipos: Los componentes de bootstrap nos ayudan a generar la grid de un sitio web en muy poco tiempo y con un diseño amigable, automáticamente adaptado a dispositivos móviles. Esta opción es la mejor si necesitas un diseño rápido y con buena presentación para algún cliente o proyecto personal.
  • Gran cantidad de componentes: Entre las facilidades del framework nos encontramos con todos los componentes necesarios para crear un sitio web de manera rápida como son: formularios, botones, barras de navegación, buscadores, tarjetas, tablas, etc.

Bootstrap Contras

  • Estilos repetitivos: El hecho de que bootstrap sea tan famoso en la comunidad también tiene su desventaja y la principal es que podemos notar en muchos sitios el uso de los componentes del framework, como son sus botones, menús de navegación, sistema de grids y mas. Basta con dirigirse a los ejemplos de su web para notar que los elementos ya los has visto en algún sitio.

2: Materialize

Como muchos, yo soy una de esas personas que les encanta el diseño Material de Google, en lo personal me gustan mucho los componentes cuando se agregan a un sitio web o a un panel de administración como el que realice en mi proyecto Portadash. Pongo este framework en mi lista por su curva de aprendizaje ya que a diferencia de otros de la lista, Materialize tiene pocos componentes que aun así, cumplen perfectamente con el trabajo de diseñar un prototipo.

Framework Materialize para el desarrollo de aplicaciones web
Materialize

Tal vez el problema de Materialize sea el poco conocimiento en la comunidad de su existencia y que los componentes son pocos pero si lo que buscas es empezar a usar un framework de diseño siempre recomendaría empezar con el.


3: Foundation

Junto con bootstrap, este framework de diseño es de los mas completos que encontraras, aunque de propósitos diferentes en un principio al final puedes hacer un trabajo similar en ambos. Puedes dirigirte a su sitio web y a simple vista notar la profesionalidad del framework.

Framework Foundation para el desarrollo de aplicaciones web
Foundation

Foundation fue desarrollado en un principio para proyectos en rails, después fue cubriendo otras necesidades como son: diseño de emails para campañas, sitios html, templates para marketing, diseño de documentos o listas, etc.

Para este framework nos olvidamos de las 12 columnas por lo cual lo encuentro mas intuitivo y fácil de memorizar para gente mas experimentada en el desarrollo frontend. Si bien foundation es menos popular es una muy buena vía de escape para salir de lo repetitivo que nos ofrece bootstrap.

Foundation Pros

  • Componentes adaptados a la actualidad: Si bien foundation es un framework css, también es correcto decir que no lo es, ya que se ah convertido en una colección grande de componentes para crear correos electrónicos, sitios web, y mas. También tiene una interfaz por linea de comandos (CLI), que sera mejor aprovechado por los desarrolladores que gusten de Webpack o NPM.
  • Flexibilidad: A diferencia de los frameworks anteriores, foundation se creo para cubrir las necesidades de un desarrollador frontend por lo cual si ya conoces como maquetar un sitio te sentirás muy familiarizado a la herramienta utilizando solamente CSS.

Foundation Contras

  • Complejidad: Aquí aunque parezca que me contradigo con el punto anterior de puntos buenos, lo que se dificulto en mi caso es que si ya has aprendido anteriormente otro framework como en mi caso bootstrap, sentirás un bloqueo de información ya que existe mucha diferencia de sintaxis entre una y otra, pero como lo mencione anteriormente foundation tiene un objetivo totalmente diferente.
  • Comunidad pequeña: En comparación a otros frameworks la comunidad de foundation es mas pequeña ya que la especialización del mismo lo hace un poco difícil de entender y muchos desarrolladores nuevos lo abandonan. Lo que puedo decir es que existe comunidad y mucho apoyo en Internet, solo que en magnitud mas pequeña.

4: Bulma

Esta, personalmente es la opción mas elegante y limpia, a pesar de tener poco tiempo se ah hecho popular por su enfoque estricto a CSS y nada de javascript, que es algo con lo que muchos tenemos problemas al utilizar bootstrap, principalmente por el tamaño y componentes que nunca se necesitan.

Framework Bulma para el desarrollo de aplicaciones web
Bulma

Personalmente conocí Bulma solo hace unos meses por mi trabajo programando en laravel (Otro framework pero del lenguaje de programación PHP). Esta comunidad ah adoptado a Bulma como uno de sus principales apoyos para el frontend de sus aplicaciones.

¿Por que elegí bulma para mis desarrollos?

Tengo varias razones para poner a Bulma como mi framework de desarrollo favorito y el mas recomendado de esta lista:

  • Rápido crecimiento: No es mas popular que bootstrap, pero con poco tiempo ya es mas popular que foundation, en este momento bulma tiene mas de 104k de estrellas en github que es un parámetro de cuantas personas están utilizando actualmente este framework.
  • Curva de aprendizaje rápida: Bulma se creó para resolver los problemas prácticos que tienen los equipos de desarrollo pequeños y en proyectos personales. Encontraras que Bulma es muy sencillo de aprender vengas de donde vengas.

Entonces, ¿qué framework CSS es el mejor?

La respuesta a esta pregunta puede ser un poco decepcionante ya que seria: ninguna, las opciones de frameworks nos ofrecen diversas características que pueden ayudarnos mas que otras. todo esta en lo que como desarrolladores necesitemos. Si tienes alguna otra opcion o utilizas una diferente me gustaría saberlo en los comentarios.

por Eduardo López

Software Engineer ( FullStack con PHP y Javascript 🌍 ).