En esta colección vamos a incluir los frameworks CSS actuales más importantes, los más usados por la comunidad y que ofrecen un estilo de desarrollo moderno.
Lo cierto es que la idea de framework CSS ya viene de lejos y llevan con nosotros más de una década, pero en la actualidad pocos son los frameworks que pueden competir en el mercado, ya que este tipo de herramientas ha evolucionado mucho, junto con el propio lenguaje, y se han hecho muy completos y sofisticados.
Tailwind CSS
Este es un framework CSS que ofrece un enfoque diferente que otros como Bootstrap. Tailwind CSS en realidad no tiene muchos componentes, sino clases de utilidad que aplicar directamente sobre el CSS. Estos frameworks se llaman también "utility first" y ofrecen estilos CSS atómicos. Aunque también permite crear componentes, lo deja más del lado del desarrollador, que los podrá personalizar a su gusto.
Tailwind CSS tiene la característica de se muy maleable y adaptarse muy bien a lo que el desarrollador necesite. Con el framework puedes hacer builds de clases CSS totalmente personalizadas, que se parezcan o no a las que se ofrecen de manera predeterminada.
https://github.com/tailwindlabs/tailwindcss
Puedes consultar el Manual de Tailwind o la categoría de Tailwind CSS en DesarrolloWeb.
Bootstrap
Es el framework CSS más popular, en 2020, usado en infinidad de proyectos de todo tipo. Cuando apareció creó una tendencia de frameworks basados en componentes, capaces de implementar temas de diseño completos y complejos, aportando mucha sencillez y agilidad al desarrollo CSS y dotando a los programadores de herramientas para crear diseños consistentes con poco esfuerzo.
Durante sus años de existencia ha evolucionado mucho, incorporando novedades del estándar de CSS con rapidez y eliminando dependencias pesadas como jQuery que a día de hoy es innecesario en la mayoría de los proyectos.
Es muy común que las solicitudes de empleo se pida Bootstrap, ya que es una herramienta usada por muchas empresas.
Materialize CSS
Materialize es un framework CSS que implementa el tema de diseño "Material Design". Ofrece componetes material listos para usar, que se pueden integrar de una manera cómoda en los sitios web, consiguiendo un diseño guiado por las directrices de aplicaciones y sitios de Google.
Crea diseños consistentes que son fáciles de entender y familiares para los usuarios en general. Tiene muchos componentes que también implementan comportamientos dinámicos con Javascript y recientemente se actualizó para eliminar su dependencia con jQuery.
El framework es sencillo de usar, relativamente ligero, permite optimización y los componentes están altamente personalizados en su diseño.
Bulma
Este es un framework CSS basado en componentes que usa Flexbox de manera precisa para simplicidad del código.
Los componentes de Bulma son CSS puros, es decir, no tiene el set de componentes que requieren Javascript para funcionar. No obstante, tiene un montón de extensiones que sí incluyen componentes de todo tipo, dinámicos y con Javascript, usando varios frameworks, creados por terceros. Es sencillo de usar y de aprender y permite un desarrollo moderno.
Foundation
Con Bootstrap y Materialize, Foundation es uno de los frameworks CSS basados en componentes más importantes del momento. Tiene muchos seguidores y mantiene una base de código que se actualiza con frecuencia para incorporar las novedades de CSS.
A diferencia de otros frameworks CSS ofrece un subset de sus herramientas orientado a la creación de emails, que tienen características de desarrollo distintos que los sitios web. Ofrece un set de herramientas para poder optimizarlo correctamente y construir un build que incluya solamente los componentes que se desean.
Open Props
Open Props no es justamente todo lo que se espera de un framework, pero sí unas utilidades para el diseño consistente de componentess.
Se ajusta a cualquier framework que puedas usar, así como a el desarrollo con CSS puro y lo que ofrece son unas declaraciones de variables CSS que permiten el uso de un diseño consistente de los sitios web en general y componentes CSS de un diseño.
DaisyUI Components
Esta es una biblioteca de componentes creados en base al framework Tailwind CSS. Por tanto, no es un framework por si solo, sino una colección de componentes que puedes usar si estás desarrollando con Tailwind.
Si comparamos Tailwind con un framework CSS como Bootstrap, la parte que le falta Tailwind CSS es justamente disponer de componentes ya listos, algo que sí te ofrece cuando usas DaisyUI.
La ventaja de DaisyUI, aparte de quitarte mucho trabajo de creación de componentes, es aportar una consistencia al tema de diseño sin dejar de lado la personalización de los componentes. Para usar DaisyUI lo tienes que instalar como un plugin de Tailwind.
Semantic UI
Semantic UI es un framework CSS basado en componentes que tiene la característica de permitir el uso de distintos temas de diseño para variar el look and feel de los componentes disponibles.
Además de funcionar como framework CSS sus componentes también tienen funcionalidades que se ejecutan mediante Javascript. Los componentes Javascript están basados en jQuery.
Beer CSS
Es un framework CSS para implementar las guías de diseño de Material Design 3. Según dicen su objetivo es que puedas usar Material Design de manera sencilla, sin estress.
En realidad es un proyecto relativamente nuevo, pero ha tenido buena acogida de la comunidad y como es nuevo implementa la versión más reciente de Material Design.
Tachyons
Es un framework CSS basado en clases de utilidad, con CSS atómico. El mismo enfoque que Tailwind CSS. La diferencia es que este framework está pensado para ser ligero y sencillo, con un CSS poco pesado (aproximadamente 14KB) que se puede usar sin necesidad de herramientas de optimización.
Le echaré un vistazo, aunque en clases de utilidad Tailwind ya se ha llevado la comunidad hacia ellos.
June CSS
Se trata de un framework CSS ligero pero con bastantes utilidades para páginas responsive. No solo contiene las funciones habituales, sino además opciones vanguardistas y muy modernas, nada habituales en un framework de CSS, realizado en España y gratuito.
Responsive, modo claro y oscuro, menú en escritorio, menú hamburguesa para móviles, toolTipTexts, Badges, switches con unicode, loaders... Pensando para personas con problemas de visión o presbicia.
Tiene tantos adoradores como detractores, pero es el único framework que merece realmente la pena para quienes dominan CSS.