|
| 1 | +# Bootstrap Bundle |
| 2 | + |
| 3 | +[](https://packagist.org/packages/jbsnewmedia/bootstrap-bundle) |
| 4 | +[](https://packagist.org/packages/jbsnewmedia/bootstrap-bundle) |
| 5 | +[](https://packagist.org/packages/jbsnewmedia/bootstrap-bundle) |
| 6 | +[](https://symfony.com) |
| 7 | +[](https://packagist.org/packages/jbsnewmedia/bootstrap-bundle) |
| 8 | +[](https://github.com/jbsnewmedia/bootstrap-bundle/actions/workflows/tests.yml) |
| 9 | +[](https://github.com/jbsnewmedia/bootstrap-bundle/actions/workflows/tests.yml) |
| 10 | +[](https://github.com/jbsnewmedia/bootstrap-bundle/actions/workflows/tests.yml) |
| 11 | +[](https://github.com/jbsnewmedia/bootstrap-bundle/actions/workflows/tests.yml) |
| 12 | +[](https://codecov.io/gh/jbsnewmedia/bootstrap-bundle) |
| 13 | + |
| 14 | +Ein leichtgewichtiges Symfony-Bundle, das Dir beim Gerüstbau und der Kompilierung von Bootstrap-SCSS mit [scssphp](https://github.com/scssphp/scssphp) hilft. Es enthält drei Konsolenbefehle: |
| 15 | + |
| 16 | +- `bootstrap:init` — erstellt SCSS-Einstiegsdateien unter `assets/scss/`. |
| 17 | +- `bootstrap:compile` — kompiliert SCSS zu CSS (mit sinnvollen Standardwerten und vendor-bewussten Importpfaden). |
| 18 | +- `bootstrap:purge` — bereinigt kompiliertes Bootstrap-CSS durch Scannen Deiner Templates. |
| 19 | + |
| 20 | +--- |
| 21 | + |
| 22 | +## 🚀 Funktionen |
| 23 | + |
| 24 | +- Sofort einsatzbereite SCSS-Einträge (hell und dunkel) |
| 25 | +- SCSS → CSS via scssphp (reines PHP, kein Node erforderlich) |
| 26 | +- Schreibt lesbares und minifiziertes CSS in einem Durchlauf |
| 27 | +- Optionale Source-Maps für jede Ausgabe (`--source-map`) |
| 28 | +- Include-Pfade für `vendor/twbs/bootstrap/scss` direkt vorkonfiguriert |
| 29 | +- Bereinigung von Bootstrap-CSS basierend auf Deinen Templates (`bootstrap:purge`) |
| 30 | +- Saubere Standardwerte und sinnvolle Pfade |
| 31 | + |
| 32 | +--- |
| 33 | + |
| 34 | +## ⚙️ Anforderungen |
| 35 | + |
| 36 | +- PHP 8.2 oder höher |
| 37 | +- Symfony 6.4 oder 7.x (framework-bundle, console) |
| 38 | +- Composer |
| 39 | +- Abhängigkeiten: |
| 40 | + - `twbs/bootstrap` (>= 5.3) |
| 41 | + - `scssphp/scssphp` (^2.0) |
| 42 | + - `jbsnewmedia/css-purger` (^1.0) |
| 43 | + |
| 44 | +Hinweis: Dies ist ein reguläres Symfony-Bundle und erwartet einen Symfony-Kernel (es wird automatisch registriert). |
| 45 | + |
| 46 | +--- |
| 47 | + |
| 48 | +## 📦 Installation |
| 49 | + |
| 50 | +Installation über Composer: |
| 51 | + |
| 52 | +```bash |
| 53 | +composer require jbsnewmedia/bootstrap-bundle |
| 54 | +``` |
| 55 | + |
| 56 | +Falls noch nicht vorhanden, installiert Composer die erforderlichen Pakete (`twbs/bootstrap`, `scssphp/scssphp`). |
| 57 | + |
| 58 | +--- |
| 59 | + |
| 60 | +## 📋 Verwendung |
| 61 | + |
| 62 | +### 1) SCSS-Einträge erstellen |
| 63 | + |
| 64 | +Erstelle die Standard-SCSS-Einstiegsdateien unter `assets/scss/`: |
| 65 | + |
| 66 | +```bash |
| 67 | +php bin/console bootstrap:init |
| 68 | +# Vorschau ohne Dateien zu schreiben |
| 69 | +php bin/console bootstrap:init --dry-run |
| 70 | +# Vorhandene Dateien überschreiben |
| 71 | +php bin/console bootstrap:init --force |
| 72 | +``` |
| 73 | + |
| 74 | +Erstellte Dateien: |
| 75 | + |
| 76 | +- `assets/scss/bootstrap5-custom.scss` |
| 77 | +- `assets/scss/bootstrap5-custom-dark.scss` |
| 78 | + |
| 79 | +Beide Einträge importieren Bootstrap nach Deinen Variablen-Overrides in der richtigen Reihenfolge. |
| 80 | + |
| 81 | +### 2) Kompilieren SCSS → CSS |
| 82 | + |
| 83 | +Kompilieren mit sinnvollen Standardwerten: |
| 84 | + |
| 85 | +```bash |
| 86 | +php bin/console bootstrap:compile |
| 87 | +``` |
| 88 | + |
| 89 | +Standardwerte: |
| 90 | + |
| 91 | +- Input: `assets/scss/bootstrap5-custom.scss` |
| 92 | +- Ausgaben: |
| 93 | + - lesbares CSS → `assets/css/bootstrap.css` |
| 94 | + - minifiziertes CSS → `assets/css/bootstrap.min.css` |
| 95 | + |
| 96 | +Der Pfad für die lesbare Ausgabe kann über `--output-normal` angepasst werden. |
| 97 | + |
| 98 | +Source-Map generieren: |
| 99 | + |
| 100 | +```bash |
| 101 | +php bin/console bootstrap:compile --source-map |
| 102 | +``` |
| 103 | + |
| 104 | +Benutzerdefinierte Input/Output-Pfade: |
| 105 | + |
| 106 | +```bash |
| 107 | +php bin/console bootstrap:compile pfad/zu/entry.scss public/css/app.css |
| 108 | +``` |
| 109 | + |
| 110 | +### 3) Unbenutztes Bootstrap-CSS entfernen (optional) |
| 111 | + |
| 112 | +Nach dem Kompilieren kannst Du unbenutzte Selektoren entfernen, indem Du Deine Templates scannst: |
| 113 | + |
| 114 | +```bash |
| 115 | +php bin/console bootstrap:purge \ |
| 116 | + --input=assets/css/bootstrap.css \ |
| 117 | + --output=assets/css/bootstrap-purged.css \ |
| 118 | + --templates-dir=templates \ |
| 119 | + --include-dir=src \ |
| 120 | + --include-file=assets/app.js \ |
| 121 | + --selector=collapse --selector=show |
| 122 | +``` |
| 123 | + |
| 124 | +--- |
| 125 | + |
| 126 | +## 🧩 Befehlsreferenz |
| 127 | + |
| 128 | +### bootstrap:init |
| 129 | + |
| 130 | +Erstellt Bootstrap-SCSS-Einstiegsdateien. |
| 131 | + |
| 132 | +- Optionen: |
| 133 | + - `--dry-run` — zeigt an, was geschrieben würde, ohne Dateien zu erstellen |
| 134 | + - `-f, --force` — überschreibt vorhandene Dateien |
| 135 | +- Alias: `boostrap:init` (häufiger Tippfehler) |
| 136 | + |
| 137 | +Erstellt die folgenden Dateien in `assets/scss/`: |
| 138 | + |
| 139 | +- `bootstrap5-custom.scss` (hell) |
| 140 | +- `bootstrap5-custom-dark.scss` (dunkel) |
| 141 | + |
| 142 | +Empfohlene Reihenfolge innerhalb der Dateien: Funktionen → Deine Variablen-Overrides → Bootstrap-Import. |
| 143 | + |
| 144 | +### bootstrap:compile |
| 145 | + |
| 146 | +Kompiliert SCSS zu CSS mit scssphp. |
| 147 | + |
| 148 | +- Argumente: |
| 149 | + - `input` (optional) — SCSS-Einstiegsdatei; Standard `assets/scss/bootstrap5-custom.scss` |
| 150 | + - `output` (optional) — minifizierte CSS-Ausgabedatei; Standard `assets/css/bootstrap.min.css` |
| 151 | +- Optionen: |
| 152 | + - `--output-normal`, `-O` — Pfad für lesbares (nicht minifiziertes) CSS; Standard `assets/css/bootstrap.css` |
| 153 | + - `--source-map` — schreibt eine `.map`-Datei neben jede CSS-Ausgabe (lesbar und minifiziert) |
| 154 | + |
| 155 | +Vorkonfigurierte Include-Pfade (in dieser Reihenfolge): |
| 156 | + |
| 157 | +1. `vendor/twbs/bootstrap/scss` |
| 158 | +2. `vendor` |
| 159 | +3. `assets/scss` |
| 160 | +4. `assets` |
| 161 | + |
| 162 | +Dies ermöglicht Importe wie: |
| 163 | + |
| 164 | +```scss |
| 165 | +@import "functions"; |
| 166 | +@import "variables"; |
| 167 | +@import "bootstrap"; |
| 168 | +``` |
| 169 | + |
| 170 | +### bootstrap:purge |
| 171 | + |
| 172 | +Bereinigt Bootstrap-CSS durch Scannen Deiner Templates und behält nur die gefundenen Selektoren bei. |
| 173 | + |
| 174 | +- Optionen: |
| 175 | + - `--input`, `-i` — Pfad zur Eingabe-CSS-Datei; Standard `assets/css/bootstrap.css` |
| 176 | + - `--output`, `-o` — Pfad zum Schreiben des bereinigten CSS; Standard `assets/css/bootstrap-purged.css` |
| 177 | + - `--templates-dir` — Template-Verzeichnisse zum Scannen (mehrere erlaubt) |
| 178 | + - `--include-dir`, `-D` — zusätzliche Verzeichnisse zum Scannen (mehrere erlaubt) |
| 179 | + - `--include-file`, `-F` — zusätzliche Dateien zum Scannen (mehrere erlaubt) |
| 180 | + - `--selector`, `-S` — Selektoren, die immer behalten werden sollen (mehrere erlaubt) |
| 181 | + - `--readable`, `-r` — generiert lesbare (schöne) CSS-Ausgabe |
| 182 | + - `--dry-run` — zeigt Statistiken an, ohne die Ausgabedatei zu schreiben |
| 183 | + |
| 184 | +### Verhalten der Source-Maps |
| 185 | + |
| 186 | +Bei Verwendung von `--source-map` wird für jede Ausgabe eine Map geschrieben: |
| 187 | + |
| 188 | +- Lesbares CSS: `assets/css/bootstrap.css` + Map `assets/css/bootstrap.css.map` |
| 189 | +- Minifiziertes CSS: `assets/css/bootstrap.min.css` + Map `assets/css/bootstrap.min.css.map` |
| 190 | + |
| 191 | +Beispiel Konsolenausgabe: |
| 192 | + |
| 193 | +```text |
| 194 | +Compiled (readable) assets/scss/bootstrap5-custom.scss -> assets/css/bootstrap.css |
| 195 | +Source map written: assets/css/bootstrap.css.map |
| 196 | +Compiled (minified) assets/scss/bootstrap5-custom.scss -> assets/css/bootstrap.min.css |
| 197 | +Source map written: assets/css/bootstrap.min.css.map |
| 198 | +``` |
| 199 | + |
| 200 | +Wenn trotz `--source-map` keine Map geschrieben wird, prüfe bitte, ob Deine SCSS-Quelle tatsächlich Inhalt erzeugt und die Standardwerte nicht überschrieben wurden. |
| 201 | + |
| 202 | +--- |
| 203 | + |
| 204 | +## ✍️ SCSS-Beispiel |
| 205 | + |
| 206 | +Hell (erstellt durch `bootstrap:init`): |
| 207 | + |
| 208 | +```scss |
| 209 | +// Projektweite Bootstrap-Konfiguration |
| 210 | +// ------------------------------------------------- |
| 211 | +// Reihenfolge ist wichtig: Zuerst Funktionen laden, dann Variablen überschreiben, |
| 212 | +// dann Bootstrap importieren. |
| 213 | + |
| 214 | +// 1) Bootstrap-Funktionen (verwendet in Variablen-Berechnungen) |
| 215 | +@import "functions"; |
| 216 | + |
| 217 | +// 2) Deine Variablen-Overrides (ohne !default, damit sie tatsächlich angewendet werden) |
| 218 | +$primary: #ff0000; |
| 219 | + |
| 220 | +// 3) Optional: Bootstrap-Basisvariablen laden |
| 221 | +@import "variables"; |
| 222 | + |
| 223 | +// 4) Vollständiges Bootstrap importieren |
| 224 | +@import "bootstrap"; |
| 225 | +``` |
| 226 | + |
| 227 | +Dunkel (erstellt durch `bootstrap:init`): |
| 228 | + |
| 229 | +```scss |
| 230 | +// Dark-Mode-Build für Bootstrap |
| 231 | +// ------------------------------------------------- |
| 232 | +// 1) Bootstrap-Funktionen laden |
| 233 | +@import "functions"; |
| 234 | + |
| 235 | +// 2) Dunkelspezifische Variablen setzen (Beispiele nach Bedarf anpassen) |
| 236 | +$body-bg: #121212; |
| 237 | +$body-color: #e6e6e6; |
| 238 | +$primary: #0d6efd; |
| 239 | + |
| 240 | +// Optional: zusätzliche Maps/Variablen von Bootstrap laden |
| 241 | +@import "variables"; |
| 242 | + |
| 243 | +// 3) Vollständiges Bootstrap importieren |
| 244 | +@import "bootstrap"; |
| 245 | +``` |
| 246 | + |
| 247 | +--- |
| 248 | + |
| 249 | +## 🧭 Fehlerbehebung |
| 250 | + |
| 251 | +- Eingabedatei nicht gefunden |
| 252 | + - Führe `php bin/console bootstrap:init` aus, um Standardeinträge zu erstellen, oder übergib Deinen eigenen Pfad an `bootstrap:compile`. |
| 253 | +- Bootstrap-Importe werden nicht aufgelöst |
| 254 | + - Stelle sicher, dass `twbs/bootstrap` installiert ist: `composer require twbs/bootstrap`. |
| 255 | +- Source-Map-Kommentar ist vorhanden, aber es wird keine Datei geschrieben |
| 256 | + - Bei der aktuellen Implementierung wird die Map nach der Kompilierung geschrieben. Prüfe, ob `--source-map` gesetzt ist und Dein SCSS Inhalt erzeugt. |
| 257 | +- scssphp-Versionen |
| 258 | + - Dieses Bundle zielt auf `scssphp/scssphp` ^2.0 ab. Wenn Du eine andere Hauptversion verwendest, passe dies entsprechend an. |
| 259 | + |
| 260 | +--- |
| 261 | + |
| 262 | +## 📜 Lizenz |
| 263 | + |
| 264 | +Dieses Bundle ist unter der MIT-Lizenz lizenziert. Weitere Details findest Du in der Datei [LICENSE](LICENSE). |
| 265 | + |
| 266 | +Entwickelt von Jürgen Schwind und weiteren Mitwirkenden. |
| 267 | + |
| 268 | +--- |
| 269 | + |
| 270 | +## 🤝 Mitwirken |
| 271 | + |
| 272 | +Beiträge sind willkommen! Wenn Du etwas beitragen möchtest, kontaktiere uns oder erstelle einen Fork des Repositories und sende einen Pull-Request mit Deinen Änderungen oder Verbesserungen. |
| 273 | + |
| 274 | +--- |
| 275 | + |
| 276 | +## 📫 Kontakt |
| 277 | + |
| 278 | +Wenn Du Fragen, Feature-Anfragen oder Probleme hast, eröffne bitte ein Issue in unserem [GitHub-Repository](https://github.com/jbsnewmedia/bootstrap-bundle) oder sende einen Pull-Request. |
| 279 | + |
| 280 | +--- |
| 281 | + |
| 282 | +*Einfaches Bootstrap-SCSS-Gerüstbau und Kompilierung, Composer-nativ.* |
0 commit comments