Sem framework, sem build step. Bootstrap 5.3 só para grid/utilitários e componentes de interação (tabs, dropdown, modal). Cada página em src/View/Pages/ pode ter seu próprio <style> inline para estilos específicos daquela tela.
Arquivos e responsabilidade
| Arquivo | Papel |
|---|---|
public/css/prodmais-elegant.css | Design system global: tokens, Navbar, cards, botões, hero compartilhado, menu de usuário |
public/css/umc-theme.css | Ajustes específicos de tema UMC (cores institucionais legadas) |
public/js/app.js | Comportamento global (upload, formulários, interações de página) |
public/js/modules/API.js | Chamadas fetch para os endpoints de public/api/ |
public/js/modules/State.js | Estado compartilhado no cliente (filtros, paginação) |
Fluxo de carregamento de assets
flowchart LR
P["Página PHP em View/Pages"] --> G["prodmais-elegant.css (global)"]
P --> U["umc-theme.css (tema UMC)"]
P --> IN["<style> inline da própria página"]
P --> APP["app.js"]
APP --> API["modules/API.js"]
APP --> ST["modules/State.js"]
API --> EP["public/api/*.php"]
Onde cada estilo deve viver
No CSS global
- Qualquer coisa reutilizada em 2+ páginas (Navbar, Footer, botões, cards)
- Tokens de cor, tipografia, espaçamento
No <style> inline da página
- Hero customizado daquela tela específica
- Layout único que não se repete em nenhuma outra página