Instalação & Configuração

Instalação SW Framework

Copie os arquivos de distribuição pro seu projeto e comece a usar em segundos. Zero dependências, zero build tools.

1. PRINCIPAL

Núcleo — obrigatório

84 componentes, tema, ícones, formulários, modal, dropdown, navbar, sidebar...

Tamanho

CSS ~341kb · JS ~243kb

sw.min.css sw.min.js sw.config.css
2. COMPLEMENTAR

Opcional — tudo num arquivo só

Efeitos nativos + transição de página + motor GSAP premium, num só JS. Backend PHP também mora aqui.

Tamanho

CSS ~1kb · JS ~289kb

sw.compl.min.js sw.compl.min.css
3. COMPLETA

Principal + Complementar juntos

Tudo combinado num arquivo de cada — pra quem não quer escolher peça por peça.

Tamanho

CSS ~341kb · JS ~533kb

sw.all.min.css sw.all.min.js

sw.compl.min.css é obrigatório se você usar os efeitos sw-marquee ou sw-scrub do SW-FX — sem ele os dois não têm animação nenhuma (o JS só cria a estrutura, quem desenha o movimento é esse CSS). Os demais efeitos do complementar (scramble, tilt, magnetismo, GSAP premium) funcionam só com o JS. Clonou o repositório em vez de baixar arquivo por arquivo? As 3 opções já vêm prontas em dist/pacotes/1-principal/, 2-complementar/ e 3-completa/ — cada pasta tem um LEIA-ME.md explicando o que tem dentro.

1

Self-hosted (ainda sem CDN)

Copie os arquivos de dist/ pro seu projeto e carregue no <head>. Sem npm, sem build.

Essencial — CSS + Core:

Com efeitos e transições — Complementar (opcional, tudo num arquivo):

O Complementar detecta o Core automaticamente. Carregue sempre o Core primeiro.

Estrutura de pastas

Copie a pasta dist/ inteira — os ícones (SVG, via SW.Icon) ficam em dist/icons/, não são fonte de ícone tipo @font-face.

meu-projeto/ ├── dist/sw.min.css ├── dist/sw.min.js ├── dist/sw.compl.min.js ← opcional (Complementar) ├── dist/icons/ ← SVGs do SW.Icon ├── sw.config.css ← sua personalização (seção 2) └── index.html

A pasta dist/icons/ deve ficar no mesmo diretório que o CSS/JS — o SW.Icon resolve o caminho automaticamente a partir da localização da página.

Compatibilidade

HTML Puro
Laravel / PHP
React / Vue / Svelte
WordPress
Personalização

sw.config.css

Personalize cores, fontes e bordas sem tocar no código-fonte do SW. 100% compatível com o SWDay (dark / light).

Zero modificação no framework
Cascata automática em todas as shades
SWDay dark / light respeitado
1

Criar e carregar o arquivo

Já vem um ponto de partida pronto em dist/sw.config.css (ou no pacote 1-principal) — copie pra raiz do seu projeto e carregue depois do SW.

Estrutura de arquivos recomendada:

meu-projeto/ ├── sw.config.css ← crie aqui ├── index.html └── assets/

No HTML, a ordem importa:

O sw.config.css deve ser carregado por último, depois de todos os bundles SW, pra sobrescrever os tokens em :root corretamente.

2

Cores — Personalização Total

O SW oferece dois caminhos pra mudar sua identidade visual.

A. Sobrescrita Direta (HEX / RGB)

Se você já tem uma cor exata em HEX ou RGB, pode forçá-la diretamente. Útil para marcas com manuais de identidade rigorosos.

B. Sistema Inteligente (Hues)

Recomendado. Altera apenas o ângulo da matiz (Hue) e o framework gera automaticamente 7 tons harmoniosos, além de estados de hover e focus.

Arraste o slider para ver a cascata em tempo real:

210°
275°

Shades derivados automaticamente:

Badge

Código pra colar no seu sw.config.css:

:root { --sw-h-pri: 210; /* azul */ --sw-h-sec: 275; /* roxo */ }

Referência de ângulos de matiz

3

Tipografia

Troque a fonte principal ou mono sem alterar nenhum componente.

Fonte atual do framework:

Aa Bb Cc — Outfit

O rato roeu a roupa do rei de Roma

Fonte mono (código):

Aa Bb Cc — Mono

const x = "sw";

4

Arredondamento

Defina a personalidade visual: sharp, suave ou ultra-arredondado.

Escolha um preset para visualizar:

Button
Card
Modal
5

SWDay — Temas Claro & Escuro

O escuro é o padrão do framework (:root). O claro é o override em html[sw-theme="light"].

Tema Escuro (padrão)
--sw-bg: #0d131d
--sw-sur: #1a2636
Tema Claro (override)
--sw-bg: #e9ebee
--sw-sur: #f8f9fa
6

Referência de Tokens

Todos os tokens que podem ser sobrescritos no config.

Token Padrão Descrição Afeta
CORES
--sw-h-pri 200 Matiz da cor primária (0–360) Botões, links, acentos, sombras
--sw-h-sec 215 Matiz da cor secundária Fundos escuros, variantes secundárias
--sw-pri hsl(200, 75%, 56%) Cor primária direta (override total) Tudo que usa var(--sw-pri)
--sw-suc hsl(145, 65%, 42%) Cor de sucesso Alertas ok, validação positiva
--sw-err hsl(355, 75%, 55%) Cor de perigo / erro Alertas err, validação negativa
--sw-ale hsl(40, 85%, 52%) Cor de alerta Warnings
--sw-inf hsl(205, 75%, 52%) Cor de informação Alertas informativos
--sw-c-{família} 28 famílias Paleta cromática completa (verm, azul, viol…) Ver página Cores HSL
TIPOGRAFIA
--sw-f-san 'Poppins', 'Outfit', … Fonte principal sans-serif Todo o texto do framework
--sw-f-mon 'JetBrains Mono' Fonte monospace Código, SWCode, tokens
--sw-f-base 1.6rem (16px) Tamanho base do texto Parágrafos, body
ARREDONDAMENTO
--sw-r-p 0.4rem Radius pequeno — chips, badges Elementos compactos
--sw-r-m 0.8rem Radius médio — botões, inputs Componentes interativos
--sw-r-g 1.2rem Radius grande — cards Cards, dropdowns, painéis
--sw-r-gg 1.8rem Radius extra — modais Modais, overlays
--sw-r-fl 9999px Totalmente arredondado Pills, avatares, badges redondos
TEMA (SWDAY)
--sw-bg escuro/claro automático Fundo da página Background do body
--sw-sur escuro/claro automático Superfícies (cards, sidebar) Cards, modais, sidebar
--sw-txt escuro/claro automático Cor principal do texto Headings, parágrafos
--sw-bor escuro/claro automático Cor das bordas Cards, inputs, dividers
--sw-bg / --sw-color / --sw-border… 7 tons cada Sistema Day/Night avançado (BG, BL, Border, Color, Link, Hover, Shadow) Ver seção 5 de Cores HSL
7

Template Completo

Copie, cole no seu projeto e personalize.

8

Presets Prontos

Clique para aplicar e ver ao vivo. Copie o código abaixo.