Los mejores frameworks para crear sitios web responsivos en 2022

¿Qué son los frameworks para la creación de sitios web responsivos?

Los frameworks CSS son herramientas al servicio de los diseñadores de interfaces de usuario (UI) front-end que cuentan con una serie de estilos básicos a partir de los cuales iniciar un proyecto de desarrollo web. Estos frameworks incorporan toda la lógica CSS necesaria para la implementación de componentes y elementos básicos de la interfaz de usuario (tipografía, botones, menús de navegación, formularios…). En algunos casos, también cuentan con ciertas bibliotecas de JavaScript (propias o de terceros) a partir de las cuales implementar otros componentes interactivos como carruseles, popups o tooltips, entre otros. Todos ellos cuentan, como mínimo, con una retícula responsiva a partir de las cual es posible componer la estructura de las páginas de un sitio web, resolviendo su adaptación a diversos tipos de pantallas y escenarios.

¿Cuáles son las principales ventajas del uso de un framework para la creación de sitios web responsivos?

La ventaja de utilizar uno de estos frameworks es que en el diseño de una nueva interfaz no se parte de cero, sino que todo proyecto se inicia bajo la premisa de una lógica común suficientemente flexible a partir de la cual personalizar cada interfaz. Esto permite ahorrar tiempo y esfuerzo tanto en el desarrollo, como en el mantenimiento de esos sitios web. También facilita la incorporación de nuevas personas al proyecto, ya que la documentación del proyecto –al menos la parte que corresponde al framework–, acostumbra a estar muy bien estructurada.

En esta entrada hablaremos de los siguientes frameworks (el orden de aparición es meramente alfabético):

1. Bootstrap
2. Bulma
3. Foundation
4. Materialize
5. Tailwind CSS
6. UIKit

Frameworks HTML5 + CSS3

Bootstrap

Bootstrap es seguramente el framework más popular de todos los recogidos en esta lista. De acuerdo con el sitio web w3techs.com, aproximadamente el 25% de los sitios de Internet lo utilizan como base para el diseño de sus plantillas o temas. Centrado en el desarrollo front-end desde una perspectiva mobile first, Bootstrap cuenta con hojas de estilo y, opcionalmente, extensiones de JavaScript adicionales como base tecnológica para proveer al usuario de una importante cantidad de componentes como botones, menús de navegación, cards, carruseles, acordeones, ventanas modales, popups, barras de progreso o formularios, entre otros muchos. Su última versión (5.x) resuelve una de las principales críticas de versiones anteriores, que era el no contemplar en su retícula un punto de ruptura específico para pantallas muy grandes como, por ejemplo, las 4k. Más allá de clases para los componentes principales de la interfaz, Bootstrap también proporciona todo un conjunto de clases utilitarias mediante las cuales es muy sencillo trabajar aspectos como los márgenes, padding, colores, bordes, posición, alineación, visibilidad, entre otras.

Bulma

Bulma es un framework exclusivamente CSS basado en Flexbox (Flexible Box Layout Module) para crear sitios web responsivos. Bulma propone una aproximación mobile first con unos puntos de ruptura algo diferentes a los de Bootstrap ya que parte de los 768px (frente a los 576 de Bootstrap), lo que le permite gestionar los mismos tamaños de pantalla de Bootstrap con un punto de ruptura menos (769-1023, 1024-1215, 1216-1407 y 1408 en adelante). Como en Boostrap, su retícula se basa en doce columnas, las cuales también podemos gestionar en porcentajes múltiplos de 20%. Dispone de una importante cantidad de componentes para la interfaz (breadcrumbs, cards, dropdowns, menus, messages, modals, navbars, paginators, panels y tabs), así como elementos de soporte para la composición de las páginas (contenedores, galerías, destacados…) y clases utilitarias para gestionar colores, espacios, tipografía, visibilidad, entre otras. Su principal desventaja es su escasa adopción y la pequeña comunidad de usuarios en torno al proyecto.

Foundation

Junto con Bootstrap, Foundation es uno de los frameworks clásicos para el desarrollo de sitios web responsivos. A lo largo de sus ya más de diez años de vida y seis versiones principales, ha ido evolucionando y adaptándose, incorporando nuevos componentes, así como toda una serie de herramientas para crear tanto sitios web, como correos electrónicos responsivos. Como Bootstrap y Bulma, utiliza el modelo de retícula Flexbox de CSS3, facilitando a través de clases específicas la configuración del posicionamiento y comportamiento de los bloques de contenido de la interfaz. También como Bootstrap, utiliza Sass, permitiendo personalizar fácilmente los proyectos que utilizan este framework como base. Su documentación es muy completa y clara y, a diferencia del resto de frameworks, incorpora videotutoriales que permiten ver, paso a paso, el uso e implementación de los diferentes componentes de la interfaz.

Materialize

Materialize es un framework para el diseño de interfaces de usuario responsivas basado en el sistema de diseño Material Design de Google. Desarrollado por cuatro estudiantes de la Carnegie Mellon University, es la opción más simple y con menos recorrido de las recogidas en esta entrada. Como la última versión de Bootstrap, Materialize CSS se ha diseñado sin necesidad de utilizar la biblioteca de JavaScript jQuery. En comparación al resto de frameworks analizados destaca como principal inconveniente el hecho de contar con una menor cantidad de componentes y opciones de base. Otro importante inconveniente es que parece que se trata de un proyecto descontinuado, ya que no recibe actualizaciones desde el año 2020. No obstante, puede ser una buena base para comenzar un proyecto basado en Material Design, especialmente si se trata de una interfaz móvil, para la cual cuenta con los componentes más típicos en los diseños creados con este sistema de diseño.

Tailwind CSS

Tailwind CSS es el framework de esta lista que presenta una mayor curva de aprendizaje. Esto se debe a que, a diferencia del resto, no dispone de una colección de componentes propiamente dicha –aunque en el sitio web oficial es posible tanto encontrar múltiples ejemplos de implementaciones previo pago, como una biblioteca de componentes gratuitos creada por la comunidad de Tailwind–, sino que se basa en toda una serie de utilidades CSS pensadas para que nosotros diseñemos nuestros propios componentes. El framework se basa en PostCSS una herramienta de desarrollo que utiliza plugins basados en JavaScript para automatizar rutinas CSS. El hecho de no estar orientado a componentes es una de las principales diferencias entre el resto de frameworks analizados y Tailwind. Esto presenta como principal ventaja no tener que trabajar las personalizaciones sobre los componentes del framework, lo que a la larga implica una mayor cantidad de código, sino que el componente diseñado será personalizado desde su creación.

UIKit

UIKit es un framework CSS y JavaScript también basado en Flexbox que cuenta con una retícula responsiva altamente flexible y, por lo tanto, fácilmente configurable y adaptable a diferentes escenarios, incluyendo la reordenación de elementos según el tamaño de la pantalla. Dispone de una importante cantidad de componentes, así como todo un conjunto de clases utilitarias que lo ponen al mismo nivel que los archiconocidos Bootstrap y Foundation. Al igual de Bootstrap y Foundation, este framework ya no utiliza jQuery para implementar funcionalidades basadas en JavaScript. UIKit dispone también con un tema oficial comercial para los CMS WordPress y Joomla! que cuenta con un editor dinámico similar a los populares plugins Elementor o Visual Composer.

Conclusiones

Desde hace algunos años, una gran cantidad de proyectos centrados en la creación de interfaces web parten de algún framework CSS responsivo como base con el objetivo de estandarizar y simplificar el proceso de diseño. En esta entrada hemos visto seis de los más populares, aunque existen otros muchos más. Bootstrap y Foundation son los que presentan un mayor recorrido y, por lo tanto, los que cuentan con una mayor comunidad, recursos y documentación relacionada. Bulma, Tailwind CSS y UIKit son más recientes, pero ya presentan una robustez que los hace igualmente interesantes. Materialize es el menos desarrollado de los seis, sólo recomendable para pequeños proyectos, especialmente aquellos que se centren en el uso de la versión 2 del sistema de diseño Material Design.