Bootstrap 4: El salto que estábamos esperando

Bootstrap 4 aparece en su versión Alpha (ya casi la definitiva) con todo lo que habíamos deseado los desarrolladores y un par de cosas más.

Pero antes de nada, para los que no sabéis ni de que estamos hablando ¿Que es Bootstrap?

Bootstrap es un framework HTML5, el más popular / usado en el FrontEnd web y un generador de tendencias.  Desglosemos un poco esta frase. Cuando hacemos una página web o un tema de wordpress, no empezaremos a escribir el código de 0, no se si os habeis fijado, pero la mayoría de páginas en mobil el menú se convierte en las 3 rallitas arriba a la izquierda. Bien, pues no escribimos las 100 lineas de código de nuevo en cada página, sería una perdida de tiempo, lo reservamos y lo traspasamos de una proyecto a otro. Como os imaginareis, esto sucede con muchos ejemplos, pop ups para suscribirse, sliders de imágenes con texto, galerias, formularios etc.

Pues un framework como Bootstrap, lo que hace es reunir todos estas cosas en un paquete para que cuando empecemos a hacer nuestra página o tema de wordress, no tengamos que volver a escribir la receta de la sopa de ajo.

Entonces, ¿Qué hay de nuevo en Bootstrap 4?

1. Soporte para Flexbox

Ya hace unos años que apareció para facilitarnos la vida, a algunos navegadores no les gustaba (a algunas versiones aun no les gusta) pero poco a poco, se ha ido implementando. Flexbox nos ayuda a que los elementos sean flexibles facilitando mucho el multidispositivo escribiendo mucho menos código. Importante: Aun no esta 100% aceptado para todas las versiones de todos los navegadores (IE aun sigue con lo suyo) esperemos que con esta inclusíon flexbox se consolide como estandar.

2. NormaLize

Todos los navegadores usan algunos estilos por defecto (el tamaño de los titulares por ejemplo), esto hace que la misma página se vea un poco distitna en en Chrome o Firefox, por eso usamos recursos como normalize, que “normalizan” esta base. Bootstrap 4, reescribe el viejo normalize mejorándolo e incluyendo los últimos cambios en los navegadores.

3. Javascript con estándar ECMAScript 6

ECMA Script 6

Bootstrap usa plugins de Javascript (librerias de código con una única finalidad, como crear pop ups), en esta versión las han reescrito todas en base a ECMAScript 6, el estandar actual para el lenguaje más popular y con mayor crecimeto. Para más detalle sobre ECMAScript 6 podeis consultar esta estupenda explciación DevCode.

4. Cards

Las Cards son un elemento básico del diseño web, Google nos acostumbro con Material y ya estamos más que acostumbrados a ver productos o listas de post en formato cards, ahora solo con una pequeña classe podemos mostrar cards estupendamente.

5. Iconos: Glyphicons nos deja

Glyphicons era una buena idea, una galeria de iconos propia de Bootstrap, pero seamos realistas……todos usamos font awesome. Esto hacía que se cargaba la librería de Bootstrat y luego la de font aswesome, una doble carga innecesaria. Ahora bootstrap nos livera de este yugo y nos da el margen para cargar la librería de iconos que queramos.

6. Less vs Sass, “and the winner is….”

SASS contra Less

SASS, ya sin lugar a dudas, SASS gana la batalla de preprocesadores CSS (de momento). Un preprocesador CSS es un “metalenguage” que nos permite trabajar con CSS (un lenguaje de por si muy sencillo) con funcionalidades propias de un lenguaje de programación de verdad. SASS se ha consolidado en los últimos años como el más usado, Bootstrap originalmente se podía trabajar con Less o con SASS, ahora solo con SASS.

Cosas de interés

Hemos hecho limpieza: Ellos mismos nos cuentan, han borrado 82.000 lineas de código (es un monton) y han añadido 67.000. Es un cambio henorme para un framework como Bootstrap. Nos lo cuentan en su blog.

Migrar de la versión 3 a la 4: Es posible la migración, en este extenso tutorial de su flamante nueva documentación nos lo explican detalladamente. Sin embargo, es un trabajo muy complejo y recomendaría valorar si tiene sentido, o aguantar unos meses más hasta la versión final de Bootstrap 4, no olvidemos que esta es la Alfa y cambiar de plantilla.

Ejemplos que nos ponen los dientes largos: Desde el lanzamiento de la verisón Beta, que ya podemos ver trabajos hechos con Bootstrap 4, muchos tanto como paquetes para usar en HTML o convertidos en themes de WordPress, os dejamos aquí una pequeña recopilación de buenos ejemplos.

 

Este sitio web utiliza cookies propias y de terceros con el fin de obtener información estadística sobre la base de los datos de navegación de los visitantes. Si continúas navegando entendemos que aceptas su uso y, en caso de no aceptar su instalación, deberás visitar el apartado de Política de Cookies , donde encontrarás la forma de eliminarlas o rechazarlas. ACEPTAR
Aviso de cookies