Squeleton - O boilerplate essencial para interfaces modernas e intuitivass

Instalação e Configuração

Via CDN

A forma mais rápida de começar - sem necessidade de build ou deploy:

								<!-- 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)

Template - HTML Base

								<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meu Site - Squeleton</title>
    <link rel="stylesheet" href="https://cdn.squeleton.dev/squeleton.v4.min.css">
    <script src="https://cdn.squeleton.dev/squeleton-main.v4.min.js"></script>
</head>
<body>
    <section class="p-80-tb">          <!-- Section Flex -->
        <div class="container">        <!-- Container responsivo -->
            <div class="row">          <!-- Linha Flex -->
                <div class="c-xs-12 c-md-8">
                    Conteúdo Principal
                </div>
                <div class="c-xs-12 c-md-4">
                    Sidebar
                </div>
            </div>
        </div>
    </section>
    <script src="https://cdn.squeleton.dev/squeleton-scripts.v4.min.js"></script>
</body>
</html>
							

Breakpoints

Breakpoints e Responsividade

O Squeleton usa uma abordagem híbrida única: Grid mobile-first (colunas expandem de mobile para desktop) + Utilitários desktop-first (ajustes reduzem de desktop para mobile).

Isso combina praticidade no desenvolvimento (escreva para desktop, ajuste só o necessário para mobile) com layouts responsivos otimizados (grids naturalmente empilham em mobile e dividem em desktop).

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)

Lógica de uso com Grid Mobile-First

									<!-- ✅ SEMPRE comece com c-xs-12 -->
<div class="c-xs-12 c-sm-6 c-md-4 c-lg-3">
    Extra Small: 100% → Small: 50% → Medium: 33% → Large: 25%
</div>

<!-- ❌ Nunca omita o breakpoint base -->
<div class="c-md-6">Falta c-xs-</div>
								

Lógica de uso com Utilitários Desktop-First

									<!-- ✅ Escreva para desktop, ajuste para mobile -->
<div class="p-60-tb xs-p-30-tb">
    Desktop: 60px | Mobile: 30px
</div>

<!-- ❌ Não existe lg- porque desktop já é o padrão -->
<div class="d-flex xs-d-block">
	Flex em desktop, block em mobile
</div>
									
								

Grid System

Grid System Responsivo (12 Colunas)

Sistema de grade mobile-first desenvolvido com flexbox. Comece com c-xs- como base e expanda progressivamente com c-sm-, c-md-, c-lg-.

Estrutura Básica:

									<div class="container">          <!-- Container responsivo -->
    <div class="row">            <!-- Linha Flex -->
        <div class="c-xs-12 c-md-8">
            Conteúdo Principal
        </div>
        <div class="c-xs-12 c-md-4">
            Sidebar
        </div>
    </div>
</div>
								

Demonstração Visual

1

2

3

4

5

6

7

8

9

10

11

12

Exemplos Responsivos:

c-xs-12 c-md-8 Extra Small: 100% | Medium: 66.67%

c-xs-12 c-md-4 Extra Small: 100% | Medium: 33.33%

c-xs-12 c-sm-6 c-md-4

c-xs-12 c-sm-12 c-md-4

c-xs-6 c-sm-12 c-lg-6

c-xs-12 c-lg-8 c-center

Containers e Gaps

Sistema flexível de containers e controle de espaçamento entre colunas:

Gap Padrão (30px)

											<!-- Espaçamento padrão -->
<div class="row">
	<div class="c-xs-4">
		Coluna 1
	</div>
	<div class="c-xs-4">
		Coluna 2
	</div>
	<div class="c-xs-4">
		Coluna 3
	</div>
</div>

<!-- Row: Linha Flex -->
<!-- Colunas: Gap de 30px -->
											
										

Gaps Customizados

											/* Gap de Grid (0-50, intervalo de 5) */
.gap-0   /* 0px */
.gap-5   /* 5px */
.gap-10  /* 10px */
.gap-15  /* 15px */
.gap-20  /* 20px */
.gap-25  /* 25px */
.gap-30  /* 30px - padrão */
.gap-35  /* 35px */
.gap-40  /* 40px */
.gap-45  /* 45px */
.gap-50  /* 50px */

/* Gap Responsivo */
.md-gap-{0-50}  /* Medium ≤1199px */
.sm-gap-{0-50}  /* Small ≤991px */
.xs-gap-{0-50}  /* Extra Small ≤639px */

<!-- Exemplos -->
<div class="row gap-15">...</div>
<div class="row gap-0">...</div>
<div class="row sm-gap-10 xs-gap-5">...</div>
										

Demonstração Visual

Containers

.container (max-width: 1250px)

.container-fluid (width: 100%)

Gaps Visuais

Gap padrão (15px)

Col 1

Col 2

Gap reduzido (5px)

Col 1

Col 2

Sem gap (0px)

Col 1

Col 2

Exemplos de uso de Gap com Grid Responsivo

									<!-- Gap padrão (15px) - Uso geral -->
<div class="container">
  <div class="row">
    <div class="c-xs-12 c-md-8">
        Conteúdo Principal
    </div>
    <div class="c-xs-12 c-md-4">
        Sidebar
    </div>
  </div>
</div>

<!-- Gap reduzido (gap-10) - Cards próximos -->
<div class="container-fluid">
  <div class="row gap-15">
    <div class="c-xs-6 c-md-3">Card 1</div>
    <div class="c-xs-6 c-md-3">Card 2</div>
    <div class="c-xs-6 c-md-3">Card 3</div>
    <div class="c-xs-6 c-md-3">Card 4</div>
  </div>
</div>

<!-- Sem gap (gap-0) - Elementos unidos -->
<div class="row gap-0">
  <div class="c-xs-4">Tab 1</div>
  <div class="c-xs-4">Tab 2</div>
  <div class="c-xs-4">Tab 3</div>
</div>

<!-- Gap Combinado com Breakpoints -->
<div class="container">
  <div class="row sm-gap-10 xs-gap-5">
    <div class="c-xs-6 c-md-3">Card 1</div>
    <div class="c-xs-6 c-md-3">Card 2</div>
    <div class="c-xs-6 c-md-3">Card 3</div>
    <div class="c-xs-6 c-md-3">Card 4</div>
  </div>
</div>
								

Container vs Container-fluid:

									<!-- Centralizado, max 1250px -->
<div class="container">
  <div class="row">...</div>
</div>

<!-- Largura total da tela -->
<div class="container-fluid">
  <div class="row">...</div>
</div>
								

Classes Utilitárias

Abordagem Desktop-First

Classes utilitárias usam desktop-first: escreva para desktop (sem prefixo) e ajuste para telas menores com md-, sm-, xs-.

Não existe lg- para utilitários porque desktop já é o padrão. Isso reduz código e acelera o desenvolvimento.

								<!-- Desktop: 60px | Tablet: 40px | Mobile: 20px -->
<section class="p-60-tb md-p-40-tb xs-p-20-tb">

<!-- Desktop: flex | Mobile: block -->
<div class="d-flex xs-d-block">
							

Classes de Padding e Margin

Sistema duplo: pixels para precisão e percentuais para responsividade:

Sufixo	Aplicação	Exemplo
-all	Todos os lados	p-20-all
-t	Superior (top)	m-15-t
-b	Inferior (bottom)	p-10-b
-l	Esquerda (left)	m-5-l
-r	Direita (right)	p-25-r
-lr	Horizontal (left + right)	m-20-lr
-tb	Vertical (top + bottom)	p-30-tb

Valores em Pixels

										<!-- Padding -->
p-5-all, p-10-all, p-15-all
p-20-all, p-25-all, p-30-all
...até p-100-all (intervalo de 5px)

<!-- Margin -->
m-5-all, m-10-all, m-15-all
m-20-all, m-25-all, m-30-all
...até m-100-all (intervalo de 5px)

<!-- Margin Auto (centralização) -->
m-auto-lr (centraliza horizontalmente)
m-auto-l, m-auto-r, m-auto-t, m-auto-b
									

Reset de Espaçamento

										<!-- Remove padding -->
p-0-all
p-0-t, p-0-b, p-0-tb
p-0-l, p-0-r, p-0-lr

<!-- Remove margin -->
m-0-all
m-0-t, m-0-b, m-0-tb
m-0-l, m-0-r, m-0-lr
									

Espaçamento com Breakpoints

										<!-- Exemplos responsivos -->
xs-p-20-all
sm-p-60-lr
md-p-30-all

xs-m-10-all
sm-m-20-lr
md-m-50-all

<!-- Exemplo combinado -->
class="xs-p-10-all md-p-20-tb sm-m-10-lr"
									

Demonstração Visual

p-20-all

p-20-tb
m-30-lr
m-10-tb

p-30-tb

Classes de Largura e Altura

Larguras em Pixels

										/* 5px até 100px (intervalo de 5px) */
.w-5px, .w-10px, .w-15px, .w-20px
.w-25px, .w-30px... até .w-100px

/* 100px até 300px (intervalo de 10px) */
.w-110px, .w-120px... até .w-300px

/* 300px até 700px (intervalo de 50px) */
.w-350px, .w-400px... até .w-700px

/* Responsivos (mesmo padrão) */
md-w-{valor}px, sm-w-{valor}px, xs-w-{valor}px

<!-- Exemplo -->
<div class="w-50px">50px de largura</div>
										
									

Alturas Dinâmicas

										/* 5px até 100px (intervalo de 10px) */
.h-5px, .h-10px, .h-20px, .h-30px
.h-40px, .h-50px, .h-60px, .h-70px
.h-80px, .h-90px, .h-100px

/* 100px até 700px (intervalo de 50px) */
.h-150px, .h-200px, .h-250px...
...até .h-700px

/* Responsivos (mesmo padrão) */
md-h-{valor}px, sm-h-{valor}px, xs-h-{valor}px

<!-- Exemplo -->
<div class="h-200px">200px de altura</div>
										
									

Max-Width Classes

										/* Max-Width (100900px, intervalo de 50px) */
.w-max-100px, .w-max-150px
.w-max-200px, .w-max-250px
.w-max-300px, .w-max-350px
.w-max-400px, .w-max-450px
.w-max-500px, .w-max-550px
.w-max-600px, .w-max-650px
.w-max-700px, .w-max-750px
.w-max-800px, .w-max-850px
.w-max-900px

<!-- Exemplo -->
<div class="w-max-600px">
	Largura máxima de 600px
</div>
									

Height Special Classes

										.h-100 /* min-height: 100% */
.h-100vh /* min-height: 100vh */
.h-auto /* height: auto */

<!-- Exemplo -->
<div class="h-100vh">
Altura total da viewport
</div>
									

Classes de Display

Controle total sobre a propriedade display dos elementos:

										<!-- Controle de visibilidade -->
.d-none            /* display: none */
.d-block           /* display: block */
.d-inline          /* display: inline */
.d-inline-block    /* display: inline-block */

<!-- Layout flexível -->
.d-flex            /* display: flex */
.d-inline-flex     /* display: inline-flex */
.d-grid            /* display: grid */
.d-contents        /* display: contents */

<!-- Layout em tabela -->
.d-table           /* display: table */
.d-table-cell      /* display: table-cell */

<!-- Exemplos práticos -->
<div class="d-flex">
    Layout flexível
</div>

<div class="d-none">
    Elemento oculto
</div>

<div class="d-table">
    <div class="d-table-cell">
        Célula
    </div>
</div>
									

										<!-- MD (≤1199px) | SM (≤991px) | XS (≤639px) -->
.md-d-none    .sm-d-none    .xs-d-none
.md-d-block   .sm-d-block   .xs-d-block
.md-d-inline  .sm-d-inline  .xs-d-inline
.md-d-flex    .sm-d-flex    .xs-d-flex
.md-d-grid    .sm-d-grid    .xs-d-grid
.md-d-table   .sm-d-table   .xs-d-table

<!-- Exemplos responsivos -->
<div class="d-block xs-d-none">
    Block global | Oculto ≤639px
</div>

<div class="d-block sm-d-flex">
    Block global | Flex ≤991px
</div>

<div class="d-flex sm-d-block xs-d-none">
    Flex ≥992px | Block ≤991px | Oculto ≤639px
</div>

<div class="d-none sm-d-block">
    Oculto ≥992px | Block ≤991px
</div>

<div class="d-grid sm-d-flex xs-d-block">
    Grid ≥992px | Flex ≤991px | Block ≤639px
</div>
									

Demonstração Visual

d-block

d-inline-block

d-flex
Item 1 d-flex
Item 2

d-table
célula 1

d-table
célula 2

Display Flexbox

Sistema completo de classes flexbox para layouts avançados:

Ativação do Flex Container

										<!-- Ativar flexbox -->

/* display: flex */
.d-flex

/* flex + wrap + row */
.f-grid

<!-- Direção dos itens -->
/* flex-direction: row */
.f-row

/* flex-direction: row-reverse */
.f-row-reverse

/* flex-direction: column */
.f-col

/* flex-direction: column-reverse */
.f-col-reverse

<!-- Exemplos com Breakpoints -->

.xs-f-grid
.md-f-row
.sm-f-row-reverse
.xs-f-col
.md-f-col-reverse
									

Quebra de Linha (Wrap)

										<!-- Controle de quebra -->

/* flex-wrap: nowrap */
.f-nowrap

/* flex-wrap: wrap */
.f-wrap

/* flex-wrap: wrap-reverse */
.f-wrap-reverse

<!-- Exemplos com Breakpoints -->

.md-f-nowrap
.sm-f-nowrap
.xs-f-nowrap

.md-f-wrap
.sm-f-wrap
.xs-f-wrap
									

Alinhamento dos Itens (align-items)

										<!-- Alinhamento básico -->
/* align-items: flex-start */
.f-items-start

/* align-items: center */
.f-items-center

/* align-items: flex-end */
.f-items-end

/* align-items: stretch */
.f-items-stretch

/* align-items: baseline */
.f-items-baseline

<!-- Variações avançadas -->
/* align-items: safe center */
.f-items-center-safe

/* align-items: safe flex-end */
.f-items-end-safe

/* align-items: last baseline */
.f-items-baseline-last
									

Justificação do Conteúdo (justify-content)

										<!-- Posicionamento básico -->
/* justify-content: flex-start */
.f-justify-start

/* justify-content: center */
.f-justify-center

/* justify-content: flex-end */
.f-justify-end

<!-- Distribuição de espaço -->
/* justify-content: space-between */
.f-justify-between

/* justify-content: space-around */
.f-justify-around

/* justify-content: space-evenly */
.f-justify-evenly

<!-- Variações especiais -->
/* justify-content: stretch */
.f-justify-stretch

/* justify-content: baseline */
.f-justify-baseline

/* justify-content: normal */
.f-justify-normal

/* justify-content: safe center */
.f-justify-center-safe

/* justify-content: safe flex-end */
.f-justify-end-safe
									

Alinhamento Individual (align-self)

										<!-- Controle individual dos itens -->
/* align-self: auto */
.f-self-auto

/* align-self: flex-start */
.f-self-start

/* align-self: center */
.f-self-center

/* align-self: flex-end */
.f-self-end

/* align-self: stretch */
.f-self-stretch

/* align-self: baseline */
.f-self-baseline

<!-- Versão segura -->
/* align-self: safe center */
.f-self-center-safe
									

Crescimento e Encolhimento

										<!-- Flex Grow -->
.f-grow-1 /* flex-grow: 1 */
.f-grow-2 /* flex-grow: 2 */
.f-grow-3 /* flex-grow: 3 */

<!-- Flex Shrink -->
.f-shrink-0 /* flex-shrink: 0 */
.f-shrink-1 /* flex-shrink: 1 */
.f-shrink-2 /* flex-shrink: 2 */

<!-- Flex Basis -->
.f-basis-0 /* flex-basis: 0 */
									

Gap de Itens Flex

										/* Gap Padrão (0-50, intervalo de 5) */
.f-gap-0  /* gap: 0 */
.f-gap-5  /* gap: 5px */
.f-gap-10 /* gap: 10px */
.f-gap-15 /* gap: 15px */
.f-gap-20 /* gap: 20px */
.f-gap-25 /* gap: 25px */
.f-gap-30 /* gap: 30px */
.f-gap-35 /* gap: 35px */
.f-gap-40 /* gap: 40px */
.f-gap-45 /* gap: 45px */
.f-gap-50 /* gap: 50px */

/* Gap Responsivo MD (≤1199px) */
.md-f-gap-{0-50}

/* Gap Responsivo SM (≤991px) */
.sm-f-gap-{0-50}

/* Gap Responsivo XS (≤639px) */
.xs-f-gap-{0-50}

<!-- Exemplo prático -->
<div class="f-grid f-gap-20 sm-f-gap-10 xs-f-gap-5">
    Gap 20px desktop | 10px tablet | 5px mobile
</div>
									

Patterns Mais Utilizados

										<!-- Centralizar horizontal e vertical -->
<div class="d-flex f-items-center f-justify-center">
	Conteúdo centralizado
</div>

<!-- Flexbox em Grid (flex + wrap + row) -->
<div class="f-grid f-gap-15">
	<span>Coluna 1</span>
	<span>Coluna 2</span>
	<span>Coluna 3</span>
</div>

<!-- Distribuir espaço igualmente -->
<div class="f-flex f-justify-between">
	<span>Início</span>
	<span>Meio</span>
	<span>Fim</span>
</div>

<!-- Item que ocupa espaço restante -->
<div class="d-flex">
	<div>Item Fixo</div>
	<div class="f-grow-1">Item Cresce</div>
	<div>Item Fixo</div>
</div>

<!-- Layout em coluna com footer fixo -->
<div class="d-flex f-col">
	<header>Cabeçalho</header>
	<main class="f-grow-1">Conteúdo</main>
	<footer>Rodapé</footer>
</div>
										
									

Exemplos Práticos de Layouts

									<!-- Header com logo e navegação -->
<header class="d-flex f-items-center f-justify-between">
    <div class="logo">Minha Marca</div>
    <nav class="d-flex f-items-center">
        <a href="#">Home</a>
        <a href="#">Sobre</a>
        <a href="#">Contato</a>
    </nav>
</header>

<!-- Layout com sidebar fixa e conteúdo flexível -->
<div class="d-flex">
    <aside class="sidebar f-shrink-0">Menu lateral</aside>
    <main class="content f-grow-1">Conteúdo principal</main>
</div>

<!-- Card com footer sempre no final -->
<div class="d-flex f-col">
    <div>Título do Card</div>
    <div class="f-grow-1">Conteúdo variável...</div>
    <div>Botões de ação</div>
</div>

<!-- Grid de cards responsivo -->
<div class="f-grid f-gap-10">
    <div class="f-basis-0 f-grow-1">Card 1</div>
    <div class="f-basis-0 f-grow-1">Card 2</div>
    <div class="f-basis-0 f-grow-1">Card 3</div>
</div>
								

Demonstração Visual

f-items-center

Item
Menor Item
Mais
Alto Item
Menor

f-justify-center

Item
1 Item
2 Item
3

f-grow-1

Fixo Cresce Fixo

f-justify-between

Logo Centro Menu

f-grid | f-gap-15

Coluna 1 Coluna 2 Coluna 3 Coluna 4 Coluna 5 Coluna 6

f-auto-min | f-auto-max

Item
f-auto-min Item
f-auto-max

Referência Rápida - Classes Essenciais

									<!-- Container -->
.d-flex             /* Display Flexbox */
.f-grid             /* Flexbox Grid (flex + wrap + row) - ideal para layouts em colunas */
.f-row              /* Direção horizontal */
.f-col              /* Direção vertical */
.f-wrap             /* Permitir quebra de linha */

<!-- Alinhamento -->
.f-items-center     /* Centralizar verticalmente */
.f-justify-center   /* Centralizar horizontalmente */
.f-justify-between  /* Espaçar entre elementos */
.f-justify-evenly   /* Espaçar igualmente */

<!-- Controle de itens -->
.f-grow-1           /* Item cresce para preencher */
.f-shrink-0         /* Item não encolhe */
.f-self-center      /* Centralizar item individual */
.f-auto-max         /* flex: 1 1 auto (cresce e encolhe conforme necessário) */
.f-auto-min         /* flex: 0 1 auto (não cresce, apenas encolhe se necessário) */
								

Border Radius

Classes para controle completo dos cantos arredondados:

										<!-- Cantos arredondados em pixels -->
.border-rd-0         /* border-radius: 0px */
.border-rd-1         /* border-radius: 1px */
.border-rd-2         /* border-radius: 2px */
.border-rd-3         /* border-radius: 3px */
.border-rd-4         /* border-radius: 4px */
.border-rd-5         /* border-radius: 5px */
.border-rd-6         /* border-radius: 6px */
.border-rd-7         /* border-radius: 7px */
.border-rd-8         /* border-radius: 8px */
.border-rd-9         /* border-radius: 9px */
.border-rd-10        /* border-radius: 10px */
.border-rd-11        /* border-radius: 11px */
.border-rd-12        /* border-radius: 12px */
.border-rd-14        /* border-radius: 14px */
.border-rd-15        /* border-radius: 15px */
.border-rd-16        /* border-radius: 16px */
.border-rd-17        /* border-radius: 17px */
.border-rd-18        /* border-radius: 18px */
.border-rd-19        /* border-radius: 19px */
.border-rd-20        /* border-radius: 20px */

<!-- Cantos Circulares -->
.border-rd-50        /* border-radius: 50% */
.border-rd-100       /* border-radius: 50% */

									

										<!-- Cantos específicos -->
.border-rd-0-t     /* cantos superiores: 0px */
.border-rd-2-t     /* cantos superiores: 2px */
.border-rd-4-t     /* cantos superiores: 4px */
.border-rd-6-t     /* cantos superiores: 6px */
.border-rd-8-t     /* cantos superiores: 8px */
.border-rd-10-t    /* cantos superiores: 10px */
.border-rd-12-t    /* cantos superiores: 12px */
.border-rd-14-t    /* cantos superiores: 14px */
.border-rd-16-t    /* cantos superiores: 16px */
.border-rd-18-t    /* cantos superiores: 18px */
.border-rd-20-t    /* cantos superiores: 20px */

.border-rd-0-b     /* cantos inferiores: 0px */
.border-rd-2-b     /* cantos inferiores: 2px */
.border-rd-4-b     /* cantos inferiores: 4px */
.border-rd-6-b     /* cantos inferiores: 6px */
.border-rd-8-b     /* cantos inferiores: 8px */
.border-rd-10-b    /* cantos inferiores: 10px */
.border-rd-12-b    /* cantos inferiores: 12px */
.border-rd-14-b    /* cantos inferiores: 14px */
.border-rd-16-b    /* cantos inferiores: 16px */
.border-rd-18-b    /* cantos inferiores: 18px */
.border-rd-20-b    /* cantos inferiores: 20px */

									

Demonstração Visual

Pequenos

2px

4px

8px

Médios e Grandes

12px

20px

50%

Cantos Específicos

Top 8px

Bottom 8px

Exemplos Práticos

									<!-- Cards modernos -->
<div class="border-rd-12">Card moderno</div>

<!-- Botões arredondados -->
<button class="border-rd-20">Botão pill</button>

<!-- Avatar circular -->
<img class="border-rd-50" src="avatar.jpg" alt="Avatar">

<!-- Modal com cantos superiores arredondados -->
<div class="border-rd-10-t">
    Header do modal
</div>
									
								

Opacity

Classes para controle preciso da transparência dos elementos:

								<!-- Níveis de transparência -->
.opacity-1           /* opacity: 0.1 (90% transparente) */
.opacity-2           /* opacity: 0.2 (80% transparente) */
.opacity-3           /* opacity: 0.3 (70% transparente) */
.opacity-4           /* opacity: 0.4 (60% transparente) */
.opacity-5           /* opacity: 0.5 (50% transparente) */
.opacity-6           /* opacity: 0.6 (40% transparente) */
.opacity-7           /* opacity: 0.7 (30% transparente) */
.opacity-8           /* opacity: 0.8 (20% transparente) */
.opacity-9           /* opacity: 0.9 (10% transparente) */

<!-- Exemplos práticos -->
<div class="opacity-5">Elemento semi-transparente</div>
<img class="opacity-7" src="image.jpg" alt="Imagem">
<div class="opacity-2">Overlay sutil</div>
							

Demonstração Visual

Transparência Alta

0.1

0.2

Transparência Média

0.6

0.5

Transparência Baixa

0.9

0.8

Casos de Uso Práticos

									<!-- Overlays e modais -->
<div class="opacity-3">Overlay escuro</div>
<div class="opacity-8">Backdrop de modal</div>

<!-- Estados de loading -->
<div class="opacity-5">Conteúdo carregando...</div>

<!-- Efeitos visuais -->
<img class="opacity-7" src="background.jpg" alt="BG">
<div class="opacity-2">Marca d'água</div>

<!-- Estados desabilitados -->
<button class="opacity-4" disabled>Botão desabilitado</button>
								

Font Size - Escala Numérica

Escala completa de tamanhos de fonte (fs-1 a fs-16). Classes fs-1 a fs-6 são fixas, fs-7 a fs-16 usam clamp() para tipografia fluida. Todas disponíveis com prefixos responsivos, usando as mesmas escalas: md-fs-{1-16}, sm-fs-{1-16}, xs-fs-{1-16}

Tamanhos Fixos (fs-1 a fs-6)

										/* Tamanhos fixos - não variam */
.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 */
									

Tamanhos Fluidos (fs-7 a fs-16)

										/* Fluidos com clamp() */
.fs-7  /* 15px → 16px - Body */
.fs-8  /* 16px → 17px - Body large */
.fs-9  /* 17px → 18px - Lead */
.fs-10 /* 18px → 20px - Subtítulo */
.fs-11 /* 21px → 24px - Título pequeno */
.fs-12 /* 24px → 28px - Título médio */
.fs-13 /* 28px → 32px - Título grande */
.fs-14 /* 34px → 40px - Headline */
.fs-15 /* 40px → 48px - Hero */
.fs-16 /* 52px → 64px - Display */
									

Demonstração Visual

fs-1: Micro label (10px)

fs-3: Small text (12px)

fs-5: Body small (14px)

fs-7: Body padrão (15→16px)

fs-9: Lead text (17→18px)

fs-11: Título pequeno (21→24px)

fs-13: Título grande (28→32px)

fs-15: Hero (40→48px)

Tipografia

Classes completas para controle tipográfico avançado:

Font Weight & Letter Spacing

										<!-- Peso da fonte -->
.fw-400 /* font-weight: 400 (normal) */
.fw-600 /* font-weight: 600 (semibold) */
.fw-700 /* font-weight: 700 (bold) */

<!-- Espaçamento positivo -->
.ls-1 /* letter-spacing: 1px */
.ls-2 /* letter-spacing: 2px */
.ls-3 /* letter-spacing: 3px */
.ls-4 /* letter-spacing: 4px */
.ls-5 /* letter-spacing: 5px */

<!-- Espaçamento negativo -->
.ls-minus-0-2 /* letter-spacing: -.25px */
.ls-minus-0-5 /* letter-spacing: -.5px */
.ls-minus-1 /* letter-spacing: -1px */
.ls-minus-2 /* letter-spacing: -2px */
.ls-minus-3 /* letter-spacing: -3px */
									

Alinhamento e Formatos

										<!-- Alinhamento -->
.text-left /* text-align: left */
.text-center /* text-align: center */
.text-right /* text-align: right */

<!-- Alinhamento com Breakpoint -->
.sm-text-left /* text-align: left */
.md-text-center /* text-align: center */
.xs-text-right /* text-align: right */

<!-- Formatos -->
.text-justify /* text-align: justify */
.text-lowercase /* text-transform: lowercase */
.text-uppercase /* text-transform: uppercase */

/* text-decoration: underline */
.underline

/* text-decoration: line-through */
.line-through
									

Tamanho Relativo

										<!-- Fontes menores (em %) -->
.minus-10 /* font-size: 90% */
.minus-20 /* font-size: 80% */
.minus-30 /* font-size: 70% */
.minus-40 /* font-size: 60% */
.minus-50 /* font-size: 50% */

<!-- Fontes maiores (em %) -->
.more-10 /* font-size: 110% */
.more-20 /* font-size: 120% */
.more-30 /* font-size: 130% */
.more-40 /* font-size: 140% */
.more-50 /* font-size: 150% */
									

Line Height

										<!-- Line Height (0.7 a 1.9) -->
.lh-0-7 /* line-height: 0.7 */
.lh-0-8 /* line-height: 0.8 */
.lh-0-9 /* line-height: 0.9 */

.lh-1-0 /* line-height: 1 */
.lh-1-2 /* line-height: 1.2 */
.lh-1-4 /* line-height: 1.4 */
.lh-1-6 /* line-height: 1.6 */
.lh-1-8 /* line-height: 1.8 */

<!-- Line Height Responsivo -->
.md-lh-1-4 /* ≤1199px */
.sm-lh-1-5 /* ≤991px */
.xs-lh-1-6 /* ≤639px */
									

Demonstração Visual

Letter Spacing

TEXTO COMPACTO (-2px)

TEXTO NORMAL (0px)

TEXTO ESPAÇADO (3px)

MUITO ESPAÇADO (5px)

Font Size Relativo

Texto pequeno (75%)

Texto normal (100%)

Texto maior (125%)

Texto grande (150%)

Font Weight

Texto normal (400)

Texto semibold (600)

Texto bold (700)

Text Decoration

Texto normal

Texto sublinhado

Texto riscado

Exemplos Práticos

									<!-- Títulos e logotipos -->
<h1 class="ls-5 fw-700">LOGOTIPO</h1>
<h2 class="ls-2 more-25">Título Espaçado</h2>

<!-- Textos compactos -->
<p class="ls-minus-1 minus-15">Texto denso</p>

<!-- Destaques e badges -->
<span class="more-20 fw-600">Destaque</span>
<small class="minus-20">Texto pequeno</small>

<!-- Links e ações -->
<a class="underline fw-600">Link importante</a>
<del class="line-through">Preço antigo</del>

<!-- Combinações avançadas -->
<div class="ls-3 more-30 fw-700">
    CALL TO ACTION
</div>
								

Alertas e Feedback

Classes de Alerta

Classes semânticas para feedback visual. Use em mensagens, badges, botões ou qualquer elemento que precise comunicar estado:

Success

Info

Warning

Danger

								<!-- Classes de Alerta -->
<p class="alert-success">Mensagem de Sucesso</p>
<p class="alert-info">Mensagem de Informação</p>
<p class="alert-warning">Mensagem de Aviso</p>
<p class="alert-danger">Mensagem de Perigo</p>
								
							

Tooltips (Balloon.css)

Tooltips em CSS puro para dicas contextuais. Adicione aria-label com o texto e data-balloon-pos com a posição:

								<!-- Tooltips com posicionamentos diferentes -->
<button aria-label="Tooltip acima!" data-balloon-pos="up">
    Posição Acima
</button>

<button aria-label="Tooltip abaixo!" data-balloon-pos="down">
    Posição Abaixo
</button>

<button aria-label="Tooltip à esquerda!" data-balloon-pos="left">
    Posição Esquerda
</button>

<button aria-label="Tooltip à direita!" data-balloon-pos="right">
    Posição Direita
</button>
							
							

Atributos principais:

aria-label: Define o texto que será exibido no tooltip
data-balloon-pos: Define a posição do tooltip (up, down, left, right, up-left, up-right, down-left, down-right)
data-balloon-length: Controla o tamanho do tooltip (fit, small, medium, large)
data-balloon-blunt: Remove a animação do tooltip
data-balloon-visible: Mantém o tooltip sempre visível

Ícones

Mais de 300 Ícones Vetoriais

Biblioteca completa de ícones criada com IcoMoon, otimizada para web:

Showcase de Ícones Populares:

home-1

user-1

envelope-1

phone-1

calendar-1

clock-1

marker-1

search-1

heart-1

star-1

cart-1

settings-1

file-1

comment-1

								<!-- Uso básico -->
<span class="iccon-home-1"></span>
<span class="iccon-user-1"></span>

<!-- Com espaçamento -->
<span class="iccon-phone-1 p-10-r"></span>Telefone

<!-- Com ampliação -->
<span class="iccon-star-1 more-50"></span> <!-- 150% maior -->
<span class="iccon-heart-1 more-25"></span> <!-- 125% maior -->
								
							

Categorias Completas

Navegação: arrows, chevrons, points
Interface: home, user, settings, menu
Comunicação: envelope, phone, comment, qrcode
Mídia: play, pause, stop, volume

Comércio: cart, money, credit, ticket
Arquivo: file, folder, download, upload
Social: facebook, twitter, instagram, linkedin
Status: check, warning, error, info

Acesse a lista completa de ícones integrados e seus respectivos códigos.

Animações

Animações acionadas via classe wow ou animated

Para executar essas animações você pode combinar com a classe animated para exibição imediata ou a classe wow para controle de exibição no viewport ativo (saiba mais). Passe o mouse sobre o bloco para visualizar a animação em ação:

Fade In .fadeIn

Fade In Down .fadeInDown

Fade In Left .fadeInLeft

Fade In Right .fadeInRight

Fade In Up .fadeInUp

Fade Out .fadeOut

back In Left .backInLeft

back In Right .backInRight

back In Down .backInDown

back In Up .backInUp

Bounce In .bounceIn

Zoom In .zoomIn

Zoom Out .zoomOut

Rotate In .rotateIn

Flash .flash

Pulse .pulse

Shake X .shakeX

Swing .swing

Tada .tada

Flip In .flipIn

Glow In .glowIn

Slide In .slideIn

Pop In .popIn

Liquid In .liquidIn

Magnet In .magnetIn

Float In .floatIn

Wave In .waveIn

Animações contínuas

Conjunto de efeitos prontos que já possuem repetição e duração configuradas em uma única classe.

Pulse .anima-pulse

Shake .anima-shake

Heart .anima-heart

Skeleton .anima-skeleton

Micro-bibliotecas JavaScript

Bibliotecas Vanilla Integradas

Todas as micro-bibliotecas estão pré-configuradas e otimizadas para funcionar perfeitamente com o Squeleton.

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.
Embla Carousel - Biblioteca de carrossel minimalista com movimento fluido e precisão de swipe excepcional.
js-cookie - Biblioteca JavaScript simples e leve para gerenciamento de cookies do navegador.
a11y-dialog - Biblioteca leve e flexível para criação de janelas de diálogo intuitivas. (scroll lock auto-inicializado)
VanJS - O menor framework de interface de usuário reativo do mundo. Incrivelmente poderoso, absurdamente pequeno.
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)
VenoBox 2 - Biblioteca JavaScript Lightbox para imagens, vídeos, galerias e iFrames. (auto-inicializado)
Counter-Up2 - Biblioteca leve que conta até um número alvo quando o número se torna visível.

Consulte a documentação específica de cada uma para casos de uso avançados.

HTMX - Exemplo Click to Load

O uso de AJAX com hipermídia permite atualizar partes específicas de uma página de forma assíncrona, carregando novos conteúdos ou dados sem recarregar toda a página. Essa abordagem melhora a experiência do usuário, tornando a navegação mais rápida e fluida, além de possibilitar interfaces mais interativas e dinâmicas.

Esse exemplo mostra a implementação do recurso “clique para carregar mais” para artigos, onde a última linha traz um botão que substitui toda a linha pela próxima página de resultados, que também terá um botão para continuar o carregamento.

Introdução ao Squeleton v4

Conheça as principais novidades...

Sistemas de Grid Responsivos

Como utilizar o sistema de grid...

Marcação HTML

								<div id="artigos-container">
    <!-- Artigos iniciais já carregados -->
    <div class="artigo-item">
        <h4>Introdução ao Squeleton</h4>
        <p>Conheça as principais novidades...</p>
    </div>
    <div class="artigo-item">
        <h4>Sistemas de Grid Responsivos</h4>
        <p>Como utilizar o sistema de grid...</p>
    </div>
</div>

<!-- Botão com HTMX para carregar mais artigos -->
<button class="btn"
        hx-get="/api/artigos?page=2"
        hx-target="#artigos-container"
        hx-swap="beforeend"
        hx-trigger="click">
    Carregar Mais Artigos
</button>
							

Principais atributos HTMX:

hx-get: Define a URL para buscar conteúdo via GET
hx-post: Define a URL para enviar dados via POST
hx-target: Especifica o elemento que receberá o conteúdo
hx-swap: Define como o conteúdo será inserido (innerHTML, outerHTML, beforeend, afterbegin)
hx-trigger: Evento que dispara a requisição (click, mouseenter, load, etc)
hx-indicator: Elemento que será exibido durante o carregamento

Acesse a documentação completa de atributos e funções do HTMX.

Embla Carousel - Exemplo com Breakpoints

Carrosséis são elementos de interface que permitem exibir múltiplos conteúdos em um espaço reduzido, organizados em formato de slides navegáveis. Eles são úteis para destacar produtos, imagens, notícias ou destaques de forma dinâmica e interativa, chamando a atenção do usuário e otimizando o uso do espaço na página.

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Marcação HTML

								<div class="slide">
    <div class="slide__viewport">
        <div class="slide__row gap-15">
            <div class="slide__item c-xs-6 c-sm-4">
                Slide 1
            </div>
            <div class="slide__item c-xs-6 c-sm-4">
                Slide 2
            </div>
            <div class="slide__item c-xs-6 c-sm-4">
                Slide 3
            </div>
        </div>
    </div>
    <div class="slide__dots"></div>
</div>
							

Acesse a documentação completa de atributos e funções do Embla Carousel.

JS-Cookie - Exemplo de Aviso LGPD

Usar js-cookie é um upgrade prático ao document.cookie, tornando o código mais limpo, legível e menos propenso a erros, além de ser útil para salvar estados persistentes no navegador, como preferências do usuário e configurações de interface. Abaixo está um exemplo comum de aviso de LGPD que precisa ser aceito para continuar a navegação.

Marcação HTML

								<div id="lgpd" class="lgpd-bottom fadeInUp d-none">
    <div class="row f-items-center lgpd-consent m-15-b md-m-15-lr">
        <div class="c-lg-10 c-md-9 c-xs-12 lgpd-text">
            Utilizamos cookies essenciais e tecnologias semelhantes para analisar e 
            aprimorar nosso serviço, personalizar conteúdos e melhorar sua experiência 
            digital de acordo com a nossa <a href="/termos/" target="_blank">Política de Privacidade</a> 
            e, ao continuar navegando, você concorda com estas condições.
        </div>
        <div class="c-lg-2 c-md-3 c-xs-12 sm-p-20-t">
            <a href="#" onclick="return false;" class="lgpd-btn sm-w-100">
                Prosseguir
            </a>
        </div>
    </div>
</div>
							

JS de configuração

								<script>
	document.addEventListener('DOMContentLoaded', function () {
		// Referências aos elementos
		var lgpdElement = document.getElementById('lgpd');
		var lgpdBg = document.getElementById('lgpd-bg');

		if (lgpdElement) {
			// Verifica se o cookie de consentimento já existe
			if (Cookies.get('lgpd') !== "yes") {
				// Exibe o banner se o consentimento não foi dado
				lgpdElement.classList.remove('d-none');
				lgpdElement.classList.add('animated');
				lgpdBg.classList.remove('d-none');
			}

			// Adiciona evento ao botão de consentimento
			var lgpdButton = document.querySelector('.lgpd-btn');
			if (lgpdButton) {
				lgpdButton.addEventListener('click', function () {
					// Salva o consentimento por 1 ano
					Cookies.set('lgpd', 'yes', { expires: 365, path: '/' });

					// Esconde o banner
					lgpdElement.classList.remove('animated');
					lgpdElement.classList.add('d-none');
					lgpdBg.classList.add('d-none');
				});
			}
		}
	});
</script>
								
							

Exemplo do fluxo do aviso LGPD:

Verificação inicial: Ao carregar a página, verifica se o cookie 'lgpd' existe
Exibição condicional: Mostra o banner apenas se o consentimento não foi dado
Consentimento: Ao clicar em "Prosseguir", salva o cookie e esconde o banner
Persistência: Cookie válido por 365 dias em todo o site (path: '/')

Principais métodos do JS-Cookie:

Cookies.set(nome, valor, opções): Cria um cookie com nome e valor
Cookies.get(nome): Obtém o valor de um cookie pelo nome
Cookies.getAll(): Retorna todos os cookies como objeto
Cookies.remove(nome, opções): Remove um cookie pelo nome

Opções comuns:

expires: Número de dias até expirar (ex: { expires: 7 })
path: Caminho onde o cookie está disponível (ex: { path: '/' })
domain: Domínio onde o cookie está disponível
secure: Cookie só enviado em conexões HTTPS
sameSite: Restringe envio em requisições cross-site ('strict', 'lax', 'none')

Acesse a documentação completa de atributos e funções do JS-Cookie.

a11y-dialog - Modal Exemplo

Modais são elementos de interface usados para exibir informações ou interações importantes sobrepostas ao conteúdo principal, capturando a atenção do usuário. Eles são úteis para confirmar ações, exibir formulários, mostrar mensagens de alerta ou fornecer detalhes sem redirecionar a página, garantindo foco e evitando que o usuário perca o contexto da navegação.

Clique para abrir um Modal

								<!-- Botão trigger -->
<a data-modal-show="popup" class="btn" href="#" onclick="return false;" aria-label="Ver Conteúdo">
    Abrir Modal
</a>

<!-- Modal Structure -->
<div data-modal="popup" class="modal-dialog" aria-modal="true" role="dialog" aria-hidden="true" tabindex="-1">
    <div class="dialog-content">
        <div class="dialog-backdrop" data-modal-hide></div>
        <div class="dialog-inline w-max-500px">
            <button class="dialog-close" aria-label="Fechar (Esc)" data-modal-hide></button>
            <div class="modal-popup bg-white text-center border-rd-10 p-30-all">
                <h3>Título do Modal</h3>
                <p>Conteúdo do modal aqui...</p>
            </div>
        </div>
    </div>
</div>
							

Atributos principais:

data-modal="id": Identifica o modal a ser manipulado
data-modal-show="id": Ativa o modal quando aplicado a um elemento clicável
data-modal-hide: Fecha o modal quando aplicado a elementos dentro do modal
aria-modal="true": Indica que o elemento funciona como modal para leitores de tela
aria-hidden="true": Estado inicial do modal (oculto)
tabindex="-1": Garante que o modal possa receber foco

Classes principais:

modal-dialog: Contêiner principal do modal
dialog-content: Wrapper para conteúdo e backdrop
dialog-backdrop: Overlay escuro atrás do modal
dialog-inline: Container para o conteúdo visível
dialog-close: Botão de fechar (estilizado no tema)
modal-popup: Estilo padrão para o conteúdo do modal

Acesse a documentação completa de atributos e funções do a11y-dialog.

Importante: Todos os atributos originais data-a11y-dialog foram renomeados para data-modal na integração com Squeleton.

VanJS - Exemplos Reativos

Com apenas 1,0 kB, este framework entrega os recursos fundamentais para desenvolvimento web reativo: templates DOM, estado, vinculação de estado, derivação de estado, efeitos, SPA, roteamento client-side e hidratação.

Contador de Likes (Sem Persistência)

								<script>
	document.addEventListener('DOMContentLoaded', function () {
		const { span, button } = van.tags
		const boxCounter1 = document.getElementById('box-counter-1');

		const Counter1 = () => {
			const counterState = van.state(0)
			return span(
				"❤️ ", counterState, " ",
				button({ onclick: () => ++counter.val }, "👍"),
				button({ onclick: () => --counter.val }, "👎"),
			)
		}

		van.add(boxCounter1, Counter1())
	});
</script>
								
							

Contador de Likes (Com Persistência)

Experimente recarregar a página após alterar os valores.

								<script>
	document.addEventListener('DOMContentLoaded', function () {
		const { span, button } = van.tags
		const boxCounter2 = document.getElementById('box-counter-2');

		const Counter2 = () => {
			const counterPersistent = persistentItem("counter_persistent", 0)
			return span(
				"❤️ ", counterPersistent, " ",
				button({ onclick: () => ++counterPersistent.val }, "👍"),
				button({ onclick: () => --counterPersistent.val }, "👎"),
			)
		}

		van.add(boxCounter2, Counter2())
	});
</script>
								
							

Contador de Likes e Deslikes (Grupo com Persistência)

Experimente recarregar a página após alterar os valores.

								<script>
	document.addEventListener('DOMContentLoaded', function () {
		const { span, button } = van.tags
		const boxCounter3 = document.getElementById('box-counter-3');

		const Counter3 = () => {
			const counters = persistentGroup("counters", {
				likes: 0,
				deslikes: 0
			})

			return span(
				"👍 ", counters.likes, " ",
				button({ onclick: () => ++counters.likes.val }, "➕"),
				" ",
				"👎 ", counters.deslikes, " ",
				button({ onclick: () => ++counters.deslikes.val }, "➕"),
				" ",
				button({ onclick: () => counters.clearAll() }, "🗑️")
			)
		}

		van.add(boxCounter3, Counter3())
	});
</script>
								
							

Principais funções do VanJS:

van.tags: Cria elementos HTML de forma programática usando sintaxe JavaScript (hyperscript).
van.add: Adiciona componentes VanJS ao DOM. Monta elementos criados com van.tags em um container específico.
van.state: Cria um estado reativo que atualiza automaticamente o DOM quando seu valor muda.
van.derive: Executa efeitos colaterais automaticamente quando estados observados mudam.

Funções extendidas do Squeleton com VanJS:

persistentItem: Cria um van.state que persiste automaticamente no localStorage ou sessionStorage. O estado sobrevive a recarregamentos de página e inclui método .clear() para resetar.
persistentGroup: Gerencia múltiplos persistentItem relacionados com prefixo comum. Retorna objeto com estados individuais e método .clearAll() para limpar todos de uma vez.

Acesse a documentação oficial de atributos e funções do VanJS.

Consulte também o manual das funções extendidas de persistência exclusivos do Squeleton.

Toastify JS - Exemplo de Notificações

Toasts são mensagens temporárias exibidas na tela para informar o usuário sobre ações ou eventos recentes, como confirmações, alertas ou erros. Eles aparecem de forma discreta no canto da tela, e desaparecem automaticamente após alguns segundos, garantindo comunicação rápida sem interromper a navegação.

Marcações HTML

								<div class="container">
	<div class="row">
			<div class="c-xs-12">
					<button onclick="showSuccessToast()" class="btn m-10-r">Sucesso</button>
					<button onclick="showErrorToast()" class="btn m-10-r">Erro</button>
					<button onclick="showInfoToast()" class="btn">Info com Link</button>
			</div>
	</div>
</div>
								
							

JS de configuração

								<!-- JavaScript para Toastify -->
<script>
	// Toastify é carregado automaticamente pelo Squeleton
	function showSuccessToast() {
		// Toast de sucesso
		Toastify({
			text: "Operação realizada com sucesso!",
			duration: 3000,
			close: true,
			gravity: "top",
			position: "right",
			style: {
				background: "linear-gradient(to right, #00b09b, #96c93d)",
			}
		}).showToast();
	}

	function showErrorToast() {
		// Toast de erro
		Toastify({
			text: "Erro ao processar solicitação",
			duration: 3000,
			close: true,
			gravity: "bottom",
			position: "center",
			style: {
				background: "linear-gradient(to right, #ff5f6d, #ffc371)",
			}
		}).showToast();
	}

	function showInfoToast() {
		// Toast com link
		Toastify({
			text: "Clique para mais informações",
			duration: 5000,
			destination: "https://github.com/apvarun/toastify-js",
			newWindow: true,
			close: true,
			gravity: "bottom",
			position: "left",
			stopOnFocus: true,
			style: {
				background: "linear-gradient(to right, #4b6cb7, #182848)",
			},
			onClick: function () {
				console.log("Toast clicado");
			}
		}).showToast();
	}

	// Alternativa com event listeners
	document.addEventListener('DOMContentLoaded', function () {
		// Se preferir usar event listeners em vez de onclick inline
		/* 
		document.getElementById('btn-toast-success').addEventListener('click', showSuccessToast);
		document.getElementById('btn-toast-error').addEventListener('click', showErrorToast);
		document.getElementById('btn-toast-info').addEventListener('click', showInfoToast);
		*/
	});
</script>
								
							

Principais opções do Toastify JS:

text: Texto a ser exibido no toast
duration: Duração em milissegundos (3000 = 3 segundos)
destination: URL para redirecionar ao clicar no toast
newWindow: Abrir link em nova janela (true/false)
close: Mostrar botão para fechar (true/false)
gravity: Posição vertical ("top" ou "bottom")
position: Posição horizontal ("left", "center" ou "right")
stopOnFocus: Parar a contagem ao passar o mouse (true/false)
onClick: Função de callback ao clicar no toast
style: Objeto com estilos CSS personalizados

Acesse a documentação completa de atributos e funções do toastify-js.

WOW2 & Animated - Exemplos

Animações adicionam movimento e transições visuais aos elementos da página, tornando a interface mais atraente e intuitiva. Elas ajudam a guiar a atenção do usuário, reforçar interações e transmitir feedback visual de forma dinâmica, sem a necessidade de escrever código CSS complexo do zero.

wow fadeInUp

wow bounceIn + delay 0.2s

wow fadeInDown + duration 2s

wow pulse + iteration 10

animated infinite fadeIn

animated shakeX infinite duration-2500

animated zoomIn repeat-5 duration-3000

animated zoomIn delay-3000

								<!-- HTML com exemplos de animações -->
<div class="row m-30-b">
		<div class="c-xs-6">
				<div class="demo-box wow fadeInUp">
						wow fadeInUp
				</div>
		</div>
		<div class="c-xs-6">
				<div class="demo-box wow bounceIn" data-wow-delay="0.2s">
						wow bounceIn + delay 0.2s
				</div>
		</div>
		<div class="c-xs-6">
				<div class="demo-box wow fadeInDown" data-wow-duration="2s">
						wow fadeInDown + duration 2s
				</div>
		</div>
		<div class="c-xs-6">
				<div class="demo-box wow pulse" data-wow-iteration="10">
						wow pulse + iteration 10
				</div>
		</div>
		<div class="c-xs-6">
				<div class="demo-box animated infinite fadeIn">
						animated infinite fadeIn
				</div>
		</div>
		<div class="c-xs-6">
				<div class="demo-box animated zoomIn delay-5000">
						animated zoomIn delay-5000
				</div>
		</div>
</div>
								
							

Nota: O Squeleton utiliza uma versão exclusiva e atualizada do wow.js. Esta implementação proprietária inclui otimizações de performance e é automaticamente desativada em dispositivos móveis para garantir uma experiência de rolagem mais fluida. Esta versão não está disponível separadamente como um script independente.

Atributos de configuração WOW2:

data-wow-delay: Tempo de espera antes da animação iniciar (exemplo: "0.2s")
data-wow-duration: Duração da animação (exemplo: "2s")
data-wow-iteration: Número de vezes que a animação se repete (exemplo: "10")
data-wow-offset: Distância em pixels do elemento até o fundo da janela para iniciar a animação (exemplo: "200")

Classe Animated (sem dependência de viewport)

Usar a classe animated no lugar da wow ativa animações imediatamente ao carregar a página, independentemente da posição do elemento na tela, diferente da classe "wow" que só anima elementos quando entram na área visível (viewport) durante a rolagem. Com "animated", seus elementos são animados instantaneamente mesmo se estiverem fora da área visível inicial.

								<!-- Exemplo com classe animated direta -->
<div class="demo-box animated fadeInUp">
		Animação imediata
</div>
<div class="demo-box animated fadeInUp delay-1000">
		Animação com delay
</div>
<div class="demo-box animated pulse infinite">
		Animação infinita
</div>

<!-- Exemplos com novas classes utilitárias -->
<div class="demo-box animated fadeIn duration-2000 delay-500">
		Animação lenta com delay
</div>
<div class="demo-box animated bounce repeat-3 alternate">
		Bounce que vai e volta 3 vezes
</div>
<div class="demo-box animated slideInUp reverse">
		Slide reverso (saindo para baixo)
</div>
								
							

Classes de Delay Disponíveis

.delay-100: Delay de 0.1 segundos
.delay-200: Delay de 0.2 segundos
.delay-250: Delay de 0.25 segundos
.delay-300: Delay de 0.3 segundos
.delay-400: Delay de 0.4 segundos
.delay-500: Delay de 0.5 segundos
.delay-600: Delay de 0.6 segundos
.delay-700: Delay de 0.7 segundos
.delay-800: Delay de 0.8 segundos
.delay-900: Delay de 0.9 segundos
.delay-1000: Delay de 1 segundo
.delay-1250: Delay de 1.25 segundos
.delay-1500: Delay de 1.5 segundos
.delay-1750: Delay de 1.75 segundos
.delay-2000: Delay de 2 segundos
.delay-3000: Delay de 3 segundos
.delay-4000: Delay de 4 segundos
.delay-5000: Delay de 5 segundos

Classes de Duração Disponíveis

Controle a velocidade das animações com essas classes de duração:

.duration-500: Animação rápida (0.5 segundos)
.duration-1000: Animação média (1 segundo)
.duration-1250: Animação média-lenta (1.25 segundos)
.duration-1500: Animação lenta (1.5 segundos)
.duration-2000: Animação muito lenta (2 segundos)
.duration-2500: Animação muito lenta (2.5 segundos)
.duration-3000: Animação extra lenta (3 segundos)

Classes de Repetição

Controle quantas vezes a animação se repete:

.repeat-2: Executa 2 vezes
.repeat-3: Executa 3 vezes
.repeat-4: Executa 4 vezes
.repeat-5: Executa 5 vezes
.infinite: Repete infinitamente

Classes de Direção

Altere a direção de execução das animações:

.reverse: Executa a animação de trás para frente
.alternate: Alterna entre normal e reverso a cada repetição
.alternate-reverse: Como alternate, mas começa pelo reverso

Classes de Controle de Reprodução

Controle o estado de reprodução via JavaScript:

.paused: Pausa a animação
.running: Resume/inicia a animação

Exemplos Combinados

								<!-- Animação rápida com delay -->
<div class="animated fadeIn duration-500 delay-300">
		Rápida e com delay
</div>

<!-- Animação que pulsa 3 vezes alternando -->
<div class="animated pulse repeat-3 alternate duration-1000">
		Pulso alternado
</div>

<!-- Animação de entrada usada como saída -->
<div class="animated slideInLeft reverse duration-2000">
		Saindo para a esquerda
</div>

<!-- Controle via JavaScript -->
<div class="animated spin infinite paused" id="spinner">
		Spinner pausado
</div>

<script>
	// Para controlar via JS
	document.getElementById('spinner').classList.remove('paused');
	document.getElementById('spinner').classList.add('running');
</script>
								
							

VenoBox 2 - Exemplos de Lightbox

Como complemento aos modais, o VenoBox 2 oferece suporte nativo a galerias de imagens, vídeos e iframes, permitindo navegação entre itens e proporcionando uma visualização imersiva.

Abrir Bunny Vídeo Abrir YouTube Vídeo Abrir Imagem Ampliada Abrir Iframe

								<!-- HTML com exemplos de VenoBox -->
<a class="btn open-video" data-autoplay="true" 
		data-vbtype="video" data-gall="veno-demo" data-maxwidth="960px" 
		href="https://iframe.mediadelivery.net/play/995/181e9ec4-233f-4610-82b7-81c3b69efbac">
		Abrir Bunny Vídeo
</a>

<a class="btn open-video" data-autoplay="true" 
		data-vbtype="video" data-gall="veno-demo" data-maxwidth="960px" 
		href="https://www.youtube.com/watch?v=UYmvFzDuO5k">
		Abrir YouTube Vídeo
</a>

<a class="btn open-gallery" data-gall="veno-demo"
		data-title="Foto em Tela Ampliada"
		href="https://hiperwp.com.br/app/uploads/2025/08/voice_43.webp">
		Abrir Imagem Ampliada
</a>

<a class="btn open-iframe" data-gall="veno-demo" data-vbtype="iframe"
		href="https://hiperwp.com.br/">
		Abrir Iframe
</a>

<!-- JavaScript automático pelo Squeleton -->
<script>
	// VenoBox é inicializado automaticamente pelo Squeleton
	// para classes .open-video | .open-gallery | .open-iframe
</script>
								
							

Atributos principais VenoBox:

data-vbtype: Tipo de conteúdo ("video", "iframe", "inline", "ajax")
data-gall: Nome da galeria para agrupar itens relacionados
data-autoplay: Reprodução automática para vídeos (true/false)
data-maxwidth: Largura máxima do lightbox
data-title: Título a ser exibido no lightbox
href: URL do conteúdo (vídeo, imagem, página)

Classes automáticas no Squeleton:

open-video: Ativa VenoBox para vídeos (compatível com links do YouTube e Bunny Stream)
open-gallery: Ativa VenoBox para imagens únicas ou galeria de imagens
open-iframe: Ativa VenoBox para abertura de links em modal com iframe

Acesse a documentação completa de atributos e funções do VenoBox 2.

Counter-Up2 - Exemplo de Contagem

O efeito de contagem animada exibe números aumentando gradualmente até um valor final, criando uma sensação de progresso e destaque para estatísticas, metas ou resultados de forma visualmente atraente.

Você pode acionar o gatilho para definir quando iniciar a contagem, aqui está uma maneira comum de fazer isso:

Marcação HTML

								<div id="view-counter"> 
	<!-- Viewport da Contagem -->
	<div class="stat-card p-25-all border-rd-8 text-center h-100">
		<div class="animated-number">400+</div> <!-- Inicia Contagem -->
		<div>Classes Utilitárias</div>
	</div>
	<div class="stat-card p-25-all border-rd-8 text-center h-100">
		<div class="animated-number">300+</div> <!-- Inicia Contagem -->
		<div>Ícones Vetoriais</div>
	</div>
</div>
								
							

JS de configuração

								<script>
	var viewCounter = document.getElementById('view-counter');
	if (viewCounter) {
		const counterUp = window.counterUp.default;
		const counterCall = entries => {
			entries.forEach(entry => {
				const el = entry.target
				if (entry.isIntersecting && !el.classList.contains('is-visible')) {
					for (const counter of counters) {
						counterUp(counter, {
							duration: 1000,
							delay: 16,
						})
						el.classList.add('is-visible')
					}
				}
			})
		}

		// Get all animated numbers
		const counters = document.querySelectorAll('.animated-number');

		// Intersection Observer
		const IO = new IntersectionObserver(counterCall, { threshold: 1 });
		IO.observe(viewCounter);
	}
</script>
								
							

O que podemos contar?

Flutuadores: 1.234
Inteiros: 1234
Com vírgulas: 1,234.56
Vírgulas e pontos: 12.345,67
Com caracteres não numéricos: $1,234.56
Vários valores contáveis: 168 horas de 10.080 minutos com 604.800 segundos

Acesse a documentação completa de atributos e funções do Counter Up2.

Conversor Bricks Builder

Conversor de código Squeleton para JSON de Bricks Builder

Transforme seu código nativo Squeleton em uma estrutura JSON 100% compatível com o Bricks Builder, pronta para ser colada e editada diretamente no melhor editor de páginas do WordPress!

🤖 Combinação perfeita com Squeleton Skill: Gere páginas completas usando a habilidade squeleton-skill via IA e converta instantaneamente para Bricks Builder, acelere sua produção aproveitando todo o código gerado.

Acessar Squeleton2Bricks →

⚡ Principais Recursos

Conversão instantânea – Cole código do Squeleton e obtenha a estrutura Bricks imediatamente
Painel de camadas visual – Reordene, renomeie e duplique elementos com arrastar e soltar
Sincronização tripla – Clique nos elementos na pré-visualização para destacá-los nas camadas e no código
Edição de CSS – Clique com o botão direito em qualquer camada para visualizar e editar suas regras CSS específicas
Nomeação inteligente – Camadas nomeadas automaticamente com base em classes e IDs

Perguntas Frequentes

Dúvidas sobre o Squeleton

Por que o Squeleton foi criado e qual seu objetivo?

O Squeleton nasceu da necessidade de simplificar o desenvolvimento web em um cenário cada vez mais complexo. Ao longo da última década, o design e desenvolvimento de sites tornaram-se desafiadores devido às constantes mudanças dos frameworks e tecnologias envolvidas. Os populares frameworks da atualidade frequentemente apresentam problemas que complicam o desenvolvimento e a manutenção de projetos web:

Atualizações frequentes que quebram compatibilidade com versões anteriores
Necessidade de revisão constante de dependências e pacotes
Processos de build e deploy a cada pequena alteração
Abandono do suporte a versões legadas
Inclusão de funcionalidades desnecessárias que aumentam o tamanho final e a complexidade do projeto

O Squeleton foi concebido como um boilerplate com uma filosofia minimalista e funcional, focando especificamente nas necessidades de sites institucionais, landing pages de alta conversão e portais de notícias com tráfego intenso. Este minimalismo com propósito não é apenas uma escolha estética, mas uma decisão estratégica para garantir performance e facilidade de manutenção.

O boilerplate prioriza:

Manutenção simplificada e sustentável a longo prazo
Evolução orgânica baseada nas necessidades reais dos projetos
Estabilidade de marcação de código, evitando reescritas frequentes
Base compartilhada que permite que projetos evoluam juntos

A filosofia do Squeleton é a pureza em todas as etapas do desenvolvimento, utilizando exclusivamente CSS e JavaScript Vanilla. Ele se posiciona como o vetor mínimo necessário para criar uma estrutura funcional através de:

Grids responsivos otimizados
Interações modernas via atributos HTML padronizados
Componentes essenciais (modais, carrosséis, animações, ícones, notificações)
Sistema de animações leve e performático
Hidratação AJAX simplificada via HTMX
Classes utilitárias que aceleram o desenvolvimento

Este approach minimalista permite que desenvolvedores envolvidos construam sites modernos e funcionais sem a sobrecarga típica dos frameworks complexos, resultando em projetos mais leves, rápidos e sustentáveis a longo prazo.

Como personalizar as cores e fontes?

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.

Para implementar personalizações de maneira organizada e sustentável, recomendamos:

Criar uma folha de estilos separada dedicada exclusivamente às variáveis CSS de personalização
Definir suas variáveis no seletor :root para estabelecer sua paleta de cores e família de fontes compatíveis com seu projeto
Manter um arquivo JavaScript separado para funções específicas do projeto, como listeners personalizados, manipulação de cookies e funcionalidades customizadas

Esta abordagem de separação traz benefícios importantes de manutenção:

Atualizações futuras do boilerplate não afetarão seus estilos e funcionalidades personalizadas
Classes, marcações e atributos permanecerão compatíveis mesmo após atualizações
Separação clara entre a estrutura base e as personalizações específicas do projeto

Exemplo de personalização de variáveis e aplicação:

												/* main.v4.css - Seu arquivo de personalização */
: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);
}
												
											

Como implementar animações personalizadas?

O Squeleton oferece diversas animações pré-definidas, mas você pode criar suas próprias seguindo o mesmo padrão:

												/* Defina sua animação com @keyframes */
@keyframes minha-animacao {
	0% { opacity: 0; transform: scale(0.8); }
	100% { opacity: 1; transform: scale(1); }
}

/* Crie uma classe que aplica a animação */
.anima-personalizada {
	animation-name: minha-animacao;
	animation-duration: 0.5s;
	animation-fill-mode: both;
}

/* Use com wow para ativar no viewport */
<div class="wow anima-personalizada">
	Conteúdo animado
</div>
												
											

Por que não há um sistema de deploy e compilação de estilos e scripts?

Esta escolha deliberada alinha-se com o princípio minimalista do Squeleton e é melhor explicada com um paralelo ao ensaio "Why htmx Does Not Have a Build Step": "A modularização é uma das grandes ideias do software. Módulos possibilitam a resolução de problemas incrivelmente complexos, decompondo o código em subestruturas bem contidas que resolvem problemas menores. Às vezes, porém, você deseja resolver problemas simples, ou pelo menos problemas relativamente simples. Nesses casos, pode ser útil não usar os blocos de construção de softwares mais complexos, para não emular sua complexidade sem criar valor correspondente."

Considerações práticas que fundamentam esta abordagem:

Todas as dezenas de funcionalidades e centenas de classes utilitárias inclusas no Squeleton somadas não ultrapassam ~55KB em formato gzip (padrão de transferência dos CDN's)
A maior parte deste tamanho corresponde aos estilos CSS, que navegadores modernos processam com eficiência
Este tamanho total é frequentemente menor que uma única imagem JPG em um site
Comparativamente, muitas bibliotecas SPA são maiores, e mesmo com sistemas de build complexos, acabam utilizando spinners para mascarar a alta carga de processamento e consumo de memória no lado do cliente/navegador

Benefícios dos arquivos unificados compactos:

Facilitam a manutenção de longo prazo, simplificando atualizações e correções
Otimizam a navegação em páginas MPA (Multi-Page Application) através do uso distribuído de cache entre navegador e CDN
Eliminam a necessidade de ferramentas adicionais e processos de build que frequentemente introduzem novas complexidades e pontos de falha
Reduzem a curva de aprendizado para novos desenvolvedores envolvidos no projeto
Garantem consistência visual e funcional entre diferentes páginas do projeto

Como posso descobrir todas as classes utilitárias e possibilidades do Squeleton?

Esta documentação aborda as classes e componentes mais utilizados do Squeleton, mas o boilerplate oferece muito mais possibilidades que podem impulsionar seu desenvolvimento.

O Squeleton contém mais de 400 classes utilitárias, dezenas de componentes e diversas integrações que são impossíveis de serem documentadas exaustivamente em um único guia. Para explorar todo o potencial do boilerplate, recomendamos:

Examinar o código-fonte não minificado: Abra o arquivo CSS não minificado (squeleton.v4.css) para descobrir padrões de nomenclatura, variações de classes e possibilidades não documentadas
Explorar as documentações originais: As bibliotecas integradas (HTMX, a11y-dialog, Embla Carousel, etc.) possuem documentações completas que podem revelar recursos avançados adaptados ao Squeleton
Experimentar combinações: Muitas das classes utilitárias foram projetadas para funcionar em conjunto, criando efeitos e comportamentos únicos quando combinadas

O Squeleton foi projetado para ser intuitivo, então mesmo classes não documentadas geralmente seguem padrões de nomenclatura consistentes que facilitam sua descoberta e compreensão. A exploração direta do código-fonte é uma parte importante do processo de aprendizado e permite que você aproveite todo o potencial do boilerplate.

Posso usar o Squeleton com Claude e 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

Como usar?

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.

Suporte e Comunidade

Como reportar bugs ou sugerir melhorias?

Bugs e sugestões podem ser reportados através do nosso repositório no GitHub. Abra uma issue detalhando o problema encontrado ou a melhoria sugerida. Inclua sempre informações como versão do navegador, dispositivo e passos para reproduzir o problema.

O Squeleton é gratuito para uso comercial?

Sim, o Squeleton é disponibilizado sob a licença MIT, o que permite seu uso tanto em projetos pessoais quanto comerciais. Você pode modificar, distribuir e usar o código livremente, inclusive em projetos pagos ou proprietários.

Como contribuir com o desenvolvimento?

Contribuições são bem-vindas! Você pode contribuir de várias formas:

Reportando bugs e sugerindo melhorias
Corrigindo problemas existentes através de pull requests
Melhorando a documentação
Compartilhando exemplos e casos de uso

Todas as contribuições devem seguir nosso guia de contribuição disponível no repositório do GitHub.