🎨 Microframework CSS BEM IntelliSense

Um microframework CSS profissional baseado em metodologia BEM com uma extensão poderosa para VS Code que oferece IntelliSense contextual, snippets inteligentes e acessibiblidade nativa.

📚 Acesse a Documentação Oficial

🔥 O que está incluído

• ✨ IntelliSense Contextual: Sugere apenas elementos (__) e modificadores (--) válidos para o bloco atual.
• ⚡ Snippets Inteligentes: Expanda estruturas complexas (Navbar, Grid, Modais) com apenas uma palavra e a tecla Tab.
• 🔍 Hover Information: Veja a anatomia BEM de qualquer classe e suas opções disponíveis ao passar o mouse.
• ♿ A11Y Native: Snippets gerados já incluem os melhores padrões de acessibilidade (Axe 4.11 / WCAG 2.1 AA).
• 🚀 Zero Dependências: Focado em performance absoluta (12.3 KB) e zero JavaScript obrigatório.

🚀 Instalação

1. Busque por "Microframework CSS IntelliSense" no VS Code.
2. Clique em Instalar.
3. Comece a digitar classes com o prefixo bem- para ver a mágica acontecer.

💡 Como Usar

IntelliSense Contextual Inteligente

Digite o prefixo do bloco e a extensão guiara você pelas opções disponíveis:

<!-- Digite "bem-navbar__" -->
<nav class="bem-navbar__">
<!-- Sugere: brand, menu, item, link, toggle, checkbox -->

<!-- Digite "bem-grid--" -->
<div class="bem-grid--">
<!-- Sugere: cols-2, cols-3, auto, auto-4, gap-sm, gap-lg -->

Hover para Documentação

Passe o mouse sobre as classes para entender sua função no ecossistema BEM.

🎯 Lista de Snippets (HTML & JSX)

A extensão suporta tanto HTML puro quanto React/JSX.

Layout & Estrutura

• bem-container: Container centralizado (opções: --fluid, --narrow).
• bem-grid: Grid clássico (--cols-2, --cols-3, --cols-4).
• bem-grid-auto: Grid fluido inteligente (min-width logic).
• bem-hide-mobile: Utilitário para ocultar elementos em dispositivos móveis.

Componentes de UI

• bem-navbar: Navbar responsiva 100% CSS (Checkbox Hack).
• bem-btn: Botões semânticos (--primary, --success, etc).
• bem-card: Cards complexos com header, body e footer.
• bem-modal: Diálogos modais nativos.
• bem-form: Formulários completos com validação visual.
• bem-alert: Mensagens de status (info, warning, danger).

⚙️ Configurações

Ajuste a experiência nas configurações do VS Code:

• microframework.enableIntelliSense: Habilita/Desabilita o autocompletar.
• microframework.showModifierSuggestions: Mostra modificadores ao digitar --.

📝 Licença

Desenvolvido por Rodrigo Faustino. Distribuído sob a licença MIT. Use livremente em seus projetos!