SW Core / CSS
CSS
Tema, cor, tipografia, espaçamento, layout e as peças que funcionam só com CSS, sem JavaScript.
Base do SW Core
Tipografia
Cor
03 - Cores semânticas
Cor com nome de função —
bg-suc, t-err, bd-pri — que já sabe a cor do texto por cima e muda sozinha no tema claro/escuro.
04 - Motor de cor
Um nome (ou um número) vira a marca inteira — botão, link, borda, fundo, card — e a noite muda só a luz, nunca a cor. <html sw-cor="azul">.
05 - Paleta estendida
30 cores × 16 tons, com nome curto — Bazul7 (fundo), Tverd9 (texto), Lroxo (borda) — para quando você precisa exatamente daquele tom.
Espaçamento, bordas e sombras
06 - Espaçamento
Espaço de dentro (
p-), de fora (m-) e entre itens (gap-) numa régua só: pp · p · m · g · gg · xg · xxg, de 4 a 120 px.
07 - Bordas
A linha em volta e o arredondado dos cantos por classe: bd (borda fina), bd-2 bd-dsh (tracejada), r-m (canto suave), r-fl (cápsula/círculo).
08 - Sombras
Profundidade por classe: a caixa "flutua" com sha, brilha na cor com sha-pri, afunda com sha-in — e mais 46 sombras especiais prontas.
Layout
09 - Breakpoints
Um sufixo no fim da classe diz "a partir de que largura de tela" ela vale —
l-3-g, co6-m — do celular (sem sufixo) à tela grande (-xg).
10 - Container
A "caixa" que centraliza o conteúdo da página e não deixa ele esticar demais em tela grande — <div class="g"> — com respiro nas laterais no celular.
11 - Grid
A grade da página: <div class="l l-3"> põe 3 itens por linha no computador e empilha no celular sozinha. Colunas iguais, proporção (2/3 + 1/3) ou quanto cada item ocupa de 12.
12 - Flex
Alinha itens numa linha ou numa coluna por classe curta: flx liga, j-sb espalha, alc centraliza na vertical, gap-p dá o espaço.
13 - Posição
Colocar uma coisa em cima da outra: selo no canto do card, legenda sobre a foto, cabeçalho que gruda ao rolar — tudo com classes curtas.
Utilitários de conteúdo
14 - Quebra de texto
Cortar texto comprido com "…", parar numa linha exata e evitar título torto — sem JavaScript.
15 - Zoom
Foto que cresce de leve quando o mouse passa, ou um elemento em escala fixa (metade, 10% maior…) — uma classe só.
16 - Object-fit
A foto não cabe na caixa? Escolha se ela corta, cabe inteira ou estica — e qual pedaço fica aparecendo.
17 - Proporção
A caixa já nasce no formato certo — quadrada, 16:9, retrato — e a página não "pula" enquanto a foto carrega.
18 - Filtros
Preto e branco, sépia, desfoque, brilho, mistura com a cor da marca e o "véu" que deixa o texto legível sobre a foto.
19 - Superfície
Painel de vidro fosco sobre foto e brilho em volta de caixa ou texto — os dois com uma classe.
20 - Interação
O formato do cursor, o que dá ou não para selecionar e clicar, e um carrossel de arrastar feito só com CSS.
Componentes CSS
21 - Botão
Um atributo, várias palavras: cor, estilo, forma e tamanho do botão se escrevem juntos —
sw-btn="pri pill g".
22 - Avatar
A bolinha com a foto ou as iniciais da pessoa — cinco tamanhos, cores, pontinho de "online" e pilhas de rostos que se abrem ao passar o mouse.
23 - Badge
Selo pequeno para contagem e status — "3", "Novo", "Pago", um pontinho piscando, ou flutuando no canto de um botão.
24 - Breadcrumb
A trilha "Início / Roupas / Camiseta" que mostra onde a pessoa está no site e leva de volta com um clique.
25 - Card
A "caixinha" que agrupa um conteúdo — serviço, produto, post, plano, perfil, número do painel. Um atributo, 11 modelos prontos, e palavras para tamanho, cor e efeito.
26 - Divider
Uma linha para separar partes da página — cheia, tracejada, grossa, em pé ou com um texto no meio ("ou").
27 - Timeline
Linha do tempo: uma lista de acontecimentos em ordem, cada um com uma bolinha presa a uma linha — em pé ou deitada.
28 - Skeleton
O "esqueleto" cinza que brilha enquanto o conteúdo carrega — linhas de texto, título, foto, avatar, botão e selo, prontos para montar.
29 - Stepper
Mostra em que etapa a pessoa está: "Carrinho → Entrega → Pagamento → Pronto" — deitado ou em pé, com as etapas feitas marcadas com ✓.
30 - Segmentado
Opções coladas lado a lado em que só uma fica marcada — "Mensal | Anual", "Grade | Lista", "Dia | Semana | Mês".
31 - Alerta (inline)
Caixa de aviso que fica parada na página — sucesso, erro, atenção ou informação, com ícone, título e texto.
CSS nativo
32 - CSS nativo — visão geral
O navegador agora faz sozinho o que antes pedia JavaScript. O SW Core 2.1.0 veste esses recursos com atributos curtos — mais leve e mais rápido.
33 - Entrar ao rolar (sw-revela)
O conteúdo aparece conforme entra na tela, acompanhando a rolagem — com um atributo e zero JavaScript.
34 - Barra de leitura (sw-progresso)
Uma linha fina na cor do site que vai enchendo conforme a pessoa lê a página. Um elemento vazio, zero JavaScript.
35 - Menu, aviso e painel (sw-popover)
Menu suspenso, aviso no canto e painel lateral que abrem com um botão e fecham sozinhos (Esc ou clique fora) — sem JavaScript.
36 - Modal nativo (sw-dialog)
A janela de confirmação do próprio navegador, com entrada e saída animadas, fundo desfocado e a página travada atrás. Abrir é uma linha.
37 - Dica ancorada (sw-dica)
Balãozinho de explicação que abre no clique e fica grudado no botão — feito pelo próprio navegador, sem JavaScript.
38 - Sanfona nativa (sw-sanfona)
Perguntas e respostas que abrem e fecham com um toque — HTML puro (
<details>), bom para o Google e sem JavaScript.
39 - Carrossel de arrastar (sw-trilho)
Uma fileira de cartões que a pessoa arrasta para o lado com o dedo, e cada um encaixa no lugar. Sem biblioteca de slider, sem JavaScript.
40 - Formulário que trava (sw-trava)
O botão "Enviar" fica apagado até a pessoa preencher tudo certo, e o campo errado só fica vermelho depois que ela mexeu nele. Sem JavaScript.
41 - Bloco que se adapta (sw-caixa)
O mesmo cartão fica em pé num espaço estreito e deitado num espaço largo — ele olha o tamanho do lugar onde está, não o tamanho da tela.
