Repolode
Enviar
vladocar

vladocar/Sumi.css

Un framework CSS minimalista que da estilo a HTML semántico sin clases, distribuido en un solo archivo y sin pasos de compilación.

Ver en GitHubSitio web
Estrellas
128
Forks
0
Issues abiertos
2
Último commit
ayer

¿Qué es?

Sumi.css es un framework CSS basado en estilos sin clases: aplica estilos a encabezados, formularios, tablas, tarjetas, acordeones, modales y navegación a partir de los elementos HTML, y solo requiere clases para ajustes específicos. Se distribuye en un único archivo de unos 6,7 KB minificado y comprimido con gzip, sin JavaScript ni dependencias; puedes descargarlo o cargarlo desde un CDN de jsDelivr.

El framework admite modos claro y oscuro que siguen la configuración del sistema, y permite forzar cualquiera de ellos con el atributo data-theme. Los colores, las fuentes, los tamaños y los radios se exponen como propiedades personalizadas de CSS con el prefijo --s-, para que puedas ajustar los temas globalmente o por elemento. Los estilos de los elementos tienen especificidad cero, por lo que puedes sobrescribirlos con CSS personalizado sin usar !important.

También incluye clases de diseño con grid y flex, estados de validación de formularios mediante aria-invalid, indicadores de carga, tooltips y una escala tipográfica fluida. El proyecto ofrece una página de referencia de componentes y un tutorial paso a paso, y es compatible con las versiones actuales de Chrome, Edge, Firefox y Safari.

Funciones clave

  • 01Aplica estilos a elementos HTML semánticos sin requerir clases.
  • 02Un solo archivo CSS, sin JavaScript ni dependencias.
  • 03Modos claro y oscuro automáticos, con opción para sobrescribirlos mediante data-theme.
  • 04Temas configurables mediante propiedades personalizadas de CSS con el prefijo --s-.
  • 05Estilos de elementos con especificidad cero, fáciles de sobrescribir.
  • 06Clases de diseño para grid, flex y contenedores.
  • 07Compatibilidad con accesibilidad, incluidos indicadores de foco, estados ARIA y movimiento reducido.

Casos de uso

  • Dar estilo rápidamente a un sitio estático, una página de documentación o una página personal sin una cadena de compilación.
  • Crear prototipos de herramientas internas con muchos formularios o tablas y cambios mínimos en el marcado.
  • Añadir una apariencia temática coherente a un proyecto que ya tiene HTML escrito a mano.
  • Crear componentes personalizados a partir de tokens compartidos de color y espaciado.

Inicio rápido

  1. 1

    Descarga sumi.min.css en tu proyecto

  2. 2

    Vincula la hoja de estilos en el head de tu HTML o cárgala desde la CDN de jsDelivr

Antes de usarlo

  • Depende de funciones modernas de CSS, por lo que en los navegadores antiguos los colores al pasar el cursor y al enfocar serán más sencillos.

Temas

#css#css-framework#classless#minimalist#dark-mode#theming#responsive-design#css-grid

Preguntas frecuentes

¿Qué es Sumi.css?
Un framework CSS minimalista que da estilo a HTML semántico sin clases, distribuido en un solo archivo y sin pasos de compilación. Sumi.css es un framework CSS basado en estilos sin clases: aplica estilos a encabezados, formularios, tablas, tarjetas, acordeones, modales y navegación a partir de los elementos HTML, y solo requiere clases para ajustes específicos. Se distribuye en un único archivo de unos 6,7 KB minificado y comprimido con gzip, sin JavaScript ni dependencias; puedes descargarlo o cargarlo desde un CDN de jsDelivr.
¿Sumi.css es gratuito? ¿Qué licencia tiene?
Sumi.css es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿Sumi.css sigue mantenido?
Mantenimiento activo. El último commit de Sumi.css fue el 21 oct 2026.
¿Para qué puedo usar Sumi.css?
Dar estilo rápidamente a un sitio estático, una página de documentación o una página personal sin una cadena de compilación. Crear prototipos de herramientas internas con muchos formularios o tablas y cambios mínimos en el marcado. Añadir una apariencia temática coherente a un proyecto que ya tiene HTML escrito a mano. Crear componentes personalizados a partir de tokens compartidos de color y espaciado.
¿Cómo se instala Sumi.css?
Descarga sumi.min.css en tu proyecto Vincula la hoja de estilos en el head de tu HTML o cárgala desde la CDN de jsDelivr
¿Dónde consigo Sumi.css?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/vladocar/Sumi.css

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados