Oh, Twitter Bootstrap. Cómo te adoro. Eres el framework front-end más popular de todo el mundo, y por méritos propios. Siendo el friki en diseño web que soy, estaba realmente entusiasmado por ver el post dedicado a Bootstrap 4 en el blog oficial de Bootstrap. Finalmente, parece ser que aún no se sabe a ciencia cierta cuando se lanzará pero nosotros tenemos un hype que no lo aguanta nadie. Es por eso que he hecho un compilado con las 5 características del próximo Bootstrap 4 que me han enamorado, sinceramente.
1. Sistema de grid modificado
Bootstrap 3 siempre ha tenido un sistema de grid sólida como una roca. Esto hace que el crear sitios responsive sea, prácticamente, una tarea para niños. En Bootstrap 4, no veremos una remodelación completa del sistema de grid ya que el anterior era perfecta como te hemos contado. Según los desarrolladores veremos al menos un nivel adicional para otros tipos de dispositivos.
Esto no debería ser demasiado difícil de aprender. Y además, es opcional, si deseas establecer un tamaño específico del dispositivo. Lo que si probablemente requerirá es la inserción de un nombre de clase extra. De menor a mayor, podría ser algo así: col-lg-*, col-md-*, col-hd-*, col-sm-* y col-xs-*.
2. Navbar completamente rediseñado
Probablemente una de las cosas más difíciles y más desalentadoras de implementar en Bootstrap 3 es la barra de navegación o navbar. Es difícil de entender. Quiero decir, que para desarrollar un navbar tenemos que manejar innumerables nombres de clase. La inserción de una imagen como logotipo es una práctica maldita, por no decir casi imposible. Los chicos de Twitter trataron de solucionar esto en Bootstrap 3.3, pero el cambio fue demasiado menor y demasiado tarde para mí.
No tenemos detalles específicos sobre cómo será el nuevo navbar de Bootstrap 4 ni de cómo se comportará en el móvil, pero es de esperar que sea menos genérico que el .navbar-collapse que hay implementado actualmente. ¿Podríamos ver algo de navegación off-canvas al igual que lo que ofrece el add-on Jasny Bootstrap?
Seguramente con este cambio tendrás que reestructurar el HTML de tu navbar actual. Pero cabe resaltar que también va a reducir en gran medida todas esas clases de ayuda extra que has estado agregando, tratando de arreglar la barra de navegación con Boostrap 3. A mi modo de ver, creo que este cambio valdrá la pena.
3. Nuevo diseño en la documentación
La documentación de Bootstrap siempre ha sido un poco chusca. Para empezar, a veces no sé si consultar en la sección de CSS o en la sección de Javascript, por poner un ejemplo. Esa barra de navegación lateral es un poco meh, ya me entendéis... (Siempre se me olvida utilizar el enlace que te lleva a la parte superior). Ok, por lo que puedes ver en el título de este punto, estamos hablando de un nuevo diseño, es decir, de una nueva organización. Quiero decir, es posible que no veamos necesariamente contenido reescrito.
Puedes echar un vistazo a una vista previa de la documentación de Bootstrap 4 que encontré en Dribbble de uno de los creadores de Bootstrap, Mark Otto.
4. Animaciones y transiciónes en los elementos
Bootstrap nunca ha sido muy rico en cuanto animaciones. Quiero decir, sí, actualmente tienes animaciones para hacer acordeones y similares, pero los que realmente proporcionan un factor sorpresa no están incluidos entre sus funciones. Hmmm, me pregunto si podríamos ver algunos de los efectos de Animate CSS de Daniel Eden.
Las animaciones en Bootstrap 4 de hecho podrían ser su principal atractivo, aunque es un arma de doble filo. Si los usuarios no lo utilizan sabiamente, podemos volver a vivir otra vez en la época de los gifs animados. Es importante saber cuándo usar una animación. Siempre debe hacerse en el contexto adecuado.
5. Un nuevo enfoque en la tematización
Esto es casi los más interesante para mí. Actualmente, si deseas personalizar Bootstrap 3, puedes:
- Reemplazar con archivos RAW CSS (es la manera difícil de hacerlo)
- Personalizar archivos less en la customize page de Bootstrap (otra manera difícil de hacerlo)
- Duplicar las variables less de Bootstrap y sobreescribir el original (la manera más sencilla de hacerlo)
Me pregunto qué van a hacer con esto. Tal vez proporcionen un archivo especial completamente centrado en la personalización de colores, border-radius, etc...
Siempre vas a ser capaz de seguir el flujo de trabajo normal. Así que este cambio debería tener poco impacto si no te preocupa cómo la gente de Twitter te diga cómo hacer un tema.
6. Bonus - Todas las características
Tenemos que aprender a confiar en Twitter Bootstrap. Como he dicho antes, se han ganado la popularidad por mérito propios. Aquí tenéis una lista completa de lo que está por venir:
- Sistema de grid actualizado con al menos un nivel adicional para nuevos dispositivos.
- Nuevo componente para sustituir paneles, miniaturas...
- Una barra de navegación más simple y totalmente nueva
- Cambiar todos los valores de píxeles a rems y ems para establecer tamaños de manera sencilla
- Abandonado el soporte para IE8
- Toneladas de modificaciones para formularios
- Nuevas animaciones y transiciones
- Soporte UMD para nuestros plugins Javascript
- Mejora de posicionamiento JavaScript para tooltips, popovers y dropdowns
- Nuevo diseño de la documentación
- Un nuevo enfoque de la configuración de las opciones de tematización globales.
- Y muchos cambios más...
- ¿Tal vez algo relacionado con stickers? Mira la foto de más abajo...
