O sistema BaberBeBot conta com uma estrutura visual organizada, responsiva e adaptável, construída com CSS modular e ícones personalizados.
📁 Diretórios Envolvidos
sistema/assets/css/– Estilos principais e temassistema/assets/iconfonts/– Fontes de ícones (Boxicons, FontAwesome, Bootstrap Icons, etc.)sistema/assets/js/– Scripts de comportamento visual
🎨 Estilos e Temas
style.css– Estilo base do painelstyle-dark.css,style-transparent.css– Temas alternativoscustom.css– Personalizações específicas para o projetorecuperar.css,erro.css– Estilos específicos por página
🔠 Fontes e Ícones
boxicons/– Ícones modernos em SVG, TTF, WOFFfontawesome-free/– Compatível com dezenas de ícones popularesbootstrap-icons/– Ícones compatíveis com o framework Bootstrapcryptofont,feather,flag-icon-css– Ícones adicionais
⚙️ Responsividade
- Uso de media queries para adaptar ao mobile
- Classes utilitárias como
.d-flex,.text-center,.mt-4 - Menus laterais colapsáveis e conteúdo fluído no painel
📦 Boas Práticas Aplicadas
- Separação clara de CSS por função (temas, erro, login)
- Importação de fontes externas por CDN ou local
- Uso de ícones vetoriais para leveza e escalabilidade
- Scripts e estilos organizados em subpastas por tipo