Repolode
Enviar
vladocar

vladocar/Sumi.css

Um framework CSS minimalista que estiliza HTML semântico puro com quase nenhuma classe, distribuído em um único arquivo e sem etapa de build.

Ver no GitHubSite
Estrelas
128
Forks
0
Issues abertas
2
Último commit
ontem

O que é?

Sumi.css é um framework CSS baseado em estilos sem classes: títulos, formulários, tabelas, cards, accordions, modais e navegação são estilizados a partir dos elementos HTML básicos, e só é preciso usar classes para ajustes específicos. Ele é distribuído em um único arquivo de cerca de 6,7 KB minificado e comprimido com gzip, sem JavaScript nem dependências, e pode ser baixado ou carregado de um CDN do jsDelivr.

O framework oferece modos claro e escuro que seguem a configuração do sistema, além do atributo data-theme para forçar um dos modos. Cores, fontes, tamanhos e raios ficam disponíveis como propriedades customizadas de CSS com o prefixo --s-, permitindo ajustar os temas globalmente ou por elemento. Os estilos dos elementos têm especificidade zero, então o CSS personalizado pode sobrescrevê-los sem !important.

Ele também inclui classes de layout para grid e flex, estados de validação de formulários via aria-invalid, indicadores de carregamento, tooltips e uma escala tipográfica fluida. O projeto oferece uma página de referência de componentes e um tutorial passo a passo, e tem como alvo as versões atuais do Chrome, Edge, Firefox e Safari.

Recursos principais

  • 01Estiliza elementos HTML semânticos puros sem exigir classes.
  • 02Um único arquivo CSS, sem JavaScript nem dependências.
  • 03Modo claro e escuro automáticos, com substituição via data-theme.
  • 04Temas configuráveis por meio de propriedades customizadas de CSS com o prefixo --s-.
  • 05Estilos de elementos com especificidade zero, fáceis de sobrescrever.
  • 06Classes de layout para grid, flex e contêineres.
  • 07Recursos de acessibilidade, incluindo indicadores de foco, estados ARIA e movimento reduzido.

Casos de uso

  • Estilizar rapidamente um site estático, uma página de documentação ou uma página pessoal sem pipeline de build.
  • Prototipar uma ferramenta interna com muitos formulários ou tabelas, fazendo o mínimo de alterações na marcação.
  • Adicionar uma aparência temática consistente a um projeto que já tenha HTML escrito à mão.
  • Criar componentes personalizados com base em tokens compartilhados de cores e espaçamento.

Início rápido

  1. 1

    Baixe sumi.min.css para o seu projeto

  2. 2

    Vincule a folha de estilos no head do seu HTML ou carregue-a pela CDN do jsDelivr

Antes de usar

  • Depende de recursos modernos de CSS, então navegadores mais antigos exibem cores mais simples ao passar o cursor e ao focar.

Tópicos

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

Perguntas frequentes

O que é Sumi.css?
Um framework CSS minimalista que estiliza HTML semântico puro com quase nenhuma classe, distribuído em um único arquivo e sem etapa de build. Sumi.css é um framework CSS baseado em estilos sem classes: títulos, formulários, tabelas, cards, accordions, modais e navegação são estilizados a partir dos elementos HTML básicos, e só é preciso usar classes para ajustes específicos. Ele é distribuído em um único arquivo de cerca de 6,7 KB minificado e comprimido com gzip, sem JavaScript nem dependências, e pode ser baixado ou carregado de um CDN do jsDelivr.
Sumi.css é gratuito? Qual é a licença?
Sumi.css é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
Sumi.css ainda é mantido?
Manutenção ativa. O último commit de Sumi.css foi em 21 de out. de 2026.
Para que posso usar Sumi.css?
Estilizar rapidamente um site estático, uma página de documentação ou uma página pessoal sem pipeline de build. Prototipar uma ferramenta interna com muitos formulários ou tabelas, fazendo o mínimo de alterações na marcação. Adicionar uma aparência temática consistente a um projeto que já tenha HTML escrito à mão. Criar componentes personalizados com base em tokens compartilhados de cores e espaçamento.
Como instalar Sumi.css?
Baixe sumi.min.css para o seu projeto Vincule a folha de estilos no head do seu HTML ou carregue-a pela CDN do jsDelivr
Onde consigo Sumi.css?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/vladocar/Sumi.css

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados