Bootstrap para TYPO3

Los proyectos TYPO3 basados en Bootstrap necesitan un sitepackage que tienda el puente entre el framework y el CMS

Bootstrap es el framework CSS más utilizado del mundo. Más del 25 por ciento de los sitios web lo usan. Para los proyectos TYPO3 eso significa que los diseñadores entregan sus maquetas en Bootstrap, los desarrolladores conocen las clases y los componentes, y los clientes esperan layouts responsive construidos sobre Bootstrap. ws_t3bootstrap incorpora Bootstrap como sitepackage directamente en TYPO3: plantillas responsive, el sistema de grid, componentes Bootstrap (acordeón, cards, carrusel, tabs, alerts) como elementos de contenido y una base TypoScript preconfigurada. En lugar de integrar Bootstrap manualmente en un proyecto TYPO3 vacío, ws_t3bootstrap entrega un punto de partida listo para producción.

Los escenarios típicos son sitios corporativos, portales y prototipado rápido

El escenario más frecuente es el sitio corporativo de una empresa mediana. Una compañía con entre 50 y 500 personas necesita un sitio con 30 a 80 páginas: portada, quiénes somos, servicios, referencias, carrera, contacto. El diseñador crea una maqueta sobre la base de Bootstrap 5. ws_t3bootstrap aporta las plantillas, el sistema de grid y los elementos de contenido, de modo que el desarrollador solo tiene que añadir el CSS personalizado (colores, tipografías, espaciados) y los componentes específicos del proyecto. Tiempo de desarrollo habitual: de dos a tres semanas desde la maqueta hasta el sitio terminado, frente a cuatro o seis semanas en un setup a medida.

Un segundo escenario son los portales de intranet. Una empresa opera una intranet TYPO3 para 2.000 personas. El diseño no tiene por qué ser único, pero sí coherente y responsive. ws_t3bootstrap aporta un layout estándar profesional que puede utilizarse sin gran esfuerzo de diseño. Elementos de contenido como acordeones para FAQs, pestañas para información departamental y cards para teasers de noticias están disponibles de inmediato.

Tercer escenario: prototipado rápido. Una agencia construye en dos días un prototipo de sitio funcional que el cliente puede aprobar. ws_t3bootstrap reduce el tiempo de setup a horas en lugar de días, porque la estructura base (cabecera, pie, navegación, grid) ya está lista.

La arquitectura técnica registra los componentes Bootstrap como Content Elements de TYPO3

ws_t3bootstrap se instala como sitepackage de TYPO3 y configura: setup TypoScript con includes de CSS/JS de Bootstrap, plantillas Fluid para cabecera, pie y layouts de página, backend layouts (1 columna, 2 columnas, 3 columnas con sidebar) y elementos de contenido que reflejan los componentes Bootstrap.

Los elementos de contenido se definen mediante configuraciones TCA y plantillas Fluid. Un elemento Accordion, por ejemplo, crea un acordeón Bootstrap con n paneles, cada uno con título y cuerpo. Un elemento Card genera una card Bootstrap con imagen, título, texto y enlace. Un elemento Grid permite layouts de columnas anidadas dentro de una página.

El CSS de Bootstrap se incluye bien como archivo CSS compilado (rápido, sin build tools) o bien como código Sass compilado por un sistema de build (Webpack, Vite). La variante Sass permite sobrescribir las variables de Bootstrap (colores, breakpoints, tamaños de fuente) y cargar solo los módulos necesarios, reduciendo el tamaño del CSS de 230 KB a entre 80 y 120 KB.

Los componentes JavaScript (Accordion, Collapse, Dropdown, Modal, Tab, Toast) se incluyen vía Bootstrap 5, que funciona sin jQuery. Esto reduce el tamaño del archivo JavaScript respecto a Bootstrap 4 en unos 85 KB (por la desaparición de jQuery).

Los problemas habituales afectan a conflictos de versiones de Bootstrap y a luchas de especificidad en CSS

El mayor problema con los sitepackages Bootstrap es el conflicto de versiones. Si ws_t3bootstrap incluye Bootstrap 5.2 pero otra extensión (por ejemplo, un plugin de slider) trae Bootstrap 4.6 o 3.x, las clases CSS colisionan. Bootstrap 4 usa “col-md-4” y Bootstrap 5 también, pero con comportamientos distintos en ciertas utilidades. La solución: unificar todas las extensiones en la misma versión de Bootstrap o aislar el Bootstrap propio de la extensión mediante scoping de CSS.

Segundo problema: la especificidad del CSS. Si el CSS personalizado tiene que sobrescribir las clases de Bootstrap, se inicia una carrera de especificidad: las declaraciones !important se multiplican porque las utilidades de Bootstrap tienen una especificidad alta. La solución: usar variables de Bootstrap en lugar de overrides de CSS y cargar la hoja de estilos personalizada después del CSS de Bootstrap.

Tercer tema: rendimiento. Bootstrap como framework carga todos los componentes, aunque el sitio solo use cinco. En un sitio que solo necesita grid, cards y navbar, el 80 por ciento del CSS de Bootstrap no se utiliza nunca. PurgeCSS o un import selectivo de Sass reduce el tamaño del CSS a lo imprescindible.

TYPO3 v12 y v13 están soportados, Bootstrap 5 es el estándar actual

ws_t3bootstrap se mantiene activamente y soporta TYPO3 v12 y v13. La versión actual se basa en Bootstrap 5.3. En el upgrade de Bootstrap 4 a 5 hay que tener en cuenta algunos breaking changes: desaparece la dependencia de jQuery, algunas clases CSS se han renombrado (por ejemplo ml-/mr- a ms-/me-) y la API JavaScript ha cambiado. Gosign realiza los upgrades de Bootstrap junto con los upgrades de TYPO3 y revisa todos los elementos de contenido para comprobar su correcta visualización. En nuevos proyectos recomendamos ws_t3bootstrap como punto de partida y completamos el sitepackage con componentes específicos del proyecto, en lugar de integrar Bootstrap desde cero en TYPO3.