Alternativas a Bootstrap: los mejores frameworks para frontend

Trabajar en el frontend de una web significa enfrentarse a varios desafíos. El primero de ellos es conseguir la apariencia visual adecuada, sin perder la vista a la facilidad de uso. Debido a los diferentes dispositivos y navegadores con los que los usuarios acceden a los contenidos web, es necesario que los elementos visuales y técnicos funcionen bien en la totalidad de las plataformas seleccionadas. La accesibilidad, así como un conjunto de buenas prácticas SEO, son tareas que no se pueden pasar por alto a la hora de programar aplicaciones para los usuarios.

Aquellos programadores que no quieren comenzar con el desarrollo de una interfaz web desde cero suelen utilizar frameworks UI o entornos de trabajo de interfaz de usuario. Muchos suelen decantarse por Bootstrap, una solución desarrollada por Twitter cuyos componentes están optimizados para dispositivos móviles y para los principales navegadores, y con la cual, además, es fácil realizar cualquier idea. Sin embargo, su amplia distribución también se ha encargado de que exista una gran variedad de páginas web creadas con el código estándar de Bootstrap y que, por lo tanto, sean muy similares. Una pequeña crítica es también su complejidad, pues se basa en una gran cantidad de CSS y JavaScript y hace que el marcado de HTML sea mucho más exhaustivo, lo que puede reflejarse, entre otras cosas, en los tiempos de carga de la web. Si bien es posible descargar el script y los archivos CSS reducidos, de tal forma que solo contengan los componentes Bootstrap necesarios, será necesario ocuparse intensivamente de ello. Aquí, la intención que lleva a muchos a usar un framework, esto es, la simplicidad y el ahorro de tiempo, se pierde un poco. Como consecuencia, a algunos desarrolladores no les parece que este framework UI sea siempre la mejor opción y se decantan, por lo tanto, por alguna de las alternativas a Bootstrap, algo que, debido al gran abanico de posibilidades, tampoco resulta una tarea fácil.

A continuación, presentamos cinco entornos de trabajo frontend que pueden ser utilizados como solución alternativa al framework de Twitter para crear una interfaz web completa y funcional. Además, exponemos sus ventajas y desventajas y sus diferencias con Bootstrap, así como estudiamos la amplitud de las colecciones de código y para qué labor resultan más pertinentes. Por último, analizamos cómo funciona el desarrollo web con cada alternativa.

El framework modular Foundation nació como una guía de estilo producida por la agencia de diseño web ZURB para los proyectos de sus clientes. Posteriormente, ZURB lanzó sus numerosos componentes HTML, CSS y JavaScript como framework de código abierto. Su núcleo, un GridLayout de doce partes, facilita el diseño web responsivo, para que se adapte automáticamente a los tamaños de pantalla y las resoluciones de los diferentes dispositivos. Además de este sistema de cuadrículas, Foundation ofrece, entre otras, las siguientes plantillas:  

• Sliders

• Botones

• Tipografía

• Media containers

• Listas y barras de menú

• Clases float y visibility integradas

De la misma forma que Bootstrap desde su cuarta versión, Foundation está basado en Sass, un lenguaje de estilo simplificado para crear y editar archivos CSS, pero no soporta Less (otro lenguaje de  hojas de estilo con el que Bootstrap sí es compatible). Mientras que, a primera vista, las diferencias en cuanto a los plugins JavaScript y a los fragmentos CSS no son evidentes, Foundation ofrece un número significativamente menor de plantillas así como un soporte reducido de otras plataformas. El framework de ZURB supera significativamente a la solución de Twitter en lo que respecta a la individualidad del frontend de cada desarrollador, pues el código CSS subyacente proporciona acceso a un diseño compacto que se puede adaptar fácilmente a las necesidades individuales. A diferencia de Bootstrap, algunas clases son implementadas directamente, ahorrando así tiempo y esfuerzo a la hora de añadirlas. Otra ventaja: ZURB ofrece diferentes cursos y apoyo personal para tu proyecto de frontend así como una versión especial del framework para diseñar newsletters. Si deseas utilizar Foundation para el desarrollo de una interfaz web, puedes utilizar el juego completo de elementos o decantarte por un pack gratuito personalizado con los componentes necesarios en su página web oficial.

A mediados de 2013, Yahoo lanza Pure.CSS, una estructura básica para el desarrollo de interfaces web que es considerada como una alternativa a Bootstrap de gran calidad, pero que también se puede utilizar en conjunto con este framework. Pure se basa en la arquitectura modular y escalable para CSS SMACSS (Scalable and Modular Architecture for CSS), que se asegura de separar aquellos elementos repetitivos (tablas, botones o formularios) del diseño básico (tipo de letra, diseño, etc.) y les permite tener convenciones propias. El framework de Yahoo asigna a cada módulo (independientemente de si se trata del diseño regular o de reglas específicas) un nombre de clase estándar con el prefijo “pure” y los interpreta como submódulos. Así, por ejemplo, para insertar un formulario en el que los elementos se encuentran uno debajo del otro, se especificará, por defecto, la clase “pure-form” y la clase “pure-form-stacked” para denotar a la subclase. Este framework para frontend, que puede descargarse en una versión responsiva y en una no responsiva, contiene seis módulos que, en su forma comprimida, tienen un tamaño de 4 GB (descomprimidos, de 16 KB):

• Base (base-min.css): base del framework, incluyendo su conjunto de normas

• Grids (grids-responsive-min.css): sistema grid flexible y responsivo

• Forms (forms-min.css/forms-nr-min.css): formularios

• Buttons (buttons-min.css): diferentes botones

• Tables (tables-min.css): tablas

• Menus (menus-min.css/menus-nr-min.css): menús

Todos estos módulos se basan, de la misma forma que los componentes de Bootstrap y de otros frameworks CSS, en las hojas de estilo de código abierto Normalize.css, que reemplaza el estilo estándar de los elementos HTML con estilos optimizados para los diferentes navegadores. En comparación con el framework de frontend de Twitter, la solución de Yahoo no contiene todas las aplicaciones JavaScript, aunque, como sucede a menudo, se pueden implementar manualmente en todo momento. Cabe resaltar que Pure.CSS no es tanto un frontend ya terminado que solo requiere ser ajustado a las necesidades personales, sino, más bien, el punto de partida para un proyecto y, por lo tanto, asociado a un grado significativamente mayor de libertad en lo que respecta al diseño. Yahoo aloja a Pure.CSS en su propia Content Delivery Network, (Yahoo CDN) de tal forma que, para integrar tu proyecto, solo necesitas hacer una simple referencia en el encabezado (<head>). Lógicamente también es posible descargar Pure.CSS y alojarlo por tu cuenta. El enlace actual para la CDN y para la descarga de los archivos lo encuentras en su web oficial purecss.io.

En 2013, el programador Jack Lukic publica un framework como solución para el desarrollo frontend bajo el nombre de Semantic UI. La gran ventaja de esta colección de código radica en la manera como busca simplificar la escritura de código HTML a través de convenciones intuitivas y fáciles de usar. Para este propósito, Semantic UI dispone de más de 3.000 clases CSS que tienen como finalidad optimizar el proceso de desarrollo. Mientras que Bootstrap solo contiene un tema en el pack básico, Semantic UI cuenta, en su versión estándar, con más de 20 plantillas prediseñadas. Sin embargo, el diseño con este framework puede resultar un poco más complicado que con Bootstrap: además de los archivos CSS y JavaScript básicos, el pack estándar contiene fuentes, el gestor de paquetes PHP Composer, el administrador de archivos web Bower y el automatizador de tareas Gulp. Los componentes individuales están distribuidos en las siguientes seis áreas:

• Globals: definiciones de estilo sobre la base de Normalize.css; tipografía y diseño básico

• Elements: componentes frontend como botones, iconos, contenedores y muchos más

• Collections: contenidos estructurados como la rejilla, los menús, las tablas o los formularios

• Views: elementos interactivos como campos para comentarios, feeds de noticias o banners publiciarios

• Modules: widgets tales como menús desplegables, ventajas emergentes o casillas de verificación

• Behaviors: interfaces de programación para JavaScript

Para principiantes y usuarios con conocimientos básicos, el sistema de nombres de Semantic UI puede ser inicialmente desconcertante y, en cada caso, estar ligado a una cierta práctica. Al final, no obstante, este esfuerzo vale la pena, debido a que leer el código HTML de su interfaz es mucho más intuitivo que en otros frameworks como Twitter Bootstrap, algo que resulta muy útil especialmente durante las revisiones posteriores. Semantic UI está disponible en CSS y Less; además, ahora también existe una variante Sass, un punto que este framework semántico comparte con Bootstrap. Una gran desventaja de esta alternativa a Bootstrap es el hecho de que muchos de sus componentes JavaScript son dependientes y no funcionan sin el lenguaje de script. Puedes descargar Semantic UI desde su página oficial, enlazar los archivos en la red de entrega de contenidos JSDELIVR o utilizar los fragmentos de código disponibles en el repositorio del framework en GitHub.

UIkit es la solución de código abierto para programación frontend desarrollada por la empresa de Hamburgo YOOtheme, con una gran experiencia en el desarrollo de aplicaciones web, así como de temas para WordPress, Joomla y su propio website builder YOOtheme Pro. La extensa colección de componentes HTML, CSS y JavaScript se encuentra disponible bajo la licencia libre MIT y, por lo tanto, se puede utilizar y modificar sin ningún problema. Todos los fragmentos CSS están disponibles en una variante Less y en una Sass. Los más de 30 módulos de esta alternativa a Bootstrap, como en el caso de sus principales competidores, están basados en Normalize.css, por lo que casi ningún navegador web tiene problemas para visualizar proyectos creados con UIkit.

Los componentes principales se dividen en las siguientes seis categorías:

• Defaults: base para la normalización de los elementos HTML, gracias a la cual se logra la capacidad multinavegador y las máximas de estilo básico

• Layout: herramientas para el diseño del frontend, por ejemplo, el sistema de cuadrícula, las cajas de contenido o clases CSS útiles para contenidos que se repiten

• Navigations: todos los elementos que facilitan que el usuario explore la página web, incluyendo, entre otras cosas, módulos para la paginación (numeración de páginas) o las clásicas barras de navegación

• Elements: estilos para bloques de contenido autónomos como tablas, listas y formularios

• Common: componentes que se utilizan normalmente dentro del contenido, por ejemplo, botones, iconos, insignias o animaciones

• JavaScript: módulos compuestos principalmente por JavaScript para implementar elementos interactivos

Para preparar contenidos para los diferentes tamaños de pantalla, UIkit dispone de varias clases responsivas. Con la ayuda de la herramienta online Customizer puedes ajustar elementos predefinidos de gran importancia tales como, por ejemplo, 1.200 píxeles para pantallas de gran tamaño o 479 píxeles para smartphones con pantallas pequeñas. Para evitar complicaciones con otros snippets del framework o de CSS, todas sus clases se definen con el prefijo “uk”. Aquellos elementos JavaScript y CSS necesarios para la creación de interfaces web más complejas que no estén integrados en el núcleo del framework pueden serlo en cualquier momento, por ejemplo, cuando una web requiere un área de administración que incluye funciones de inicio de sesión, editor HTML y de carga de archivos.

A pesar de su impresionante funcionalidad, el tamaño de archivo de los componentes individuales, así como del framework completo, es sorprendentemente bajo. Esto se complementa con una extensa documentación que simplifica en gran medida el trabajo inicial con UIkit, característica por la que también sobresale Bootstrap, así como por la gran selección de temas y oferta de tutoriales. Adicionalmente, existen alrededor de 1.500 bifurcaciones (forks) en GitHub, donde es posible encontrar y descargar todos los módulos de este framework de frontend. Aunque el pack completo también está disponible en su página principal, este entorno de trabajo no permite la instalación de módulos de forma individual, con lo que aquellos que no se necesiten, tendrán que ser eliminados posteriormente.

Materialize es un framework CSS que se basa en los principios básicos del material design, un estilo de diseño implementado por Google en 2015 y que ahora es utilizado en la mayoría de sus aplicaciones. Este concepto de diseño se basa en superficies gráficamente similares a tarjetas en un estilo minimalista (flat design), pero que a la vez implementan muchas animaciones y sombras. Los efectos de profundidad producidos con esta técnica permiten que los usuarios capturen elementos de información e interacción con más facilidad. El desarrollo de este entorno de trabajo con licencia MIT estuvo en manos de cuatro estudiantes de la universidad Carnegie Mellon en Pensilvania (Alvin Wang, Alan Chang, Alex Mark y Kevin Louie). Esta alternativa a Bootstrap, que, como el framework de Twitter, tiene un sistema de rejilla de 12 columnas, contiene componentes CSS y JavaScript con más de 700 símbolos de material design en una Iconfont y en Roboto, la fuente predeterminada del concepto de diseño propio de Google. Además de los archivos CSS habituales en versión normal y reducida, también se puede, como con Bootstrap, aprovechar los archivos de origen SCSS escritos en Sass para facilitar el proceso de personalización de tu interfaz web. Independientemente de tu elección, tendrás a tu disposición 30 elementos diferentes:

• CSS: la función primaria de CSS es, como en Bootstrap y otros frameworks UI, una rejilla responsiva, que proporciona las bases para que una interfaz web funcione en todos los dispositivos. El grid de Materialized contiene tres tamaños predefinidos de visualización: menos de 600 píxeles para dispositivos móviles, hasta 992 píxeles para tabletas y alrededor de 992 píxeles para los ordenadores de escritorio. Otros snippets de CSS incluyen una paleta de colores basada en los colores primarios del material design, la ya mencionada fuente Roboto, así como diferentes clases que se denominan “helpers” y son un apoyo a la hora de alinear el contenido.

• Components: los componentes son las partes esenciales del framework de frontend necesarios para la realización de elementos de navegación y de áreas interactivas. Además de los componentes tradicionales como códigos para insertar paginación, formularios, barras de navegación o iconos, también encontrarás módulos de importancia fundamental para la aplicación del concepto del material design. Estos incluyen, por ejemplo, las “Cards” (las típicas colecciones de objetos de Google para la presentación de contenidos) o los “Chips” simbólicos que permiten representar etiquetas o contactos.

• JavaScript: en lo que respecta a las aplicaciones JavaScript, Materialize es, sin duda, una de las mejores alternativas a Bootstrap. Independientemente de si deseas mostrar tus imágenes en vista carrusel, añadir cuadros de diálogo interactivos o darle vida a la interfaz con el efecto parallax, siempre tendrás a tu disposición elementos JavaScript para lograr dicho fin. De esta forma, los usuarios del framework estarán equipados de la mejor manera para diseñar una interfaz web que, además, ofrece una gran usabilidad tanto en dispositivos móviles como en ordenadores de escritorio.

Para descargar los archivos del proyecto puedes visitar GitHub o su página web oficial materializecss.com. Allí también encontrarás las dos plantillas disponibles: “starter” y “parallax”, así como el código de marcado para acceder a los archivos del proyecto a través de la red de distribución de contenidos cdnjs.

En general, las alternativas a Bootstrap presentadas anteriormente tienen mucho en común con el framework de Twitter. En todos los casos, el componente central es una rejilla de gran flexibilidad que contribuye a la implementación efectiva de la interfaz web en la mayoría de dispositivos. Las dimensiones máximas y mínimas de los diferentes tamaños de pantalla se diferencian de framework a framework y por lo general, como desarrollador, tienes una gran libertad en la adaptación. Esto no solo es válido para las redes, sino también para los demás elementos CSS que también, en algunos casos, pueden ser implementados muy fácilmente, lo que no siempre es el caso de Bootstrap. También existen diferencias en el sistema de clases de las alternativas a Bootstrap, donde Semantic UI se destaca particularmente. En lugar de las clases CSS típicas, el framework UI, haciendo honor a su nombre, ha integrado más de 3.000 clases semánticas, que tienen como principal finalidad hacer que la programación del código sea aún más intuitiva. La simplificación de la codificación se lleva a cabo, en la mayoría de colecciones, a través de los lenguajes Less y Sass, quienes permiten personalizar fácilmente tu interfaz con hojas de estilo, antes de que estas se conviertan en el tradicional formato CSS para que puedan ser interpretadas correctamente por el navegador web. Pure.CSS es la única solución que evita el uso de ambos preprocesadores CSS, aunque, con SMACSS, la arquitectura modular y escalable para CSS, ofrece un buen punto de partida para el uso de CSS. Las diferentes alternativas a Bootstrap convencen a niveles distintos, por lo que no es posible declarar una única solución como la más adecuada para la programación de aplicaciones. Es por esto que es recomendable que tomes tu decisión siempre en función de las necesidades de tu proyecto web y que te hagas las siguientes preguntas:

• ¿Los componentes están estructurados de forma atractiva?

• ¿Ofrece el sistema de rejilla las opciones deseadas?

• ¿Cómo de importante es la compatibilidad con versiones anteriores de los navegadores?

• ¿Cumplen los módulos CSS y JavaScript con las necesidades de tu proyecto? 

• ¿Es proporcional el tamaño del código (comprimido y no comprimido)?

• ¿Tu proyecto demanda flexibilidad para adaptar los códigos necesarios? Y, si es así, ¿qué opciones ofrece este framework UI?

• ¿Inviertes trabajo en una gran comunidad (desarrollo, extensiones, plantillas, foros, tutoriales, etc.)?

Si estás debatiéndote entre diferentes alternativas a Bootstrap, te recomendamos echar un vistazo a su manual online. A menudo, estos explican detalladamente los módulos e incluyen ejemplos de código ilustrativos. Más específicamente, puede que las posibilidades de cada uno de estos entornos te convenzan por sí mismos probándolos. Aquí, la herramienta Codeply resulta de gran ayuda, permitiéndote probar los componentes de los diferentes frameworks UI directamente en el navegador y sin tener que descargar ningún archivo.