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.

PACOTE ÚNICO

Tudo num arquivo de cada

84 componentes, tema, ícones, formulários, modal, dropdown, navbar, sidebar, efeitos nativos, transição de página e motor GSAP premium — tudo junto, sem precisar escolher peça por peça nem carregar um segundo script.

Tamanho

CSS ~365kb · JS ~550kb

sw.min.css sw.min.js sw.config.css

Os efeitos sw-marquee e sw-scrub do SW-FX precisam do CSS pra ter animação — sem ele os dois ficam parados (o JS só cria a estrutura, quem desenha o movimento é o CSS). Já vem incluso em sw.min.css, nenhum arquivo extra necessário.

Outras formas de instalar

NPM

via npm

GITHUB

Clonar e fazer o build

Prefere baixar tudo já pronto, sem terminal? Baixar .zip do repositório — depois de extrair, o pacote pronto está em dist/pacotes/completa/, com um LEIA-ME.md explicando o que tem dentro.

Backend PHP não está aqui. O SW ainda não vem com backend — a versão atual (MVC com CRUD recarregando página) está sendo reescrita com JS/AJAX antes de virar um pacote próprio. Fica pra uma próxima versão.

Direto do sw.sanweb.com.br

Aponte o <head> pra cá — sem baixar nada, sem hospedar nada, sem build.

Um arquivo de cada — CSS + JS, tudo incluso:

Prefere ter os arquivos no seu próprio servidor (sem depender do nosso)? Baixe pelo card de download acima e troque os dois caminhos por um relativo (ex.: dist/sw.min.css).

Estrutura de pastas

Copie sw.min.css, sw.min.js e a pasta fonts/ pro seu projeto — é só isso que roda de verdade. A fonte de ícones (@font-face) precisa ficar ao lado do CSS/JS. Precisa do SVG de algum ícone específico pra usar solto? A galeria completa fica hospedada em sw.sanweb.com.br, não vem junto no pacote.

meu-projeto/ ├── dist/sw.min.css ├── dist/sw.min.js ├── dist/fonts/ ← ícones (@font-face) ├── sw.config.css ← sua personalização (seção 2) └── index.html

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

Criar e carregar o arquivo

Já vem um ponto de partida pronto em dist/sw.config.css — 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.

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:

Cor primária — --sw-h-pri 210°

Cor secundária — --sw-h-sec 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

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";

Arredondamento

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

Escolha um preset para visualizar:

Button

Card

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

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

Template Completo

Copie, cole no seu projeto e personalize.

Presets Prontos

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