Bootstrap 4 Alpha: todas las novedades y ejemplos

Recientemente se anunció Bootstrap 4 alpha. Se trata de la cuarta versión de este framework frontend responsivo que se ha hecho muy popular sobre todo por la gran cantidad de plantillas disponibles que tiene, tanto gratuitas como de pago.

A pesar de que a Bootstrap 4 alpha le queda mucha documentación por completar, nosotros no hemos podido evitar probarlo y darle un repaso a sus componentes más importantes.

¡Veamos qué novedades nos trae Bootstrap 4!

Descargar Bootstrap 4 y preparar el proyecto

Opción 1: Clonando el repositorio y usando Sass (modo PRO)

Si eres de los que trabajan con Bootstrap de forma modular usando Sass, puedes clonar el repositorio de github, ejecutar grunt y empezar a trastear Bootstrap 4. Para ello sigue estos pasos:

Usaremos Grunt para compilar Bootstrap Sass a css. Para ello debes tener node y Grunt.js instalados, en esta entrada tienes los pasos para hacerlo.

Ahora ejecuta estos comandos dentro de tu carpeta /bootstrap :

La configuración que trae el Gruntfile.js junto a la ejecución del comando grunt watch, hará que se gestionen muchas tareas. Como la compilación automática de los ficheros modulares en .scss a un solo fichero bootstrap.css situado en el directorio /dist, cada vez que hagas cambios.

Compilar con Grunt cuesta unos pocos segundos. Si no te sientes cómodo usando Grunt, puedes compila tus archivos .scss con otros compiladores de Sass que uses habitualmente.

Usar Sass con Bootstrap nos da la ventaja de trabajar de forma modular cada uno de los componentes .scss, personalizando así nuestro proyecto al máximo.

 

Opción 2: Cargar los enlaces CDN de Bootstrap 4 alpha y listo (modo fácil)

El modo rápido para empezar a trastear Bootstrap sería cargar los enlaces CDN con los estilos ya compilados y el javascript de bootstrap en tu documento.

Copia y pega las hojas de estilos <link> en tu <head> y añade jQuery y los plugins de bootstrap antes del cierre de la etiqueta </body>:

Simple y rápido.


Se acabó Less, Bootstrap 4 ha pasado su código a Sass

Bootstrap 4 Sass

En todas las versiones anteriores Bootstrap usaba como preprocesador Less y en la 3.0 introdujo Sass, sin embargo en esta versión alpha 4 se ha decidido prescindir de Less por ahora y usar solamente Sass como preprocesador css.

¿El motivo? En su blog explican que Bootstrap Sass compila más rápido que nunca gracias a Libsass y que además Sass ha ido ganando mucha popularidad en los últimos años entre los desarrolladores front-end.

Por mi parte me siento más cómodo usando Bootstrap 4 alpha con Sass, los desarrolladores acostumbrados a Less no dirán lo mismo claro está.

 

Bootstrap quita el soporte a Internet Explorer 8 (¡viva!)

Algún día tenía que pasar, y las razones están claras. IE8 nos limita como desarrolladores a base de usar pequeños apaños o hacks CSS y fallbacks.

Aunque es cierto que en ciertas consultorías venden al cliente el soporte a IE8 como si fuera el Santo Grial, si estás trabajando en una me temo que no deberías abandonar aún Bootstrap 3.

Por otra parte, al menos en los datos que saco de los ecommerces con los que trabajo, un 12% de las visitas son desde IE, de ese 12% un 10% es con IE8. Así que por mi parte ahí se queda internet explorer 8, Foundation también dejó de darle soporte hace tiempo y le va bastante bien.

 

Un módulo nuevo llamado “Reboot” sustituye a Normalize.css

Antes Bootstrap usaba Normalize.css para resetear los estilos css que traen por defecto los navegadores.

Ahora usa el módulo Reboot para tener todos los selectores genéricos y estilos reseteados en un solo fichero SCSS.

Me ha gustado que se modifique el clásico box-sizing: border-box desde el elemento html y de forma global para todos los elementos:

Esto ahorra muchos !important por el camino y asegura que el ancho especificado no se sobrepase debido al padding o al borde. Ejemplo.

 

Retícula (grid) mejorada usando rem

Desde fuera puede parecer que la cuadrícula de 12 columnas de bootstrap 4 no ha cambiado.

De hecho la semántica y sintaxis HTML a la hora de maquetar es en esencia la misma de siempre:

Pero por dentro sí que ha cambiado Bootstrap, ha dicho “bye bye” a los píxeles. Estas eran unidades absolutas, es decir, que solo dependían de sí mismas.

Ahora las unidades que indican el ancho, el margen y el padding de los elementos están en rem (root em), que son unidades relativas.

Esta unidad conocida como “root em” calcula el tamaño de la fuente (font-size) de forma relativa al elemento raíz: el html.

Por ejemplo aquí indico al elemento raíz html que tenga 16px de font-size:

Para este caso 1rem = 16px, por lo que si quiero que mi h2 mida 32 pixeles, lo calcularía de esta forma: 32/16 = 2rem. Puedes ampliar la información sobre los rem en este artículo.

¡Oye!, si los rem se usan para la tipografía responsiva, ¿para qué usa Bootstrap 4 rem en su grid?

Aquí está lo divertido, la unidad rem nos da acceso una cuadrícula dinámica, ya que todo es relativo al valor especificado en el elemento html.

Por lo tanto, cambiando el font-size en el css del html toda nuestra retícula cambiará y se ajustará proporcionalmente a ese valor.

Echa un vistazo a este ejemplo y fíjate como cambia toda la retícula al cambiar el valor del font-size del html:

See the Pen Bootstrap 4 Grid rem Demo by Funny Frontend (@funnyfrontend) on CodePen.

Es un fork del Codepen creado por Nicholas Cerminara. Como ves podemos modificar todo el grid según los dispositivos de forma rapidísima. Por ejemplo, voy a modificar un media query con SASS mixin para los dispositivos extra pequeños (extra small, xs):

¡Ya está!, más adelante hablaremos de los breakpoints responsivos de Bootstrap.

 

Retícula opcional hecha con Flex Box

Esta retícula no da soporte a IE9, pero Bootstrap 4 alpha te la brinda de forma opcional por si te sientes más cómodo trabajando con Flex Box. Para activarlo simplemente debes cambiar una variable boleana a true en el fichero _variables.scss y recompilar el CSS. Enhorabuena ya has desbloqueado Bootstrap Flex Box:

Todos los componentes cambiarán a modo Flex Box al guardar esta configuración, sin necesidad de modificar la sintaxis de clases de bootstrap que tenías en tu html. Ya sabrás que la ventaja de trabajar con Flex Box es que la altura de las columnas coinciden y se ajustan ellas solas sin importar el contenido. Volviendo hacer un fork al CodePen del amigo Nicholas Cerminara, puedes cambiar de forma dinámica el grid habitual de Bootstrap4 al grid FlexBox de Bootstrap4:

See the Pen Bootstrap 4 Flex Box Grid Demo by Funny Frontend (@funnyfrontend) on CodePen.

Se ve claramente, la altura de las columnas se alinean de forma equilibrada con Bootstrap FlexBox.

 

Media queries breakpoints mejorados

Los breakpoints de Bootstrap 4 ahora están en ems, como ya sabrás estos breakpoints se basan en el ancho mínimo de la pantalla de diferentes dispositivos (viewports) y nos ayudan a escalar los elementos de nuestra web según cambie este ancho, lo que viene siendo una web responsiva de toda la vida vamos.

¿Por qué cambiar de píxeles a ems? pues porque el valor que obtiene “em” en Media Queries es relativo al user agent (el navegador que usa el usuario). En este caso los rems no nos servirían puesto que hay que declarar antes su valor en el html, y los media queries IGNORAN los valores declarados. Más info en este artículo.

Y como novedad tenemos un nuevo breakpoint que cubre el ancho de las pantallas por debajo de 480px, este breakpoint para las pantallas más pequeñas tiene el mismo nombre que en bootstrap 3: col-xs-…

En resumen, los media queries de Bootstrap 4 quedarían así:

Los breakpoints también se pueden configurar en Sass desde el fichero _variables.scss, haz tu propio responsive como mejor te parezca:

 

Nuevas clases útiles que facilitan el trabajo

Las anteriores versiones de Bootstrap traían una serie de clases llamadas “Utility Classes”, que nos permitían controlar cambios en el layout de la página muy básicos. Por ejemplo .pull-left, .pull-right, .clearfix, etc.

Bootstrap v4 alpha viene con nuevas clases similares que nos ayudarán sobre todo a controlar los margins y los paddings de los elementos.

Si abres el fichero _utilities-spacing.scss verás que estas clases se crean a partir de múltiplos de un valor global predeterminado: $spacer. Por ejemplo:

La clase .m-a-... es para modificar el margen de todos los lados del elemento. Hay clases para el margin-top (.m-t-...), margin-right (.m-r...) y demás. También para los ejes x-y, y para los diferentes tamaños (-0, -md y -lg) que podemos usar.

Ahora veamos este ejemplo con clases para el padding:

La idea de usar estas clases es que te ahorres el crear una clase específica para necesidades de este tipo, ya que el margin y el padding son los estilos que más se suelen tocar y reemplazar junto al color y la fuente.

Te servirá para no ensuciar tu código con clases “parche”.

 

 Elemento UI: Bootstrap Cards

Las cards o tarjetas de Bootstrap 4 vienen para sustituir antiguos componentes como well, panel y thumbnail.

En la web oficial las definen como “Un contenedor de contenido flexible y extensible. Que incluye opciones para headers y footers, y una amplia variedad de contenido, colores de fondo según el contexto y potentes opciones de visualización”.

Aquí tienes una demo que muestra todo lo que puedes hacer con bootstrap cards:

See the Pen Bootstrap 4 Cards Demo by Funny Frontend (@funnyfrontend) on CodePen.

 

No más Glyphicons

Ya no hay iconos Glyphicons en Bootstrap 4, sin embargo pronto añadirá en su documentación instrucciones de cómo incluir Font Awesome y los Octicons. Que al fin de cuentas son los iconos más usados por los diseñadores web.

 

Clase Display para las cabeceras

Las clases .display-(1,2,etc) son útiles para cambiar el tamaño de nuestros headers h1, h2, h3 etc, que suelen variar bastante según el proyecto o la secciones, y nos permite cambiar su font-size inmediatamente.

Ahora mismo hay 4 tamaños disponibles. Cuanto más grande es el número mayor es el tamaño de la cabecera:

Ejemplo:

See the Pen Bootstrap 4 Display Heading Examples by Funny Frontend (@funnyfrontend) on CodePen.

 

Tablas invertidas, .table-inverse

Con añadir la clase .table-inverse tenemos otra versión de tabla para Bootstrap4:

See the Pen Bootstrap 4 – Table Inverse by Funny Frontend (@funnyfrontend) on CodePen.

 

Outline Buttons

Ahora tenemos una nueva clase para dar estilos de botones: “outline buttons”, son botones de toda la vida pero invertidos en los colores.

Añade el sufijo -outline a las diversas clases de button:

Ejemplo:

See the Pen Bootstrap 4 – Outline Buttons by Funny Frontend (@funnyfrontend) on CodePen.


Código JavaScript  rescrito en ES6

Todos los plugin JavaScript de Bootstrap 4 alpha se han pasado a JavaScript 6 / EcmaScript6(ES6).

 

Plantillas o temas disponibles

Por ahora Bootstrap4 tiene 3 themes en su página. Todos ellos de pago:

  • Dashboard: panel de administración diseñado con bootstrap4. Tiene gráficos, tablas, diagramas y otros componentes.
  • Marketing: clásica layout minimalista para anunciarse o bien ser usada como landing page. Tiene 15 componentes CSS y JS para adaptarlos a tu marca.
  • Application: layout de Bootstrap4 que simula una web app. Incorpora timelines, notificaciones, mensajes y otras “utility classes”.

Estos temas están disponibles por $99, no obstante pronto habrá un boom de temas con bootstrap4.

 

Diversas formas de empezar tu proyecto de Bootstrap 4

Con Node

Puedes instalar Bootstrap 4 con NPM (Node Package Manager):

Con Bower

Puedes instalar Bootstrap 4 con el gestor de paquetes frontend Bower:

Con Git

Simplemente clónate el repositorio de Bootstrap 4 alojado en Github:

Con Composer

Si usas Laravel 5 seguramente gestionarás muchas dependencias con Composer:

Con Meteor

Meteor es una plataforma para crear aplicaciones JavaScript construida sobre Node.js:

 

Conclusiones finales

Y esta es la lista que he elaborado sobre las novedades de Bootstrap 4 Alpha, es cuestión de tiempo que esta versión de bootstrap más ligera y potente tenga su documentación y versión estable. Puedes reportar los errores desde Github.

Yo no dudaré en incorporarlo a mis proyectos, Bootstrap 4 alpha me ha hecho pasarme a su bando dejando atrás Foundation, ya que por fin incorpora todas las cosas que echaba en falta, como las unidades relativas rems.

Ya sé que muchas veces decimos “esta web huele a Bootstrap”, pero eso ya sería problema nuestro al usar las mismas plantillas para todo y no tirar de la creatividad.

Comprendiendo Bootstrap 4 como un framework frontend responsivo, solo puedo decir “bravo”, ¿qué os parece a vosotros? 😀

Recopilación y ampliación de información vía:

9 Comentarios

  1. Ignacio farre 2 octubre, 2015 Responder
  2. Juan 16 noviembre, 2015 Responder
  3. Antonio Sierra 29 diciembre, 2015 Responder
  4. Lombao Estudios 16 junio, 2016 Responder
  5. Mario Incioanal Bazalar 14 julio, 2016 Responder
  6. Alexander Moros 3 agosto, 2016 Responder
  7. Guido 5 agosto, 2016 Responder
  8. Diseño web 19 septiembre, 2016 Responder
  9. Alguien 25 septiembre, 2017 Responder

Añadir un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *