Todo framework de UI acaba fazendo as mesmas promessas: consistência, velocidade de desenvolvimento e um visual coeso. A diferença está em como cada um resolve a tensão entre flexibilidade (utilitários) e semântica (componentes prontos). O Cerne tenta ficar com os dois.
Tokens como fonte única de verdade
Cor, espaçamento, tipografia, radius e sombra vivem como variáveis CSS
(--cerne-color-primary, --cerne-space-4...), geradas a
partir de mapas Sass. Isso significa que tanto os componentes quanto os
utilitários — e até esta própria documentação — leem dos mesmos valores. Trocar
de tema claro para escuro é só trocar o conjunto de variáveis no
:root.
Se a documentação e o CSS podem divergir, eventualmente vão divergir. Por isso a página de tokens lê os valores computados ao vivo, em vez de ter números copiados à mão.
Camadas em ordem de especificidade
Seguimos uma variação de ITCSS: configurações e ferramentas Sass primeiro (sem gerar CSS), depois:
!important.
- Reset e elementos base
- Objetos de layout (grid, app-shell, stack/cluster)
- Componentes semânticos (botões, cards, modais...)
- Utilitários, por último — para sempre poderem sobrescrever
| Camada | Especificidade | Exemplo |
|---|---|---|
| Elementos | Baixa | a, table |
| Componentes | Média | .btn-primary |
| Utilitários | Alta (intencional) | .mt-4 |
O componente que faltava: agendamento
Nenhum dos frameworks populares vem com uma grade de horários pronta. Para sistemas de reserva de sala, isso é o componente central — então construímos um com CSS Grid puro e JavaScript sem dependências, medindo a altura real da célula no DOM para posicionar os eventos.
Em resumo
Sem dependências em runtime: nada de jQuery, Popper ou Chart.js — só CSS e JavaScript puros, compilados para um único arquivo cada.
App-shell, agendamento e datatable nativos cobrem os primitivos que faltam tanto no Bootstrap quanto no Tailwind puro para montar um painel de verdade.
Dark mode, RTL e acessibilidade AA não são um pacote à parte — são o comportamento padrão de todo componente, desde o primeiro commit.
A documentação lê os tokens direto do CSS compilado, então nunca existe uma tabela de cores desatualizada.
O resultado é um framework que serve igualmente bem um dashboard administrativo, um ambiente de aprendizagem ou — como este post — um blog.