Recientemente se presentaron algunas mejoras en Bootstrap versión 5 alpha. Aquí la página oficial y la documentación de Bootstrap 5.
Según los desarrolladores detrás del marco, así es como se inspiraron:
“Inspirado en el CSS que creó los inicios de este proyecto, nuestro logotipo encarna la sensación de un conjunto de reglas: estilo delimitado por llaves. Nos encanta y creemos que usted también lo hará. Espere ver cómo se despliega en la documentación de v4, nuestro blog y más a lo largo del tiempo a medida que continuamos perfeccionando las cosas y enviando nuevos lanzamientos”.
Novedades
Bootstrap 5 oficialmente elimina jQuery y es compatible con Internet Explorer 10 y 11, es una ventaja para una base de código ligera y una mejor perspectiva. Desarrolladores que trabajan en proyectos impulsados por empresas considerarán esto como una desventaja, hay formas de solucionar el soporte de IE usando polyfills.
Además cuenta con otras características interesantes, como una API de utilidades, formularios actualizados, una paleta de colores ampliada, iconos personalizados y muchos más.
Sin jQuery
Eliminar jQuery como una dependencia es una mejora en términos de hacer que el marco CSS sea más ligero y rápido. jQuery ha sido una biblioteca valiosa en los inicios del desarrollo front-end debido a la falta de consultas en Javascript vainilla.
La mayoría de las características de jQuery ahora se pueden hacer usando vanilla JS, no hay demasiadas razones para mantenerlo disponible.
Eliminar el soporte para IE 10 y 11
Para algunos desarrolladores, esto puede ser una sorpresa más grande que eliminar jQuery como una dependencia, porque aún hay empresas y personas que usan estos navegadores antiguos para sitios web empresariales.
Pero hay soluciones alternativas que utilizan polyfills para que funcione, simplemente ya no será compatible de forma predeterminada.
Propiedades personalizadas de CSS
Esta es otra característica nueva, las propiedades personalizadas de CSS son variables nativas para el navegador y, en comparación con las variables Sass, la ventaja es que son nativas. Será más fácil actualizar dinámicamente las propiedades CSS.
Por ejemplo, los modos oscuros vs claros ahora ya no tendrán que cambiarse a través de otro archivo CSS sino a través de las propiedades personalizadas. A continuación la lista predeterminada de variables raíz para los colores:
:root {
–bs-blue: #0d6efd;
–bs-indigo: #6610f2;
–bs-purple: #6f42c1;
–bs-pink: #d63384;
–bs-red: #dc3545;
–bs-orange: #fd7e14;
–bs-yellow: #ffc107;
–bs-green: #28a745;
–bs-teal: #20c997;
–bs-cyan: #17a2b8;
–bs-white: #fff;
–bs-gray: #6c757d;
–bs-gray-dark: #343a40;
–bs-primary: #0d6efd;
–bs-secondary: #6c757d;
–bs-success: #28a745;
–bs-info: #17a2b8;
–bs-warning: #ffc107;
–bs-danger: #dc3545;
–bs-light: #f8f9fa;
–bs-dark: #343a40;
–bs-font-sans-serif: system-ui, -apple-system, “Segoe UI”, Roboto, “Helvetica Neue”, Arial, “Noto Sans”, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”, “Noto Color Emoji”;
–bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, “Liberation Mono”, “Courier New”, monospace;
–bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}
Documentación
Según la publicación oficial del blog, los desarrolladores han mejorado la documentación dando más explicaciones, eliminando ambigüedades y extendiendo la página que muestra cómo personalizar el marco.
Además de los documentos mejorados, podemos observar una paleta de colores mucho más extensa con un enfoque en la elección de colores accesibles.
API de utilidades
Este es uno de los puntos más interesantes de Bootstrap 5. Es como funcionaba Tailwind CSS como una utilidad CSS Framework primero y al usar la API de utilidades de Bootstrap tiene posibilidades ilimitadas para crear clases de utilidad para espaciado, posicionamiento, dimensionamiento y pronto.
Por ejemplo, se podrá expandir el número de clases `m- *`, `p- *`, etc., sin necesidad de escribir un código Sass personalizado para expandirlas. Aquí un ejemplo para ver cómo se puede expandir la variable $ utilities agregando múltiples valores:
$utilities: () !default;
$utilities: map-merge(
(
// …
“width”: (
property: width,
class: w,
values: (
25: 25%,
50: 50%,
75: 75%,
100: 100%,
auto: auto
)
),
// …
“margin”: (
responsive: true,
property: margin,
class: m,
values: map-merge($spacers, (auto: auto))
),
// …
), $utilities);
Iconos Bootstrap 5
Recientemente los creadores de Bootstrap lanzaron un nuevo conjunto de íconos personalizados con tecnología SVG. Se aprecia el aspecto original de los íconos y seguramente vale la pena intentarlo si se usaron bibliotecas antiguas.
Aquí presentamos dos de los kits de interfaz de usuario Bootstrap más populares de Themesberg. Ambos usan la última versión estable de Bootstrap y pronto también estarán disponibles en Bootstap 5.
Kit de interfaz de usuario de Bootstrap de Pixel Lite
Pixel Lite es un kit de interfaz de usuario Bootstrap gratuito y de código abierto que tiene más de 200 componentes individuales y 6 páginas que incluyen páginas sobre precios, inicio de sesión y registro.
Pixel viene con comandos SASS y Gulp con un par de características más potentes, como la minificación de proyectos y la optimización basada en comandos Gulp avanzados.
Kit de interfaz de usuario Pixel Pro Bootstrap 5
Pixel Pro es un kit de interfaz de usuario Bootstrap 5 premium que cuenta con 1000 componentes, 35 páginas de ejemplo y un panel de usuario. También viene con archivos SASS personalizados avanzados y comandos Gulp con plantillas totalmente receptivas.
En conclusión, Bootstrap 5 conserva el conjunto básico de componentes que tenía sin actualizaciones de diseño alarmantes, pero con un enfoque en crear el marco de trabajo, una dependencia más liviana e independiente que se puede usar como columna vertebral para plantillas de front-end.
Leíste: Mejoras en Bootstrap versión 5 Alpha, te recomendamos: Cómo cambiar de jQuery a Vanilla JS con Bootstrap 5
Te invitamos a que nos sigas en nuestras redes sociales: Facebook, Twitter, Instagram y Youtube con el perfil: @tortugacode
