16 beste CSS-Frameworks/Bibliotheken für Front-End-Entwickler

Ich habe einmal einen Front-End-Entwickler witzeln hören: “Die NASA hat Roboter auf dem Mars gelandet, und wir kämpfen immer noch damit, unsere Divs mittig auszurichten!” Und ich habe das ungute Gefühl, dass an diesem Witz viel Wahres dran ist.

Etwas, das sich so einfach und vernünftig anhört wie die Zentrierung eines Feldes in einem Feld, ist in CSS unglaublich schwierig zu bewerkstelligen. Es sei denn, Sie haben es schon einmal erlebt. Und den Codeschnipsel irgendwo gespeichert haben. Und selbst wenn Sie es geschafft haben, besteht immer die Gefahr, dass es in irgendeinem dummen Browser nicht funktioniert!

CSS steht zusammen mit JavaScript auf dem ersten Platz der “notwendigen Web-Bösen”. Es handelt sich um einen Standard, der sich willkürlich entwickelt hat, von den verschiedenen Browserherstellern unterschiedlich interpretiert wurde und heute so voller Widersprüche steckt, dass niemand es wagt, sich als “CSS-Experte” zu bezeichnen.

Kein Wunder also, dass im Laufe der Zeit CSS-Frameworks entstanden sind, die den größten Teil des Problems beseitigt haben. Heute können wir uns die Programmierung ohne unser bevorzugtes CSS-Framework nicht mehr vorstellen, da die Anpassung an verschiedene Bildschirmgrößen zu einer Notwendigkeit geworden ist.

Aber woher wissen Sie, dass Ihr Framework das beste für die anstehende Aufgabe ist? Und wenn Sie neu in der Frontend-Entwicklung sind, welches Framework sollte Ihnen bei der Auswahl helfen?

Dieser Beitrag wirft einen umfassenden Blick auf die Front-End-Entwicklungslandschaft und vergleicht die Spitzenreiter unter den CSS-Frameworks. Wenn Sie es also satt haben, CSS-Regeln von Hand zu kodieren, dann sollten Sie schnell zugreifen, um Abhilfe zu schaffen!

Bootstrap

Bootstrap ist eine Initiative von Twitter und hat das responsive Design in großem Stil eingeführt. Es war das erste Framework, das die Philosophie des “Mobile-First” vertrat Das Design für kleinere Bildschirme war nicht länger ein separates Projekt. Sie brauchten nur die entsprechenden Bootstrap-Klassen einzubinden, und das Design passte sich automatisch an die verschiedenen Bildschirmgrößen an (na ja, fast).

Reaktionsfähiges Design in Bootstrap (4.0 vs. 3.0)

Bootstrap hat das responsive Design durch die Einführung eines Rasters erreicht. Ein Raster ist eine unsichtbare Unterteilung des Bildschirms in Spalten (zusammen mit der Breite). Wenn Sie zum Beispiel drei “Boxen” haben, die Sie auf großen Bildschirmen nebeneinander, auf kleineren Bildschirmen aber vertikal positionieren möchten, würden Sie folgendermaßen vorgehen:

 

  

    

       Eine von drei Spalten
    
   
    

      Eine von drei Spalten
    

    

      Eine von drei Spalten
    
  

Die aktuell populäre Version von Bootstrap ist 4, die eine umfassende Überarbeitung der 3.3-Serie darstellt. Die obige Syntax ist die Art und Weise, wie Sie in Bootstrap 4 codieren, das seine Eleganz zu einem großen Teil der rohen Kraft von Flexbox und anderen modernen Layout-Funktionen verdankt, die von Browsern direkt unterstützt werden. In den niedrigeren Versionen von Bootstrap wurde das Raster als insgesamt 12 Spalten definiert, was zu Code wie dem folgenden führte

dazu führte, dass ein div auf großen Geräten ein Drittel der Bildschirmbreite und auf mittelgroßen Geräten die Hälfte der Breite beanspruchte. Die Syntax ist jetzt viel angenehmer, setzt aber Kenntnisse über Flexbox voraus.

Bootstrap-Profis

An Bootstrap gibt es viel zu mögen, insbesondere für Full-Stack-Entwickler:

• Schnelles Prototyping: Mit Bootstrap müssen Sie sich fast keine Gedanken über knifflige CSS-Positionierung und Browser-Inkompatibilitäten machen. Alles, was Sie tun müssen, ist, den HTML-Code zu schreiben und dann die entsprechenden CSS-Klassen anzuwenden, um die Reaktionsfähigkeit zum Leben zu erwecken.
• Großes Ökosystem: Heute verfügt Bootstrap über das größte Ökosystem unter den Frontend-Frameworks. Die Anzahl der Website-Layouts, Themes, Admin-Panels, UI-Komponenten usw., die mit Bootstrap erstellt wurden, ist überwältigend und wird immer besser. Für Berater und Produktunternehmen bedeutet dies, dass es immer genügend vorgefertigte Elemente und Unterstützung durch die Community gibt.
• Unterstützt von Twitter: Ein neuer Trend im Bereich Open Source ist die Zunahme von Projekten, die von einem kommerziellen Unternehmen gesponsert werden. In den meisten Fällen bauen diese Unternehmen profitable Geschäfte um ihr Angebot herum auf. Kotlin (JetBrains), WordPress (Automattic, Inc.), Angular (Google), React (Facebook), usw. sind einige Beispiele dafür. Wenn ein Projekt von einem etablierten Unternehmen unterstützt wird und keine Ein-Mann-Show ist, gibt das der Community (insbesondere den Unternehmenskunden) das Vertrauen, dass das Projekt eine klare Roadmap und eine langfristige Zukunft hat.
• Eine große Sammlung von Komponenten: Bootstrap bietet von Haus aus fast alle UI-Komponenten, die Sie jemals benötigen werden. Navigation, Formulare, Karten, Modals, Schaltflächen, Badges, Fortschrittsbalken, Warnmeldungen … Was auch immer Sie wollen, Bootstrap hat es. Für viele Unternehmen entfällt damit praktisch die Notwendigkeit, ein eigenes Front-End-Team zu haben.
• LESS- und SASS-Unterstützung: Unter den sehr beliebten CSS-Frameworks ist Bootstrap das einzige, das sowohl LESS als auch SASS unterstützt. Ja, ich weiß, Sie verwenden LESS nicht (wie es jeder anständige Entwickler tun sollte, nicht wahr?), aber es gibt viele Projekte, die sich auf LESS verlassen. Natürlich können Sie sich auch für keines von beiden entscheiden und Ihre einfachen CSS-Dateien schreiben.

Bootstrap Nachteile

Nichts ist ohne Preis, nicht wahr? Nun, Bootstrap ist da keine Ausnahme. Im Laufe der Zeit ist Bootstrap unter heftigen Beschuss von Designern und UI-Experten geraten. Hier die Gründe dafür:

• UX-Monotonie: Allein die Tatsache, dass Bootstrap über eine so große Sammlung integrierter Funktionen verfügt, führt zu Websites, die allzu vertraut und, ehrlich gesagt, langweilig aussehen. Sie brauchen sich nur die offiziellen Beispiele anzuschauen, um zu sehen, wie hässlich die Standardeinstellungen sind. Suchen Sie einfach nach “alle Bootstrap-Websites sehen gleich aus”, und Sie wissen, was ich meine 🙂
• Styling-Probleme: Bootstrap ist das, was man ein meinungsstarkes Framework nennen könnte. Mit anderen Worten, es hat bestimmte Vorstellungen von Layouts und lässt Sie besonders hart arbeiten, wenn Sie wollen, dass es anders aussieht/ist. Betrachten Sie die Standard-CSS-Breakpoints für Bildschirmbreiten: Ein mittelgroßer Bildschirm ist für Bootstrap ein Bildschirm, der bei einer Gerätebreite von 768 Pixel beginnt. Und was, wenn Sie, sagen wir, die Grenze von 600px anpeilen wollen? Nun, viel Glück dabei! Das Gleiche gilt für fast jede andere Komponente in Bootstrap: Zeilen und Container haben ihre Standardpolsterung, Schaltflächen haben Farben und Rahmen, die sich nur schwer und mit viel Aufwand überschreiben lassen, und so weiter.

Möchten Sie CSS beherrschen? Schauen Sie sich diesen Udemy Online-Kurs an.

Foundation

Wenn Technologien Religionen wären, würden sich Foundation und Bootstrap gegenseitig das Blut aus den Adern saugen. Keine Diskussion über moderne CSS-Frameworks ist vollständig, ohne Foundation zu erwähnen, also los geht’s.

Wenn Sie die Foundation-Website besuchen, fällt Ihnen sofort die Überschrift auf: “Das fortschrittlichste responsive Frontend-Framework der Welt” Auf den ersten Blick sieht das wie eine große Behauptung für eine Marketingkampagne aus.

Die Anhänger des Foundation-Frameworks wissen jedoch, dass daran zumindest etwas Wahres dran ist. Foundation wurde entwickelt, um natürlich mit dem Rails-Framework zusammenzuarbeiten, und einige der “zenartigen” Leitprinzipien von Rails sind bei der Arbeit zu erkennen.

Wenn Sie zum Beispiel eine Zeile mit zwei Elementen auf kleinen Bildschirmen, drei auf mittleren und vier auf großen Bildschirmen haben möchten, sieht der entsprechende Code in Foundation so aus:

Im Vergleich zu früheren Bootstrap-Versionen finde ich dies sehr intuitiv und leicht zu merken. Keine zwölfspaltigen Raster mehr und kein Rätselraten, was 4/12 sein soll!

Obwohl Foundation viel weniger populär ist als Bootstrap, ist es für viele erfahrene Frontend-Entwickler ein Betriebsgeheimnis.

Vorteile des Foundation Frameworks

Foundation hat von allen CSS-Frameworks, die wir in diesem Artikel betrachten werden, einige ungewöhnliche Eigenschaften:

• Vollständiges Tooling: Es ist technisch gesehen falsch zu sagen, dass Foundation ein CSS-Framework ist. Ich meine, es ist eines, aber es wurde als eine große und modulare Sammlung von Tools entwickelt, die darauf abzielt, fast alle Arten von Frontend-Problemen zu lösen. Es gibt separate Framework-Angebote für Websites und E-Mails, die stark für die jeweiligen Bereiche optimiert sind. Foundation verfügt außerdem über eine Befehlszeilenschnittstelle (CLI), was für Entwickler, die an die Arbeit mit Webpack oder anderen Modulbündlern gewöhnt sind, wie Musik in den Ohren klingen wird.
• Extreme Flexibilität: Im Gegensatz zu Bootstrap wurde Foundation entwickelt, um Front-End-Entwicklern die volle Kontrolle über ihre Benutzeroberflächen zu geben. Aus diesem Grund wird Foundation auf Neulinge fade und enorm komplex wirken. Der Grund dafür ist jedoch, dass Foundation Ihnen keine Stilsprache aufzwingt, sondern genau das sein will, was es ist: ein hervorragendes CSS-Framework.
• Mehr als nur UI-Komponenten: Foundation verfügt zwar über die übliche Sammlung von UI-Elementen, aber es geht weit über das übliche Maß hinaus. Die Entwickler haben ein fortschrittliches responsives Bildsystem, eine Preistabellenkomponente (ja, die Komponente, mit der verschiedene Preispläne angezeigt werden), Formularvalidierung, Rechts-nach-Links-Unterstützung, responsive Einbettungen und vieles mehr integriert. Ich möchte nochmals betonen, dass dies für die meisten einfachen Websites ein Overkill ist, aber für große Websites ist es ein Segen, den erfahrene Entwickler erkennen werden.
• Schulung und Beratung: Auch wenn Bootstrap von Twitter entwickelt wurde, ist es ein Nebenprojekt und ein sehr kleiner Teil des Gesamtbildes. Das Unternehmen, das hinter Foundation steht (ZURB), setzt sich jedoch für die Nutzung, Entwicklung und Förderung von Bootstrap ein. Für Großkunden werden Schulungen und professionelle Beratung angeboten. Das ist großartig für Unternehmen, die umfangreiche Projekte anstreben und bereit sind, dafür zu zahlen.

Nachteile des Foundation Frameworks

Die Stärken eines Frameworks werden zu seinen Schwächen, wenn man es von der anderen Seite her betrachtet. Im Folgenden erfahren Sie, warum das Foundation Framework möglicherweise nicht die beste Wahl für Ihr Projekt ist:

• Kleine(re) Gemeinschaft: Die Foundation-Community ist viel kleiner als die von Bootstrap, und wenn Sie etwas Exotisches ausprobieren und nicht weiterkommen, sind die Chancen, relevante Hilfe zu finden, geringer. Ich würde jedoch hinzufügen, dass es für alle praktischen Zwecke eine ausreichend große Community gibt. Sie ist nur um mehrere Größenordnungen kleiner als die von Bootstrap, so dass Sie vielleicht nicht sofort Lösungen finden.
• Komplexität: Wenn Sie an Bootstrap oder etwas Einfaches oder noch schlimmer an Vanilla CSS gewöhnt sind, wird Ihnen Foundation wie eine unendliche Explosion der Komplexität vorkommen. Ebenen in Ebenen, Komponenten mit Komponenten, endlose Anpassungsmöglichkeiten . . . Schon bald werden Sie anfangen, die Sinnhaftigkeit des Lebens selbst in Frage zu stellen! Aber andererseits hat Foundation ein ganz anderes Ziel und das kann man ihm nicht vorwerfen.
• Zu viele Optionen: Manchmal wollen Sie einfach nur etwas erledigen und sich später um die Perfektion kümmern. In solchen Zeiten ist es frustrierend, wenn man zu viele Optionen mit geringfügigen Abweichungen hat. Stellen Sie sich zum Beispiel vor, Sie müssten ein Subway-Sandwich bestellen, wenn Sie so hungrig sind, dass Sie Schlamm essen könnten. Natürlich ist Foundation nicht für solche Zeiten gedacht.
• Verfügbarkeit von Talenten: Da Foundation (viel) weniger populär ist als Bootstrap, sind die verfügbaren Talente viel geringer. In der Regel ist es sehr wahrscheinlich, dass jeder neue Mitarbeiter Bootstrap kennt, aber keine Ahnung von Foundation hat. Lernen braucht Zeit, und das ist ein Luxus, den sich nicht alle Teams leisten können.

Bulma

Bulma ist ein relativ neuer Teilnehmer auf dem Schlachtfeld der CSS-Frameworks und hat sich in kürzester Zeit einen Namen gemacht. Seine Attraktivität liegt in einem strikten, reinen CSS-Ansatz (es gibt keine JavaScript-Komponenten) und eleganten Voreinstellungen, etwas, womit viele Entwickler mit einem guten Auge für Design ein Problem haben, wenn sie mit Bootstrap arbeiten.

Ein großer Teil der Dynamik von Bulma ist auf die hohe Akzeptanz in der Laravel-Community zurückzuführen (ein PHP-Webframework, falls Sie das noch nicht wussten), was sicherlich dazu beigetragen hat, dass Vue.js unter den JavaScript-Frameworks so beliebt geworden ist.

Warum sollten Sie sich für das Bulma CSS Framework entscheiden?

Es gibt viele Gründe, Bulma zu mögen und es für Ihr nächstes Projekt zu verwenden:

• Ziemlich populär: Okay, es ist nicht beliebter als Bootstrap, aber es ist beliebter als Foundation. Zum Zeitpunkt der Erstellung dieses Artikels hat Bulma 30k Sterne auf Github, etwa 3k mehr als Foundation. Natürlich ist eine Anzahl von Github-Sternen kein Maßstab für den Verdienst, aber sie sagt aus, dass die Community Bulma gutheißt.
• Äußerst lesbare Klassen: Bulma hat für mich die am besten lesbaren CSS-Klassen aller Frameworks, die ich ausprobiert habe. Außerdem gibt es ein lächerlich leistungsfähiges und einfaches System zur Erstellung von Rastern im Metro-Stil, genannt Kacheln (sehen Sie sich den Code in der zweiten Hälfte des Screenshots an und sagen Sie mir, dass Sie nicht beeindruckt sind!)

• Flache Lernkurve: Bulma ist hochgradig modular und wurde entwickelt, um die praktischen, alltäglichen Probleme zu lösen, mit denen kleinere Teams und einzelne Entwickler konfrontiert werden. Sie werden feststellen, dass Bulma sehr leicht zu erlernen ist, obwohl ich denke, dass ein anständiger Hintergrund in CSS immer gut ist, um eine Vorstellung davon zu haben, was unter der Haube vor sich gehen könnte. Das wird Ihnen helfen, wenn Sie das Standardverhalten außer Kraft setzen wollen.
• Elegant: Werfen Sie einen Blick auf den Standard-Hero-Abschnitt für Bulma unten. Genug gesagt!

Bulma hat eine kleine, aber äußerst engagierte Community. Wenn Sie also auf den ganzen Schnickschnack verzichten und dennoch elegant aussehende Benutzeroberflächen in Rekordzeit erstellen möchten, ist Bulma genau das Richtige für Sie. Für Bootstrap-Entwickler hat Bulma einen eigenen Bereich, um sie zu überzeugen und ihnen beim Umstieg zu helfen.

UIkit

Wenn man an UIkit denkt, kommt einem sofort der Minimalismus in den Sinn. Minimalismus nicht bei den Funktionen (tatsächlich bietet es vielleicht die meisten Funktionen von allen Frameworks), sondern beim Design. Wenn Sie Wert auf ein sauberes, elegantes Design legen, das keine Leerzeichen enthält, ist UIkit genau das Richtige für Sie.

Werfen Sie zum Beispiel einen Blick auf die Fortschrittsbalken-Komponente:

Oder die Bildmarkierungskomponente (eine JS-gesteuerte interaktive Markierung für Bilder):

Wenn das nicht lauthals nach Eleganz schreit, dann weiß ich auch nicht, was es tut. Gehen Sie einfach auf die UIkit-Website und sehen Sie sich all die unglaublichen Komponenten an, die dort angeboten werden. Sofern Ihnen Ihr Projektmanager oder Kunde nicht eine bestimmte Stilsprache aufzwingt, denke ich, dass Uikit die Krone des UI-Designs einnimmt und dem Material Design von Google um Längen voraus ist.

Aber gibt es einen Haken, werden Sie sich fragen. Ja, den gibt es. Wie Bootstrap arbeitet UIkit mit seinem JavaScript und während Sie jQuery für die DOM-Manipulation verwenden können, ist die Verwendung eines virtuellen DOM-Frameworks wie React unmöglich.

Außerdem ist Uikit ein in sich geschlossenes System, das Sie nur mit großem Aufwand verändern oder erweitern können.

Semantische Benutzeroberfläche

Ein weiterer Konkurrent im Rennen ist Semantic UI, das versucht, sich mit vielen Themes und Anpassungen zu profilieren. Es gibt mehr als 3000 Theming-Variablen, was zu einer enormen Bandbreite führt. So steht es jedenfalls in der Dokumentation.

Bootstrap 4 deckt all dies ab und ist ebenfalls vollständig anpassbar, aber ein Vorteil von Semantic UI ist, dass es standardmäßig zu hübschen Layouts führt. Dennoch ist es nicht das am besten aussehende Layout, weshalb ich es in meiner Liste weiter unten angesiedelt habe.

Es hat auch eine der steilsten Lernkurven und die Programmierkonventionen sind viel strenger. Probieren Sie es aus und sehen Sie, ob es Ihnen zusagt.

Susy

Susy ist ein noch wenig bekanntes Framework, aber es ist eine faszinierende und erfrischende Idee. Susy ist ein weiteres reines Layout-Framework, das alle vordefinierten Ideen von Float, Grid, Flexbox, Tabellen oder anderen Elementen über Bord wirft und Ihnen die Möglichkeit gibt, die Art von Layout zusammenzustellen, die Sie wünschen. “Zusammenstellen” ist hier das Schlüsselwort, denn Susy ist dafür gedacht, hochgradig modulare, atemberaubende Layouts mit ultrakomplexen, ungewöhnlichen und präzisen Anforderungen zu erstellen.

In den Händen eines erfahrenen Entwicklers ist Susy wie ein Flammenwerfer, der alles andere wegpustet. Geringere Sterbliche werden sich natürlich die Hände verbrennen.

Um eine Vorstellung von der Leistungsfähigkeit von Susy zu bekommen, probieren Sie diese Standardeinstellung (SASS):

 // 4 symmetrische, fließende Säulen
// Rinnen sind 1/4 so groß wie eine Spalte
// Elemente überspannen 1 Rinne weniger als Spalten
// Container überspannen ebenfalls 1 Rinne weniger
$susy: (
  'columns': susy-repeat(4),
  'gutters': 0.25,
  'spread': 'narrow',
  'container-spread': 'narrow',
);

Ich denke, dass der Code ziemlich selbsterklärend ist, auch wenn er nichts für Eilige ist 🙂 Susy ist genau das Richtige für Sie, wenn Sie den ganzen Ballast moderner Frameworks satt haben und Layout-Anforderungen haben, die Sie mit einem normalen Framework nicht erfüllen können.

Materialize

Wenn Sie das Material Design von Google lieben, ist Materialize ein Framework, das Ihnen gefallen wird. Das Beste daran ist, dass es nur eine Handvoll Komponenten und Klassen zu erlernen hat und sich darauf konzentriert, Sie so schnell wie möglich produktiv zu machen. Es gibt nur wenige Anpassungsmöglichkeiten und Materialize folgt dem beliebten 12-Spalten-Gitterformat, das von Bootstrap eingeführt wurde.

Wenn Sie mich fragen, wird das Material-Design jedoch so weit verbreitet sein und ist so … Flach, dass wir uns schon bald darüber beschweren werden, so wie wir uns über das Bootstrap-Problem beschweren, dass alle Websites gleich aussehen. Trotzdem ist es ein schönes Framework für den Anfang.

Reines

Ist Yahoo tot?

Nein, diese Frage ist kein Ablenkungsmanöver, sondern unterstreicht eine wichtige Beobachtung: Yahoo hat das Pure-Framework entwickelt und es unter der BSD-Lizenz veröffentlicht.

Ein kurzer Blick darauf beeindruckt mich, und ich frage mich, warum dieses Angebot nicht mehr Menschen bekannt ist. Das Besondere an Pure ist jedenfalls, dass es ein reines CSS-Framework ist 🙂 Die Entwickler sind sogar noch einen Schritt weiter gegangen und haben es in verschiedene CSS-Module aufgeteilt, die Sie nach Bedarf importieren können. Wenn Sie also nur das Gittersystem benötigen, müssen Sie nicht das gesamte CSS importieren und damit die Ladezeit der Website verlängern.

Das Pure-Gitter gibt es in verschiedenen Varianten: 5-Punkt, 2-Punkt, 24-Punkt usw., so dass Sie bei der Erstellung von Spalten viel mehr Flexibilität haben. Pure ist standardmäßig nicht das am besten aussehende CSS-Framework, aber ich kann verstehen, dass es einen Mehrwert für diejenigen bietet, die ein kleines CSS-Problem in ihrer Benutzeroberfläche lösen möchten und sich über die “hilfreichen” Standardeinstellungen anderer Frameworks ärgern.

Skelett

Wie Sie auf dem Screenshot sehen können, ist Skeleton so minimalistisch, dass es sich nicht einmal als CSS-Framework, Bibliothek oder gar Modul bezeichnet. Es ist ein Standardprogramm und enthält nur 400 Zeilen Quellcode! Unglaublich? Ich denke schon, aber um die Dinge ins rechte Licht zu rücken: Skeleton wurde für winzige oder kleine Projekte entwickelt, die nicht viel mehr als Layouts und Positionierung benötigen.

Es lohnt sich, einen Blick darauf zu werfen, denn wer weiß, vielleicht ist Skeleton genau das, wonach Sie schon immer gesucht haben!

Milligram

Milligram, ein CSS-Framework, das auf Geschwindigkeit und Produktivität ausgelegt ist. Die Entwickler haben die Größe unter 2 KB gehalten, was nach heutigen Maßstäben eine Menge bedeutet.

Milligram ist eine unterhaltsame kleine Variante von CSS-Frameworks, mit der Sie gerne arbeiten werden. Es lässt sich leicht erweitern, und mit ein paar Zeilen benutzerdefiniertem CSS können Sie das Aussehen nach Ihren Wünschen verändern.

Tailwind CSS

Tailwind vertrat einen Stil beim Schreiben und Verwenden von CSS, der bei vielen einen Aufschrei des Entsetzens hervorrief. Ich meine, sehen Sie sich die Verwendung von CSS-Klassen im folgenden Code an (von der Tailwind-Website übernommen):

<figure class="md:flex bg-gray-100 rounded-xl p-8 md:p-0">
  <img class="w-32 h-32 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
  <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
    <blockquote>
      <p class="text-lg font-semibold">
        "Tailwind CSS ist das einzige Framework, das ich in großen Teams skalieren konnte
        in großen Teams. Es lässt sich leicht anpassen, passt sich jedem Design an,
        und die Build-Größe ist winzig."
      </p>
    </blockquote>
    <figcaption class="font-medium">
      <div class="text-cyan-600">
        Sarah Dayan
      </div>
      <div class="text-gray-500">
        Stabingenieurin, Algolia
      </div>
    </figcaption>
  </div>
</figure>

Wenn Sie schon länger als ein paar Jahre als Entwickler tätig sind, wird Ihnen wahrscheinlich übel werden. So … viele … Klassen …! Und obwohl es hier kein Inline-CSS gibt, fühlt es sich so an, wenn man bedenkt, wie eindeutig (und hässlich?) die Klassennamen sind.

Adam Wathan (der Schöpfer von Tailwind) hat also eine ganze Zeit lang in Podcasts, Konferenzen, Blogbeiträgen und Tweets immer wieder erklärt, warum er utility-basiertes CSS für besser hält als semantisches CSS.

Heute hat utility-based CSS eine beträchtliche Delle hinterlassen. Schauen Sie sich diesen Bootstrap 5-Code an und sehen Sie, wie weit verbreitet Utility-Klassen inzwischen sind:

<div class="d-grid gap-3">
  <div class="p-2 bg-light border">Gitterelement 1</div>
  <div class="p-2 bg-light border">Gitterelement 2</div>
  <div class="p-2 bg-light border">Gitterelement 3</div>
</div>

Nachdem wir über das “große Bild” von Tailwind gesprochen haben, lassen Sie uns nun zu den konkreten Vorteilen kommen, die es bietet:

• Mehr Produktivität: Nun, über Produktivität kann man den ganzen Tag streiten, ohne jemals zu einem Ergebnis zu kommen. Dennoch sagen Entwickler, die ausschließlich Tailwind einsetzen (insbesondere bei großen Projekten), dass sie viel produktiver sind. Aber Sie müssen im Vorfeld nachhaltige Anstrengungen unternehmen, denn Tailwind wird nur dann für Sie arbeiten, wenn Sie die “besten Praktiken” der Vergangenheit verlernen.
• Kleinere Paketgröße: Tailwind ist mehr oder weniger eine JS-Manipulation von CSS, so dass einige elegante Dinge möglich sind. Wenn Sie das Projekt erstellen, kann der Compiler zum Beispiel alle unnötigen CSS entfernen. Das ist ein ziemlicher Unterschied zu einem typischen Webprojekt, das das Bootstrap-CSS-Modul verwendet; in diesem Fall wird das gesamte Bootstrap-CSS in das Endprodukt gepackt.
• Konfigurierbar und anpassbar: Tailwind ist nicht nur extrem modular, sondern auch so aufgebaut, dass es leicht konfiguriert und angepasst werden kann. Es gibt kein “In 2 Minuten mit Tailwind loslegen”, denn Sie müssen das Was, das Wo, das Warum und noch einiges mehr lernen. Ein anderes Beispiel: Wenn Sie Ihr Designsystem noch nicht fertig haben und Ihnen die Standardeinstellungen nicht gefallen, werden Sie Frustration erleben. Sie müssen die anfängliche Lern- und Anpassungskurve durchlaufen, bevor Sie sagen können “Wow!”.
• Keine Benennung oder Kontextwechsel: Eine der größten Aufgaben für Entwickler ist die Benennung von Dingen. Soll das Endergebnis z.B. totalAmountForUnits oder expensesAcrossUnits heißen. Das Problem ist bei CSS noch gravierender, da es in einem Projekt Hunderte (oder sogar Tausende) von Klassen geben kann. Ein weiteres Problem ist der Kontextwechsel: Sie müssen ständig zwischen HTML und CSS hin- und herspringen, um die CSS-Änderungen zu sehen. Mit Tailwind werden die Benennungsentscheidungen bereits für Sie getroffen, und da Sie immer nur Klassen aus dem HTML-Code hinzufügen/entfernen, gibt es kein Kontext-Switching.
• Wiederverwendung von Code: Wenn Sie einige nützliche Klassen wiederverwenden möchten, indem Sie sie projektübergreifend einfügen, bietet Tailwind eine Funktion namens Komponenten, die dieses Problem elegant löst. Lesen Sie hier mehr über diese Funktion.

Für viele ist Tailwind ein frischer Wind, den sie dringend gebraucht haben. Wenn Sie Ihrer aktuellen CSS-Bibliothek überdrüssig sind und etwas Radikales und Neues ausprobieren möchten, ist Tailwind genau das Richtige für Sie!

Tacit

Tacit ist das Nebenprojekt von jemandem, auf das ich gestoßen bin, als ich nach interessanten Dingen für diesen Artikel suchte. Ja, ein einfaches Nebenprojekt; nichts weiter als die Arbeit einer Person, die auf ihren Vorlieben basiert.

Warum betone ich das so sehr?

Weil dies im Allgemeinen bedeutet, dass das Risiko, aufgegeben zu werden, sehr hoch ist. Aber dann fallen mir auch ein paar positive Aspekte ein: 1) Das Projekt befindet sich auf GitHub. Wenn Sie also ein Entwickler sind und Tacit unterstützen/erweitern möchten, wissen Sie, was zu tun ist 😉 2) CSS ist in Bezug auf Veränderungen oder Entwicklungen nicht wie JavaScript; welches Styling Sie heute verwenden, wird von den Browsern noch sehr lange unterstützt werden.

Also, was genau ist dieses Tacit?

Wie der Screenshot schon sagt, ist Tacit für diejenigen gedacht, die sich nicht mit CSS auskennen oder einen schlechten Geschmack beim Design haben. Die Idee ist neuartig: Fügen Sie den CSS-Link zu Ihrem Projekt hinzu, und schon haben Sie eine toll aussehende Website! Aber stellen Sie sicher, dass Sie Ihr Versprechen halten: Fügen Sie niemals anderes CSS hinzu oder mischen Sie Dinge aus anderen Frameworks, denn das macht die Sache nur noch schlimmer.

Und sieht eine Tacit-Website gut aus?

Wenn Sie mich beim Wort nehmen wollen, würde ich sagen, dass der gewählte Designstil “sehr gut” ist. Ich finde ihn sogar angenehmer als Semantic UI, eine der beliebtesten CSS-Frameworks/Bibliotheken, die es gibt! Ohne in einen Flame War zu geraten und Screenshots miteinander zu vergleichen, möchte ich das Thema mit der Feststellung abschließen, dass Design subjektiv ist. Aber Sie können vergleichen und selbst entscheiden. 🤪

Lassen Sie mich auf jeden Fall ein paar Screenshots von Tacit’s Look-and-Feel hinzufügen.

Erstens: So sehen Formularelemente aus:

Und so sehen Tabellen in ihrer grundlegendsten Form aus:

Abschließend möchte ich das Offensichtliche wiederholen: Wenn Sie diese Art von Farben, Schriftarten, Stilen usw. als Standardeinstellungen toll finden, wird Tacit eine willkommene Erleichterung sein.

Spectre

Modern, flexibel, leichtgewichtig – wenn Sie nach etwas mit diesen Attributen suchen, ist Spectre einen Blick wert.

Lassen Sie mich meine Wahl der Adjektive für Spectre erläutern:

• Modern: Das Layoutsystem von Spectre basiert auf Flexbox, das zu den besten Dingen gehört, die uns modernes CSS beschert hat. Gleichzeitig sind viele Funktionen und Werkzeuge, die in modernen CSS-Workflows oder anderen Frameworks zu finden sind, ebenfalls enthalten.
• Flexibel: Sie können das modularste und fortschrittlichste CSS-Framework schreiben, aber es nützt Ihnen wenig, wenn es nicht leicht anpassbar ist. Mir gefällt, dass die Anpassung ganz oben in den Dokumenten erwähnt wird. Folgen Sie dem Kaninchenbau und Sie werden ausführliche Erklärungen finden.
• Geringes Gewicht: Wir befinden uns in einer Zeit, in der die Besorgnis über die Web-Performance zunimmt; jedes Kilobyte, das übertragen wird, wird unter die Lupe genommen und kritisiert. Daher verpackt Spectre alles in einem süßen 10 KB-Paket, das für uns alle nicht “zu viel” sein sollte. 😝

Leichtgewichtig zu sein bedeutet nicht, dass Spectre auf Funktionalität verzichtet; es gibt alles, was Sie als Bootstrap-Fan gewohnt sind: Komponenten (Akkordeons, Breadcrumbs, Karten und mehr), Elemente (Formulare, Tabellen, Schaltflächen usw.), Layout (Grids, Hero Section, Navbar usw.), Dienstprogramme (Loader, Spinner usw.) und mehr.

Was ich von Spectre halte? Ich bin mehr oder weniger überzeugt, aber es gibt ein paar Dinge, die ich erwähnen möchte. Erstens gefällt mir die standardmäßige primäre blaue Farbe nicht so sehr, so dass ich sie als erstes in meinen Projekten ändern würde. 😬 Zweitens halte ich das CSS Grid im Jahr 2020 für das beste Werkzeug für Layouts. Ich finde Flexbox ein bisschen seltsam, um alle Layout-Dinge zu tun, daher wünschte ich, Spectre hätte Grid statt Flexbox verwendet.

Aber das ist kaum ein Hindernis, wenn ich schnell entwickeln kann und gute Ergebnisse erhalte. Ich würde also sagen, probieren Sie Spectre ohne Angst aus!

Primer

Primer ist kein CSS-Framework und keine Bibliothek. Es ist nicht einmal eine Sammlung von CSS-Klassen oder eine andere seltsame Verdrehung der Terminologie.

Warum ist es dann auf dieser Liste? Aus zwei Gründen:

• Es hat ein CSS-Framework.
• Es ist eines der umfassendsten und verblüffendsten Dinge, die Sie je gesehen haben.

Ja, wie der Screenshot schon sagt, ist Primer ein Designsystem, das von GitHub für den eigenen Gebrauch entwickelt wurde. Schließlich erkannten sie, dass dieses System sehr leistungsfähig und äußerst nützlich für Frontends und visuelle Arbeiten ist und stellten es als Open Source zur Verfügung.

Ich habe mich schwer getan, die richtigen Worte zu finden, um Primer zu beschreiben. Ihr eigenes Design System Team nennt es … nun, ja, ein Design System, aber ich denke, der Umfang ist viel breiter als das, was wir meinen, wenn wir “Design System” sagen.

Primer umfasst viele Dinge, deren Bedeutung vielleicht nicht sofort ersichtlich ist. Zumindest für Backend-/Full-Stack-Entwickler. Schauen wir uns also an, was diese besonderen Dinge sind, warum sie besonders sind:

• Schnittstellenrichtlinien: In einem Ein-Mann-Team ist die Gestaltung und Pflege von Benutzeroberflächen trivial. Aber wenn Sie dem Team drei weitere Leute hinzufügen – und zwar erfahrene, erfolgreiche Leute -, dann werden Sie sehen, wie sich alles verschlechtert. Der Grund dafür ist das Fehlen klar definierter und strikt durchgesetzter Richtlinien, damit jeder weiß, was in jeder Situation zu tun ist. Primer wird mit einem schönen Satz von Richtlinien geliefert, die Sie übernehmen oder an Ihre Bedürfnisse anpassen können.
• Figma-Komponenten: Auch wenn ich ein Entwickler bin, weiß ich genug über Design, um zu verstehen, dass eine unklare Komponentenreferenz bzw. -verwendung im Laufe des Projekts außer Kontrolle geraten kann. Wie soll zum Beispiel die Schaltfläche aussehen, wenn sie im dunklen Modus gedrückt wird? Wenn niemand dies dokumentiert hat und Sie unter Druck stehen, werden Sie mehrere Varianten haben. Und so haben die Leute von Primer ihre eigenen Figma-Komponenten zur Verfügung gestellt, damit wir lernen und es besser machen können.
• CSS-Framework: Endlich die Sache, die Primer einen Platz auf dieser Liste eingebracht hat! primer verfügt über ein modulares CSS-Framework im BEM-Stil, das separate Stile für die Produkt- und Marketingseiten bereitstellt. Das hat GitHub aus Bequemlichkeit gemacht, und es steht Ihnen frei, es nicht anzurühren oder die Gesamtphilosophie so zu akzeptieren, wie sie ist. Selbst wenn Sie sich nur für das CSS interessieren, empfehle ich Ihnen, einen Blick darauf zu werfen.
• Icons (Oktikons): Jedes kohärente Designsystem hat seine eigene Auffassung von Symbolen. Für Primer lautet die Antwort Octicons. Offensichtlich gibt es nicht allzu viele Icons. Trotzdem setze ich sie ganz oben auf die Liste, weil Icons zu den absoluten Grundlagen gehören: Wenn alles passt, aber ein paar Icons nicht, ist das Ergebnis eine Benutzeroberfläche, von der Sie Bindehautentzündung bekommen. 😝
• React-Komponenten: Und da React die beliebteste Frontend-Bibliothek ist, haben die Leute von GitHub die CSS-Elemente als React-Komponenten codiert, die jetzt für uns alle verfügbar sind!
• Präsentationen: In diesem Teil der Fibel geht es um die Designsprache, die Sie bei Präsentationen verwenden sollten (wie sie von den Leuten bei GitHub intern verwendet wird). Schriftarten, Farben, Rahmen, Kontraste – alle Entscheidungen wurden bereits getroffen. Es steht Ihnen frei, deren Richtlinien zu studieren und Ihre eigenen zu entwickeln.

Der größte Vorteil von Primer besteht darin, dass Sie es als Ganzes annehmen. Das ist vielleicht nicht für jeden möglich, und einige werden vielleicht sogar feststellen, dass ihre Designsprache mit der von GitHub kollidiert. Und dann gibt es Leute, die einen bestimmten Teil (oder sogar einen Teil des Teils!) von Primer nützlich finden und damit arbeiten.

Egal, wo Sie auf diesem Spektrum stehen, Primer hat Ihnen etwas zu bieten: entweder wiederverwendbare, hochwertige Designsystemkomponenten oder Denkanstöße für Ihre eigenen Prozesse und Richtlinien!

Fictoan

Fictoan ist ein intuitives Framework für Webdesigner, die Benutzeroberflächen erstellen möchten. Das Framework wurde entwickelt, um die Grenzen zwischen Entwicklern und Designern zu verwischen.

Die Schöpfer sind der Meinung, dass Designer die Benutzererfahrung und die Benutzeroberfläche vollständig kontrollieren sollten. Die Entwickler hingegen sollten sich auf die Leistung und Dinge wie die Bereitstellung konzentrieren.

Warum Fictoan verwenden?

• Eine Vielzahl von Komponenten: Fictoan verfügt über Hunderte von Komponenten, die in verschiedene Kategorien eingeteilt sind. Wenn Sie zum Beispiel ein Formular suchen, gibt es mehr als zehn Designs.
• Offene Quelle: Fictoan kann kostenlos verwendet werden, und Sie finden den Code auf GitHub.
• Zugänglich: Die Plattform wurde mit einem starken Fokus auf Barrierefreiheit entwickelt. Designer können den verfügbaren Code auch anpassen, um die Zugänglichkeit zu verbessern.
• Einfacher Einstieg: Fictoan wurde für React-Projekte entwickelt.

Sie können eine einfache React-Anwendung erstellen, um zu demonstrieren, wie es funktioniert. Verwenden Sie diesen Befehl;

npx create-react-app fictoan-app

cd fictoan-app

Nun können Sie fictoan wie folgt zu Ihrer React-App hinzufügen;

npm install fictoan-react

Wir können das Projekt in einem Code-Editor öffnen und eine einfache Schaltfläche erstellen.

<Button kind="primary"&gt

  Schaltfläche

</Button&gt

• Einfache Anpassung: Sie können den obigen Code an Ihre Bedürfnisse anpassen.

Nachteile von Fictoan

• Noch neu: Am 21. Juni 2020 wurde die erste Version auf GitHub veröffentlicht. Die Plattform hat weniger als 10 Forks und muss noch einen weiten Weg zurücklegen, um die Massen anzusprechen.
• Begrenzte Funktionen: Obwohl Fictoan über einige erstaunliche moderne Designs verfügt, ist es noch ein weiter Weg, um mit anderen Plattformen wie Bootstrap zu konkurrieren, was den Funktionsumfang angeht.
• Abhängig von Abhängigkeiten: Fictoan ist auf einige Bibliotheken angewiesen, wie z.B. styled-components, um zu funktionieren. So viele Abhängigkeiten können dazu führen, dass die App sehr groß wird.

Vanilla

Vanilla ist ein einfaches, erweiterbares CSS-Framework, das in Syntactically Awesome Style Sheets (Sass) geschrieben ist, einer Hochsprache von CSS. Vanilla wird in den meisten Canonical-Produkten, wie Ubuntu und JAAS, verwendet.

Um Vanilla zu verwenden, erstellen Sie eine Projektdatei und navigieren Sie zu ihr. Anschließend können Sie Vanilla mit yarn oder npm installieren.

yarn add vanilla-framework

Oder

npm install vanilla-framework

Alternativ können Sie auch einen CDN-Link in den <head>-Abschnitt Ihrer Html-Datei einfügen, um mit der Verwendung von Vanilla Framework zu beginnen.

<link rel="stylesheet" href="https://assets.ubuntu.com/v1/vanilla-framework-version-3.13.0.min.css" />

Warum Vanilla verwenden?

• Es ist reaktionsfähig: Apps, die mit Vanilla Framework gestaltet wurden, sind auf verschiedene Bildschirmgrößen wie Smartphones und PCs anpassbar.
• In Sass geschrieben: Sass macht die Definition von Variablen und Mixins in Ihrem CSS-Code einfach.
• Unterstützung für mehrere Browser: Sie können Vanilla-Apps auf verschiedenen Browsern wie Firefox, Chrome und Safari verwenden.
• Zusammensetzbar: Sie können den spezifischen Code, den Sie benötigen, einbinden oder das gesamte Framework in Ihr Projekt installieren.
• Offene Quelle: Der Quellcode ist quelloffen und wird vom Canonical Web Team erstellt und gepflegt.

Nachteile der Verwendung von Vanilla

• Begrenzte Anpassungsmöglichkeiten: Vanilla bietet möglicherweise nicht die Anpassungsmöglichkeiten, die sich manche Entwickler wünschen.
• Begrenzte Dokumentation: Im Vergleich zu anderen CSS-Frameworks, wie Foundation und Bootstrap, ist die Dokumentation von Vanilla nicht sehr ausführlich.
• Fehlen einer lebendigen Community: Im Vergleich zu anderen Frameworks hat Vanilla keine große Community.

Welches CSS-Framework ist also das beste?

Geben Sie es zu, Sie haben ähnliche Fragen schon einmal gestellt und die folgende enttäuschende Antwort erhalten: keines 😀 Die Wahl eines Frameworks (oder eines Tools oder sogar eines Menschen in Ihrem Leben) hängt von vielen Faktoren ab.

Wenn Sie meinen Rat hören wollen, hier ist er: Schalten Sie den Lärm aus. Nur weil die Leute verrückt nach etwas Neuem und Glänzendem sind, heißt das nicht, dass Sie es auch lernen müssen, sonst bleiben Sie auf der Strecke. Neue Dinge auszuprobieren ist großartig, aber sich auf der Suche nach dem perfekten Werkzeug im Kreis zu drehen, ist, nun ja, Verschwendung.