Ein Überblick über die beliebtesten CSS-Frameworks

Von Ivaylo Ivanov 27-10-2021 Programmierung, UI / UX-Design 16 Minuten

Es gibt zwei Möglichkeiten, pflegeleichten CSS-Code zu schreiben: 1) man schreibt alles selbst, ohne Hilfe und Vorlagen, oder 2) man verwendet ein Framework und passt es an den eigenen Stil an.

CSS-Frameworks sind eine Sammlung vordefinierter Vorlagen, Codes und APIs, auf die Entwickler zugreifen können, um die Codierung in CSS zu vereinfachen. CSS-Frameworks zielen auf häufig verwendete Elemente und Stile wie Schaltflächen, Raster, Media-Queries, Navigation usw. ab, um kürzeren Code oder den Komfort vordefinierter Stile zu bieten.

Vorteile von CSS-Frameworks

Alle wichtigen CSS-Frameworks bieten ein responsives, webfreundliches Design für kleine Bildschirme (Mobilgeräte) und große Bildschirme (Desktops).

CSS-Framework-Codes sind browserübergreifend kompatibel und sparen dem Entwickler Zeit.

Responsive Design und Layout-Konsistenz über eine Reihe von Bildschirmgrößen hinweg sind die wichtigsten Gründe, warum CSS-Entwickler auf Frameworks zurückgreifen. Dieser Artikel befasst sich mit vier leistungsstarken Frameworks, ihren verschiedenen Funktionen, der Installation und dem Umgang mit Responsivität und Medien-Breakpoints. Wir wollen zeigen, was die Arbeit mit den einzelnen Frameworks mit sich bringt. Sie können ganz einfach ein Framework auswählen, das Sie erlernen möchten.

Hinweis: Alle hier aufgeführten Frameworks verwenden ein 12-Punkte-Rastersystem.

Bootstrap

148 000 Github-Aterne // 22 146 088 Webseiten

Bootstrap ist das beliebteste CSS-Framework. Es wurde von Twitter entwickelt und war das erste Framework, das mobilen Bildschirmen mit Hilfe eines eingebauten Breakpoints Priorität einräumte und den Entwicklern die Mühe ersparte, separat zu programmieren. Allein die Mobilfreundlichkeit von Bootstrap hat eine große Anziehungskraft auf Entwickler ausgeübt und zum Aufbau einer starken Community und Unterstützung geführt.
Bootstrap ist nicht nur ein Framework. Es wird mit vielen vorgefertigten Vorlagen mit gebrauchsfertigen Komponenten geliefert, die alle wesentlichen CSS-Funktionen abdecken.

Die Installation und Verwendung von Bootstrap kann auf drei verschiedene Arten erfolgen.

Heruntergeladene Bootstrap-Dateien

Bei dieser Option laden wir die Dateien auf den lokalen Computer herunter. Die CSS-Dateien stehen Entwicklern in verschiedenen Versionen zur Verfügung – v2.3.2, v3.4.1, v4.6.x und v5.0.x. Die heruntergeladenen Dateien enthalten auch minifizierte (minified) CSS.

Für Sass benötigen wir einen Sass-Compiler, um die Sass-Quelldateien in CSS-Dateien zu kompilieren.

Um ihn zu verwenden, verschieben wir die Dateien in das Verzeichnis unserer Webseite und fügen sie manuell in den Head-Bereich des HTML ein.

<!DOCTYPE html> 
  <head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="bootstrap.min.css">
  </head> 
<body>
  <!-- ... --> 
</body> 
</html>

Verwendung eines CDN über jsDelivr

Das CDN ist eine gehostete, im Cache gespeicherte Version des kompilierten CSS von Bootstrap. In diesem Fall müssen wir die Dateien nicht herunterladen. Stattdessen kopieren wir den Link und fügen ihn direkt in den <head>-Abschnitt des HTML-Dokuments ein.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

Paket-Manager

Wir können Bootstrap in unserer node.js-basierten Anwendung mit dem npm-Paket installieren

$ npm install bootstrap

Für Yarn

$ yarn add bootstrap

Und Composer

$ composer require twbs/bootstrap:5.0.1

Bootstrap bietet ein mobilfreundliches Flexbox-Grid mit sechs standardmäßigen responsiven Ebenen und Haltepunkten sowie vielen anderen vordefinierten Klassen zum Aufbau eines responsiven Systems.

Bootstrap's 6 Grid Breakpoint Optionen bieten mehr als andere Frameworks, so dass dem Entwickler Code für die kleinste bis zur größten Bildschirmgröße zur Verfügung stehen, um auch die kleinsten Schwankungen im Sichtfenster zu berücksichtigen. Die Breakpoints umfassen:

Extra klein (xs) <576px
Klein (sm) >=576px
Mittel (md) >=768px
Groß (lg) >=992px
Extra groß (xl) >= 1200px
Übergroß (xxl) >=1400px

Das Raster verwendet eine Klasse namens row und innere Klassen namens col.

<div class="container"> 
  <div class="row"> 
    <div class="col"> 
      1 of 3 
    </div> 
    <div class="col"> 
      2 of 3 
    </div> 
    <div class="col"> 
       3 of 3 
    </div>  
  </div>
</div>

Dieser Code unterteilt einen Bildschirm in drei gleiche Teile über die gesamte Breite des Bildschirms oder Containers. Um einen Breakpoint für verschiedene Bildschirme hinzuzufügen verwenden wir das Präfix – „xs“, „sm“, „md“, „lg“, „xl“, „xxl“ – des Breakpoints und die Anzahl der benötigten Punkte. Denken Sie daran, dass die maximale Punktzahl 12 beträgt.

<div class="container"> 
  <div class="row"> 
    <div class="col-sm-8 col-lg-6">col-sm-8</div> 
    <div class="col-sm-4 col-lg-6">col-sm-4</div> 
  </div> 
</div>

Wenn der Code auf einem kleinen Bildschirm läuft, nimmt eine Spalte 8 Punkte und die andere 4Punkte ein. Auf einem großen Bildschirm hingegen nehmen beide jeweils 6 Punkte ein, wobei jede Spalte die Hälfte der Bildschirmgröße ausmacht.
Das Bootstrap-Raster fördert auch die Verschachtelung durch Hinzufügen einer neuen .row-Klasse und eines neuen Sets von .col-Spalten innerhalb eines bestehenden Rasters.

Foundation CSS

28 900 Github-Stars // 637 438 Webseiten

Foundation CSS ist das am zweithäufigsten verwendete Framework, das Bootstrap im Nacken sitzt. Es verfügt über funktionsstarke, vollwertige Komponenten, Dienstprogramme und Entwicklungstools. Es ist weniger starr als Bootstrap, denn es bietet mehr Flexibilität bei der Anpassung und mehr Freiheit beim Design.

Foundation hat drei Hauptaspekte: 1) Foundation für Webseiten, 2) Foundation für E-Mails und 3) MotionUI.

Foundation für Webseiten ist das zentrale CSS-Framework für die Gestaltung von Webseiten. Foundation für E-Mail ist ein Framework für die Gestaltung responsiver E-Mail-Vorlagen, während MotionUI ein Tool ist, mit dem Entwickler CSS-Animationen verwenden können.
Es gibt mehrere Möglichkeiten, Foundation zu installieren und zu verwenden. Der Standard-CSS-Download besteht aus vier Teilen, die über Download-Links verfügbar sind.

Die vollständige Version – d.h. alles im Framework, einschließlich Vanilla JS
Wesentliche Komponenten – eine light-Version
Benutzerdefinierte Elemente – definieren Sie die Größe der Spalten, Farben und Schriftgrößen, die Sie benötigen, und laden Sie sie herunter
Sass-Compiler – d.h. Foundation mit SCSS erstellt

Sie können Foundation auch mit den auf npm, Bower, Meteor und Composer verfügbaren Paketmanagern installieren. Die verschiedenen Befehle finden Sie hier.

So installieren Sie mit Foundation CLI unter Verwendung der Node-gestützten CLI

$ npm install --global foundation-cli 
# or sudo npm install --global foundation-cli

Erstellen Sie dann ein neues Foundation-Projekt mit

$ foundation new

Wenn die Installation von Foundation abgeschlossen ist, gibt es einen Foundation-Ordner mit den Dateien app.css, foundation.css und foundation.min.css. Wir fügen diese Dateien in den Header des HTML-Dokuments ein.

<!doctype html> 
<html lang="en"> 
  <head> 
    <title>Foundation CSS</title> 
    <link rel="stylesheet" href="css/foundation.css" /> 
  </head> 
  <body> 
    <h1>Hello, world!</h1> 
  </body> 
</html>

Entwickler, die es vorziehen, das Paket nicht herunterzuladen, sondern über einen CDN-Link darauf zuzugreifen, fügen stattdessen den folgenden Code in den <head>-Abschnitt ihres HTML-Dokuments ein.

<!-- Compressed CSS --> 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css" integrity="sha256-ogmFxjqiTMnZhxCqVmcqTvjfe1Y/ec4WaRj/aQPvn+I=" crossorigin="anonymous">

Um ein Raster zu erstellen, verwenden wir eine row-Klasse, um einen horizontalen Block mit vertikalen Spalten zu erstellen. Dann fügen wir divs mit einer Spalte hinzu. Für die Haltepunkte wird ein Präfix .small, .medium und .large verwendet. Die Ziffern, die dem Präfix hinzugefügt werden, geben die Anzahl der Punkte an, die eine Spalte an jedem Breakpoint einnehmen soll.

<div class="row"> 
  <div class="small-2 large-4 columns">2pts</div> 
  <div class="small-4 large-4 columns">4pts</div> 
  <div class="small-6 large-4 columns">6pts</div> 
</div>

Auf großen Bildschirmen gibt es drei gleiche Spalten, die jeweils 4 Punkte einnehmen. Auf einem kleinen Bildschirm nimmt die erste Spalte 2 Punkte, die zweite 4 und die dritte 6 ein, also insgesamt 12.

Tailwind CSS

36 000 Github-Stars // 81 323 Webseiten

Tailwind ist ein minimalistisches, leichtgewichtiges CSS-Framework auf niedrigschwellig angelegt. Es bietet dem Entwickler nicht viele Komponenten, Klassen oder vordefinierte Themen. Stattdessen bietet es Hilfsklassen, wiederverwendbare benutzerdefinierte Komponenten und mehr Flexibilität bei der Erstellung komplexer Designs.

Eine der leistungsstarken Funktionen von Tailwind ist seine Integration mit PostCSS und Sass.
Der einfachste Weg, Tailwind zum Laufen zu bringen, ist der Zugriff über den CDN-Build des Frameworks mit diesem Code im <head>-Tag des HTML-Dokuments.

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

Die offizielle Webseite rät davon ab. Die Verwendung des CDN-Builds hat die folgenden Nebeneffekte.

Was Sie nicht können:

das Standard-Theme von Tailwind anpassen

beliebige Direktiven wie @apply, @varianten usw. verwenden

zusätzliche Varianten - wie Gruppenfokus - aktivieren

Plugins von Drittanbietern installieren

unbenutzte Stile tree-shaken

Die beste Empfehlung ist, es als PostCSS-Plugin zu installieren:

$ npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Um es ohne ein PostCSS-Plugin hinzuzufügen, verwenden Sie ein npx-Tool, um eine vollständig kompilierte Tailwind-CSS-Datei zu erzeugen.

$ npx tailwindcss-cli@latest build -o tailwind.css

Dieser Befehl erzeugt eine Datei, die auf der Standardkonfiguration von Tailwind basiert und 'tailwind.css' heißt.
Im Header unserer HTML-Datei können wir dann den Pfad zur Datei tailwind.css hinzufügen.

<!doctype html> 
<html> 
  <head> 
    <!-- ... --> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <link href="path/to/tailwind.css" rel="stylesheet"> 
  </head> 
  <body> 
    <!-- ... --> 
  </body> 
</html>

Tailwind CSS ermöglicht die Responsivität mit Utility-Klassen. Es benötigt vier Breakpoints:

sm: min-width 640px. Für kleine Bildschirme
md: min-width 768px. Für mittlere Bildschirme
lg: min-width 1024px. Für große Bildschirme
xl: min-width 1280px. Für größere Bildschirme
2xl: min-width 1536px. Für sehr große Bildschirme

Tailwind verwendet sowohl Flex- als auch Grid-Klassen, um Layouts zu gestalten. Ausführlichere Grid-Ressourcen zu Flexbox und Grid finden Sie hier in der Tailwind Grid-Dokumentation.

<!-- flexbox --> 
<div class="flex flex-row ..."> 
  <div>1</div> 
  <div>2</div> 
  <div>3</div> 
</div> 
<!-- CSS grid --> 
<div class="grid grid-cols-3 gap-4"> 
  <div>1</div> 
  <div>2</div> 
  <div>3</div> 
</div>

Beide Formate erzeugen drei gleiche Spalten. Um die Raster an verschiedenen Haltepunkten zu steuern, fügen wir das Breakpoint-Präfix hinzu – entweder „sm“, „md“, „lg“, „xl“ oder „2xl“.

<div class="grid grid-cols-1 md:grid-cols-6">

Die Haltepunkte funktionieren auch für andere Elemente. Wenn wir zum Beispiel wollen, dass ein Bild standardmäßig eine Breite von 16, auf mittleren Bildschirmen 32 und auf großen Bildschirmen 48 hat, schreiben wir:

<img class="w-16 md:w-32 lg:w-48" src="...">

Materialize CSS

Materialize ist ein beliebtes CSS-Framework, das von Google auf der Grundlage von Material Design entwickelt wurde. Es verfügt neben Animationen auch über eine interaktive UI-Komponentenbibliothek.
Eine der besonderen Eigenschaften von Materialize ist, dass eine Komponente erweiterbar ist. Sie können neue Regeln schreiben, anstatt die alten zu überschreiben.

Materialize CSS kann entweder heruntergeladen und lokal installiert oder über eine CDN-Version abgerufen werden. Der Download-Bereich bietet Optionen für Materialize CSS, die Standardversion mit unminified CSS- und JavaScript-Dateien und eine Sass-Option, die die SCSS-Quelldateien enthält. Mit SCSS hat man mehr Kontrolle über die einzubindenden Komponenten.

Wenn sich ein Entwickler für den Download der CSS-Version entscheidet, sieht das Verzeichnis wie folgt aus

MyWebsite/
  |--css/
  |  |--materialize.css
  |
  |--fonts/
  |  |--roboto/
  |
  |--js/
  |  |--materialize.js
  |
  |--index.html

Die Dateien werden dann in das Verzeichnis der Webseite extrahiert und in den Header des HTML-Dokuments eingefügt.

<!DOCTYPE html> 
<html> 
  <head> 
    <!--Import Google Icon Font--> 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
    <!--Import materialize.css--> 
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css"/> 
  </head> 
  <body> 
  <!-- ... -->
  </body> 
</html>

Sie können den CDN-Link – gehostet auf Cloudflare – im Header anstelle einer heruntergeladenen Version verwenden.

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

Eine andere Möglichkeit, es zu installieren, ist die Verwendung von npm

$ npm install materialize-css@next

Diese Version enthält alle Quelldateien, einschließlich kompilierter JavaScript- und CSS-Dateien.

Das Grid-System in Materialize verwendet eine row-Klasse als Container.

<div class="row">
  <div class="col s1">
    <div class="card-panel teal lighten-2">1</div>
  </div>
  <div class="col s1">
    <div class="card-panel teal lighten-2">2</div>
  </div>
  <!-- ... -->
  <div class="col s1">
    <div class="card-panel teal lighten-2">12</div>
  </div>
</div>

Der obige Code erstellt 12 gleiche Karten mit einem hellen, blaugrünen css-Framework. „s“ ist das Präfix für einen kleinen Bildschirm und „1“ bedeutet, dass es einen Punkt auf einem kleinen Bildschirm einnimmt. Die 12 Teilfelder gehen über den gesamten Bildschirm und nehmen jeweils einen Punkt ein.

„m“ ist das Präfix für einen mittleren Bildschirm, „l“ für einen großen Bildschirm und „xl“ für einen sehr großen Bildschirm.

<div class="row"> 
  <div class="col s12 m4 l2">
    <p>s12 m4</p>
  </div> 
</div>

Auf einem kleinen Bildschirm nimmt die Spalte die gesamte Breite des Bildschirms ein. Auf einem mittelgroßen Bildschirm wird sie dreispaltig und auf einem großen Bildschirm sind es nur zwei Spalten, die jeweils die Hälfte des Bildschirms einnehmen.
Inline-Styling setzt das Framework-Styling außer Kraft, aber Head- und externes Styling führen zu Fehlern, die kaum zu bemerken sind.

Der Nachteil von CSS-Frameworks

Neue Entwickler haben immer noch Schwierigkeiten mit dem Konzept der CSS-Frameworks und finden es vielleicht sogar entmutigend. Frameworks bieten im Allgemeinen eine Vielzahl von Funktionen, Plugins und APIs. Man muss sich viel merken und viel wiederverwenden, das ist der Grund, warum sie damit zu kämpfen haben.
Die Verwendung von CSS-Frameworks bedeutet, dass ein Entwickler das Framework kennen muss. Wie man sieht, sind die Klassen und das Styling in den verschiedenen Frameworks unterschiedlich, obwohl sie die gleiche Funktion erfüllen.

Einige Frameworks verwenden jQuery, eine JavaScript-Bibliothek, die die Interaktivität fördert. Für Entwickler, die nur CSS verwenden, ist es jedoch schwierig, damit umzugehen.
Einige Frameworks bieten wenig Flexibilität, was die Umgestaltung erschwert.
Die meisten CSS-Frameworks decken keine fortgeschrittenen CSS-Konzepte ab.

Obwohl Frameworks leicht zu erlernen und zu implementieren sind, erfordern einige Frameworks weitergehende CSS-Kenntnisse. Ein Framework wie Tailwind verwendet Sass und PostCSS-Plugins. Entwickler mit geringen Kenntnissen von Sass müssen es lernen, bevor sie in den vollen Genuss der Vorteile kommen.

CSS Frameworks