Bootstrap Template mit Visual Studio Code erstellen
Individualisieren von Bootstrap mit VS Code Bordmitteln
Voraussetzungen
Natürlich brauchst Du die Installation von Visual Studio Code, die setzten wir hier als gegeben voraus. Daneben brauchst Du noch zwei weitere Plug-ins:
- Das Plug-in Live Sass Compiler von Glenn Marks
https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass
ACHTUNG: Es gibt ein gleichnamiges Plug-in, das aber bereits veraltet ist. - Das Plug-in Live Server von Ritwick Dey
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Ordnerstruktur
Wir benötigen einen Ordner für die Projekteinstellungen:
.vscode
(auf den vorangestellten Punkt achten!)
Daneben erstellen wir einen Ordner für die Scss-Quelldateien
Scss
Die Ordner für den Output können frei benannt werden. Das ist sicherlich zum einen Geschmacksache, zum anderen aber vielleicht auch abhängig davon, in welcher Umgebung das fertige Template eingesetzt werden soll. Da wir in unserem Beispiel für eine TYPO3 Frontend-Extension arbeiten, erstellen wir die Ordner direkt in der gewünschten Struktur, sodass wir das Ergebnis am Ende nur noch kopieren brauchen.
meinProjekt/
├── .vscode/
├── Scss/
└── Public/
├── Css/
├── Fonts/
└── JavaScript/Wechsel nun in das Root-Verzeichnis des Projektes und starten Visual Studio Code mit
code .Einstellungen
Erstelle im Ordner .vscode eine Datei settings.json mit diesem Inhalt:
{
"liveSassCompile.settings.formats": [
{
"savePath": "/Public/Css/",
"format": "compressed"
}
]
}Der savePath geht vom Wurzelverzeichnis des Projektes aus und muss dem eigenen Ordnernamen entsprechend angepasst werden.
Download und Kopieren der Quelldateien
Lade die Source-Files direkt von Bootstrap in der aktuellsten Version herunter
https://getbootstrap.com/docs/
und entpacke die ZIP-Datei.
Um den Überblick zu bewahren, erstelle in Deinem (!) Scss-Ordner einen Unterordner Bootstrap. Dort hinein kopierst Du den Scss Ordner aus der Bootstrap Zip-Datei.
Wir lassen in unserem Fall die JavaScript-Dateien von Bootstrap unangetastet. Daher können wir aus dem Ordner dist/js die beiden Dateien
- bootstrap.bundle.min.js
- bootstrap.bundle.min.js.map
in unseren JavaScript-Ordner kopieren.
Die eigene Scss-Datei
Erstelle in Deinem Scss Ordner eine .scss Datei mit dem Namen Deiner Wahl. Die Css-Datei, die am Ende generiert wird, trägt den gleichen Namen, nur mit der Endung .css, z. B. styles.scss
In dieser Datei kannst Du zuerst die Variablen setzen, und im Anschluss wird die bootstrap.scss importiert:
$primary: #002851;
$secondary: #878fa2;
$blue: #002851;
$green: #53792c;
$red: #522516;
@import "Bootstrap/scss/bootstrap.scss";Die Angaben in den Bootstrap-Scss-Dateien sind mit !default versehen, sodass diese nur gesetzt werden, wenn sie nicht schon vorher definiert worden sind.
Unter dem Import-Befehl kannst Du entweder Deinen eigenen CSS-Code schreiben oder – noch besser und übersichtlicher – eine Datei mit dem eigenen CSS-Code einbinden.
Aktiviere zum Schluss noch in der Fußzeile Watch Sass, sodass Deine Css-Datei erstellt wird.
Bei jeder Änderung wird Deine Css-Datei neu generiert.
Du kannst auch die SCSS-Dateien selektieren, die importiert werden sollen. Dann wird nicht immer das gesamte Bootstrap Paket geladen. In den Anleitungen findest Du unter Sass ein Beispiel, wie das aussehen könnte. Du musst nur die Ordner entsprechend anpassen, das Beispiel geht von der Verwendung des Node-Packages aus.
Deine index.html
Erstelle nun in Deinem Public-Ordner Deine index.html:
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link rel="stylesheet" href="Css/styles.css">
</head>
<body>
<h1>Hallo Welt!</h1>
<script src="JavaScript/bootstrap.bundle.min.js"></script>
</body>
</html>Durch einen Klick auf Go Live in der Fußzeile wird ein Server gestartet und Deine Seite öffnet sich in Deinem Browser. Diese wird bei jeder Änderung der index.html, aber auch bei jeder Änderung Deiner style.scss automatisch neu geladen.
Eigene Schriftarten einbinden
das Einbinden eigener Schriften ist denkbar einfach. Wir nutzen hier den google webfont helper
Wähle links die gewünschte Schriftart aus. Im Hauptfenster wählst Du dann das charset aus, für eine deutsch- oder englischsprachige Seite sollte latin in Ordnung gehen.
Entscheide Dich nun für die Styles. Wähle nur die Schriftschnitte aus, die Du auch verwenden wirst. Viele Schriftschnitte verlangsamen den Aufbau Deiner Seite.
Unter Copy CSS kannst Du ruhig Modern Browsers auswählen. Hier wird nur Internet Explorer ausgeschlossen, der ja ohnehin schon lange zu Grabe getragen ist. Musst Du jedoch auf Kompatibilität mit dem Urgestein achten, bleibe besser bei Best Support.
Bevor Du den CSS-Code kopieren kannst, passe noch den Ordner unter dem Fenster an. Bei uns ist es ../Fonts/ (mit großem F).
Jetzt kannst Du den CSS-Code in die Zwischenablage kopieren und die Schriftart-Dateien herunterladen. Die Schriftart-Dateien werden im Ordner Public/Fonts gespeichert.
Es ist empfehlenswert, den CSS-Code für die Schriften in eine eigene Datei auszulagern. So bleibt Dein Code modular und wiederverwendbar. Erstelle dazu in Deinem Scss-Ordner eine Datei mit dem Namen _fonts.scss. Achte hier auf den führenden Unterstrich.
Dort kopierst Du den CSS Code hinein. Die Datei kannst Du speichern und schließen.
In Deiner style.scss bindest Du die eben erstellte Datei direkt am Anfang ein:
@import "fonts";Du kannst die Schriftarten für den Inhalt und die Überschriften getrennt festlegen:
$font-family-base: "Deine Schriftart";
$headings-font-family: "Deine Schriftart";Am besten natürlich mit einem folgenden Font-Stack, falls Deine Schriftart – aus welchem Grund auch immer – mal nicht geladen werden kann.
Viel Vergnügen beim Erstellen Deines eigenen Bootstrap-Templates.
Kommentare
Keine Kommentare
