Das Stylen von Webseiten kann sehr aufwendig sein. Ein CSS-Framework versucht das Styling zu vereinfachen. Typischerweise bietet ein CSS-Framework eine Menge von vorgefertigten Klassendeklarationen an. Wir müssen "nur" noch das CSS-Framework mit der HTML-Datei verknüpfen und die vorgegebenen CSS-Klassennamen einsetzen. Meist gibt es eine Website, welche die Styles vorstellt und die entsprechenden Klassennamen auflistet. Falls wir auf ein CSS-Framework setzen, dann sparen wir vorwiegend Zeit beim Stylen. Unsere Website verliert jedoch unter Umständen an Individualität. Das CSS-Framework gibt gewissermassen das Design vor und wir passen nur noch kleine Aspekte an. Deshalb erhalten Website, die das gleiche CSS-Framework verwenden, meist einen sehr ähnlichen Style.
Ein Beispiel für ein CSS-Framework ist Bulma (https://www.bulma.io). Es besteht aus zahlreichen CSS-Klassen und kann kostenfrei verwendet werden. Es unterstützt das Responsive Design, das heisst, es gibt CSS-Klassen, sodass eine Webseite auf verschiedenen Geräten (zum Beispiel Notebook, Tablet oder Smartphone) ansprechend dargestellt wird.
Auch bei einem CSS-Framework müssen wir die CSS-Datei mit der HTML-Datei verknüpfen. Wir müssen jedoch keine separate CSS-Datei herunterladen, sondern einen Link zur Datei einfügen. Der Download erfolgt dann beim Aufrufen der Webseite automatisch.
Folgende drei Schritte sind für jede HTML-Datei zu erledigen:
<!DOCTYPE html> notiert ist.head der HTML-Datei
einfügen.<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
head der HTML-Datei einfügen.
<meta name="viewport" content="width=device-width, initial-scale=1">
Die Originalanleitung ist hier zu finden.
Sie finden die Dokumentation der CSS-Klassen auf der Website von Bulma. Die Hauptseite der Dokumentation finden Sie hier. Sie finden hier auch ausgewählte HTML-Elemente mit einem Link zur passenden CSS-Klasse.