Qué esperar con Bootstrap 4

En los últimos años, Bootstrap se ha vuelto muy popular. Es muy probable que haya encontrado o creado temas de WordPress que incorporan elementos de Bootstrap. Ha evolucionado desde un marco pre-responsivo básico a un marco receptivo robusto, rico en características y moderno. Bootstrap 3 ha existido durante bastante tiempo, por lo que es emocionante aprender sobre lo que viene a continuación en Bootstrap 4.

Estado de Bootstrap 4

Bootstrap 4 está actualmente en proceso y aún no está listo para ser utilizado en producción. Actualmente está en versión alfa. Esta es una buena oportunidad para obtener una vista previa y familiarizarse con la forma en que lo ayudará con proyectos futuros.

La documentación de Bootstrap 4 aún no está completa, por lo que la experimentación es una buena manera de probar algunas de las nuevas funciones. Una vez que esté oficialmente disponible para su uso en producción, estará al tanto de todas las grandes mejoras nuevas.

Diseñado para navegadores modernos

A medida que avanzamos en la web, cada vez es más difícil admitir navegadores más antiguos mientras se usa lo último y lo mejor que el desarrollo web tiene para ofrecer. Ya sea que esto sea música para sus oídos o no, todos podemos estar de acuerdo en que las mejores técnicas de CSS3 se hacen más fáciles cuando se trabaja con navegadores modernos. Bootstrap 4 podría ser la manera perfecta de romper con los navegadores más antiguos. Con esta actualización, la compatibilidad con Internet Explorer 8 se elimina por completo. Tenga en cuenta que el marco aún es compatible con Internet Explorer 9 y CSS3 sin muchos problemas.

Restablecimiento mejorado

Probablemente se haya acostumbrado a Normalize.css, que es una excelente opción de reinicio. Hay un reinicio nuevo y mejorado con cosas específicas de Bootstrap añadidas llamado reboot.css. Los detalles de Bootstrap son cosas como el tamaño de la caja: borde, rems como unidad de medida, estilos de enlace y estilos de formulario. Es una excelente combinación entre Normalize.css y las necesidades específicas de Bootstrap, por lo que seguramente tendrá un gran comienzo.

HABLAR CON DESCARO A

En los días previos a Bootstrap, parecía que se prefería LESS. Con los cambios en la industria y las preferencias de los diseñadores que se inclinan hacia SASS, es lo que está de moda actualmente. Si recuerda la versión 3, fue entonces cuando la opción SASS estuvo disponible con la opción de puerto. A partir de ahora, no hay soporte planificado para LESS.

Personalizaciones

Bootstrap 4 facilita la creación de sus diseños personalizados, todo hecho de forma organizada. Todas las opciones variables se consolidan en un solo archivo. SASS se puede compilar fácilmente y no hay necesidad de una hoja de estilo separada, como ha habido en el pasado.

Hay bastantes nuevas opciones de personalización en Bootstrap 4. Puede ver el estado actual aquí. Lo más probable es que evolucione un poco a medida que se sigan publicando los detalles.

Tenga en cuenta que estas son personalizaciones fáciles de configurar al principio:

• Valores predeterminados del cuerpo
• Variables de color
• Caja flexible
• Opciones de diseño CSS3 como transiciones, esquinas redondeadas, sombras paralelas, etc.
• Mediciones de espaciado
• Estilos de enlace
• Puntos de interrupción de cuadrícula
• Contenedores de rejilla
• Columnas de cuadrícula
• Tamaño de tipografía
• Componentes
• Mesas
• ¡Más!

Flexbox alguien?

Flexbox ciertamente ha crecido en popularidad y veremos más y más diseñadores web usando esto. Es una gran herramienta para usar, ya que proporciona opciones de diseño simples y flexibles con estilo CSS. Si le gusta la facilidad de alinear verticalmente el contenido dentro de un elemento principal, reordenar el contenido entre dispositivos y resoluciones de pantalla con la ayuda de consultas de medios y aprecia una manera fácil de tener columnas de igual altura en su cuadrícula, Flexbox es una gran solución. .

Antes de salir corriendo y convertir todos sus proyectos, hay algo importante que mencionar. Aunque la compatibilidad con los navegadores ha aumentado drásticamente, Internet Explorer 9 todavía carece de compatibilidad con Flexbox. En lo que respecta a la facilidad de uso, Bootstrap 4 facilita el uso de Flexbox si no necesita compatibilidad con IE9. Esencialmente, todo lo que tiene que hacer es encontrar el archivo _variables.scss y cambiar $enable-flex de falso a verdadero. Si está familiarizado con SASS, esto es algo rápido de hacer.

Actualizaciones de cuadrícula

Si ha sido fanático de Bootstrap durante mucho tiempo, probablemente sea un experto en cómo funciona el sistema de cuadrícula, junto con la convención de nomenclatura. Con Bootstrap 4, la sintaxis permanece igual pero hay una diferencia con las medidas utilizadas. El sistema de cuadrícula ahora se basa en "rems". Este es un ajuste si está acostumbrado a diseños perfectos de píxeles, ya que ahora las cosas serán más fluidas.

Al separarnos de los píxeles a los que nos hemos acostumbrado tanto, echemos un vistazo al ejemplo de algo común como .container y .row. El contenedor ahora tiene un conjunto de ancho máximo en rems. Una fila tiene un margen izquierdo y derecho negativo predeterminado de -.9375rem , mientras que las columnas tienen un margen izquierdo y derecho predeterminado de 0.9375rem . Como recordará, estos valores eran anteriormente de 15px en Bootstrap 3. Estos nuevos valores rem son comparables a eso.

Consultas de medios mejoradas

Las consultas de medios en versiones anteriores de Bootstrap eran un poco generales y, a veces, debían crearse consultas personalizadas. Así es como se veían:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Ahora, se puede adoptar un enfoque más móvil con estas consultas de medios actualizadas:

// Small devices (landscape phones, 34em and up)
@media (min-width: 34em) { ... }

// Medium devices (tablets, 48em and up)
@media (min-width: 48em) { ... }

// Large devices (desktops, 62em and up)
@media (min-width: 62em) { ... }

// Extra large devices (large desktops, 75em and up)
@media (min-width: 75em) { ... }

Si desea algo diferente, los puntos de interrupción se pueden configurar en SASS si desea elegir el suyo propio.

Tarjetas como reemplazo

¿Está familiarizado con paneles, pozos y miniaturas? Las tarjetas ahora son las mejores y más recientes, y ofrecen excelentes opciones de estilo. Un ejemplo son los Grupos de tarjetas. Aunque la cantidad de texto varía, las tarjetas tienen la misma altura, sin depender de JavaScript. Esto funciona tanto con Flexbox como con el modo de cuadrícula predeterminado. Al usar Flexbox, las tarjetas se construyen usando las propiedades de Flexbox. La cuadrícula predeterminada utiliza un truco de CSS para evitar la necesidad de JavaScript. El contenedor usa display: table; y cada "tarjeta" se display: table-cell; dándole las propiedades de la tabla: aquí es de donde proviene la altura de columna igual.

Tipografía

¿Recuerdas cómo la grilla ahora usa rems? Bueno, ¡tiene sentido que la tipografía también haga eso! Cuando piense en esto, recuerde que todos los tamaños de fuente son relativos al elemento raíz, la etiqueta HTML. Cuando cambia el tamaño de la fuente (o cualquier otro estilo) en la etiqueta HTML, puede diseñar y escalar estilos fácilmente en todo su proyecto.

Supongamos que su elemento HTML tiene un estilo con un font-size: 16px . Digamos que desea que sus etiquetas h5 tengan ese tamaño, declararía un tamaño de fuente de 1 rem.

h5 {
font-size: 1rem;
}

Ahora, puede haber algunas matemáticas involucradas en el futuro. Si quería que sus etiquetas h1 fueran de 40 px, aquí le mostramos cómo resolverlo:

h1 {
font-size: 2.5rem; /* 16 * 2.5 = 40px */
}

¿Todavía no te sientes rem? Todavía puede usar píxeles y ems para dimensionar si lo desea.

Más estilos de títulos

Los encabezados son excelentes para establecer una jerarquía. Pero, ¿qué pasa si quieres algo más prominente que un h1, h2, h3, etc.? Bueno, la buena noticia es que puede agregar una clase de encabezado de visualización a un encabezado estándar que lo hace más grande. Se vería algo como:

<h1 class="display-4">Heading Display 4</h1>

Una display-4 es más grande que una display-2 .

Tamaño de archivo más pequeño

Bootstrap 4 tiene una huella más pequeña. En realidad, es aproximadamente un 30% más pequeño que la última versión, Bootstrap 3. Anteriormente, tenía alrededor de ~123kb y ahora es de ~88kb. Es increíble que sea más pequeño y aún tenga las mismas excelentes características.

Tenga en cuenta que existe la opción de usar solo las partes de Bootstrap que necesita, lo que hace que el tamaño de los archivos sea aún más pequeño.

¿No más Glyphicons?

Los Glyphicons se usaron ampliamente en versiones anteriores de Bootstrap, por lo que es triste verlos desaparecer. No se preocupe, este no es el final de los íconos web. En su lugar, FontAwesome debería servirle igual de bien. También puede consultar Octigons de Github para obtener excelentes opciones de íconos.

Pasando a Bootstrap 4

Si bien actualmente se encuentra en alfa, no hay ninguna razón por la que no pueda trabajar con él en un entorno de prueba. El código fuente está disponible en una rama v4-dev en GitHub. A medida que experimenta y ve algo que necesita atención, hay una solicitud de extracción de desarrollo y seguimiento que incluye notas sobre los cambios y cualquier otra mejora nueva.

Las cosas están en alfa, y eventualmente habrá versiones beta después de que las características y la funcionalidad estén listas para ser probadas. Después de la versión beta, se utilizarán dos versiones candidatas para probar las cosas en producción. Cuando todo vaya bien, ¡el lanzamiento final estará listo!

Acabamos de arañar la superficie aquí y la conversación sobre Bootstrap 4 acaba de comenzar. Es emocionante ver lo que depara el futuro y me emociona verlo salir de alfa. Asegúrese de estar atento a las actualizaciones y descargue una copia para probar los nuevos componentes de Bootstrap 4.