HiperWP Squeleton
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.
Princípios Fundamentais
O nome "esqueleto" reflete seu propósito: fornecer a estrutura base para os layouts, evitando que CSS adicional seja escrito para cada nova classe, além de criar componentes HTML reutilizáveis que podem ser transportados entre os projetos que fazem uso do boilerplate.
Ao usar essa habilidade, sempre prefira usar e combinar as classes do Squeleton ao invés de criar CSS novo. Para necessidades que geralmente envolvem JavaScript, como Carrosséis, Modais, Ajax, Animações, Notificações Toasts, Reatividade e Cookies, o Squeleton conta com bibliotecas integradas que podem ser aproveitadas.
Perguntas antes de começar
Note que o Squeleton é deliberadamente agnóstico em relação a paleta de cores, família de fontes e estilos muito específicos. Esta neutralidade é uma decisão estratégica para maximizar sua portabilidade entre diferentes temas e projetos. O foco está em fornecer estrutura, grid e utilitários essenciais, deixando a identidade visual para o desenvolvedor definir.
Ao desenvolver com Squeleton, você pode estar trabalhando em um projeto que já tem o boilerplate integrado e faz uso de arquivos adicionais de estilos e scripts personalizados. Para saber de onde partir, sempre pergunte:
- Este projeto já possui o Squeleton integrado ou devo incluir seus arquivos via CDN?
- Este projeto já tem uma folha de estilos adicional (CSS) com cores, família de fontes e formatos exclusivos?
- Este projeto já tem arquivos JavaScript personalizados além das bibliotecas do Squeleton?
- Caso existam estilos (CSS) ou scripts (JS) personalizados, pode me indicar os arquivos para que eu os combine da melhor forma com a base do Squeleton?
Criando CSS ou JS personalizado
Somente crie CSS ou JavaScript novo quando não existir uma classe ou biblioteca do Squeleton que resolva a necessidade. Nestes casos:
Para CSS personalizado:
- Se estiver trabalhando em um arquivo HTML, adicione uma tag
<style>no<head>do documento - Se o projeto tiver um arquivo CSS personalizado separado, edite esse arquivo diretamente
Para JavaScript personalizado:
- Se estiver trabalhando em um arquivo HTML, adicione uma tag
<script>antes do fechamento do</body> - Se o projeto tiver um arquivo JS personalizado separado, edite esse arquivo diretamente
- Sempre verifique se as bibliotecas integradas do Squeleton (HTMX, VanJS, Embla, etc.) já resolvem o problema antes de criar código novo
Instalação e Configuração
Via CDN
<!-- CSS (Head) -->
<link rel="stylesheet" href="https://cdn.squeleton.dev/squeleton.v4.min.css">
<!-- JavaScript (Head) -->
<script src="https://cdn.squeleton.dev/squeleton-main.v4.min.js"></script>
<!-- JavaScript (Footer) -->
<script src="https://cdn.squeleton.dev/squeleton-scripts.v4.min.js"></script>
Arquivos para Download
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)
Consulta direta ao CSS: Em caso de dúvida sobre a existência de uma classe específica ou para ter uma visão completa da estrutura do framework, consulte diretamente o arquivo squeleton.v4.css (versão não-minificada). Isso permite verificar todas as classes disponíveis, seus valores exatos e a organização das media queries.
Estrutura Base CSS
O Squeleton define estilos base em elementos HTML que influenciam o comportamento de layout:
Reset e Box Model
*, ::after, ::before {
box-sizing: border-box;
}
Body como Flex Container
body {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100vh;
}
Main e Section como Flex Containers
main, section {
display: flex;
flex-direction: column;
margin-left: auto;
margin-right: auto;
width: 100%;
}
Implicações Práticas
Importante: Como body, main e section já são flex containers com flex-direction: column:
Classes de alinhamento funcionam no eixo vertical por padrão:
f-items-centerem<section>→ centraliza horizontalmente (cross-axis)f-justify-centerem<section>→ centraliza verticalmente (main-axis)
Para layout horizontal, adicione
f-row:<!-- Itens lado a lado dentro de section --> <section class="f-row f-items-center f-justify-between"> <div>Esquerda</div> <div>Direita</div> </section>Elementos block dentro de section/main se empilham naturalmente (comportamento column).
Para centralizar conteúdo em hero sections:
<!-- Correto: section já é flex-column, só precisa de alinhamento --> <section class="h-100vh f-justify-center f-items-center"> <h1>Centralizado vertical e horizontalmente</h1> </section>Não é necessário adicionar
d-flexem<body>,<main>ou<section>— eles já são flex containers.
Sistema Responsivo Híbrido
O Squeleton usa uma abordagem híbrida única: Grid mobile-first + Utilitários desktop-first.
Breakpoints para Colunas de Grid (Mobile-First)
Colunas usam min-width - comece em mobile e expanda para desktop:
| Breakpoint | Dimensão | Exemplo |
|---|---|---|
c-xs-{1-12} |
≤ 639px (base) | c-xs-12 |
c-sm-{1-12} |
≥ 640px | c-sm-6 |
c-md-{1-12} |
≥ 992px | c-md-4 |
c-lg-{1-12} |
≥ 1200px | c-lg-3 |
⚠️ Sempre inicie com c-xs-{número}: A base mobile é obrigatória para o grid.
- ✅ Correto:
c-xs-12 c-md-6(100% mobile, 50% desktop) - ❌ Errado:
c-md-6(falta o c-xs-)
Breakpoints para Classes Utilitárias (Desktop-First)
Diferente do grid, classes utilitárias usam @max-width - escreva para desktop, ajuste para mobile:
- Sem prefixo = desktop (padrão)
- Adicione
md-,sm-,xs-para ajustar em telas menores - Não existe
lg-porque desktop já é o padrão
Classes utilitárias criam uma "redução progressiva":
| Breakpoint | Query CSS | Quando Aplica | Exemplo |
|---|---|---|---|
xs- |
@media (max-width: 639px) |
0px até 639px | xs-p-20-all |
sm- |
@media (max-width: 991px) |
0px até 991px | sm-d-flex |
md- |
@media (max-width: 1199px) |
0px até 1199px | md-w-50 |
| Sem prefixo | (sem @media) | Todos os tamanhos | p-20-all |
⚠️ Comportamento de Sobrescrita por Especificidade:
Como todos usam @max-width, a ordem de especificidade é:
xs-sobrescrevesm-,md-e global em ≤639px (mais específico)sm-sobrescrevemd-e global em ≤991pxmd-sobrescreve global em ≤1199px- Desktop (≥1200px) = usa classe global ou padrão CSS
Nota: Não existe lg- para classes utilitárias.
Três padrões de uso:
Sem breakpoint = global (base para todos os tamanhos)
<div class="p-20-all d-flex w-50"> <!-- Aplica em todos os tamanhos -->Apenas breakpoints = redução progressiva do maior para menor
<div class="sm-text-center"> <!-- ≤991px: center | ≥992px: padrão (left) --> <div class="xs-text-center sm-text-center"> <!-- ≤639px: center (xs mais específico) 640-991px: center (sm) ≥992px: padrão (left) -->Global + breakpoints = base global sobrescrita progressivamente
<div class="text-left sm-text-center"> <!-- ≤991px: center | ≥992px: left (global) --> <div class="p-20-all xs-p-30-all"> <!-- ≤639px: 30px (xs) | ≥640px: 20px (global) -->
Grid System (12 Colunas)
<div class="container"> <!-- max-width: 1250px, centralizado -->
<div class="row"> <!-- display: flex, flex-wrap: wrap -->
<div class="c-xs-12 c-md-8">Conteúdo</div>
<div class="c-xs-12 c-md-4">Sidebar</div>
</div>
</div>
Colunas
- Padrão:
c-xs-{1-12},c-sm-{1-12},c-md-{1-12},c-lg-{1-12} - Auto:
c-auto(flex: 1 1 0%) - Centralizar:
c-center(margin: 0 auto)
Containers
.container- max-width: 1250px, centralizado (padrão para conteúdo).container-fluid- width: 100% (para seções full-width)
Quando usar cada um:
container→ Conteúdo centralizado (textos, cards, grids de produtos) - usar na maioria dos casoscontainer-fluid→ Conteúdo sem margem lateral (galerias full-width, dashboards, mapas)
Gaps (espaçamento entre colunas)
O .row tem display flex e gap padrão de 30px. Use classes gap-{valor} para alterar:
.gap-0- 0px.gap-5- 5px.gap-10- 10px.gap-15- 15px.gap-20- 20px.gap-25- 25px.gap-30- 30px (padrão do row).gap-35- 35px.gap-40- 40px.gap-45- 45px.gap-50- 50px- Responsivos:
{xs|sm|md}-gap-{0-50}(intervalo de 5)- Exemplos:
xs-gap-10,sm-gap-20,md-gap-0
- Exemplos:
Nota: O gap aplica espaçamento em ambas as direções (horizontal e vertical) quando colunas quebram de linha.
Performance - Content Visibility (Lazy Rendering)
Classes .render-auto, .render-auto-small, .render-auto-large para otimizar containers below-the-fold usando content-visibility: auto. Aplicar em .container ou .container-fluid. Consulte references/grid-reference.md para detalhes.
Classes Utilitárias de Padding (p-) e Margin (m-)
Padrão: {p|m}-{valor}-{direção}
| Direção | Aplicação |
|---|---|
-all |
Todos os lados |
-t |
Top |
-b |
Bottom |
-l |
Left |
-r |
Right |
-tb |
Top + Bottom |
-lr |
Left + Right |
Valores: 0, 5, 10, 15, 20, 25, 30... até 100 (intervalo de 5)
- Os números representam pixels diretos:
p-20-all= padding de 20px - Responsivo:
xs-,sm-,md-ou sem prefixo (desktop)
<div class="p-20-tb m-10-lr">Padding 20px vertical, margin 10px horizontal</div>
<div class="xs-p-10-all md-p-30-all">10px mobile, 30px tablet+</div>
<div class="m-50-b p-15-lr">Margem 50px abaixo, padding 15px lateral</div>
<div class="xs-m-5-t sm-m-15-t m-40-t">Margem top progressiva: 5px → 15px → 40px</div>
Margin Auto (centralização):
<div class="m-auto-lr">Centralizado horizontalmente</div>
Consulte references/padding-reference.md e references/margin-reference.md para mais informações e exemplos.
Classes Utilitárias de Width (w-)
Width em Pixels - w-{valor}px:
- 5px até 100px (intervalo de 5px)
- 100px até 300px (intervalo de 10px)
- 300px até 900px (intervalo de 50px)
- Responsivos:
md-w-{valor}px,sm-w-{valor}px,xs-w-{valor}px
Width Percentual - w-{valor} (sem unidade):
- 10% até 100% (intervalo de 5%)
- Responsivos:
md-w-{valor},sm-w-{valor},xs-w-{valor}
Width Especiais:
w-auto- largura automática- Responsivos:
md-w-auto,sm-w-auto,xs-w-auto
Todas as classes
w-*pxincluemmax-width: 100%automaticamente, evitando overflow horizontal em telas menores.
<!-- Largura fixa -->
<div class="w-250px">250px de largura</div>
<!-- Largura percentual responsiva -->
<div class="w-50 xs-w-100">50% desktop, 100% mobile</div>
<!-- Modal com largura controlada -->
<div class="w-600px">Modal centrado</div>
Consulte references/width-reference.md para lista completa de valores.
Classes Utilitárias de Height (h-)
Height em Pixels - h-{valor}px:
- 5px até 100px (intervalo de 5px)
- 100px até 300px (intervalo de 10px)
- 300px até 900px (intervalo de 50px)
- Responsivos:
md-h-{valor}px,sm-h-{valor}px,xs-h-{valor}px
Height Percentual e Especiais:
h-50(min-height: 50%)h-100(min-height: 100%)h-100vh(min-height: 100vh) - útil para hero sectionsh-100dvh(min-height: 100dvh) - melhor para mobileh-auto(min-height: auto)- Responsivos:
md-h-{valor},sm-h-{valor},xs-h-{valor}
<!-- Hero section altura total -->
<section class="h-100vh f-items-center">Hero</section>
<!-- Cards com mesma altura -->
<div class="row">
<div class="c-md-4"><div class="card h-100">Card 1</div></div>
<div class="c-md-4"><div class="card h-100">Card 2</div></div>
</div>
<!-- Altura fixa -->
<div class="h-300px">300px de altura</div>
Consulte references/height-reference.md para lista completa de valores.
Classes Utilitárias de Display (d-)
<div class="d-none">Oculto</div>
<div class="d-block">Block</div>
<div class="d-inline">Inline</div>
<div class="d-inline-block">Inline-block</div>
<div class="d-flex">Flex</div>
<div class="d-inline-flex">Inline Flex</div>
<div class="d-grid">Grid</div>
<div class="d-contents">Contents</div>
<div class="d-table">Table</div>
<div class="d-table-cell">Table Cell</div>
<div class="xs-d-none md-d-block">Oculto mobile, visível desktop</div>
Consulte references/display-reference.md para mais informações e exemplos.
Classes Utilitárias de Flexbox (f-)
Container:
.f-grid- display: flex + wrap + row (ideal para layouts).d-flex- display: flex.f-row,.f-col- direção.f-wrap,.f-nowrap- quebra de linha
Alinhamento:
.f-items-center,.f-items-start,.f-items-end- align-items (dentro de cada linha).f-justify-center,.f-justify-between,.f-justify-evenly- justify-content (eixo principal).f-content-center,.f-content-between,.f-content-around- align-content (múltiplas linhas).f-self-center,.f-self-start,.f-self-end- align-self individual
Crescimento:
.f-grow-1,.f-grow-2,.f-grow-3.f-shrink-0,.f-shrink-1.f-auto-max(flex: 1 1 auto).f-auto-min(flex: 0 1 auto)
Gaps flex: .f-gap-{0-50} (intervalo de 5)
<!-- Centralizar conteúdo -->
<div class="d-flex f-items-center f-justify-center h-100vh">
Centralizado
</div>
<!-- Header com logo e menu -->
<header class="d-flex f-items-center f-justify-between p-20-tb">
<div class="logo">Logo</div>
<nav class="d-flex f-gap-20">...</nav>
</header>
Consulte references/flex-reference.md para mais informações e exemplos.
Classes Utilitárias de Border
Border Completo e por Lado:
.border-all- borda em todos os lados (1px solid).border-t,.border-b,.border-l,.border-r- borda em um lado.border-tb- borda top e bottom.border-lr- borda left e right
Border Width:
.border-w-{1-5}- espessura de 1px a 5px
Border Style:
.border-solid,.border-dashed,.border-dotted.border-none,.border-hidden,.border-transparent
Remover Border:
.border-0-{t|b|l|r|all}- Responsivos:
{xs|sm|md}-border-0-*
Border Radius:
.border-rd-{0-20}- 0px a 20px (1 em 1).border-rd-50,.border-rd-100- circular (50%).border-rd-{valor}-t- só cantos superiores (valores pares: 0, 2, 4... 20).border-rd-{valor}-b- só cantos inferiores (valores pares: 0, 2, 4... 20)- Responsivos:
{xs|sm|md}-border-rd-*(mesmos padrões acima)
Classes Utilitárias de Opacity
Opacity de Elemento:
.opacity-{1-9}- onde 1 = 0.15 e 9 = 0.9
Opacity Background (overlay absoluto):
.opacity-bg-{0-10}- overlay com position absolute- 0 = opacity 1 (opaco), 10 = opacity 0 (transparente)
- Útil para overlays sobre imagens
Classes Utilitárias de Z-Index
.z-index-{0-5}- z-index de 0 a 5.z-index-111,.z-index-1111- valores altos.z-index-minus-2- z-index negativo (-2)
Classes Utilitárias de Tipografia
Font Size - Escala Numérica (fs-1 a fs-16):
.fs-1a.fs-6- tamanhos fixos (10px a 15px).fs-7a.fs-16- tamanhos fluidos com clamp() (16px a 64px)- Responsivos:
md-fs-{1-16},sm-fs-{1-16},xs-fs-{1-16}
| Classe | Tamanho | Uso |
|---|---|---|
.fs-1 |
10px | Micro labels |
.fs-2 |
11px | Badges |
.fs-3 |
12px | Small text |
.fs-4 |
13px | Secondary |
.fs-5 |
14px | Body small |
.fs-6 |
15px | Body alt |
.fs-7 |
15→16px | Body padrão |
.fs-8 |
16→17px | Body large |
.fs-9 |
17→18px | Lead |
.fs-10 |
18→20px | Subtítulo |
.fs-11 |
21→24px | Título pequeno |
.fs-12 |
24→28px | Título médio |
.fs-13 |
28→32px | Título grande |
.fs-14 |
34→40px | Headline |
.fs-15 |
40→48px | Hero |
.fs-16 |
52→64px | Display |
Exemplo responsivo:
<h1 class="fs-14 md-fs-12 sm-fs-10 xs-fs-8">Título que escala com a tela</h1>
Font Weight e Espaçamento:
.fw-{300-900}- font-weight (300, 400, 500, 600, 700, 800, 900).ls-{0-5}- letter-spacing positivo.ls-minus-{0-2|0-5|1|2|3}- letter-spacing negativo
Font Size - Ajustes Percentuais:
.minus-{10-50}- font-size menor (50-90%).more-{10-50}- font-size maior (110-150%)
Alinhamento e Transformação:
.text-left,.text-center,.text-right.text-uppercase,.text-lowercase.lh-1-{0-9}- line-height (1.0 a 1.9)
Classes Utilitárias de Posicionamento
.ps-relative,.ps-absolute,.ps-fixed,.ps-sticky,.ps-static.top-0,.bottom-0,.left-0,.right-0,.top-auto,.bottom-auto- valores de posição.absolute-xy- centraliza absoluto (transform translate -50%)
Outras Classes Utilitárias
- Cursor:
.cursor-pointer,.cursor-grab,.cursor-not-allowed, etc. - Imagem:
.obj-cover,.obj-contain,.aspect-16-9,.aspect-1-1, etc. - Texto:
.truncate,.line-clamp-2,.line-clamp-3 - Interação:
.pe-none,.pe-auto - Visibilidade:
.visible-xs,.visible-sm,.visible-md,.visible-lg- mostra apenas no breakpoint - Vídeo:
.video-responsive,.embed-responsive-16by9- iframes/vídeos responsivos
Consulte references/utilities-reference.md para lista completa.
Animações
Com WOW (ativa ao entrar no viewport)
<div class="wow fadeInUp">Anima ao scroll</div>
<div class="wow bounceIn" data-wow-delay="0.2s">Com delay</div>
<div class="wow pulse" data-wow-iteration="3">3 vezes</div>
Com Animated (ativa imediatamente)
<div class="animated fadeIn">Imediato</div>
<div class="animated pulse infinite">Loop infinito</div>
<div class="animated zoomIn delay-500 duration-2000">Com delay e duração</div>
Animações disponíveis:
- Fade: fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight, fadeOut
- Bounce/Zoom: bounceIn, zoomIn, zoomOut
- Rotate/Flip: rotateIn, flipIn
- BackIn: backInDown, backInLeft, backInRight, backInUp
- Special: glowIn, slideIn, popIn, liquidIn, magnetIn, floatIn, waveIn
- Attention: flash, pulse, shakeX, swing, tada
Classes auxiliares:
.delay-{100-5000}(100, 200, 250, 300... 1000, 1250, 1500...).duration-{500-3000}.repeat-{2-5},.infinite.reverse,.alternate
Animações contínuas prontas: .anima-pulse, .anima-shake, .anima-heart, .anima-skeleton
Consulte references/animations-reference.md para mais informações e exemplos.
Bibliotecas JavaScript
O Squeleton integra bibliotecas JavaScript otimizadas e pré-configuradas:
| Biblioteca | Finalidade | GitHub |
|---|---|---|
| HTMX | Requisições AJAX declarativas via atributos HTML. Ver references/htmx-reference.md |
github.com/bigskysoftware/htmx |
| Embla Carousel | Carrossel minimalista com swipe fluido. Ver references/carousel-reference.md |
github.com/davidjerleke/embla-carousel |
| js-cookie | Gerenciamento de cookies do navegador. Ver references/cookies-reference.md |
github.com/js-cookie/js-cookie |
| a11y-dialog | Modais acessíveis e leves. Ver references/modal-reference.md |
github.com/KittyGiraudel/a11y-dialog |
| VanJS | Framework reativo minimalista. Ver references/vanjs-reference.md |
github.com/vanjs-org/van |
| Toastify | Notificações toast customizáveis. Ver references/toastify-reference.md |
github.com/apvarun/toastify-js |
| VenoBox 2 | Lightbox para imagens, vídeos e galerias. Ver references/venobox-reference.md |
github.com/nicholasio/venobox |
| Counter-Up2 | Animação de contagem numérica. Ver references/counter-reference.md |
github.com/bfintal/Counter-Up2 |
| Wow2 Animation | Animações on-scroll. Ver references/animations-reference.md |
github.com/graingert/wow |
Modais com a11y-dialog
Modais com classe .modal-dialog já vêm com scroll lock automático (eventos show/hide).
Configuração a11y-dialog: Os atributos originais data-a11y-dialog-* foram renomeados para data-modal-*:
| Original | Squeleton |
|---|---|
data-a11y-dialog |
data-modal |
data-a11y-dialog-show |
data-modal-show |
data-a11y-dialog-hide |
data-modal-hide |
Veja exemplo completo em "Padrões Comuns de Uso" > "Modal Centralizado". Consulte references/modal-reference.md para mais opções.
Ícones
Prefixo: iccon-{nome}-{variante}
<span class="iccon-home-1"></span>
<span class="iccon-user-2"></span>
IMPORTANTE: Use APENAS ícones da lista oficial em references/icons-reference.md. Ícones inventados ou de outros frameworks NÃO funcionarão. SEMPRE consulte a referência ANTES de usar qualquer ícone.
Consulte references/icons-reference.md para a lista completa organizada por categoria.
Tooltips
Tooltips em CSS puro baseados na Balloon.css (já integrada):
<button aria-label="Texto do tooltip" data-balloon-pos="up">Hover aqui</button>
Posições: up, down, left, right, up-left, up-right, down-left, down-right
Consulte references/tooltips-reference.md para mais opções.
Padrões Comuns de Uso
Hero Section Full Height
<section class="h-100vh f-items-center f-justify-center text-center p-30-all">
<div class="w-600px">
<h1 class="fs-13 fw-700 m-20-b">Título Principal</h1>
<p class="fs-9 opacity-8">Subtítulo descritivo</p>
</div>
</section>
Grid de Cards Responsivo
<section class="p-60-tb">
<div class="container p-60-tb xs-p-30-tb render-auto">
<div class="row gap-10">
<div class="c-xs-12 c-sm-6 c-lg-3">
<div class="border-all border-rd-8 p-20-all cursor-pointer">
<img src="produto.jpg" class="w-100 border-rd-4 m-15-b">
<h4 class="fs-5 m-10-b">Nome do Produto</h4>
<p class="fs-9 fw-700">R$ 99,90</p>
</div>
</div>
<!-- Repetir para 20+ produtos -->
</div>
</div>
</section>
Header com Logo e Menu
<header class="p-20-tb border-b">
<div class="container">
<div class="d-flex f-items-center f-justify-between">
<div class="logo">
<img src="logo.svg" class="h-40px">
</div>
<nav class="d-flex f-gap-20 xs-d-none">
<a href="#" class="cursor-pointer">Home</a>
<a href="#" class="cursor-pointer">Sobre</a>
<a href="#" class="cursor-pointer">Contato</a>
</nav>
</div>
</div>
</header>
Modal Centralizado
<!-- Trigger -->
<button data-modal-show="exemplo-modal" class="cursor-pointer">Abrir Modal</button>
<!-- Modal -->
<div data-modal="exemplo-modal" class="modal-dialog" aria-hidden="true">
<div class="dialog-content">
<div class="dialog-backdrop" data-modal-hide></div>
<div class="dialog-inline w-500px">
<button class="dialog-close" data-modal-hide></button>
<div class="modal-popup border-rd-10 p-30-all">
<h3 class="fs-11 m-20-b">Título do Modal</h3>
<p>Conteúdo...</p>
</div>
</div>
</div>
</div>
Carrossel com Embla
Embla Carousel requer inicialização via JavaScript. Estrutura HTML:
<div class="slide__viewport">
<div class="slide__row gap-15">
<div class="slide__item c-xs-12 c-sm-6 c-md-4">
<img src="slide1.jpg" class="w-100">
</div>
<div class="slide__item c-xs-12 c-sm-6 c-md-4">
<img src="slide2.jpg" class="w-100">
</div>
</div>
<div class="slide__dots"></div>
<button class="slide__prev"><span class="iccon-chevron-left-1"></span></button>
<button class="slide__next"><span class="iccon-chevron-right-1"></span></button>
</div>
Consulte references/carousel-reference.md para inicialização e opções avançadas.
Lightbox com VenoBox
VenoBox já vem inicializado com os seletores: .open-gallery, .open-video, .open-iframe
<!-- Galeria de imagens -->
<a href="foto1.jpg" class="open-gallery" data-gall="galeria1"><img src="thumb1.jpg"></a>
<a href="foto2.jpg" class="open-gallery" data-gall="galeria1"><img src="thumb2.jpg"></a>
<!-- Vídeo -->
<a href="https://youtube.com/watch?v=xxx" class="open-video">Ver vídeo</a>
<!-- Iframe -->
<a href="pagina.html" class="open-iframe">Abrir iframe</a>
Consulte references/venobox-reference.md para mais opções.
Arquivos de Referência
Para lista completa de todas as classes disponíveis, consulte os arquivos em references/:
- grid-reference.md - Sistema de grid de 12 colunas
- display-reference.md - Classes de display, overflow e position
- flex-reference.md - Flexbox completo
- padding-reference.md - Todas as classes de padding
- margin-reference.md - Todas as classes de margin
- width-reference.md - Largura e max-width
- height-reference.md - Altura e min-height
- typography-reference.md - Tipografia e texto
- border-reference.md - Bordas, radius, opacity e z-index
- utilities-reference.md - Position, visibility, float, background
- animations-reference.md - Animações WOW e Animated
- icons-reference.md - Todos os ícones organizados por categoria
- modal-reference.md - Modal (a11y-dialog)
- carousel-reference.md - Carrossel (Embla)
- venobox-reference.md - Lightbox (VenoBox)
- tooltips-reference.md - Tooltips (Balloon.css)
- counter-reference.md - Contagem animada (Counter-Up2)
- htmx-reference.md - Requisições AJAX (HTMX)
- cookies-reference.md - Gerenciamento de cookies (js-cookie)
- vanjs-reference.md - Framework reativo (VanJS)
- toastify-reference.md - Notificações toast (Toastify)