Anpassen von Bootstrap mit Less

verwendet man Bootstrap kommt recht schnell der Wunsch auf hier Anpassungen an Farben oder Abständen zu machen. Eine Möglichkeit ist es die entsprechenden CSS Klassen in einer eigenen CSS Datei “zu überschreiben. Möchte man zum Beispiel die Farbe des Texten in der Navigation ändern so muss man hierzu allerdings eine Vielzahl von CSS Klassen überschreiben.

Ändert man dies in den Quelldateien direkt so geschieht das nur einmal und wird automatisch durch Less an alle notwendigen Stellen übernommen. Außerdem kann man auf diese Weise auch eigene CSS Anweisungen direkt mit übernehmen und damit die Anzahl der zu ladenden CSS Dateien reduzieren. Die Beschreibung ging analog diesem Dokument.

Folgenden generellen Aufbau habe ich mir eingerichtet. In einem Verzeichnis werden die Bootstrap Quelldaten abgelegt sowie für die unterschiedlichen Projekte eigene Verzeichnisse.

mkdir boostrap-dev
cd boostrap-dev
wget https://github.com/twitter/bootstrap/zipball/master
unzip master
ln -s twbs-bootstrap-a035ee5 bootstrap

Jetzt legen wir ein Verzeichnis an für unser Projekt das wir anpassen wollen und kopieren die Datei mit den Variablen die wir anpassen können dorthin

mkdir custom1
cp bootstrap/less/variables.less custom1/custom-variables.less
vi custom1/custom-bootstrap.less
   @import "../bootstrap/less/bootstrap.less";
   @import "custom-variables.less";
   @import "../bootstrap/less/utilities.less";

Und jetzt machen wir Änderungen in den Variablen. Zum Beispiel die Änderung der Hintergrundfarbe und Höhe in der Navigationleiste

vi variables.less 
  @navbar-height:                    40px;
  @navbar-default-bg:                #eeab00;

und mit dem Befehl

lessc custom-bootstrap.less > /var/www/dev-server/html/templates/xtc5/bootstrap/css/bootstrap.css

wird dann eine komplett neue CSS Datei erzeugt. Wenn man mag auch minified.

Eigentlich wäre ich jetzt fertig. Nur möchte ich nun Änderungen in meinen Anpassungen in die Subversion Versionskontrolle übernehmen. Irgendwie scheint Less aber bei @import Schwierigkeiten mit Pfadnahmen zu haben. Um es kurz zu machen. Ich habe meine Less Dateien mit den Änderungen zum Template gepackt und die custom-bootstrap.less im Quellverzeichniss für Bootstrap gelassen.

So sieht das ganze jetzt aus

/home/hhauer/bootstrap-dev/
- aktuelle-bootstrap version
- boostrap -> link-auf-aktuelle-bootstrap-version
- custom1 mit den Import-Anweisungen custom-bootstrap.less

    @import "../../../../var/www/dev-server/html-1bis3-v25x/templates/xtc5/bootstrap/custom-settings.less";
    @import "../bootstrap/less/bootstrap.less";
    @import "../../../../var/www/dev-server/html-1bis3-v25x/templates/xtc5/bootstrap/custom-variables.less";
    @import "../bootstrap/less/utilities.less";


/var/www/devserver/htmt/templates/xtc5/bootstrap/
- custom-settings.less (eigene Erweiterungen die ich mit in die css aufnehmen möchte
- custom-variables.less (mit Anpassungen der Variablen aus bootstrap)

Aufgerufen wir das ganze so

cd /home/hbauer/bootstrap-dev/custom1
lessc custom-bootstrap.less > /var/www/dev-server/html/templates/xtc5/bootstrap/css/bootstrap.css