Enlace Patrocinado
Antes que nada hay que dividir los frameworks que tienen un propósito general (Bootstrap, Materialize, etc) y los particulares (Animate, Font-Awesome).
Bootstrap: Sin dudas el más popular, más utilizado y completo. Fue creado por Twitter, quién lo mantiene al día de hoy. Es altamente eficiente para diseño responsivo, ya que tiene la filosofía del «mobile first«, además de clases que le añaden un diseño elegante a tu interfaz.
Ventajas: Las clases se aplican de manera muy sencilla y es muy fácil de usar. Utiliza flexbox y un sistema de columnas muy trabajado que permite aplicar un diseño responsivo complejo en pocas líneas. Tiene un larga colección de componentes, cualquier elemento que necesites estilizar ya su clase de bootstrap, que se inserta fácilmente en tu html, o en cualquier framework JS.
Hay que destacar que Bootstrap te permite lograr un acabado profesional que sólo conseguirás teniendo conocimientos sólidos de UI/UX y sobre todo tiempo. A mi entender, ésta es su mayor ventaja, permitir que programadadores con conocimientos mínimos de diseño logren un resultado final profesional.
Desventajas: Todas tus páginas se verán muy monotonas y repetitivas. Por eso todas las webs que lo usan se ven parecidas. Para evitar esto, hay variantes llamadas Bootswatch, donde puedes personalizar los temas de Bootstrap usando la misma sintaxis.
No puedes modificar sus clases, es decir, por más mínimo que sea el cambio que necesites, no tendrás otra opción que hacerlo desde cero con CSS puro. Puede parecer una desventaja poco importante pero, por ejemplo, si estás haciendo un diseño resposivo, no puedes manejar el tamaño de píxeles que Bootstrap considera dispositivos pequeños, medianos, grandes y extra grandes. Entonces se vuelve un «tómalo o déjalo».
Para mi, la desventaja más importante es la verbosidad. Una de las primeras buenas prácticas que aprendemos es a mantener el html, css y js en archivos separados para mejorar y escalar su mantenimiento, pero con los frameworks css no queda otra opción que incluir una cantidad impresionante de clases al html, esto lo vuelve más parecido al «estilo en línea» de la vieja escuela.
Materialize: Este framework, creado y mantenido por Google, es muy similar Bootstrap por eso la elección final termina siendo un tema de gustos. Tiene las mismas ventajas y desventajas, por eso no voy a extenderme. Si quieres que tu web tenga un aspecto material como las de google, entonces esta es tu opción.
Foundations: Otro de los grandes, tiene una comunidad mucho menor que el resto pero muy fiel. Tiene características avanzadas, que permiten que se adapte mejor al mundo empresarial o grandes proyectos, tiene muchas más utilidades a la hora de hacer diseño resposivo, esto permite controlar mucho más la forma en que el contenido se va adapatando a las distintas pantallas. Además de traer funcionalidades extras como Foundations Emails (para el manejo del diseño de correos) o Foundations Site (que permite crear landing pages con facilidad). ¿Estos son ventajas o desventajas? Foundations trae características más avanzadas y profesionales que el resto, podría parecer una ventaja, pero no nos olvidemos que la utilidad de un framework CSS está en la simpleza y agilidad para crear diseños elegantes, entonces apunta a un público más empresarial que freelance individual. Entonces no olvidemos que las empresas con cierta estructura tienen su propio equipo de diseño que no va a estar limitada a las prestaciones de un framework.
Pure CSS: Otro al estilo de los anteriores, por eso no me voy a extender. Aunque hay que destacar que tiene la particularidad que se puede importar sólo lo necesario, lo que mejora considerablemente su rendimiento. Por ejemplo, si sólo voy a hacer formularios importo su librería de formularios y no todo el framework completo.
Animate CSS: Este es un framework (o microframework) utiliza exclusivamente para hacer animaciones con CSS. Es muy interesante, porque te permite darle a tu web de animaciones complejas, con pocas líneas o un «copy-paste». Se combina muy bien con otros frameworks ya que no se superponen.
Font-Awesome: Es un framework pequeño pero poderoso que inserta íconos, como por ejemplo, el bote de basura para eliminar o el lápiz para editar. Es muy interesante que con una línea de código puedes crear un ícono sencillo sin tener que importar una imagen png, ni tener que hacer diseños de íconos propios. Tiene una versión gratuita con un paquete básico de íconos, y la versión de pago donde tienes acceso a una librería mucho más extensa.
Para finalizar, otros para tener en cuenta porque están en crecimiento son Bulma y Tailwind CSS.
At the beginning, I was still puzzled. Since I read your article, I have been very impressed. It has provided a lot of innovative ideas for my thesis related to gate.io. Thank u. But I still have some doubts, can you help me? Thanks.