Todos os Componentes Y2
77 componentes organizados em 10 categorias — CSS, JS e Backend PHP. Clique em qualquer card para acessar a documentação completa.
Foundation
Sistema de grid flexível de 12 colunas com classes semânticas e ultra-curtas.
CSS24 famílias de cores com tokens CSS. Paleta semântica completa via variáveis.
CSSEscala tipográfica, pesos, alturas de linha e classes de texto utilitárias.
CSSBiblioteca de ícones nativa do Y2 — via classe CSS, sem fontes externas.
CSSClasses utilitárias para margin, padding e gap com escala consistente.
CSSControle de quebra de linha, overflow e white-space para qualquer layout.
CSSPersonalize cores, fontes, bordas e temas sem tocar no código-fonte do Y2.
CSSCSS Elementos
Botões com variantes de cor, tamanho, forma, ícone e estados. Atributo [y2btn].
Avatares circulares com iniciais, imagem, status e tamanhos configuráveis.
CSSRótulos e contadores para notificações, status e categorias.
CSSTags compactas para filtros, seleção múltipla e categorização visual.
CSSTrilha de navegação hierárquica com separadores e estado ativo.
CSSSeparadores visuais horizontais e verticais com texto e variantes.
CSSBarras de progresso animadas, circulares e com gradiente.
CSS + JSPlaceholders animados para estados de carregamento de conteúdo.
CSSIndicador de etapas para formulários multi-step e fluxos guiados.
CSS + JSLinha do tempo vertical para logs, históricos e eventos cronológicos.
CSSCSS Componentes
11 variações de card — clássico, glass, filled, outlined, stat, alert e mais.
CSSTabelas responsivas com hover, striped, bordered e células com badges.
CSSInputs, selects, checkboxes e radios estilizados com estados de validação.
CSSVersão avançada com floating labels, grupos de input e layout premium.
CSS + JSClasses utilitárias de display, flex, posição, cursor e visibilidade.
CSSBorder-radius, border-width e estilos de borda via classes utilitárias.
CSSBox-shadow em múltiplos níveis de elevação — de flat a glow neon.
CSSControle de preenchimento de imagens e vídeos dentro de containers.
CSSTransformações de escala e zoom via hover com transições suaves.
CSSLayout JS
Barra de navegação responsiva com sticky, mega menu e mobile toggle.
JSDiálogos flutuantes com focus trap, ESC, glass e drawer lateral.
JSMenu lateral recolhível com grupos, estado salvo e responsividade.
JSPainel deslizante lateral para ações contextuais e filtros avançados.
JSConteúdo expansível com animação suave e suporte a múltiplos abertos.
JSAbas com transição animada, variantes pill/underline e lazy load.
JSMenus suspensos inteligentes com posicionamento automático e submenus.
JSDicas flutuantes com posicionamento em 4 direções e delay configurável.
JSMídia & Display
Slider de imagens com autoplay, dots, arrows e transições customizáveis.
JSVisualizador de imagens em tela cheia com galeria e navegação por teclado.
JSCarrossel de textos e depoimentos com transição fade e autoplay.
JSEfeito de digitação automática com loop, cursor e velocidade configurável.
JSForms JS
Select estilizado com busca, grupos, ícones e seleção múltipla.
JSValidação de formulários em tempo real com mensagens e regras customizáveis.
JSFormatação automática de CPF, CNPJ, telefone, CEP e máscaras customizadas.
JSUpload com drag & drop, preview de imagens, progress bar e validação.
JSContador de caracteres para inputs e textareas com limite visual.
JSTextarea que cresce automaticamente conforme o conteúdo digitado.
JSEfeitos JS
Biblioteca de animações CSS prontas — fade, slide, bounce, pulse e mais.
CSS + JSAnimações ativadas ao entrar no viewport via Intersection Observer.
JSEfeito parallax em elementos e backgrounds com velocidade configurável.
JSAvaliação por estrelas interativa com meia estrela e leitura de valor.
JSElementos arrastáveis com snap, limites de área e callbacks de drop.
JSJS Módulos
Sistema de notificações toast — sucesso, erro, info e alerta com fila.
JS ModuleGerenciador de tema dark/light com detecção de preferência do sistema.
JS ModuleSistema de requisições AJAX declarativas via atributos HTML.
JS ModuleHighlight de sintaxe nativo com suporte a HTML, CSS, JS, PHP e SQL.
JS ModuleBanner de consentimento de cookies compatível com a LGPD.
JS ModuleWidget de cotação de moedas em tempo real via API de câmbio.
JS ModuleGaleria de posts do Instagram integrada via API com layout responsivo.
JS ModuleTabela dinâmica com ordenação, filtros, paginação e carregamento AJAX.
JS ModuleBackend PHP — YdMVC
Roteador HTTP nativo com suporte a GET, POST, PUT, DELETE e parâmetros dinâmicos.
PHP CoreClasse base de controllers com acesso direto a Request, View e helpers globais.
PHP CoreCRUD completo gerado automaticamente — index, show, create, update e delete.
PHP CoreORM leve com find, save, delete e relacionamentos básicos sem dependências.
PHP CoreConstrutor de queries fluente — where, orderBy, limit, join e execução segura.
PHP CoreConexão PDO singleton com prepared statements e suporte a múltiplos drivers.
PHP CoreEngine de templates PHP nativos com layouts, partials e passagem de dados.
PHP CoreEncapsula $_GET, $_POST, $_FILES e headers com sanitização automática.
PHP CoreAutenticação com login, logout, hash de senha e controle de acesso por rota.
PHP AuthGerenciamento de sessão com flash messages, regeneração de ID e timeout.
PHP AuthControle de permissões por roles — admin, editor, usuário e regras customizadas.
PHP AuthValidação de dados do lado servidor — required, email, min, max e regras próprias.
PHP UtilsUpload seguro de arquivos com validação de tipo, tamanho e renomeação automática.
PHP UtilsCache em arquivo com TTL configurável — ideal para queries pesadas e APIs externas.
PHP UtilsLog estruturado em arquivo com níveis info, warning, error e rotação automática.
PHP Utils