loading...

▷ Bootstrap 5: Nuevos cambios para el framework CSS más usado del mundo

rosepac profile image Pablo Álvarez Corredera Originally published at ciberninjas.com on ・6 min read

¡Llegó el primer lanzamiento Alfa de Bootstrap 5! Desde el equipo de Bootstrap anuncian una nueva versión del framework, en la que han estado trabajando durante varios meses para definir lo que comenzaron con la versión 4.

La nueva versión Alpha de Bootstrap 5 se centra en hacer que migrar de la versión 4 a la 5 sea más accesible, además de dejar atrás lo que ya está desactualizado o se ha considerado inapropiado. Por ello, en la versión de Boostrap 5, Bootstrap no dependerá de jQuery y han dejado de admitir el navegador Internet Explorer.

Enfocados en crear herramientas que más favorables para el futuro, y trabajando en la promesa de incluir variables CSS, un JavaScript más rápido, menos dependencias y mejores API´s.

Antes de actualizar, debes recordar que la versión 5 aún es una versión ALFA, y que ocurrirán numerosos cambios hasta la lleada de la versión BETA, Aún no se ha terminado de agregar y eliminar todos los nuevos apartados.

¡Ahora veamos los cambios incluidos en la nueva versión!

Nueva apariencia de Boostrap 5

Las páginas de documentos de Bootstrap ya no son de ancho completo para mejorar la legibilidad y hacer que nuestro sitio se sienta menos como una aplicación y más como una página de contenido.

Además, se actualiza la barra lateral de la página web de Boostrap para comenzar a usar secciones expandibles (con nuestro propio complemento Collapse) para ofrecer una navegación más rápida.

Nuevo logotipo de Boostrap 5

Han agregado un pequeño cambio en la aburrida forma cuadrada con la B dentro, modificando los lados laterales del cuadrado en simulación a unas llaves, las que se usan sobre todo en el mundo del CSS y de la programación.

Con lo que se hace un guiño, hacía el CSS. Queriendo simular un conjunto de reglas (la B interior) delimitada por las llaves del CSS.

Bootstrap junto JQuery y Javascript

jQuery trajo el acceso sin precedentes a comportamientos complejos de JavaScript a millones (¿miles de millones?) de personas en la última década y media.

Se debe estar agradecido a jQuery por todo el poder que ha permitido ofrecer a los desarrolladores front-end a lo largo de tanto tiempo (pero en la actualidad) ha dejado de ser eficaz y por eso, Bootstrap ha cambiado hacía Javascript para siempre.

Gracias a los avances realizados en las herramientas de desarrollo front-end y el soporte del navegador, podemos eliminar la dependencia de jQuery, lo que significa uno de los mayores cambios del framework Bootstrap en años y significa que los proyectos creados en Bootstrap 5 serán un poco más ligeros en cuanto al tamaño de sus archivos.

Además de eliminar jQuery, se han realizado un puñado de cambios y y otras mejoras en cuanto al código de JavaScript centrados en la calidad del código y en cerrar la brecha entre la v4 y v5.

Uno de los cambios más importantes será eliminar la mayor parte del complemento Button pasando a usar solamente HTML y CSS a la hora de indicar diferentes estados, a partir de hora los botones de alternancia funcionarán con casillas de verificación y botones de radio y así serán: mucho más confiables.

Si estas interesando, puedes ver la lista completa de los cambios relacionados a Javascript en el primer proyecto alfa v5 dentro del código de GitHub.

Nuevas propiedades CSS personalizadas

Gracias a la eliminación de la compatibilidad con Internet Explorer, en CSS 5, comenzaremos utilizar propiedades de CSS personalizadas.

En la versión anterior solamente se incluían un puñado de variables raíz para el color y las fuentes, ahora se han agregado para muchos más componentes y opciones de diseño.

Por ejemplo, nuestro componente .table donde se han agregado variables locales para facilitar los estilos de las tabla seccionados, apiladas y activas:

.table {
  --bs-table-bg: #{$table-bg};
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: #{$table-striped-color};
  --bs-table-striped-bg: #{$table-striped-bg};
  --bs-table-active-color: #{$table-active-color};
  --bs-table-active-bg: #{$table-active-bg};
  --bs-table-hover-color: #{$table-hover-color};
  --bs-table-hover-bg: #{$table-hover-bg};

  // Styles here...
}

El equipo de Boostrap ha trabajado en sacar partido a las propiedades personalizadas y las posibilidades que ofrece la utilización de Sass intentando crear una estructura CSS más flexible.

Se pueden leer sobre los cambios relacionados a las Tablas y gracias a esto, se espera un mayor uso de componentes como los botones en un futuro.

Documentos de personalización mejorados

Se ha mejorado la documentación en varios apartados, dando más explicaciones, eliminando ambigüedades y brindando mucho más soporte para extender Bootstrap; a partir de ahora toda la documentación partirá desde el punto de “Personalizar”.

Los documentos personalizados de la versión de Boostrap 5 se expandirán a través de las página de la versión 4 agregando más contenidos y fragmentos de código. Se ha implementado una versión inicial npm para comenzar de manera más rápida y fácil; y también está disponible como un repositorio de plantillas dentro de GitHub, por lo que se puede bifurcar.

Se ha visto ampliada la paleta de colores. Con un extenso sistema de colores incorporado, y a partir de ahora podrás personalizar más fácilmente el aspecto de tus aplicaciones sin tener que abandonar la base de código.

Formularios de Bootstrap actualizados

Además de la nueva sección de Personalizar, se han revisado los componentes de Formularios. Consolidando los estilos de los formularios a través de una nueva sección de formularios.

Junto con las nuevas páginas de formularios, se han rediseñado y eliminado todos los controles de formularios que en la versión 4 se prsentaron. Los controles de formularios personalizados (cheques, radios, interruptores, archivos y más) ya que en la actualidad, se han convertido en valores predeterminados que cada navegador proporciona.

Si lo deseas, puedes explorar los nuevos cambios en los formularios en profundidad.

Bootstrap API

En Bootstrap 5, se implementará una nueva API de utilidad.

Sistema de cuadrícula mejorado

Bootstrap 5 no es cambio completa de su versión 4. Buscando la facilitación a la hora de actualizar, el equipo de Boostrap ha decidido mantener la mayor parte del sistema de compilación (a excepción de jQuery) y han trabajado sobre el sistema de cuadrículas anterior en vez de reemplazarlo por completo por algo más nuevo.

Los cambios implementados son los citados a continuación:

  • Agregado un nuevo nivel de cuadrícula! Denominado xxl.
  • Clases .gutter reemplazadas por .g*, al igual que las opciones de margen / relleno; también han agregado opciones nuevas de espacio espaciado que coincide con las utilidades de espaciado con las que ya se estaban utilizando.
  • Las opciones de diseño de formulario se han reemplazado con el nuevo sistema de cuadrícula.
  • Se han agregado clases de espaciado vertical.
  • Las columnas ya no son position: relative por defecto.

Aquí hay un ejemplo rápido de cómo serán las nuevas clases gutter:

<div class="row g-5">
  <div class="col">...</div>
  <div class="col">...</div>
  <div class="col">...</div>
</div>

Si lo consideras oportuno, puedes revisar la información más en profundidad.

El equipo de Boostrap nos presenta los cambios para su nueva versión, la eliminación de jQuery y el nuevo punto de vista del proyecto.

Próximos cambios en Bootstrap

RTL, offcanvas y más.

  • Hay una versión bifurcada de nuestro modal que implementa un menú offcanvas. La idea de tener un contenedor offcanvas para colocar cualquier contenido valioso en la barra lateral (navegación, carrito de compras, etc.) es enorme.
  • Estamos evaluando una serie de otros cambios en nuestra base de código, incluido el sistema de módulos Sass, un mayor uso de propiedades personalizadas de CSS, incrustando SVG en nuestro HTML en lugar de nuestro CSS, y más.

👨‍🎨 Probar Bootstrap 5🎁 Visita Nuestra Tienda 🎁

Posted on by:

rosepac profile

Pablo Álvarez Corredera

@rosepac

I find, read and report everything that can be useful for a programmer or web developer apprentice

Discussion

markdown guide