SW CoreTudo que você precisa

Ligar na página — biblioteca de componentes

Depois de descompactar a pasta swcore/ no seu site, são duas linhas. O pacote vem em 3 camadas: a maioria dos sites só usa a primeira.

<link rel="stylesheet" href="swcore/swcore.min.css">

<!-- fim da página -->
<script src="swcore/swcore.min.js"></script>

Paleta estendida + ícones + navbar rica (opcional)

Um segundo pacote junta 30 famílias de cor × 16 tons, a webfont de 1.031 ícones (swi-*) e a navbar com mega-menu — tudo que não é do dia a dia de toda página. São 161.9 KB minificados, 28.2 KB com gzip.

<link rel="stylesheet" href="swcore/swcore.min.css">
<link rel="stylesheet" href="swcore/swcore.compl.min.css">

<!-- fim da página -->
<script src="swcore/swcore.min.js"></script>
<script src="swcore/swcore.compl.min.js"></script>

Abrir a grade completa de cores.

Personalizar cor e fonte

As cores do SW Core são variáveis CSS reais (--sw-pri, --sw-sec…), não valores fixos embutidos — sobrescreva-as no CSS do seu próprio site, carregado depois do swcore.min.css, e todos os componentes recalculam sozinhos, sem rebuild nenhum:

<style>
:root {
  --sw-pri: #6366f1;
  --sw-sec: #14b8a6;
  --sw-ale: #f59e0b;
  --sw-f-san: "Inter", system-ui, sans-serif;
}
</style>

Isso é tudo que a maioria dos sites precisa. Não edite os arquivos do SW Core — mude as variáveis no CSS do seu site; assim você troca de versão sem perder nada.

Instalação — área de Animação

Um terceiro pacote junta o GSAP (a única dependência de terceiros do produto inteiro) com o motor de scroll/timeline do SW Core — swcore.motion.min.js/css. É o pedaço mais pesado do framework; só inclua em página que realmente anima.

<link rel="stylesheet" href="swcore/swcore.min.css">
<link rel="stylesheet" href="swcore/swcore.motion.min.css">

<!-- fim da página, ANTES do swcore.min.js -->
<script src="swcore/swcore.motion.min.js"></script>
<script src="swcore/swcore.min.js"></script>

Sem esse pacote carregado, o conteúdo marcado com sw-ani continua visível normalmente (só não anima) — um aviso aparece no console, nada quebra.

Como usar

Todo componente é declarado por atributo HTML — sem precisar chamar nada em JS pra a maioria dos casos. O núcleo (sw-core.js) já observa a página inteira: assim que o HTML existir (mesmo inserido depois, via AJAX ou JS), o componente correspondente é inicializado sozinho. A área de Animação segue o mesmo princípio, com seu próprio atributo (data-sw em vez de sw-*) pra não misturar os dois sistemas.

Se você mesmo injetar HTML novo com innerHTML (fora do fluxo automático de mutação), chame SW.reinit(elemento) (componentes) e/ou SWMotion.refresh() (animação) pra garantir que tudo lá dentro seja inicializado.

<button sw-btn="pri" sw-modal-open="#exemplo">Abrir</button>
<div sw-modal id="exemplo">
  <div sw-modal-box>...</div>
</div>

<script>
  // opcional — o núcleo já observa mudanças no DOM sozinho
  SW.reinit(document.getElementById('novoConteudo'));
</script>

Sistema de ícones — SWIcons

O SW Core inclui uma webfont própria com 1.031 ícones, dentro do pacote complementar. Ver e buscar todos.

<!-- Ícones gerais: swi-* | Marcas: swil-* | Sólidos: swis-* -->
<i class="swi-home"></i>
<i class="swi-user"></i>
<i class="swil-github"></i>
<i class="swi-cart"></i>

O que o SW Core pode fazer

• Montar a interface inteira com 41 páginas de CSS (cor, tipografia, grade, espaçamento, botões, cards…) e 41 componentes com JavaScript (menus, formulários, modal, tabela, galeria…) — tudo com a mesma API por atributo: o valor do atributo escolhe a variante (sw-btn="pri pill g").
• Animar com 23 recursos — efeitos de entrada, texto animado, cascata, seção presa, fileira horizontal, seções em tela cheia, quadros no scroll, desenho de traço, inclinação 3D, ímã, brilho no mouse, cursor, fundo generativo, Lottie, Rive, contagem regressiva, contador e transição entre páginas.
• Funcionar sem build step em produção — só HTML + os arquivos já gerados em dist/.
• Reagir a conteúdo inserido dinamicamente na página (AJAX, JS) sem precisar re-inicializar manualmente na maioria dos casos.
• Adaptar tema claro/escuro e cores da marca mudando só as variáveis CSS em :root.
• Rodar 100% no navegador — os únicos componentes que dependem de rede são Cotação (API pública gratuita), os que você conecta a um backend (Ajax, Tabela, Content, Infinite Scroll) e o GSAP da área de Animação.

Escopo do produto — o que o SW Core não é

• Não é um CMS nem gerador de sites — o SW Core é uma biblioteca de comportamento e interface para quem desenvolve com HTML, CSS e JavaScript.
• Não depende de backend específico — componentes com integração de dados (Tabela AJAX, Infinite Scroll, etc.) se conectam diretamente a qualquer API REST ou backend existente.
• Não exige Node.js em produção — todos os scripts e folhas de estilo rodam direto e 100% no navegador a partir da pasta dist/.

Explore as 4 áreas