¿Que necesitas?


Cuéntanos que tienes en mente y te contestaremos lo mas rápido posible con un presupuesto sin compromiso.

Introduce tu nombre completo.

Invalid email address.

Invalid Input

Invalid Input

Invalid Input

Valor incorrecto

Solicita presupuesto
Viernes, 25 Septiembre 2015 07:29

Llega Bootstrap 4

 

Hace unos días se lanzó la cuarta versión de Bootstrap, el famoso framework para crear sitios webs responsivos. Nosotros hemos echado un ojo para ver cuales son las novedades mas importantes que trae (aunque aun se encuentra en fase alpha). Comencemos.

Cambio de Less por Sass

Bootstrap en esta nueva versión ha optado por dejar fuera Less y utilizar Sass como preprocesador. Hasta ahora en las versiones antiguas se utilizaba Less y en la pasada versión (Bootstrap 3) se incluyó Sass, por lo que en la antigua los dos convivían juntos, pero en esta nueva versión solamente tendremos Sass.

Esto es debido a que Sass la compilación es mucho mas rápida, además Sass se ha hecho muy popular últimamente.

 

Soporte para IE 8 Eliminado

Han pasado ya bastantes años desde el lanzamiento de IE8 y ya era hora de eliminar el soporte para este navegador, simplemente porque limitaba mucho el trabajo de los desarrolladores y los hacks y arreglos para que nuestras webs se vieran correctamente en él eran constantes.

En mi opinión (y creo que en la de cualquier diseñador web) ya era hora de que esto ocurriera, por si alguien tenía dudas, IE no me entusiasma demasiado y es mas un quebradero de cabeza que otra cosa, esto es solo mi opinión personal basada en la experiencia que tengo en el día a día, pero como se suele decir, para gustos los colores.

 

Reboot sustituye a Normalize

En las versiones anteriores, para modificar los estilos css que los navegadores llevaban implícitos utilizábamos un archivo llamado normalize.css. Pero en la nueva versión Bootstrap 4, ha aparecido Reboot para tener todos los selectores genéricos y estilos reseteados en un solo fichero SCSS.

Algunas razones por la que se ha tomado esta decisión son:

  • Actualizar algunos valores de los navegadores para utilizar "rem" en vez de "em" para el contenido escalable de los componentes.
  • Evitar "margin-top". Los márgenes verticales pueden colapsar generando resultados inadecuados.
  • Para escalar mas fácilmente los tamaños entre los dispositivos, se deberán utilizar rem para los margenes.
  • Mantener la declaración de las fuentes al mínimo, utilizando "inherint" tanto como sea posible.

 

Grid utilizando REM

En principio, si lo miramos a vista de pájaro parece que no ha cambiado nada, ya que la forma de maquetar es la misma, la sintaxis no ha cambiado. Pero si lo ha hecho ahora el ancho, márgenes y demás viene definido por unidades "rem", no por píxeles.

La unidad "rem" calcula el tamaño de la fuente de forma relativa al elemento html. Por lo tanto, cuando cambiamos la fuente todo se ajustará proporcionalmente.

 

Mejorados Media Queries Entre Dispositivos

Ahora los media queries viene dados en "em s", esto es porque así los elementos se escalan según el tamaño del navegador de usuario que está visualizando la web. Los "rem s" aquí no funcionan porque necesitan tener una base definida en el css, en vez de eso cogerá siempre 14px o 16px según el navegador.

 

Nuevas Clases

Bootstrap tenía unas clases definidas para cambiar cosas muy básicas de forma rápida, como por ejemplo ".clearfix". Ahora Bootstrap 4 trae nuevas clases para facilitarnos el trabajo, podéis verlas todas aquí. Casi todas las nuevas clases sirven para manejar margin y padding, esto es para que sea mucho mas fácil y rápido modificar estos estilos sin tener que estar creando clases específicas.

 

Bye Bye Glyphicons, Bienvenido Font Awesome

La gran mayoría de diseñadores utilizamos font awesome y en las nueva versión de bootstrap, se incluirá la documentación para su utilización.

 

Clases para las cabeceras

Estas clases nos permiten cambiar el tamaño de la fuente de nuestras cabeceras inmediatamente sin cambiar el tag en sí, esto es algo muy muy útil, porque según la web que estemos desarrollando las cabeceras suele se lo que mas cambia dependiendo de la sección en que nos encontremos. Actualemente tenemos 4 tamaños:

  • display-4
  • display-3
  • display-2
  • display-1

A mayor número, mayor es el tamaño de fuente.

 

Tablas invertidas y Botones Outline

Podremos invertir el color de la tabla con una simple clase "table-inverse". Y además tendremos unos nuevos botones sin relleno, botones normales pero con los colores invertidos.

 

Plugins Pasados a JS6 EcmaScript6 (ES6)

Los plugins de Bootstrap 4 han sido pasados a Javascript 6

 

En definitiva, creo que esta renovación nos va a permitir acelerar bastante el trabajo a la hora de diseñar y maquetar nuestras webs. Sinceramente a mi me encanta bootstrap por la cantidad de trabajo que ahorra y el gran abanico de posibilidades que te brinda, una web puede ser tan bonita como creativo sea su diseñador.

En breve ira saliendo toda la documentación de la actualización del framework, os dejo por aquí en enlace para que podáis ir echando un ojo periódicamente. Bootstrap 4

 

Deja un comentario

Asegúrate de llenar la información requerida marcada con (*). No está permitido el código HTML. Tu dirección de correo NO será publicada.

Utilizamos cookies propias y de terceros para mejorar nuestros servicios y su experiencia de usuario.
Ver política