Hoy en día, el marco CSS que prioriza las utilidades es tendencia entre los desarrolladores frontend, ya que ha demostrado ofrecer un flujo de trabajo sólido y archivos CSS de salida mínima.

Aquí, en este artículo, enumeraremos los mejores marcos CSS funcionales y de utilidad. Algunos de ellos son bastante nuevos y todavía WIP, otros ya tienen una rica base de usuarios y un fuerte apoyo de la comunidad.

1- Viento de cola

La biblioteca Tailwind es una utilidad funcional popular que es el primer marco CSS responsivo. También viene con docenas de proyectos respaldados relacionados impulsados ​​por su sólida comunidad.

La biblioteca Tailwind admite flexión de forma predeterminada, viene con clases de colores fuertes y soporte de sombras. También ofrece un gran soporte para el modo oscuro/nocturno, esquinas redondeadas y tipografía.

Además, le ayudará a limpiar todo el CSS no utilizado mientras compila la versión final.

Tailwind funciona bien con todos los marcos de JavaScript populares como React, Vue, Angular y Blade. Lo usé en varios proyectos con Meteor Blaze.

La comunidad de Tailwind es muy amplia, ya que sus usuarios siguen impulsando nuevos proyectos, bibliotecas, plantillas y temas basados ​​en Tailwind.

2-Windi CSS

Windi CSS es un marco CSS de próxima generación basado en utilidades. Es similar al marco Tailwind. Ofrece herramientas CLI, extensión VSCode, compatibilidad con Vite, Webpack, Sevlte y StencilJS.

Windi CSS admite RTL de forma predeterminada, modo oscuro, diseño responsivo y ofrece numerosos complementos oficiales.

3- Taquiones

Taquiones es un marco CSS funcional mínimo y liviano para crear diseños e interfaces de usuario responsivos. A diferencia de Tailwind y Windi, no requiere una configuración extensa ni requiere la instalación de complementos PostCSS adicionales.

El equipo de Tachyons te ofrece una colección de fragmentos y código reutilizable que puedes utilizar fácil y libremente en tus proyectos.

4- Bajo

bajocss es un conjunto de herramientas CSS de bajo nivel, es una colección liviana de utilidades inmutables diseñadas para brindar velocidad, claridad, rendimiento y escalabilidad.

Basscss le permite crear diseños responsivos fácilmente, ya que admite flexbox, columnas responsivas y cuadrículas de forma predeterminada.

Es una solución ideal para sitios web responsivos creativos, con menos efectos secundarios y aplicaciones híbridas móviles y de escritorio.

5-Pico

pico es un marco CSS mínimo y ligero para semántica. Te permite crear estilos elegantes sin necesidad de utilizar .classes mucho. No requiere dependencias externas, complementos de configuración, archivos externos o bibliotecas de JavaScript.

Pico viene con soporte integrado para temas oscuros, diseños AMP y ofrece RTL para el idioma árabe de forma predeterminada.

También puedes hacer uso de sus plantillas gratuitas disponibles y utilizarlas directamente en tus proyectos.

Pico es una solución ideal para crear páginas de destino rápidas.

6-Ekzo

Ekzo es un marco heredado gratuito de código abierto para crear interfaces web complejas. Cuenta con variables predefinidas, ayudas de CSS, estilo básico y diseños responsivos.

7- Interfaz de usuario de Cupido

Interfaz de usuario de Cupido es un marco moderno y gratuito para crear interfaces receptivas e interfaces fáciles de usar.

8-Hucssley

Hucssley es muy diferente a los marcos tradicionales como Bootstrap o Semantic UI, ya que no contiene componentes de UI prediseñados, sino que le proporciona los bloques de construcción atómicos necesarios para tú para crear cualquier componente de la interfaz de usuario.

9- Marco CSS utilitario (UCSSM)

El Utilitarian CSS Framework (UCSSM) es un marco CSS funcional y una metodología para desarrollar cualquier sitio web con un increíble rendimiento de carga, renderizado y pintura, lo que ayuda a los desarrolladores a trabajar horas extras sin tener que cargar con problemas arquitectónicos, deudas técnicas o problemas heredados. Sí, también puedes responder.

10- Shido

Shido es un marco CSS para crear diseños personalizados sin ningún estilo o componente molesto por el que tengas que luchar para anularlo.

Shido es diferente de otros marcos CSS, no tiene kits de interfaz de usuario precargados. Proporcione solo lo necesario para diseñar sus páginas web, como márgenes, tamaños de fuente, posicionamiento, colores, ayudas, ese tipo de cosas.

11- Petricor CSS

Petricor CSS es una biblioteca de utilidades para crear interfaces web. Está integrado en SASS y proporciona una colección completa de clases de utilidad que le ayudan a trabajar más rápido y aplicar CSS sin casi cambiar entre CSS y HTML. Está fuertemente influenciado por Tailwind CSS.

12- Tejido

El tejido es un marco CSS colosal y gratuito de utilidad de bajo nivel para crear una interfaz de usuario hermosa y elegante a nivel atómico.

13- SSConstruir

SSConstruir es un marco CSS de utilidad WIP construido en Sass.

Su característica incluye:

• Sistema de estilo altamente personalizable.
• Clases de primera respuesta y de utilidad.
• Soporte para clases de utilidades en modo oscuro.
• Hermosos ajustes preestablecidos para color, sombra, escala y tipografía.
• Clases de pseudoselector apiladas para un estilo preciso.
• Generador de escala de colores para colores personalizados.
• Ampliable fácilmente con Sass personalizado.

Etiquetas

desarrollo web Lista de diseño de desarrollo CSS basado en web de código abierto