Bootstrap 5: novedades en el framework CSS

Bootstrap es uno de los frameworks más populares para el desarrollo del frontend de páginas web. La herramienta proporciona plantillas para CSS y HTML que facilitan la colocación y el diseño de la página, las fuentes, los botones y los elementos de navegación, de modo que implementar con ella un diseño web moderno resulta muy sencillo.

Desarrollado originalmente para Twitter, el marco de trabajo está disponible desde hace algún tiempo como proyecto de código abierto gratuito. Ahora, con Bootstrap 5, nace la nueva versión, al menos como versión alfa.

Bootstrap 5 está disponible desde el 16 de junio de 2020 en versión alfa, así que todavía se considera en fase de prueba. Una gran parte de los cambios previstos ya se ha aplicado, pero aún no ha terminado de desarrollarse y los desarrolladores no han desvelado aún las fechas para su lanzamiento oficial. Por ello, aún no es posible asegurar cuándo saldrá la primera versión beta y la definitiva. Sin embargo, sabemos que en la versión anterior hubo un margen de dos años y medio entre la versión alfa y la final. Al mismo tiempo, se seguirán publicando actualizaciones para la versión 4 del popular framework.

Bootstrap ha anunciado cientos de cambios para su nueva versión. Muchos de ellos son pequeñas mejoras. Sin embargo, hay algunas novedades relevantes para los usuarios de este framework de código abierto.

Aunque fue retirado por Microsoft hace mucho tiempo, el navegador Internet Explorer sigue contando con un reducto de fieles usuarios. Sin embargo, al ser tan reducido, Bootstrap 5 ya no será compatible con este navegador. Al volverse obsoleto y carecer de las actualizaciones (Microsoft ofrece en su lugar Edge), se debía añadir mucho código innecesario.

Con el cese de la compatibilidad con Internet Explorer, el tamaño de los proyectos con Bootstrap se reduce, porque el obsoleto navegador de Microsoft no podía interpretar los métodos de JavaScript más modernos y por ello necesitaba un esfuerzo adicional que se reflejaba, tanto en el tamaño del archivo, como en el trabajo que invertía el programador.

Para facilitar el trabajo con JavaScript, muchos diseñadores y desarrolladores web utilizan la biblioteca gratuita jQuery. Bootstrap fue compatible con esta biblioteca durante años, pero ya no lo será en esta nueva versión. Se supone que los usuarios de Bootstrap 5 ya no la necesitarán. Sin jQuery, se podrán crear fácilmente los mismos efectos que antes. Para ello, se deberá utilizar o bien un código JavaScript más avanzado, o se deberá cambiar a HTML y CSS.

Esto significa que los proyectos que se creen ahora con Bootstrap serán más ligeros. El tamaño de los archivos y, por lo tanto, el tiempo de carga, disminuirá. Esto supondrá una mejor experiencia de usuario.

Dado que Internet Explorer ya no será compatible, Bootstrap 5 podrá desarrollar más técnicas modernas de diseño web. Esto incluye las variables CSS. Esta técnica se conoce desde hace tiempo en Sass y Less, y ahora también se ha desarrollado en el CSS clásico. Las variables facilitan el diseño con CSS y permiten crear diseños de página muy modernos.

Ya en la versión 4 del marco de trabajo se podían crear diseños usando grids CSS (cuadrículas). En Bootstrap 5 seguirá siendo igual, pero con extensiones. Con xxl, el equipo introduce un tamaño adicional. Además, se dispondrá de más clases para el espaciado vertical.

Hasta ahora, Bootstrap estaba asociado estrechamente al generador de sitios web estáticos Jekyll. Sin embargo, la herramienta tiene la desventaja de tener que instalarse para poder utilizarse en Ruby. Por ello, los desarrolladores decidieron cambiar a Hugo. Esta herramienta está escrita en el nuevo lenguaje Go y no requiere ningún otro software. Hugo promete, además, ser mucho más rápido que sus competidores.

Para aumentar la flexibilidad e impulsar el desarrollo de Bootstrap, la nueva versión ofrece la posibilidad de incluir bibliotecas y herramientas propias. Anteriormente era solo posible integrar bibliotecas y herramientas externas en un proyecto a través de clases. Ahora, se ha desarrollado una nueva interfaz con Sass. Con ella, puedes incluir tus propias herramientas y eliminar las proporcionadas por Bootstrap si no las necesitas.

El proyecto Bootstrap, que entre tanto ha crecido enormemente, tendrá una documentación técnica clara que ha sido reorganizada. De esta manera, tanto los usuarios nuevos, como los experimentados, podrán familiarizarse plenamente con el framework. Una novedad radica en la sección de personalización (Customize) que explica al usuario cómo ampliar Bootstrap. También se ha añadido una nueva paleta de colores, que ofrece aún más posibilidades para diseñar directamente dentro del código.

La sección que concierne a los formularios web se ha editado y ahora podrás encontrar información sobre la creación de formularios mucho más rápido. También en este aspecto, Bootstrap 5 ofrecerá mucha flexibilidad en el diseño de elementos como botones, cajas, etc.

No todos los cambios están ya incluidos en la versión alfa. Sin embargo, los desarrolladores ya han anunciado algunas funciones cruciales que se incluirán en futuras versiones:

• Escritura de derecha a izquierda (RTL): los idiomas que se escriben de derecha a izquierda tendrán mejor compatibilidad en el futuro.
• Menús fuera de lienzo: con los menús fuera de lienzo, aumentarán las posibilidades de diseño de los menús.
• SVG en HTML: actualmente, los archivos SVG se incrustan a través de CSS. Próximamente, podrá usarse el código HTML en su lugar.