Bootstrap 4 für PHP-Entwickler

Das CSS-Framework Bootstrap ist für PHP-Entwickler wie mich, die eher im Backend zu Hause sind, eine echte Arbeitserleichterung. Bootstrap vereinfacht und beschleunigt die Erstellung von responsiven Websites enorm. Mit der neuen Version 4 hat sich allerdings einiges geändert.

Böse Zungen behaupten, Seiten auf Basis von Bootstrap würden alle gleich aussehen, aber in dem Fall kann ich das verschmerzen. Bootstrap macht in Sachen Responsive Design und Accessbility vieles sehr richtig. Und je mehr Leute zugängliche und responsive Webseiten bauen, umso besser.

Mit der Bootstrap-Version 4, die am 18. Januar final veröffentlicht wurde, und dem Wechsel zu SASS als CSS-Präprozessor gibt es neue Anforderungen.

Wenn Du, wie ich, PHP-Tools den Vorzug gibst und die Benutzung von Ruby oder sogar npm vermeiden möchtest, stellt sich Dir möglicherweise die Frage, wie man Bootstrap in einen reinen PHP-Workflow integrieren kann. Die Antwort ist: Ja, es geht, aber mit kleinen Abstrichen.

Bootstrap mit Hilfe von Composer installieren

Mit Hilfe von Composer ist die Installation der SCSS-Datei schnell erledigt:

composer require twbs/bootstrap

Die SCSS-Dateien von Bootstrap landen dann im Verzeichnis vendor/twbs/bootstrap/scss.

leafo/scssphp zum Kompilieren von SCSS-Dateien

Zum Kompilieren von SCSS-Dateien gibt es unter PHP die leafo/scssphp-Library. Auch leafo/scssphp lässt sich einfach und bequem per Composer installieren

composer require leafo/scssphp

leafo/scssphp Bug: Zu dunkle Farben in Alerts

Die leafo/scssphp Bibliothek wird aktiv gepflegt und weiterentwickelt. In der aktuellen Version 0.7.4 gibt es leider noch einen Bug der bewirkt, dass beim Kompilieren von Bootstrap 4.0.0 Farbwerte nicht korrekt berechnet werden. Insbesondere Alerts erscheinen dadurch viel zu dunkel. Dieser Bug wurde inzwischen im Master-Branch von leafo/scss gefixt und sollte in der nächste Version 0.7.5 dann nicht mehr auftauchen. Wer nicht so lange warten möchte, stellt entweder in der composer.json die Anforderungen für „leafo/scssphp“ auf „dev-master“ oder nutzt den auf GitHub beschriebenen Workaround.

SCSS-Dateien kompilieren mit pscss

Nach der Installation von leafo/scss findet man im Verzeichnis vendor/bin das Kommandozeilen-Tool pscss. Damit lassen sich die Bootstrap SCSS-Datei sehr einfach in CSS-Dateien übersetzen, z.B. mit folgendem Befehl

vendor/bin/pscss vendor/twbs/scss/bootstrap.scss >bootstrap.css

Das Tool pscss bietet eine ganze Reihe von Optionen, wie z.B. auch das Komprimieren bzw. Minifizieren der CSS-Dateien. Eine Übersicht über alle Kommandozeilen-Optionen und Möglichkeiten findet man in der Dokumentation.

Watch-Kommando für scssphp

Was das Kommondozeilen-Tool pscss leider nicht bietet, ist das Überwachen von Dateien und Verzeichnissen und das automatische Kompilieren von SCSS-Dateien bei Änderungen.

Überwachungsfunktion mit Robo

Die gute Nachricht ist, die Watch-Funktion lässt sich sehr einfach mit Robo realisieren. Robo ist ein Task-Runner für PHP. Wenn Du Robo bisher noch nicht kennst, ist jetzt der richtige Zeitpunkt für einen Blick auf die Website bzw. in die Dokumentation.

Robo ist ein phar-Tool, das man ähnlich wie Composer global oder im Home-Verzeichnis installieren kann. Robo wird über eine zentrale PHP-Klasse RoboFile.php
konfiguriert. In dieser Klasse werden Jobs mit Hilfe von Funktionen definiert. Ein Job bzw. eine Funktion zum Überwachen und automatischen Kompilieren der Bootstrap-SCSS Dateien könnte z.B so aussehen

/**
 * Watch auf scss Verzeichnis
 */
public function watch()
{
    $this->taskWatch()
        ->monitor('scss', function() {
            $this->taskScss([
                'scss/bootstrap.scss' => 'bootstrap.css'])
                ->run();
        })->run();
} 

Wenn Robo als globales Binary installiert ist, reicht zum Starten der Überwachung der Befehl

robo watch

Bei einer Änderung an einer der SCSS-Dateien wird die bootstrap.css-Datei dann automatisch neu erzeugt. Auch das Minifizieren, Kopieren und vieles andere mehr kann Robo automatisch übernehmen. Wie genau, ist in der Dokumentation beschrieben.

Letzter Pferdefuß: CSS Autoprefixer

Kommen wir zum letzten kleinen Haken: Bootstrap 4 verwendet CSS Autoprefixer zum automatischen Abgleichen und Generieren von CSS-Vendor-Prefixes. Leider habe ich dafür bisher keine alternative PHP-Lösung gefunden. Meine Hoffnung ist, dass CSS-Vendor-Prefixes in absehbarer Zeit keine Rolle mehr spielen. Bis dahin kann man sich mit dem Tool Autoprefixer CSS online behelfen.

Wenn Du eine reine PHP-Lösung für CSS Autoprefixing kennst oder eine Anmerkung oder einen Korrekturvorschlag machen möchtest, würde ich mich über einen entsprechenden Hinweis in den Kommentaren sehr freuen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.