Framework v2.0.0

O Framework que
acelera tudo.

CSS + JS em ~82kb. Zero dependências, 77 componentes, +450 variáveis e Backend PHP nativo. Interfaces premium do zero ao deploy.

Y2 Icon

Performance extrema

~82kb total (gzip). CSS 58kb + JS 24kb. Zero dependências externas - carrega instantâneo.

Design System Nativo

+450 variáveis CSS para customização total. Paleta cromática premium e tipografia otimizada.

77 Componentes

CSS, JS e Backend PHP nativos. Modal, Auth, ORM, Router e muito mais. Tudo incluso.

Animações Nativas

Motor de animações por GPU integrado. Transições fluidas e reveal scroll com zero configuração.

Componentes Premium Prontos

Cada detalhe foi refinado para uma experiência de usuário excepcional.

Botões & Ações
Estética Minimalista
Feedback Visual
Operação concluída!
Alertas & Notificações
Navegação
Home Docs
Breadcrumbs & Menus

Simplicidade que escala.

O Y2 foi projetado para eliminar a fadiga do desenvolvimento moderno. Chega de configurações complexas de build ou gigabytes de node_modules. Foque no valor, não na estrutura.

  • Zero Dependências Externas (Pure Vanilla)
  • CSS Atômico + Component-Based Architecture
  • Totalmente extensível via Variáveis CSS
// API disponível globalmente:
Y2Day.set('dark');          // tema dark/light
Y2Modal.show('#meuModal');  // abrir modal
Y2Alert.show('Salvo!', { type: 'suc' });
Y2.reinit();              // re-inicializa via AJAX

Eleve o nível do seu projeto hoje.

Comece a usar o framework que combina a flexibilidade do CSS Vanilla com o poder das interfaces modernas.

Sistema de Grid Moderno

Um grid flexível de 12 colunas, baseado em Flexbox, com classes semânticas e ultra-curtas.

.co12
.co6
.co6
.co4
.co4
.co4
.co3
.co3
.co3
.co3
<div class="l g-m">
  <div class="co6">Metade da largura</div>
  <div class="co6">Metade da largura</div>
</div>

Cores Vibrantes & Harmoniosas

24 famílias de cores cuidadosamente selecionadas para interfaces profissionais.

Primary
--prin / --y2-pri
Secondary
--secu / --y2-sec
Success
--suce / --y2-suc
Danger
--peri / --y2-per
Warning
--aler / --y2-ale
Info
--info / --y2-inf

/* Uso simples via variveis */
.meu-elemento {
  background: var(--prin);
  color: var(--y2-txt-bas);
  border: 1px solid var(--y2-bor);
}

Y2 Core + Y2 Compl

O Y2 é dividido em dois bundles independentes. O Core é congelado e ultraleve — base estável para qualquer projeto. O Compl evolui continuamente com módulos avançados que você carrega só quando precisa.

CORE y2.min.js + y2.min.css

~82kb total. Congelado e estável — layout, elementos, componentes, plugins JS, animações, forms.

  • Grid 12 colunas · Tipografia · Ícones
  • Modal · Navbar · Tabs · Accordion · Dropdown
  • Slider · Lightbox · Parallax · Scroll Anime
  • Y2Alert · Y2Ajax · Y2Day · Y2Code · LGPD
  • Forms · Máscaras · Validação · Material Inputs
COMPL y2-compl.min.js + y2-compl.min.css

Módulos avançados em evolução contínua. Carregue só quando usar — sem peso desnecessário no Core.

  • Table AJAX — ordenação, busca, paginação dinâmica
  • Y2Editor — rich text nativo sem dependências
  • Cotação — moedas em tempo real
  • Instagram Feed — proxy PHP, sem token
  • Infinite Scroll · File Upload

Começo Rápido

Pronto para a nova era? Integre o Y2 em segundos no seu fluxo de trabalho.

Dica Pro - O Y2 funciona perfeitamente com Laravel, React, Vue ou apenas HTML puro.
<!-- Y2 Core (obrigatório) -->
<link rel="stylesheet" href="https://y2.sanweb.com.br/dist/y2.min.css?v=21">
<script src="https://y2.sanweb.com.br/dist/y2.min.js?v=21" defer></script>

<!-- Y2 Compl (opcional — módulos avançados) -->
<link rel="stylesheet" href="https://y2.sanweb.com.br/dist/y2-compl.min.css?v=2">
<script src="https://y2.sanweb.com.br/dist/y2-compl.min.js?v=2" defer></script>

Explore a Documentação

Mergulhe fundo em cada módulo e domine o ecossistema Y2.