Angepasstes Bootstrap-CSS selbst erstellen

1. NodeJS und npm installieren.

Wie das geht, hängt vom Betriebssystem ab.

Auf jeden Fall sollte man ein möglichst aktuelles NodeJS verwenden. Ich habe das folgende Verfahren mit v7.8.0 durchgeführt.

2. grunt-cli installieren.

~$ npm install -g grunt-cli

3. Aktuellen (stabilen) Source von bootstrap holen.

~$ git clone https://github.com/twbs/bootstrap.git
~$ cd bootstrap
bootstrap$ git checkout v3.3.7

4. Abhängigkeiten installieren.

bootstrap$ npm install

5. Bootstrap übersetzen.

bootstrap$ grunt dist

6. Verzeichnis für eigene Anpassungen erstellen.

bootstrap$ mkdir ../boostrap-custom
bootstrap$ cd ../bootstrap-custom

7. Dateien für eigene CSS-Anpassungen erstellen:

bootstrap-custom$ touch custom-variables.less custom-other.less
bootstrap-custom$ echo '
@import "../bootstrap/less/bootstrap.less";
@import "custom-variables.less";
@import "custom-other.less";
@import "../bootstrap/less/utilities.less";
' > custom-bootstrap.css

8. LESS CSS-compiler installieren:

bootstrap-custom$ npm install -g less

und schließlich:

9. Angepasstes bootstrap-CSS erstellen:

bootstrap-custom$ lessc -x custom-bootstrap.css > custom-bootstrap.min.css

Damit steht ein angepasstes Bootstrap-CSS als custom-bootstrap.min.css zur Verfügung. Diese kann anstelle von bootstrap.min.css verwendet werden.

Quellen: