Bootstrap 4.0

Bootstrap 4.0

Se acerca la llegada de Bootstrap 4 a nuestros hogares web y es hora de ver algunos elementos a favor y contra de lo que ya conocíamos. Y es que en estos últimos meses he tenido la oportunidad de probar la versión alpha 4, y la alpha 6, y ahora que llega la versión beta estamos cerca del lanzamiento final.

Entre las primeras cosas a tener en cuenta es que se ha añadido un fichero JavaScript más. Así que ahora tendremos que poner una línea de código CSS en la cabecera, y 3 líneas en el pie. Una de ellas sigue siendo jQuery, algo bastante estándar hoy en día en muchos sitios web, pero el hecho de tener que usar muchos ficheros JavaScript es algo que en principio no me acaba de gustar. Si realmente vamos a utilizar los 3 ficheros a lo largo del sitio, quizá sería mejor incluirlo todo en uno único y hacer una petición mayor y cacheárselo al usuario.

Otro elemento que me gusta es la paleta de colores nueva que se ha generado, con una serie de varios colores, los de los botones y alertas y finalmente la escala de grises.

El siguiente elemento importantísimo en este sistema es el del grid, que se ha actualizado bastante, han variado algunos tamaños. Esto hace que el sistema anterior sea incompatible en cuanto a tamaños… y por tanto hay que hacer un replanteamiento bastante importante en cuanto a los tamaños de pantalla sobre los que queremos trabajar. Aún así, también se han hecho muchas mejoras para simplificar su aplicación. Sin duda habrá que dar un repaso en profundidad a la información sobre el nuevo funcionamiento del grid, que valdrá la pena.

Otro detalle importante, siguiendo con la parte del grid es el de la alineación vertical de los distintos bloques. De la misma forma, cuando no completamos todas las columnas, podemos cambiar el comportamiento horizontal, hasta ahora sólo alineado a la izquierda. Y a esto podemos sumar una forma mucho más sencilla de ordenar los elementos como queremos.

El siguiente elemento básico es que han cambiado las fuentes a un sistema mucho más estándar y compatible con todos los dispositivos; se ha seguido una regla publicada sobre fuentes nativas de Smashing Magazine. Además, se han aplicado ligeros cambios en la tipografía, que siempre son de agradecer para dar una mayor flexibilidad a la hora de mostrar contenidos por pantalla; de forma similar se ha hecho con las tablas, que aunque no varía en exceso lleva algunos detalles visuales interesantes.

Algo que me ha gustado bastante es la mejora en las alertas, sobre todo porque se ha planteado un sistema más extendido (que hasta ahora parecía que sólo se pudiera poner una simple línea de texto).

El gran nuevo elemento son las card, que es el sistema de crear contenedores, más parecido al concepto Android Material. Estos elementos dan mucho juego, son bastante ampliables y configurables y van a requerir de una gran cantidad de tiempo para aprenderse todos sus detalles.

Otro de los componentes nativos que es muy importante en determinados sitios es el del carousel, que incluye algunos elementos nuevos para hacerlo más visual, como el de los indicadores y textos. De la misma forma, aunque sin grandes cambios, hay detalles en los sistemas de collapse que permiten multi-target y que ayudarán a facilitar cómo y cuándo mostrar determinados elementos.

Uno de los elementos que quizá se haya quedado corto es el de los dropdowns en el que sigo teniendo en falta la opción de al menos un nivel de sub menú por defecto en el sistema. Seguramente también para algunos los formularios deberían evolucionar algo más, aunque creo que el hecho de que la validación automática (sin necesidad de recargar) haya añadido unas buenas mejoras, va a suplir cualquier otro cambio. En la misma línea de las tablas tenemos las ventanas modales, que tampoco han sufrido grandes cambios aunque sí algunos detalles que ayudarán a mejorar la visualización de sus contenidos.

Otros elementos como la navegación o la barra de navegación tampoco lleva muchas mejoras en sí, pero sí que incluyen algunos detalles que mejoran todo el funcionamiento, al igual que lo hacen los popovers que incluyen mejoras en su contenido.

Entre las utilidades, una de las interesantes es la de los bordes, que hasta ahora había que ponerlos a mano mayormente. Y la siguiente es la de los tamaños, que en general las horizontales no suelen ser muy problemáticas pero sí las verticales cuando trabajas con muchos bloques; ahora te permitirán definir alturas y anchuras de los bloques de forma sencilla.

Y finalmente el cambio quizá más curioso es que la nueva versión no incluye ninguna biblioteca de iconos por defecto, por lo que simplemente te recomiendan una lista de posibilidades.

Como opinión personal, el cambio de la versión 3 a la 4 es a veces un poco traumática, principalmente por la mentalidad de las cards, aunque el resultado es ahora más plano (más Material) y a mucha gente no le acaba de convencer, creo que esta nueva versión aprende de algunos errores del pasado, mejora muchos elementos con pequeños detalles, y sin duda creo que hará la experiencia mucho más agradable para los usuarios, principalmente en aquellos que usen tecnologías móviles. Y si quieres comentar a trastear, sólo has de probar los distintos ejemplos de casi todos los elementos de esta nueva versión.

Deja un comentario