Bootstrap para TYPO3

Projetos TYPO3 com Bootstrap precisam de um sitepackage que ligue o framework ao CMS

O Bootstrap é o framework CSS mais usado do mundo: mais de 25% de todos os sites usam Bootstrap. Para projetos TYPO3, isso significa que designers entregam layouts em Bootstrap, desenvolvedores conhecem as classes e os componentes, e clientes esperam layouts responsivos construídos sobre ele. O ws_t3bootstrap traz o Bootstrap como sitepackage direto para o TYPO3: templates responsivos, o sistema de grid, componentes Bootstrap (accordion, cards, carousel, tabs, alerts) como elementos de conteúdo e uma base de TypoScript pré-configurada. Em vez de integrar o Bootstrap à mão num projeto TYPO3 vazio, o ws_t3bootstrap entrega um ponto de partida funcional, pronto para produção desde o primeiro dia.

Sites corporativos, portais de intranet e protótipos rápidos são os usos típicos

O cenário mais comum é o site de uma empresa de médio porte. Uma empresa com 50 a 500 funcionários precisa de um site com 30 a 80 páginas: página inicial, quem somos, serviços, cases, carreiras, contato. O designer cria um mockup com base no Bootstrap 5. O ws_t3bootstrap fornece os templates, o sistema de grid e os elementos de conteúdo, de modo que o desenvolvedor só precisa acrescentar o CSS próprio (cores, fontes, espaçamentos) e os componentes específicos do projeto. Prazo típico de desenvolvimento: duas a três semanas do mockup ao site pronto, contra quatro a seis semanas num setup sob medida.

O segundo cenário são portais de intranet. Uma empresa opera uma intranet em TYPO3 para 2.000 funcionários. O design não precisa ser único, mas precisa ser consistente e responsivo. O ws_t3bootstrap oferece um layout padrão profissional, que pode ser usado sem grande esforço de design. Elementos de conteúdo como accordions para FAQs, tabs para informações por departamento e cards para chamadas de notícias ficam disponíveis de imediato.

Terceiro cenário: prototipagem rápida. Uma agência monta em dois dias um protótipo funcional do site, que o cliente pode aprovar. O ws_t3bootstrap reduz o tempo de setup de dias para horas, porque a estrutura básica (cabeçalho, rodapé, navegação, grid) já está pronta.

Cada componente do Bootstrap vira um elemento de conteúdo do TYPO3

O ws_t3bootstrap se instala como sitepackage do TYPO3 e configura: setup de TypoScript com os includes de CSS e JS do Bootstrap, templates Fluid para cabeçalho, rodapé e layouts de página, backend layouts (uma, duas ou três colunas com barra lateral) e elementos de conteúdo que reproduzem os componentes do Bootstrap.

Os elementos de conteúdo são definidos por configurações TCA e templates Fluid. Um elemento accordion, por exemplo, cria um accordion do Bootstrap com n painéis, cada um com título e texto. Um elemento card gera um card do Bootstrap com imagem, título, texto e link. Um elemento de grid permite layouts de colunas aninhadas dentro de uma página.

O CSS do Bootstrap entra como arquivo CSS compilado (rápido, sem ferramentas de build) ou como código-fonte Sass, compilado por um sistema de build (Webpack, Vite). A variante em Sass permite sobrescrever as variáveis do Bootstrap (cores, breakpoints, tamanhos de fonte) e incluir só os módulos do Bootstrap que o projeto usa, o que reduz o CSS de 230 KB para 80 a 120 KB.

Os componentes JavaScript (accordion, collapse, dropdown, modal, tab, toast) vêm do Bootstrap 5, que dispensa o jQuery. Isso reduz o JavaScript em cerca de 85 KB em relação ao Bootstrap 4, que ainda dependia do jQuery.

Conflitos de versão do Bootstrap e disputas de especificidade no CSS são os problemas clássicos

O maior problema dos sitepackages com Bootstrap é o conflito de versões. Se o ws_t3bootstrap carrega o Bootstrap 5.2, mas outra extensão (um plugin de slider, por exemplo) traz o Bootstrap 4.6 ou 3.x, as classes CSS colidem. O Bootstrap 4 usa “col-md-4”, o Bootstrap 5 também, mas com comportamento diferente em certos utilitários. A solução: padronizar todas as extensões na mesma versão do Bootstrap ou isolar o Bootstrap próprio de cada extensão com escopo de CSS.

Segundo problema: especificidade de CSS. Quando o CSS próprio precisa sobrescrever classes do Bootstrap, começa uma corrida de especificidade: as declarações !important se acumulam, porque os utilitários do Bootstrap têm especificidade alta. A solução: usar as variáveis do Bootstrap em vez de sobrescrever CSS e carregar a folha de estilos própria depois do CSS do Bootstrap.

Terceiro ponto: performance. O Bootstrap, como framework, carrega todos os componentes, mesmo que o site use só cinco deles. Num site que precisa apenas de grid, cards e navbar, 80% do CSS do Bootstrap nunca é usado. O PurgeCSS ou uma importação seletiva em Sass reduz o CSS ao necessário.

O TYPO3 v12 e o v13 são suportados, e o Bootstrap 5 é o padrão atual

O ws_t3bootstrap é mantido ativamente e suporta o TYPO3 v12 e v13. A versão atual se baseia no Bootstrap 5.3. No upgrade do Bootstrap 4 para o 5, há mudanças incompatíveis a observar: a dependência do jQuery cai, algumas classes CSS foram renomeadas (por exemplo, ml-/mr- para ms-/me-), e a API de JavaScript mudou. A Gosign faz upgrades de Bootstrap junto com upgrades do TYPO3 e confere, no processo, se todos os elementos de conteúdo são exibidos corretamente. Em projetos novos, recomendamos o ws_t3bootstrap como ponto de partida e complementamos o sitepackage com componentes específicos do projeto, em vez de integrar o Bootstrap do zero ao TYPO3.