Bryan Albrecht

Bootstrap mit Less

In einem Projekt, in welchem ich momentan mitarbeite, verwenden wir Bootstrap. Da Bootstrap einen eigenen Style mit sich bringt, musste ich diesen verändern. Meine Hauptaufgabe bestand darin, die vorgegebenen Farben so abzuändern, dass sie dem Corporate Design meiner Firma entsprechen.

Vorbereitung

Um die Arbeit beim Umsetzen des Corporate Design zu erleichtern, sollte man die Seite vorerst ohne Designänderungen aufbauen. Das heisst, dass die Farben der entstehenden Website anfangs noch die Standard-Farben von Bootstrap sind. Dies empfehle ich, da das Stylen für eine komplette Website viel schneller geht, als das fortlaufende Stylen.

Wenn die gesamte Seite aufgebaut ist, kann man beginnen sich Gedanken ums Corporate Design zu machen.

Less

Download

Der einfachste Weg Bootstrap seinem eigenen Corporate Design anzupassen ist, dass man die Less Dateien von Bootstrap verwendet. Diese findet man hier: Bootstrap

Die Dateien, welche man sucht, sind hinter dem Link für Source code versteckt.

Anwenden

Wenn man alle .less Dateien von Bootstrap heruntergeladen hat, muss man diese zu seinem Projekt hinzufügen. Wenn dies geschehen ist, können sie verwendet werden.

Da aus einer Less Datei bekanntlich ein CSS generiert wird, muss man dieses CSS einbinden. Obwohl noch kein bootstrap.css besteht, muss man genau dieses File in die Website einbinden.

Dies wird im header gemacht und sieht wie folgt aus:

  1. <head>
  2.     <link rel=\"stylesheet\" href=\"bootstrap.css\" type=\"text/css\">
  3. </head>

Files

Das gesamte Bootstrap Less ist in verschiedene Files aufgeteilt. Dies ist sehr nützlich, da es den Code viel übersichtlicher macht.

Um zum Beispiel Änderungen an den Farben vorzunehmen, reicht es in den meisten Fällen nur eine Datei zu verändern. Diese Datei heisst " variables ". In ihr sind grundlegenden Variablen wie zum Beispiel die Farben und die Schriftgrössen gespeichert. Ganz zu Oberst findet man die Variablen für die Farben. Diese können geändert oder erweitert werden.

Weiter unten in der variables.less Datei findet man die Zuweisungen der Variablen, welche danach auch in anderen Files gebraucht werden.

Ein Beispiel dafür sind die Standard-Buttons:

  1. @btn-default-color:          #fff;
  2. @btn-default-bg:             @brand-info;
  3. @btn-default-border:       darken(@btn-info-bg, 5%);

Kompilieren

Um alle Dateien von Bootstrap in eine CSS Datei umzuwandeln, muss nur eine Datei kompiliert werden. Diese Datei ist bootstrap.less. In dieser Datei werden alle anderen Less Dateien von Bootstrap zusammengefügt.

Wie bereits in einem anderen Tutorial erwähnt, verwende ich zum Kompilieren der Dateien Web Essentials 2015 für VS2013. Diese Erweiterung übernimmt das Kompilieren und mach dies bei jedem Speichern.

Nach dem Kompilieren hat man eine bootstrap.css Datei. Dies ist die Datei, welche ganz am Anfang des Tutorials eingebunden wurde.

Schlusswort

In diesem Tutorial wurde erklärt, wie man mit der Less Version von Bootstrap seine eigene Website nach seinem Geschmack gestalten kann.

Ebenfalls wurde gezeigt, wo man die wichtigsten Variablen wie zum Beispiel die der Farben findet. Im diesem Zusammenhang wurde auch gezeigt, welche Datei man kompilieren muss, damit man die CSS Datei erhält.

Less Tutorials

Hier findest du weitere Tutorials, welche mit Less zu tun haben: