Boilerplate leve e moderno que combina o melhor do CSS utilitário, grid responsivo, animações elegantes e bibliotecas JavaScript essenciais para criar interfaces rápidas, intuitivas e com manutenção simplificada.
- Hybrid-First: Abordagem única - Grid mobile-first + Utilitários desktop-first
- Grid Flexível: 12 colunas com containers responsivos
- Utilitários Completos: Mais de 400 classes para espaçamento, grids, flex, design e layouts
- Bibliotecas Vanilla: 9 micro-bibliotecas integradas (HTMX, VanJS, Embla, VenoBox, a11y-dialog, Toastify, Wow2 Animation, Counter-Up2, js-cookie)
- Animações Suaves: 30+ efeitos com controle de exibição e repetição
- Kit de Ícones: 300+ ícones vetoriais customizados com IcoMoon
- Performance: Otimizado para 99+ no PageSpeed Insights
- Zero Configuração: Adicione via CDN e comece a usar imediatamente
- IA-Ready: Skill dedicada para desenvolvimento com Claude Code e outras IAs
- Bricks Builder: Conversor Squeleton2Bricks para integração com WordPress
- Documentação Web - Guias interativos e exemplos
- Guias de Referência - 15 guias detalhados para Skill sobre cada recurso
- Biblioteca de Ícones - Lista de ícones disponíveis
- Squeleton2Bricks - Conversor de código Squeleton para JSON do Bricks Builder
- squeleton-skill.zip - Arquivo Skill em formato .zip para desenvolvimento com Claude Code e outras IAs
<!-- CSS (Head) --><linkrel="stylesheet" href="https://cdn.squeleton.dev/squeleton.v4.min.css"><!-- JavaScript (Head) --><scriptsrc="https://cdn.squeleton.dev/squeleton-main.v4.min.js"></script><!-- JavaScript (Footer) --><scriptsrc="https://cdn.squeleton.dev/squeleton-scripts.v4.min.js"></script>- squeleton.v4.css – Versão completa para desenvolvimento (~35KB gzip)
- squeleton.v4.min.css – Versão minificada para produção (~25KB gzip)
- squeleton-main.v4.min.js – JavaScript principal (~12KB gzip)
- squeleton-scripts.v4.min.js – JavaScript secundário (~18KB gzip)
O Squeleton adota uma abordagem híbrida única que oferece o equilíbrio ideal de desenvolvimento entre duas técnicas:
Grid (Colunas) → Mobile-First (min-width)
- Comece com
c-xs-12e expanda:c-xs-12 c-md-6 c-lg-4 - Grids naturalmente empilham em mobile e dividem em desktop
- Suporta 4 breakpoints:
xs-,sm-,md-,lg-
Classes Utilitárias → Desktop-First (max-width)
- Escreva para desktop primeiro, ajuste para mobile:
p-60-tb xs-p-30-tb - Estilização direta no ambiente de desenvolvimento, com ajustes responsivos pontuais
- Suporta 3 breakpoints:
xs-,sm-,md-
| Breakpoint | Grid (min-width) | Utilitários (max-width) |
|---|---|---|
| Extra Small | c-xs- (base) | xs- (≤639px) |
| Small | c-sm- (≥640px) | sm- (≤991px) |
| Medium | c-md- (≥992px) | md- (≤1199px) |
| Large | c-lg- (≥1200px) | — (desktop é padrão) |
Todas as bibliotecas estão integradas, pré-configuradas e otimizadas. Consulte a documentação específica de cada uma para casos de uso avançados.
| Biblioteca | Descrição |
|---|---|
| HTMX | Biblioteca que oferece acesso a AJAX, CSS Transitions, WebSockets e Server Sent Events diretamente no HTML usando atributos, permitindo interfaces modernas com a simplicidade do hypertext. |
| VanJS | O menor framework de interface de usuário reativo do mundo. Incrivelmente poderoso, absurdamente pequeno. |
| Embla Carousel | Biblioteca de carrossel minimalista com movimento fluido e precisão de swipe excepcional. |
| VenoBox 2 | Biblioteca JavaScript Lightbox para imagens, vídeos, galerias e iFrames. Auto-inicializado para .open-gallery, .open-video, .open-iframe. |
| a11y-dialog | Biblioteca leve e flexível para criação de janelas de diálogo intuitivas. Scroll lock auto-inicializado para .modal-dialog. |
| Toastify-js | Biblioteca JavaScript para mensagens de notificação aprimoradas. |
| Wow2 Animation | Fork otimizado próprio baseado no wow.js para animações on-scroll performáticas. Auto-inicializado para classe .wow. |
| Counter-Up2 | Biblioteca leve que conta até um número alvo quando o número se torna visível. |
| js-cookie | Biblioteca JavaScript simples e leve para gerenciamento de cookies do navegador. |
<!DOCTYPE html><htmllang="pt-BR"><head><metacharset="UTF-8"><metaname="viewport" content="width=device-width, initial-scale=1.0"><title>Meu Site - Squeleton</title><linkrel="stylesheet" href="https://cdn.squeleton.dev/squeleton.v4.min.css"><scriptsrc="https://cdn.squeleton.dev/squeleton-main.v4.min.js"></script></head><body><sectionclass="p-80-tb"><!-- Section Flex --><divclass="container"><!-- Container responsivo --><divclass="row"><!-- Linha Flex --><divclass="c-xs-12 c-md-8">
Conteúdo Principal
</div><divclass="c-xs-12 c-md-4">
Sidebar
</div></div></div></section><scriptsrc="https://cdn.squeleton.dev/squeleton-scripts.v4.min.js"></script></body></html>Grid de Cards - Container + Row + Colunas responsivas:
<sectionclass="p-60-tb xs-p-30-tb"><divclass="container"><h2class="fs-12 fw-600 m-40-b">Recursos</h2><divclass="row gap-20 text-center"><divclass="c-xs-12 c-md-6 c-lg-4"><divclass="border-all border-rd-10 p-25-all h-100 wow fadeInUp"><iclass="iccon-rocket-1 fs-13 m-15-b d-block"></i><h3class="fs-10 fw-600 m-10-b">Performance</h3><pclass="fs-7">Otimizado para 99+ no PageSpeed</p></div></div><divclass="c-xs-12 c-md-6 c-lg-4"><divclass="border-all border-rd-10 p-25-all h-100 wow fadeInUp"><iclass="iccon-layer-1 fs-13 m-15-b d-block"></i><h3class="fs-10 fw-600 m-10-b">400+ Classes</h3><pclass="fs-7">Grid, spacing, flexbox e mais</p></div></div><divclass="c-xs-12 c-md-6 c-lg-4"><divclass="border-all border-rd-10 p-25-all h-100 wow fadeInUp"><iclass="iccon-speed-1 fs-13 m-15-b d-block"></i><h3class="fs-10 fw-600 m-10-b">Zero Build</h3><pclass="fs-7">CDN e pronto para usar</p></div></div></div></div></section>Hero Section - Tipografia fluida + Centralização + Animações:
<sectionclass="p-30-tb f-justify-center h-100vh"><divclass="container"><divclass="row gap-15"><divclass="c-xs-12 c-sm-9 c-md-6 c-center"><divclass="f-grid f-items-center f-justify-center"><iclass="fs-12 iccon-rocket-1 p-15-r animated delay-800 floatIn"></i><h1class="fs-16 m-25-tb fw-700 animated slideIn">Squeleton</h1><divclass="fs-3 m-10-l p-5-lr border-rd-4 border-all animated magnetIn delay-800">v4.1.9</div></div><pclass="fs-10 p-20-tb text-center animated delay-500 fadeInUp">Boilerplate leve e moderno que combina o melhor do CSS utilitário, grid responsivo, animações elegantes e bibliotecas JavaScript essenciais para criar interfaces rápidas e intuitivas.</p></div></div></div></section>Footer - Flexbox com distribuição:
<footerclass="p-30-tb border-t"><divclass="container"><divclass="d-flex f-justify-between f-items-center xs-f-col xs-f-gap-15"><pclass="fs-6 opacity-7">© 2026 Meu Projeto</p><divclass="d-flex f-gap-20"><ahref="#"><iclass="iccon-instagram-1 fs-9"></i></a><ahref="#"><iclass="iccon-linkedin-1 fs-9"></i></a><ahref="#"><iclass="iccon-github-1 fs-9"></i></a></div></div></div></footer>Por que o Squeleton foi criado?
O Squeleton nasceu da necessidade de simplificar o desenvolvimento web, evitando problemas comuns dos frameworks modernos: atualizações que quebram compatibilidade, necessidade de build constante, abandono de versões legadas e complexidade desnecessária. Focado em sites institucionais, landing pages e portais, prioriza manutenção simplificada, estabilidade de código e performance, usando apenas CSS e JavaScript Vanilla.
Como o Squeleton se compara com outros Frameworks CSS?
O Squeleton foi projetado como um boilerplate — uma base estrutural leve e pronta para uso — diferente dos frameworks CSS tradicionais que impõem padrões visuais. Ele não define cores, fontes ou componentes estilizados, fornecendo apenas a estrutura essencial e integrando bibliotecas JavaScript curadas de terceiros sem necessidade de build.
Ainda assim, devido à sua composição de grids, breakpoints e classes utilitárias únicas, o Squeleton também pode ser comparado tecnicamente com frameworks como Bootstrap, Tailwind, Bulma e Pico. Consulte o estudo comparativo que analisa tamanhos, funcionalidades e abordagens responsivas.
Como personalizar a paleta de cores e família de fontes?
O Squeleton é intencionalmente neutro. Crie uma folha de estilos separada com variáveis CSS customizadas no :root:
:root {
--text-color:#111;
--bg-color:#fff;
--font-family:'Inter Tight', sans-serif;
}
body {
color:var(--text-color);
background-color:var(--bg-color);
font-family:var(--font-family);
}Esta separação garante que atualizações futuras não afetem suas personalizações.
Como criar animações personalizadas?
Siga o padrão das animações existentes:
@keyframes minha-animacao {
0% { opacity:0; transform:scale(0.8); }
100% { opacity:1; transform:scale(1); }
}
.anima-personalizada {
animation-name: minha-animacao;
animation-duration:0.5s;
animation-fill-mode: both;
}Use com WOW para ativar no scroll: <div class="wow anima-personalizada">Conteúdo</div>
Por que não há sistema de build/compilação?
Decisão deliberada baseada em simplicidade: todo o Squeleton (~55KB gzip) é menor que uma imagem JPG média. Arquivos unificados facilitam manutenção, otimizam cache em navegação multi-página e eliminam complexidade de ferramentas de build.
Como descobrir todas as classes e possibilidades?
Com mais de 400 classes utilitárias, a melhor forma é explorar:
- Código-fonte: Examine o CSS não-minificado para descobrir padrões
- Documentações originais: HTMX, a11y-dialog, Embla Carousel têm recursos avançados
- Experimentação: Classes foram projetadas para funcionar em conjunto
O Squeleton segue padrões intuitivos que facilitam a descoberta durante o uso.
Posso usar o Squeleton com Claude Code, GPT Codex ou outras IAs?
Sim! Foi desenvolvida uma Skill específica para desenvolvimento com IA chamada squeleton-skill.
Skills (ou "habilidades") são pacotes de conhecimento especializados que você pode adicionar a assistentes de IA como Claude Code, GitHub Copilot ou outros agentes de código. Funcionam como "plugins de conhecimento" que ensinam a IA sobre frameworks, bibliotecas ou padrões específicos do seu projeto.
Ao instalar esta skill, a IA ganha:
- Conhecimento completo das 400+ classes utilitárias do Squeleton
- Referências detalhadas de grid, espaçamento, flexbox, animações e ícones
- Padrões de uso e boas práticas específicas do framework
- Integração com bibliotecas JS (HTMX, VanJS, Embla, VenoBox, etc.)
- Exemplos práticos para hero sections, cards, modais, carrosséis e mais
- Baixe a skill: squeleton-skill.zip
- Instale no seu IDE (Claude for VSCode, Cursor, Windsurf, etc.) seguindo a documentação da ferramenta
- Desenvolva com IA: A IA agora conhece todo o Squeleton e priorizará suas classes e componentes ao invés de criar CSS e JS personalizado
Para mais detalhes sobre Skills, consulte a documentação do Claude Agent SDK ou do seu assistente de IA preferido.
Como usar Squeleton no WordPress e manter a edição visual?
Para essa finalidade foi desenvolvido o Squeleton2Bricks, um conversor online que transforma HTML com classes Squeleton em JSON pronto para colar no Bricks Builder, o melhor editor de páginas do WordPress!
- Crie seu layout com Squeleton (manualmente ou via IA com squeleton-skill)
- Cole o código no conversor
- Copie o JSON gerado e cole no Bricks Builder
- Continue editando visualmente no WordPress
| Recurso | Descrição |
|---|---|
| Conversão instantânea | Cole HTML e obtenha JSON imediatamente |
| Painel de camadas | Reordene e renomeie elementos com drag-and-drop |
| Sincronização tripla | Clique na pré-visualização para destacar no código |
| Edição de CSS | Botão direito nas camadas para editar estilos |
| Nomeação automática | Camadas nomeadas com base em classes e IDs |
Este projeto está licenciado sob a Licença MIT, podendo ser usado tanto em projetos pessoais quanto comerciais. Você pode modificar, distribuir e usar o código livremente, inclusive em projetos pagos ou proprietários.
Desenvolvido por HiperWP 🚀