Comece por aqui
Fundamentos
Cores, tipografia, espaçamento e raio — os tokens que todo componente usa.
ÍconesBootstrap Icons 1.11.0, os ícones já usados no projeto e os tamanhos de container padrão.
Componente AlertVariações institucionais (info, aviso) e o alerta sobre fundo escuro do hero — com código pra copiar.
Componente CardCard elegante, card de conteúdo e stat card — com código pra copiar.
Arquitetura — BackendCamadas PHP (Core/Domain/Infrastructure/View), fluxogramas de dependência e as classes críticas do sistema.
Arquitetura — FrontendOrganização de CSS/JS vanilla, fluxo de carregamento de assets e onde cada estilo deve viver.
Endpoints da APITodas as rotas REST em public/api/, método, o que cada uma faz e o fluxo de uma requisição.
Regras de UI aprendidas na prática
- Sidebar de filtro fixa ao rolar precisa de
position:stickyno elemento e a coluna-pai não pode teralign-self:flex-startnemalign-items-startna row — isso remove o "espaço" que o sticky precisa pra funcionar. - Callout/highlight boxes usam fundo tintado +
border: 1px soliduniforme — nuncaborder-leftgrosso (visual datado, evitar reintroduzir em cards novos). - Todo link de navegação entre páginas precisa usar o mesmo nome de parâmetro que a página de destino espera (ex:
ppg.phpsó lê?ppg=<nome>, nunca?codigo=) — já causou bug de "botão que só recarrega a tela". - Menu de usuário logado (avatar + iniciais + dropdown) vive no
Navbarcomponent e lê$_SESSIONdiretamente — funciona em qualquer página que chameNavbar::display(), sem precisar de função extra por página. <code>inline sempre com fundo cinza-claro fixo — por isso sempre defina uma cor de texto explícita nele, nunca deixe herdar do parágrafo pai (parágrafos sobre fundo escuro têm texto claro, que fica ilegível num fundo claro).