Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

¿Qué Frameworks CSS serán tendencia en 2020?

Pablo Huet Carrasco
  • Escrito por Pablo Huet Carrasco el 26 de Julio de 2020
  • 4 min de lectura Frameworks
¿Qué Frameworks CSS serán tendencia en 2020?

Actualmente son muchos desarrolladores los que buscan formas fáciles de ejecutar diseños atractivos y que, a la vez, tengan un comportamiento responsive adecuado o simplifique algunas tareas habituales que resultan tediosas con el uso de CSS puro.

Por ello cada día más desarrolladores tienden al uso de frameworks CSS que, al igual que frameworks de backend como Spring en Java o Codeigniter en php, suministran al desarrollador frontend una serie de herramientas rápidas que aceleran enormemente el prototipado y desarrollo de soluciones y aplicaciones web de todo tipo.

A continuación veremos algunos de los frameworks CSS más valorados y mencionados para la creación de interfaces en este año 2020.

Top Frameworks CSS en 2020

Bootstrap

Si se habla de frameworks CSS es imposible no incluir al framework por antonomasia, siendo este el más usado, fácil de aprender y conocido hasta la fecha, y probablemente el que más funcionalidades ofrece.

Imagen 0 en ¿Qué Frameworks CSS serán tendencia en 2020?

Aunque inicialmente surgió como una solución híbrida HTML-CSS-JS para el prototipado rápido de webs de diseño responsive, actualmente en su versión 4 prácticamente todas sus características principales son dependientes del uso de CSS3 con flexbox. Entre sus principales características podemos encontrar:

  • Un sistema de grid responsive - Su sistema de grid permite situar los elementos en distribuciones que se adecúen a cada resolución de pantalla, de esta forma es posible crear contenedores con distribuciones horizontales que se transformen en verticales en un dispositivo móvil, que desaparezcan o incluso que cambien su ordenación.
  • Un sistema de clases y elementos predefinidos - Mediante el uso de clases en los elementos HTML es posible darle de forma rápida diferentes comportamientos y estilos a nuestros elementos, ya sean para el responsive o para obtener rápidamente botones o tarjetas con estilos resultones y flexibles.
  • Se encuentra escrito en Sass - El CSS de bootstrap está escrito en el preprocesador Sass, lo que permite descargar su código fuente y utilizar la potencia de este lenguaje de preprocesador para cambiar las variables de color y crear temas totalmente personalizados para nuestros componentes de bootstrap.
  • Tiene integraciones con los frameworks frontend más populares - Tanto en React, como en Angular o Nuxt (El framework de Vue) podemos encontrar adaptaciones directas que integran Bootstrap en componentes escritos para dichos en los lenguajes de interfaces de dichos frameworks, haciendo su inclusión más rápida y sencilla.

Bulma

Bulma es otro framework de CSS que se cuentan entre los más populares, al igual que la versión actual de Bootstrap, Bulma se base en la potencia de flexbox para gestionar sus comportamientos responsive.

Imagen 1 en ¿Qué Frameworks CSS serán tendencia en 2020?

Más allá de su parecido con Bootstrap también aporta ideas novedosas, como el uso de la semantización en los nombres de clase (Por ejemplo usando la clase is-fluid para indicar que la etiqueta dada se expanda), o utilizar estilos mínimos para componentes como los formularios para así mantener un aspecto cross-compatible entre navegadores. Sus características principales incluyen:

  • Totalmente responsive - Su diseño no solo está pensado para ser totalmente responsive sino que se basa en una filosofía mobile-first para facilitar la correcta visualización del contenido en dispositivos móviles.
  • Diseño modular - Los paquetes Sass de Bulma se encuentran divididos en funcionalidades, de forma que es posible importar únicamente el paquete de funcionalidades que necesites para tu proyecto, facilitando así el poder controlar el tamaño final de nuestro bundle.
  • Se basa en Flexbox - A diferencia de otros frameworks, todas las características relacionadas a la distribución y ordenación de los elementos se basan en un desarrollo basado en la implementación moderna de Flex en CSS. De esta forma al no depender de ninguna “magia negra” de las disponibles en CSS su comportamiento es más natural y previsible.

Foundation

Este framework, aunque de filosofía similar también a bootstrap e igualmente escrito en Sass, es uno de los más completos a día de hoy, ofreciendo una gama de componentes prediseñados mucho mayor que su competencia.

Imagen 2 en ¿Qué Frameworks CSS serán tendencia en 2020?

Foundation ofrece ciertas características que nos recuerdan a Bulma, como es el acercamiento a la filosofía “mobile-first”, o una profunda semantización para reducir verbosidad en las clases a favor de la simplicidad y la pulcritud. Aparte de las similitudes, Foundation también nos ofrece ciertas propuestas interesantes:

  • Su peso es muy reducido sin perder funcionalidades - A diferencia de Bootstrap, cuyo bundle CSS minimizado pesa 138KB, el bundle CSS de la versión más actualizada de Foundation pesa tan solo 114,36KB, ofreciendo sin embargo prácticamente el mismo número de utilidades que este.
  • Tiene una versión dedicada a emails - Si alguna vez has trabajado diseñando emails sabrás lo tediosa y complicada que puede llegar a ser esta tarea, ya que, ni todo el código CSS está permitido, ni se pueden usar hojas, y el soporte y visualización de cada propiedad CSS varía enormemente entre clientes de correo. Por ello Foundation ofrece una versión de su Framework dedicada únicamente para crear emails personalizados, que resulten en una visualización sólida, segura y compatible entre clientes.
  • Facilita la accesibilidad web - Los códigos de ejemplo y de copiar y pegar para cada uno de los componentes suministrados por el framework cuentan con los atributos ARIA y con las etiquetas “role” que garantizan su uso en cualquier dispositivo por cualquier persona independientemente de sus limitaciones.

Animate.CSS

Animate.CSS es un framework particular, ya que, en vez de centrarse como los anteriores en la distribución y adaptación de los elementos en diferentes formatos, sus funcionalidades giran en torno a la introducción de animaciones CSS predefinidas en nuestros elementos HTML.

Imagen 3 en ¿Qué Frameworks CSS serán tendencia en 2020?

Animate se caracteriza principalmente por proporcionarnos una serie de animaciones CSS que serán cross-compatibles, optimizadas y personalizables, y que simplemente se pueden usar añadiendo una clase a cualquier etiqueta HTML que queramos animar. La selección disponible es muy amplia, permitiendo incluso fusionar diferentes animaciones para obtener resultados más originales. El uso de Animate tiene ciertas ventajas muy atractivas para añadir a cualquier proyecto:

  • Hay una enorme variedad disponible - Con más de 50 animaciones diferentes, Animate.css sin duda puede ser un gran set de herramientas para cualquier proyecto donde el afinado visual y la presentación sea requisito indispensable.
  • Son completamente personalizables - Es posible personalizar tanto duraciones de la animación, como el retraso de las mismas, así como detalles más concretos como el encadenar diferentes animaciones en un mismo elemento.
  • Son compatibles - Otra cosa atractiva es la compatibilidad nada más añadirlas, lo que nos asegura que se visualizarán y comportarán igual en todos los navegadores compatibles.
  • Funcionan en navegadores sin javascript - Algunos navegadores pro-privacidad o algunos entornos empresariales suelen desactivar la mayoría de los scripts javascript por cuestiones de seguridad. Usando este framework nos aseguraremos de que las animaciones, al encontrarse escritas en keyframes de CSS, sigan activas.

PaperCSS

Finalmente y como adición original tenemos este framework que tiene una gran popularidad pero que se define a sí mismo como “El framework CSS algo menos formal”.

Imagen 4 en ¿Qué Frameworks CSS serán tendencia en 2020?

PaperCSS, tal y como él mismo indica en su slogan, es un framework con todas las características esperables de los anteriores que hemos visto pero con una característica especial: Está diseñado para tener un aspecto informal. Sin embargo, este estilo tan curioso ha hecho que gane muchos adeptos a la hora de generar páginas rápidas con un aspecto moderno pero desenfadado.

Aunque no presenta tantas ventajas ni funcionalidades como el resto de frameworks anteriormente vistos, su curioso diseño y su pequeño peso de bundle lo hacen ideal para generar, por ejemplo, webs documentales atractivas.

Futuro de los Frameworks CSS

En este caso, y para poder evaluar la situación actual de los tres frameworks principales mencionados anteriormente (Bulma, Bootstrap y Foundation) podemos utilizar un scrapper como este, para comparar estos tres proyectos y obtener, con unos cuantos retoques de datos extraídos de otras fuentes fiables, la siguiente tabla comparativa:

Imagen 5 en ¿Qué Frameworks CSS serán tendencia en 2020?

Lo primero y rápidamente observable es como Bootstrap tiene una popularidad claramente mayor que los otros proyectos, con una cantidad de descargas superior a los dos millones en NPM por semana y una gran cantidad de estrellas en su página de GitHub.

El segundo detalle interesante es que, y aparte de la clara superioridad de Bootstrap en el ecosistema, Bulma, siendo más joven, ya parece encontrarse superando a Foundation ampliamente en tanto a descargas como en popularidad, aunque con un mayor índice de incidencias abiertas, lo que también es natural en un producto tan relativamente reciente.

Todo esto parece indicar que en el futuro Bulma seguirá creciendo sobre todo como una alternativa más ligera a Bootstrap para proyectos basados en el “responsive design”, mientras que Foundation parece que irá declinando en favor de las opciones existentes o las novedades que puedan ir apareciendo.

Pero lo que es seguro es que la forma más sencilla de mantenerse actualizado sobre estas tecnologías y las venideras es echarle un vistazo a nuestros cursos de frontend ¡Seguro que alguno encaja con tus necesidades!.

Relacionado

Te dejamos una selección de cursos, carreras y artículos

Frontend Developer Profesional

Frontend Developer Profesional

carrera

Incluye 17 cursos:

  • Curso de Polymer
  • Curso de React JS
  • Optimización Web en el Navegador

y 14 cursos más!

Duración: 63 horas y 1 minuto

Curso de HTML5 y CSS3

Curso de HTML5 y CSS3

curso

Con este curso aprenderás:

  • Aprenderás lo qué es HTML y CSS.
  • Conocerás la estructura de una página Web.
  • Podrás añadir todo tipo de contenido a dichas páginas web.

Duración: 4 horas y 21 minutos

Curso de Flexbox y CSS Grid

Curso de Flexbox y CSS Grid

curso

Con este curso aprenderás:

  • Conocerás toda la potencia de los nuevos contenedores que nos proporciona CSS3.
  • Conocerás las posibilidades de los contenedores FLEX.
  • Aprenderás las características de los contenedores GRID.

Duración: 2 horas y 2 minutos

Más de 300 empresas confían en nosotros

Oesia
Vass
Everis
Ayesa
Altran
Ibermatica
Atmira
GFI
Accenture
GMV
Concatel
Telefonica
Caser
Banco de España
kpmg
Mapfre
Randstad