Nota de Platzi: Aún no se sabe exactamente cuándo tendrá lugar el lanzamiento oficial de Bootstrap 4, pero su versión alpha promete mucho. En este guest post, nuestro estudiante Juan Castro Lurita comenta unos de los features nuevos que más han llamado su atención.
Bootstrap es quizás uno de los Frameworks Frontend más populares del medio; desde su aparición en el 2011 ha sido usado por miles de desarrolladores en sus proyectos personales o profesionales. El tiempo pasa, todo avanza y Bootstrap no se queda atrás. Nuestros amigos
fanáticos de la banda REO Speedwagon están trabajando en muchos cambios y novedades para su próxima versión, Bootstrap 4. En este artículo voy a contarles 10 novedades muy interesantes que probablemente incorporará.
1.- Soporte para Flexbox
Este sistema es incorporado en Bootstrap 4, con el beneficio de que ahora mediante Flexbox podemos hacer que los elementos tengan un height automático y se adapten a todos los dispositivos sin problemas. Si bien ya se podía hacer desde la versión 3 o con CSS3 puro, esta es una nueva opción para poder hacerlo. Esta funcionalidad aún no está compatible con Internet Explorer 9, por ello está como opcional: la podemos habilitar o desactivar abriendo el archivo _variables.scss que viene en la versión de Bootstrap con Sass. Puedes ver el archivo _variables.scss con esta y demás opciones disponibles en su repositorio
GitHub.
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-flex: false !default;
$enable-rounded: true !default;
$enable-shadows: false !default;
$enable-gradients: false !default;
$enable-transitions: false !default;
$enable-hover-media-query: false !default;
$enable-grid-classes: true !default;
$enable-print-styles: true !default;
Sobre el mismo tema: Crear layouts increíbles con Flexbox con el Curso de Desarrollo Web Online 2.- Paneles contenedores para tarjetas
Esta funcionalidad ya existía en Google Material Design y también se podía emular con CSS puro o con plugins adicionales, pero ahora Bootstrap 4 lo integra nativamente en su core.
3.- Abandono de soporte para Internet Explorer 8
Bootstrap no se puede detener, y seguir las nuevas tendencias de desarrollo supone dejar atrás cosas que alguna vez dieron vida a una página web. A partir de Bootstrap 4 se hará un mejor uso de las transiciones, animaciones, efectos mixins, etc. que CSS3 ofrece, dándole paso al futuro de la web. Si deseas seguir soportando Internet Explorer 8 tendrás que seguir usando la versión 3 de Bootstrap y renunciar a las novedades detalladas en este post.
4.- Hola ECMAScript 6
EC6 es incorporada en esta versión. Se han reescrito los plugins JS por completo para así aprovechar las nuevas mejoras y ventajas de JavaScript.
Así mismo se incorpora la programación modular en JavaScript
UMD (Universal Module Definition). Ejemplos de este paradigma son Require JS, React JS y Handlebar JS, entre otros.
5.- Tooltips avanzados con Tether
La revolución de los Tooltips la traerá esta nueva versión de Bootstrap incorporando la librería
Tether. El resultado es que al colocar el puntero sobre un elemento este mostrará de una manera diferente el texto o título correspondiente.
Con esta implementación vamos a poder gestionar e implementar Tooltips más avanzados y así mejorar la usabilidad de nuestra web responsiva.
6.- Nueva unidad de medida (rems) para la tipografía
Podemos darle un tamaño a la fuentes de nuestra aplicación con una nueva medida:
p {
font-size: 14rem;
}
h1 {
font-size: 2.5rem;
}
La principal razón de esta nueva medida es que implementa la tecnología rem off, la cual hace que todos los textos establecidos con la medida rem se amplíen o se vuelvan pequeños según el dispositivo.
7.- Nuevas clases para elementos
Esta novedad es muy cool, ya que podemos añadir padding, margin y más aspectos a nuestros elementos HTML. Por ejemplo así:
<div class="row">
<div class="col-sm-6 m-b-lg">
<!-- columna-pequeña-50%, margin-bottom-grande -->
</div>
</div>
Es muy simple de usar. La sintaxis es la siguiente:
[margin or padding]-[direction]-[size]
Para hacer
Margin or Padding usamos:
- "m" para margin
- "p" para padding
Para darle
dirección a un elemento usamos:
- "a" para todo
- "t" top
- "r" right
- "l" left
- "x" para left y right
- "y" para top y bottom
Para darle
tamaño usamos:
- "0" cero
- "auto" automático
- "md" mediano
- "lg" largo
- Si lo dejamos en blanco usa la medida por defecto.
En esta nueva versión también se añade una nueva clase llamada
outline para los botones, mostrando solo un borde:
Para implementarlos agregamos lo siguiente:
<button type="button" class="btn btn-primary-outline">Primary</button>
<button type="button" class="btn btn-secondary-outline">Secondary</button>
<button type="button" class="btn btn-success-outline">Success</button>
<button type="button" class="btn btn-warning-outline">Warning</button>
<button type="button" class="btn btn-danger-outline">Danger</button>
8.- Glyphicons nos deja
Fueron muchos proyectos hechos con la versión 3 e inferiores que mostraban los iconos de
Glyphicons, pero ahora la gente detrás de Bootstrap decidió dar un nuevo paso y apostar por la librería de iconos
Font Awesome.
Esta librería es la mejor en su género, están constantemente actualizando sus iconos. Hay rumores que podría llegar una versión de pago de Font Awesome, pero Bootstrap 4 nos la brindará de manera gratuita y eso es genial.
Ahora tenemos la medida 21 x 9 para mostrar nuestros iframes u otros elementos:
<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>10.- Adiós al preprocesador LESS, bienvenido Sass
Para los que estaban acostumbrados a trabajar con preprocesadores, la versión 3 contaba con LESS, pero ahora la versión 4 de Bootstrap tendrá el motor
Sass como preprocesador oficial. Este compila más rápido porque cuenta con LIBSASS, una potente librería para que puedas escribir código CSS más rápido y limpio.
Si quieres saber más cambios y novedades por venir en Bootstrap, puedes visitar
esta página en GitHub y enterarte de todos los features en desarrollo. Aunque haya nacido en Twitter, se trata de un proyecto open source y por lo tanto también puedes juntarte a su comunidad y hacer contribuciones.
[maxbutton id="1" url="https://platzi.com/frontend/?utm_source=blog&utm_medium=cta_carrera&utm_campaign=blog-bootstrap"]
