Bootstrap dla TYPO3

Projekty TYPO3 oparte na Bootstrap potrzebują Sitepackage budującego most między frameworkiem a CMS-em

Bootstrap to najczęściej wykorzystywany framework CSS na świecie. Ponad 25 procent wszystkich witryn używa Bootstrapa. Dla projektów TYPO3 oznacza to: projektanci dostarczają makiety w Bootstrapie, programiści znają jego klasy i komponenty, a klienci oczekują responsywnych układów na nim opartych. ws_t3bootstrap wprowadza Bootstrap jako Sitepackage bezpośrednio do TYPO3: responsywne szablony, system Grid, komponenty Bootstrap (Accordion, Cards, Carousel, Tabs, Alerts) jako elementy treści i prekonfigurowaną bazę TypoScript. Zamiast ręcznie integrować Bootstrap w pustym projekcie TYPO3, ws_t3bootstrap dostarcza działający punkt startowy gotowy do produkcji od pierwszej chwili.

Typowe scenariusze to witryny firmowe, portale i prototypowanie

Najczęstszym scenariuszem jest witryna średniej firmy. Firma z 50 do 500 pracownikami potrzebuje strony z 30 do 80 podstronami: strona główna, o nas, usługi, referencje, kariera, kontakt. Projektant tworzy mockup w oparciu o Bootstrap 5. ws_t3bootstrap dostarcza szablony, system Grid i elementy treści, dzięki czemu programista musi tylko dodać własne CSS (kolory, czcionki, odstępy) i komponenty specyficzne dla projektu. Typowy czas rozwoju: dwa do trzech tygodni od mockupu do gotowej strony zamiast czterech do sześciu tygodni przy custom-setupie.

Drugim scenariuszem są portale intranetowe. Firma prowadzi intranet TYPO3 dla 2 000 pracowników. Design nie musi być unikatowy, ale spójny i responsywny. ws_t3bootstrap dostarcza profesjonalny standardowy układ, który można wdrożyć bez dużego nakładu projektowego. Elementy treści takie jak akordeony do FAQ, taby dla informacji działowych i karty dla zajawek news są dostępne natychmiast.

Trzeci scenariusz: szybkie prototypowanie. Agencja buduje w dwa dni działający prototyp witryny, który klient może zaakceptować. ws_t3bootstrap redukuje czas setupu z dni do godzin, ponieważ struktura podstawowa (header, footer, nawigacja, grid) już istnieje.

Architektura techniczna rejestruje komponenty Bootstrap jako elementy treści TYPO3

ws_t3bootstrap instaluje się jako Sitepackage TYPO3 i konfiguruje: setup TypoScript z dołączeniem CSS/JS Bootstrap, szablony Fluid dla nagłówka, stopki i układów stron, układy backendu (1-kolumnowy, 2-kolumnowy, 3-kolumnowy z sidebarem) oraz elementy treści odwzorowujące komponenty Bootstrap.

Elementy treści definiowane są przez konfiguracje TCA i szablony Fluid. Element Accordion tworzy na przykład akordeon Bootstrap z n panelami, gdzie każdy panel ma tytuł i tekst. Element Card generuje kartę Bootstrap z obrazem, tytułem, tekstem i linkiem. Element Grid umożliwia zagnieżdżone układy kolumn wewnątrz strony.

CSS Bootstrap dołączany jest jako skompilowany plik CSS (szybki, bez konieczności narzędzi build) lub jako kod źródłowy Sass kompilowany przez system build (Webpack, Vite). Wariant Sass pozwala nadpisać zmienne Bootstrap (kolory, breakpointy, rozmiary czcionek) i dołączać tylko potrzebne moduły Bootstrap, co redukuje rozmiar pliku CSS z 230 KB do 80-120 KB.

Komponenty JavaScript (Accordion, Collapse, Dropdown, Modal, Tab, Toast) dołączane są przez Bootstrap 5, który nie wymaga jQuery. Zmniejsza to rozmiar pliku JavaScript względem Bootstrap 4 o około 85 KB (brak jQuery).

Częste problemy dotyczą konfliktów wersji Bootstrap i walki o specyficzność CSS

Największym problemem przy Sitepackage’ach Bootstrap jest konflikt wersji. Gdy ws_t3bootstrap dołącza Bootstrap 5.2, ale inne rozszerzenie (np. plugin slidera) wnosi Bootstrap 4.6 lub 3.x, klasy CSS się zderzają. Bootstrap 4 używa “col-md-4”, Bootstrap 5 również, ale z odmiennym zachowaniem przy określonych utility’ach. Rozwiązanie: ujednolicić wszystkie rozszerzenia do tej samej wersji Bootstrap lub izolować wbudowany Bootstrap rozszerzenia przez scoping CSS.

Drugi problem: specyficzność CSS. Gdy własny CSS musi nadpisać klasy Bootstrap, powstaje wyścig specyficzności: deklaracje !important mnożą się, ponieważ utility’e Bootstrap mają wysoką specyficzność. Rozwiązanie: korzystać ze zmiennych Bootstrap zamiast nadpisywać CSS i ładować własny arkusz po CSS Bootstrapa.

Trzeci temat: wydajność. Bootstrap jako framework ładuje wszystkie komponenty, nawet gdy witryna używa tylko pięciu z nich. Przy witrynie potrzebującej tylko Grid, Cards i Navbar 80 procent CSS Bootstrap nigdy nie jest wykorzystywane. PurgeCSS lub selektywny import Sass redukuje rozmiar pliku CSS do koniecznego minimum.

TYPO3 v12 i v13 są wspierane, Bootstrap 5 jest aktualnym standardem

ws_t3bootstrap jest aktywnie utrzymywany i wspiera TYPO3 v12 oraz v13. Aktualna wersja oparta jest na Bootstrap 5.3. Przy upgrade z Bootstrap 4 do 5 należy uwzględnić breaking changes: zależność od jQuery znika, niektóre klasy CSS zostały przemianowane (np. ml-/mr- na ms-/me-) i zmieniło się API JavaScript. Gosign przeprowadza upgrade’y Bootstrap razem z upgrade’ami TYPO3 i sprawdza przy tym wszystkie elementy treści pod kątem poprawnej prezentacji. W nowych projektach rekomendujemy ws_t3bootstrap jako punkt startowy i uzupełniamy Sitepackage o komponenty specyficzne dla projektu, zamiast integrować Bootstrap w TYPO3 od podstaw.