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
- Busque por "Microframework CSS IntelliSense" no VS Code.
- Clique em Instalar.
- 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!