Bootstrap 5: novedades en el framework CSS

Bootstrap es uno de los fra­me­wo­r­ks más populares para el de­sa­rro­llo del frontend de páginas web. La he­rra­mie­n­ta pro­po­r­cio­na pla­n­ti­llas para CSS y HTML que facilitan la co­lo­ca­ción y el diseño de la página, las fuentes, los botones y los elementos de na­ve­ga­ción, de modo que im­ple­me­n­tar con ella un diseño web moderno resulta muy sencillo.

De­sa­rro­lla­do ori­gi­na­l­me­n­te para Twitter, el marco de trabajo está di­s­po­ni­ble 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á di­s­po­ni­ble 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 de­sa­rro­llar­se y los de­sa­rro­lla­do­res no han desvelado aún las fechas para su la­n­za­mie­n­to oficial. Por ello, aún no es posible asegurar cuándo saldrá la primera versión beta y la de­fi­ni­ti­va. 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 pu­bli­ca­n­do ac­tua­li­za­cio­nes 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 re­le­va­n­tes 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á co­m­pa­ti­ble con este navegador. Al volverse obsoleto y carecer de las ac­tua­li­za­cio­nes (Microsoft ofrece en su lugar Edge), se debía añadir mucho código in­ne­ce­sa­rio.

Con el cese de la co­m­pa­ti­bi­li­dad con Internet Explorer, el tamaño de los proyectos con Bootstrap se reduce, porque el obsoleto navegador de Microsoft no podía in­te­r­pre­tar los métodos de Ja­va­S­cri­pt más modernos y por ello ne­ce­si­ta­ba un esfuerzo adicional que se reflejaba, tanto en el tamaño del archivo, como en el trabajo que invertía el pro­gra­ma­dor.

Para facilitar el trabajo con Ja­va­S­cri­pt, muchos di­se­ña­do­res y de­sa­rro­lla­do­res web utilizan la bi­blio­te­ca gratuita jQuery. Bootstrap fue co­m­pa­ti­ble con esta bi­blio­te­ca durante años, pero ya no lo será en esta nueva versión. Se supone que los usuarios de Bootstrap 5 ya no la ne­ce­si­ta­rán. Sin jQuery, se podrán crear fá­ci­l­me­n­te los mismos efectos que antes. Para ello, se deberá utilizar o bien un código Ja­va­S­cri­pt 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, di­s­mi­nui­rá. Esto supondrá una mejor ex­pe­rie­n­cia de usuario.

Dado que Internet Explorer ya no será co­m­pa­ti­ble, Bootstrap 5 podrá de­sa­rro­llar 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 de­sa­rro­lla­do 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 (cua­drí­cu­las). En Bootstrap 5 seguirá siendo igual, pero con ex­te­n­sio­nes. 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 es­tre­cha­me­n­te al generador de sitios web estáticos Jekyll. Sin embargo, la he­rra­mie­n­ta tiene la de­s­ve­n­ta­ja de tener que in­s­ta­lar­se para poder uti­li­zar­se en Ruby. Por ello, los de­sa­rro­lla­do­res de­ci­die­ron cambiar a Hugo. Esta he­rra­mie­n­ta 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 co­m­pe­ti­do­res.

Para aumentar la fle­xi­bi­li­dad e impulsar el de­sa­rro­llo de Bootstrap, la nueva versión ofrece la po­si­bi­li­dad de incluir bi­blio­te­cas y he­rra­mie­n­tas propias. An­te­rio­r­me­n­te era solo posible integrar bi­blio­te­cas y he­rra­mie­n­tas externas en un proyecto a través de clases. Ahora, se ha de­sa­rro­lla­do una nueva interfaz con Sass. Con ella, puedes incluir tus propias he­rra­mie­n­tas y eliminar las pro­po­r­cio­na­das por Bootstrap si no las necesitas.

El proyecto Bootstrap, que entre tanto ha crecido eno­r­me­me­n­te, tendrá una do­cu­me­n­ta­ción técnica clara que ha sido re­or­ga­ni­za­da. De esta manera, tanto los usuarios nuevos, como los ex­pe­ri­me­n­ta­dos, podrán fa­mi­lia­ri­zar­se ple­na­me­n­te con el framework. Una novedad radica en la sección de pe­r­so­na­li­za­ció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 po­si­bi­li­da­des para diseñar di­re­c­ta­me­n­te dentro del código.

La sección que concierne a los fo­r­mu­la­rios web se ha editado y ahora podrás encontrar in­fo­r­ma­ción sobre la creación de fo­r­mu­la­rios mucho más rápido. También en este aspecto, Bootstrap 5 ofrecerá mucha fle­xi­bi­li­dad 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 de­sa­rro­lla­do­res 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 co­m­pa­ti­bi­li­dad en el futuro.
• Menús fuera de lienzo: con los menús fuera de lienzo, au­me­n­ta­rán las po­si­bi­li­da­des de diseño de los menús.
• SVG en HTML: ac­tua­l­me­n­te, los archivos SVG se incrustan a través de CSS. Pró­xi­ma­me­n­te, podrá usarse el código HTML en su lugar.