🎨 Microframework CSS IntelliSense

Um microframework CSS profissional baseado em metodologia BEM com extensão VS Code que oferece IntelliSense contextual e snippets inteligentes. Esta extensão é o seu par perfeito para trabalhar com o microframework!

📦 O que está incluído

• ✅ IntelliSense Contextual: sugere apenas elementos/modificadores válidos para o BEM
• ✅ Snippets Inteligentes: expande estruturas HTML completas
• ✅ Hover Information: mostra documentação ao passar o mouse
• ✅ Compatibilidade: HTML, JavaScript, JavaScriptReact, TypeScript, e TypeScriptReact

🚀 Instalação Rápida

1. Busque por "Microframework CSS IntelliSense" ou "RodrigoFaustino" na aba de extensões do VS Code.
2. Clique em Instalar.
3. (Opcional mas recomendado) certifique-se de que o CSS do Microframework está referenciado no seu projeto.
4. ✨ Pronto! O IntelliSense já está ativo.

💡 Como Usar o IntelliSense

IntelliSense Contextual Inteligente

A extensão entende a estrutura BEM e sugere apenas as opções válidas:

<!-- Ao digitar "bem-card__" -->
<div class="bem-card__">
<!-- Sugere APENAS: header, title, subtitle, body, footer, image, actions -->

<!-- Ao digitar "bem-btn--" -->
<button class="bem-btn--">
<!-- Sugere APENAS: primary, secondary, success, danger, outline, sm, lg, block -->

<!-- Ao digitar "bem-form__input--" -->
<input class="bem-form__input--">
<!-- Sugere APENAS: error, success -->

Hover para Documentação

Passe o mouse sobre qualquer classe para ver:

• Bloco base
• Elemento (se houver)
• Modificador (se houver)
• Elementos disponíveis
• Modificadores disponíveis

🎯 Snippets - Live Preview

Digite o prefixo e pressione Tab para expandir estruturas completas:

Button Snippets

<!-- Digite: bem-btn + Tab -->
<button class="bem-btn bem-btn--primary">
    Button Text
</button>

<!-- Digite: bem-btn-icon + Tab -->
<button class="bem-btn bem-btn--primary">
    <span class="bem-btn__icon">🔥</span>
    <span class="bem-btn__text">Button Text</span>
</button>

Card Snippets

<!-- Digite: bem-card + Tab -->
<div class="bem-card">
    <div class="bem-card__header">
        <h3 class="bem-card__title">Card Title</h3>
        <p class="bem-card__subtitle">Subtitle</p>
    </div>
    <div class="bem-card__body">
        Card content goes here
    </div>
    <div class="bem-card__footer">
        <div class="bem-card__actions">
            <button class="bem-btn bem-btn--primary">Action</button>
        </div>
    </div>
</div>

📋 Todos os Snippets Disponíveis

HTML Snippets

• bem-btn - Botão básico
• bem-btn-icon - Botão com ícone
• bem-card - Card completo
• bem-card-simple - Card simples
• bem-card-image - Card com imagem
• bem-form - Formulário completo
• bem-form-group - Grupo de input
• bem-form-textarea - Grupo de textarea
• bem-form-select - Grupo de select
• bem-form-checkbox - Checkbox
• bem-alert - Alerta
• bem-navbar - Barra de navegação
• bem-modal - Modal
• bem-grid - Grid layout
• bem-container - Container
• bem-badge - Badge

JSX/React Snippets

• bem-btn-jsx - Botão (React)
• bem-card-jsx - Card (React)
• bem-form-jsx - Form (React)
• bem-alert-jsx - Alert (React)
• bem-modal-jsx - Modal (React)

⚙️ Configurações

Esta extensão contribui com as seguintes configurações manuais para ajustar sua experiência:

• microframework.enableIntelliSense: Ativa ou desativa o IntelliSense contextual para classes BEM.
• microframework.showModifierSuggestions: Controla a exibição de sugestões de modificadores ao digitar --.

📝 Licença

MIT License - Use livremente em projetos pessoais e comerciais.