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

Ich habe einmal einen Witz eines Front-End-Entwicklers gehört: „Die NASA hat Roboter auf dem Mars gelandet, und hier kämpfen wir immer noch damit, unsere Divs zentriert auszurichten!“ Und es tut mir leid, dass dieser Witz so viel Wahrheit enthält.

Etwas zu tun, das so einfach und vernünftig klingt wie das Zentrieren eines box innerhalb eines box ist unglaublich schwierig in CSS zu erarbeiten. Es sei denn, Sie sind schon einmal darauf gestoßen. Und den Codeausschnitt irgendwo gespeichert. Und selbst wenn du es schaffst, lauert immer die Angst, dass es an irgendeinem dummen Kerl fürchterlich kaputt gehen könnterowsähm irgendwo!

CSS steht neben JavaScript an erster Stelle der „notwendigen Web-Übel“. Es handelt sich um einen Standard, der sich willkürlich entwickelte und von verschiedenen b unterschiedlich interpretiert wurderowsäh Hersteller, und ist mittlerweile so voller Widersprüche, dass sich niemand mehr traut, sich „CSS-Experte“ zu nennen.

Kein Wunder also, dass CSS-Frameworks im Laufe der Zeit entstanden und den größten Teil der Schmerzen beseitigt haben. Heute können wir uns das Codieren ohne unser bevorzugtes CSS-Framework nicht vorstellen, da die Ausrichtung auf mehrere Bildschirmgrößen zu einer Notwendigkeit geworden ist.

Aber woher wissen Sie, dass Ihr Framework das Beste für den jeweiligen Job ist? Wenn Sie mit der Front-End-Entwicklung noch nicht vertraut 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 satt haben, CSS-Regeln von Hand zu codieren, können Sie schnell Abhilfe schaffen!

Bootstrap

Eine Initiative von Twitter, Bootstrap würdigt die groß angelegte Einführung von Responsive Design. Es war das erste Framework, das die Philosophie „Mobile First“ förderte. Das Entwerfen für kleinere Bildschirmgrößen war nicht länger ein separater Schrittate Projekt darinself; Alles, was Sie tun mussten, war, die relevanten Bootstrap-Klassen einzubinden, und der Entwurf wurde automatisch ausgeführtally Anpassung an unterschiedliche Bildschirmgrößen (naja, fast).

Responsive Design in Bootstrap (4.0 vs. 3.0)

Bootstrap erreichte ein responsives Design durch die Einführung der Idee eines Rasters. Ein Raster ist eine unsichtbare Unterteilung des Bildschirms in Spalten (zusammen mit der Breite). Wenn Sie beispielsweise drei „boxes“, die Sie auf großen Bildschirmen nebeneinander, aber vertikal positionieren möchtenally Auf kleineren Bildschirmen würden Sie Folgendes tun:

 Eine von drei Spalten Eine von drei Spalten Eine von drei Spalten

Die derzeit beliebte Version von Bootstrap ist 4, was eine umfassende Überarbeitung der 3.3-Serie darstellt. Die obige Syntax ist, wie Sie in Bootstrap 4 codieren würden, was einen großen Teil seiner Eleganz der rohen Kraft von verdankt Flexbox und andere moderne Layoutfunktionen, die von b unterstützt werdenrowswenden Sie sich direkt an uns. In den niedrigeren Versionen von Bootstrap wurde das Raster als insgesamt 12 Spalten definiert, was zu Code wie z. B. führte

einen Div dazu bringen, eins einzunehmen-third der Bildschirmbreite bei großen Geräten und der halben Breite bei mittelgroßen Geräten. Die Syntax ist jetzt viel angenehmer, erfordert jedoch Vertrautheit mit Flexbox.

Bootstrap-Profis

An Bootstrap gibt es viel zu mögen, insbesondereally for Full-Stack-Entwickler:

• Rapid-Prototyping: Mit Bootstrap müssen Sie sich fast keine Gedanken über knifflige CSS-Positionierung usw. machenrowsäh Inkompatibilitäten. Alles, was Sie tun müssen, ist, den HTML-Code zu schreiben und dann das entsprechende anzuwendenate CSS-Klassen sorgen dafür, dass die Reaktionsfähigkeit zunimmt alive.
• Groß ecosSystem: Bootstrap hat derzeit den größten Anteil ecosSystem unter den Frontend-Frameworks. Die Anzahl der mit Bootstrap erstellten Website-Layouts, Themes, Admin-Panels, UI-Komponenten usw. ist überwältigend und wird ständig besser. Sowohl für Berater als auch für Produktunternehmen bedeutet dies, dass vorgefertigte Artikel und Community-Unterstützung immer ausreichend sind.
• Unterstützt von Twitter: Ein aufkommender Trend bei Open Source ist der rise von Projekten, die von einer kommerziellen Einrichtung gesponsert werden. In den meisten Fällen bauen diese Einheiten auf profitkompetente Unternehmen rund um ihr Angebot. Kotlin (JetBrains), WordPress (Automattic, Inc.), Angular (Google), React (Facebook) usw. sind einige Beispiele. Wenn ein Projekt von einer etablierten Organisation unterstützt wird und keine Ein-Personen-Show ist, gibt es der Gemeinschaft Vertrauen (insbesondere).ally die Enterprise Kunden), dass das Projekt eine klare Roadmap und eine langfristige Zukunft haben wird.
• Eine große Sammlung von Komponenten: Bootstrap-Angebote, aus dem box, fast alle UI-Komponenten, die Sie wahrscheinlich jemals benötigen werden. Navigation, Formulare, Karten, Modalitäten, Schaltflächen, Abzeichen, Fortschrittsbalken, Warnungen. . . Sie nennen es, und Bootstrap hat es. Für viele Unternehmen ist diese Praxisally Reduziert die Notwendigkeit, eine Widmung zu habenated Front-End-Team.
• WENIGER und SASS Unterstützung: Unter den äußerst beliebten CSS-Frameworks ist Bootstrap das einzige, das sowohl LESS als auch SASS unterstützt. Ja, ich weiß, Sie verwenden nicht LESS (da nein self-Entwickler sollten das doch respektieren, oder?), aber hey, es gibt riesige Projekte da draußen, die auf LESS angewiesen sind. Natürlich können Sie keines von beidem wählen und Ihre einfachen CSS-Dateien schreiben.

Bootstrap-Nachteile

Nichts ist ohne Preis, oder? Nun, Bootstrap ist keine Ausnahme. Im Laufe der Zeit wurde Bootstrap von Designern und UI-Experten schwer beschossen. Hier ist der Grund:

• UX-Monotonie: Die Tatsache, dass Bootstrap eine so große Sammlung von integrierten Ergebnissen hat, führt zu Websites, die allzu vertraut und ehrlich gesagt langweilig aussehen. Sie müssen nur zum gehen offizielle Beispiele um zu sehen, wie nervig die Standardeinstellungen sind. Suchen Sie einfach nach "Alle Bootstrap-Websites sehen gleich aus" und Sie werden wissen, was ich meine. 🙂
• Styling-Probleme: Bootstrap könnte als Meinung angesehen werdenated Rahmen. Mit anderen Worten: Es enthält Ideen für Layouts und unterstützt Sie bei der Arbeit extra schwierig, wenn Sie möchten, dass es anders aussieht/sich anders verhält. Berücksichtigen Sie die standardmäßigen CSS-Haltepunkte für Bildschirmbreiten: Ein mittelgroßer Bildschirm für Bootstrap beginnt bei einer Gerätebreite von 768 Pixel. Und was ist, wenn Sie beispielsweise die Grenze von 600 Pixel anstreben möchten? Nun, viel Glück dabei! Das Gleiche gilt für fast jede andere Komponente im Bootstrap: rows und Container haben ihre Standardpolsterung, Schaltflächen haben Farben und Rahmen, die ohne großen Aufwand sehr schwierig zu überschreiben sind, und so weiter.

Wollen Master-CSS? Schau dir das an Udemy Online-Kurs.

Foundation

Wenn Technologien Religionen wären, würden sich die Leute von Foundation und Bootstrap gegenseitig um das Blut bemühen. Keine Diskussion über moderne CSS-Frameworks ist vollständig, ohne Foundation zu erwähnen.

Gehe zur Stiftung Website und Sie können nicht anders, als die Zeile zu bemerken: "Das fortschrittlichste reaktionsschnelle Front-End-Framework der Welt." Auf den ersten Blick scheint es ein großer Anspruch zu sein, eine Marketingkampagne durchzuführen.

Anhänger des Foundation-Frameworks wissen jedoch, dass daran zumindest etwas Wahres dran ist. Die Foundation wurde für die Natur entwickeltally mit dem Rails-Framework, und mehrere der „Zen-ähnlichen“ Leitprinzipien von Rails sind bei der Arbeit zu beobachten.

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

Im Vergleich zu früheren Bootstrap-Versionen finde ich dies sehr intuitiv und leicht zu merken. Keine zwölf Spaltengitter mehr und herausfinden, was 4/12 sein soll!

Während Foundation viel weniger beliebt ist als Bootstrap, ist es für viele erfahrene Front-End-Entwickler ein Geschäftsgeheimnis.

Vorteile des Foundation Frameworks

Foundation weist einige ungewöhnliche Merkmale aller CSS-Frameworks auf, die wir in diesem Artikel berücksichtigen werden:

• Volles Werkzeug: Es ist Technikally Es ist falsch zu sagen, dass Foundation ein CSS-Framework ist. Ich meine, das ist es, aber es wurde als große und modulare Sammlung von aufgebaut Werkzeuge das darauf abzielt, fast alle Arten von Front-End-Problemen zu lösen. Es gibt separateate Framework-Angebote für Websites und E-Mails, stark optimiert für ihre jeweiligen Domains. Foundation verfügt außerdem über eine Befehlszeilenschnittstelle (CLI), die in den Ohren von Entwicklern, die es gewohnt sind, mit Webpack oder anderen Modul-Bundlern zu arbeiten, wie Musik klingen wird.
• Extreme Flexibilität: Im Gegensatz zu Bootstrap wurde Foundation entwickelt, um dem Front-End-Entwickler die volle Kontrolle über seine Benutzeroberflächen zu geben. Infolgedessen wird sich Foundation für den Neuankömmling langweilig und enorm komplex fühlen. Der Grund dafür ist jedoch, dass Foundation Ihnen keine Stilsprache aufzwingt, sondern genau das sein möchte, was es ist: ein ausgezeichnetes CSS-Framework.
• Mehr als nur UI-Komponenten: Foundation verfügt zwar über die übliche Sammlung von UI-Elementen, geht jedoch weit über die Pflichterfüllung hinaus. Die Entwickler haben ein fortschrittliches Responsive Image-System, eine Preistabellenkomponente (ja, die zur Anzeige verschiedener Preispläne verwendet), Formularvalidierung, Unterstützung von rechts nach links, Responsive Embeds und mehr integriert. Ich möchte noch einmal betonen, dass dies ein Overkill für die meisten einfachen Websites ist, aber für große Websites ist es ein Segen, den erfahrene Entwickler erkennen werden.
• Schulung und Beratung: Nun, während Bootstrap Cre istateVon Twitter entwickelt, ist es ein Nebenprojekt und nur ein sehr kleiner Teil des Gesamtbildes. Das Unternehmen hinter Foundation (ZURB) ist jedoch bestrebt, diese zu nutzen, weiterzuentwickeln und zu fördern. Für Großkunden werden Schulungen und professionelle Beratung angeboten, was sich hervorragend für Unternehmen eignet, die große Projekte anstreben und zahlungsbereit sind.

Nachteile des Foundation Framework

Die Stärken eines Frameworks werden aus entgegengesetzter Sicht zu seinen Schwächen. Hier ist der Grund, warum die Stiftung möglicherweise nicht die beste Wahl für Ihr Projekt ist:

• Kleine (er) Gemeinschaft: Die Foundation-Community ist viel kleiner als die von Bootstrap. Wenn Sie etwas Exotisches ausprobieren und nicht weiterkommen, sind die Chancen geringer, relevante Hilfe zu finden. Ich würde dies jedoch für alle praktischen Zwecke hinzufügen; Es gibt genug von einer Gemeinschaft da draußen. Es ist nur so, dass es mehrere Größenordnungen kleiner ist als das von Bootstrap, sodass Sie möglicherweise nicht sofort Lösungen finden.
• Komplexität: Wenn Sie an Bootstrap oder etwas Einfaches oder, noch schlimmer, an Vanilla-CSS gewöhnt sind, wird sich Foundation wie eine unendliche Explosion der Komplexität anfühlen. Schichten über Schichten, Komponenten mit Komponenten, endlose Anpassungsmöglichkeiten. . . Schon bald werden Sie anfangen, die Sinnhaftigkeit dieses Lebens in Frage zu stellenself! Aber andererseits hat die Stiftung ein ganz anderes Ziel und kann dafür nicht verantwortlich gemacht werden.
• Zu viele Optionen: Manchmal möchte man einfach nur Scheiße erledigen und sich Sorgen um Perfektion machen later. In solchen Zeiten ist es frustrierend, zu viele Optionen mit geringfügigen Abweichungen angeboten zu bekommen. Denken Sie zum Beispiel daran, dass Sie ein Subway-Sandwich bestellen müssen, wenn Sie so hungrig sind, dass Sie Schlamm essen könnten. Naturally, Foundation ist nicht für solche Zeiten da.
• Talentverfügbarkeit: Da Foundation (viel) weniger beliebt ist als Bootstrap, ist das verfügbare Talent viel geringer. In der Regel kennt jeder neue Mitarbeiter Bootstrap mit ziemlicher Wahrscheinlichkeit, hat jedoch keine Ahnung von Foundation. Lernen braucht Zeit und es ist ein Luxus, den nicht alle Teams haben können.

Bulma

Bulma ist ein relativ neuer Teilnehmer auf dem Schlachtfeld der CSS-Frameworks und hat sich einen Namen gemachtself in einer kurzen Zeit. Es ist attractDie Effizienz liegt in einem strikten, reinen CSS-Ansatz (es gibt keine JavaScript-Komponenten) und eleganten Standardeinstellungen, mit denen viele Entwickler mit einem guten Gespür für Design bei der Arbeit mit Bootstrap ein Problem haben.

Ein Großteil der Dynamik von Bulma kommt vom hohen Flussates der Akzeptanz in der Laravel-Community (ein PHP-Webframework, falls Sie es nicht wussten), was Vue.js sicher ziemlich geholfen hat rise zu den Höhen der Beliebtheit unter JavaScript-Frameworks.

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

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

• Sehr beliebt: Okay, es ist nicht beliebter als Bootstrap, aber es ist beliebter als Foundation. Zum Zeitpunkt des Schreibens hat Bulma mehr als 30 Sterne auf Github, rund 3 mehr als Stiftungen. Natürlich ist eine Reihe von Github-Sternen keine Metrik des Verdienstes, aber es heißt, dass die Community Bulma gutheißt.
• Sehr gut lesbare Klassen: Bulma hat für mich die am besten lesbaren CSS-Klassen aller Frameworks, die ich ausprobiert habe. Es gibt auch ein lächerlich leistungsfähiges und einfaches System zum Erstellen von Gittern im Metro-Stil, Kacheln genannt (sehen Sie sich einfach den Code in der zweiten Hälfte des Screenshots an und sagen Sie mir, dass Sie nicht beeindruckt sind!).

• Flache Lernkurve: Bulma ist hochmodular und wurde erstelltated um die praktischen, alltäglichen Probleme zu lösen, auf die kleinere Teams und einzelne Entwickler stoßen. Sie werden feststellen, dass Bulma sehr leicht zu erlernen ist, obwohl ich denke, dass ein guter CSS-Hintergrund immer gut ist, um eine Vorstellung davon zu haben, was unter der Haube vor sich gehen könnte. Dies ist hilfreich, wenn Sie das Standardverhalten überschreiben möchten.
• elegant: Schauen Sie sich unten den Standard-Heldenabschnitt für Bulma an. Genug gesagt!

Bulma hat eine kleine, aber äußerst große Leidenschaftate Wenn Sie also auf all den Schnickschnack verzichten und dennoch in Rekordzeit elegant aussehende Benutzeroberflächen entwickeln möchten, ist Bulma die richtige Wahl. Für Bootstrap-Entwickler hat Bulma ein separates Angebotate Abschnitt, um sie zu überzeugen und ihnen bei der Migration zu helfenate Bodac.

UIkit

Das, woran man denkt UIkit ist Minimalismus. Minimalismus nicht in Features (tatsächlich bietet er vielleicht die meisten Features aller Frameworks), sondern im Design. Wenn super saubere, elegante, nicht Leerzeichen-schüchterne Designs Ihr Ding sind, hat UIkit Sie abgedeckt.

Schauen Sie sich zum Beispiel die Fortschrittsbalken-Komponente an:

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

Wenn das nicht aus voller Kehle nach Eleganz schreit, weiß ich nicht, was es tut. Besuchen Sie einfach die UIkit-Website und sehen Sie sich all die unglaublichen Komponenten an, die sie zu bieten hat. Es sei denn, Ihre Projektmanager oder der Kunde Ihnen eine bestimmte Stilsprache aufzwingt, ich denke, dass Uikit beim UI-Design die Nase vorn hat und dem M von Google mehrere Meilen voraus istateRial-Design.

Aber gibt es einen Haken, fragen Sie sich. Ja da ist. Wie Bootstrap arbeitet UIkit mit seinem JavaScript und während Sie jQuery für die DOM-Manipulation verwenden können, verwenden Sie ein virtuelles DOM-Framework wie Reagieren ist unmöglich.

Außerdem ist Uikit ein self-in sich geschlossenes System, und Sie können es nicht ändern oder erweitern, ohne erhebliche Investitionen zu tätigen effort.

Semantische Benutzeroberfläche

Ein weiterer Anwärter im Rennen ist Semantische Benutzeroberfläche, was versucht, es zu unterscheidenself mit vielen Themen und Anpassungsmöglichkeiten. Es gibt mehr als 3000 Themenvariablen, was zu einer enormen Breite führt. Zumindest sagen das die Dokumente.

Bootstrap 4 deckt quasi all dies ab und ist auch vollständig anpassbar, aber ein Vorteil von Semantic UI ist, dass es zu Folgendem führt: nicestandardmäßig aussehende Layouts. Dennoch ist es nicht das schönste von allen box, weshalb ich es gesagt habe later unten auf meiner Liste.

Es hat auch eine der steilsten Lernkurven und die Codierungskonventionen sind viel strenger. Versuch es; Ich würde sagen und sehen, ob es wie etwas aussieht, das Sie vielleicht bevorzugen.

Susy

Susy ist derzeit ein wenig bekanntes Framework, aber es ist eine faszinierende und erfrischende Idee. Susy ist ein weiteres reines Layout-Framework und verzichtet auf alle vordefinierten Ideen float, Gitter, Flexbox, Tische oder irgendetwas anderes, und lässt Sie komponieren die Art von Layout, die Sie wollen. "Komponieren" ist hier das Schlüsselwort, da Susy für die Erstellung hochmodularer, atemberaubender Layouts mit äußerst komplexen, ungewöhnlichen und präzisen Anforderungen gedacht ist.

In den Händen des erfahrenen Entwicklers ist Susy wie ein Flammenwerfer, der alles andere wegbläst. Kleinere Sterbliche werden es natürlich schaffen, sich die Hände zu verbrennen.

Probieren Sie diese Standardeinstellung (SASS) aus, um sich ein Bild von der Leistungsfähigkeit von Susy zu machen:

 // 4 symmetrische, flüssige Säulen // Rinnen sind 1/4 so groß wie eine Säule // Elemente überspannen 1 weniger Rinne als Säulen // Container überspannen 1 weniger Rinne $ susy: ('Säulen': susy-repeat (4 ), 'Dachrinnen': 0.25, 'Ausbreitung': 'eng', 'Container-Ausbreitung': 'eng',);

Ich finde den Code hübsch self-erklärend, aber nichts für Eilige. 🙂 Susy macht absolut Sinn, wenn Sie genug von der Aufblähung haben, die Ihnen moderne Frameworks auferlegen, und Sie Layoutanforderungen haben, von denen Sie wissen, dass kein gewöhnliches Framework sie erfüllen kann.

Materialisieren

Wenn Sie in Googles M verliebt sindateRial Design, Materialisieren ist ein Rahmen Du wirst es genießen. Das Beste ist, dass es nur eine Handvoll Komponenten und Klassen zum Lernen gibt und sich darauf konzentriert, Sie zu begeistern productive so schnell wie möglich. Es gibt nur wenige Anpassungsoptionen und Materialize folgt dem von Bootstrap etablierten beliebten 12-Spalten-Rasterformat.

Wenn Sie mich jedoch fragen, a MateRial-Design wird immer häufiger und ist so . . . Standardmäßig flach, dass wir uns schon bald darüber beschweren werden, so wie wir es auch über das Bootstrap-Problem tun, dass alle Websites gleich aussehen. Dennoch ist es ein nice Rahmen für den Anfang.

Reines

Ist Yahoo tot?

Nein, diese Frage ist keine Ablenkung, sondern unterstreicht eine wichtige Beobachtung: Yahoo hat die Reines Framework und veröffentlichte es unter der BSD-Lizenz.

Ein kurzer Blick beeindruckt mich und ich frage mich, warum dieses Angebot nicht mehr Menschen bekannt ist. Was Pure macht, ist, dass es ein auch CSS-Framework. 🙂 Tatsächlich haben die Entwickler das getan extra Meile erstellt und in verschiedene CSS-Module aufgeteilt, die Sie nach Bedarf importieren können. Wenn Sie also nur das Rastersystem benötigen, müssen Sie nicht das gesamte CSS importieren und zur Ladezeit der Site hinzufügen.

Das Pure-Raster gibt es in verschiedenen Varianten: 5-Punkt-, 2-Punkt-, 24-Punkt-Raster usw. Wenn Sie also Spalten erstellen, haben Sie viel mehr Flexibilität. Pure ist standardmäßig nicht das am besten aussehende CSS-Framework, aber ich kann sehen, wie es denjenigen einen Mehrwert bietet, die ein kleines CSS-Problem in ihrer Benutzeroberfläche lösen und sich an den „hilfreichen“ Standardeinstellungen anderer Frameworks festhalten möchten.

Skeleton

Wie Sie im Screenshot sehen können, Skeleton ist so minimal, dass es nicht einmal aufgerufen wirdself ein CSS-Framework, eine Bibliothek oder sogar ein Modul. Es ist Kesselplateund enthält nur 400 Zeilen Quellcode! Unglaublich? Ich denke schon, aber um die Dinge ins rechte Licht zu rücken, wurde Skeleton für kleine oder kleine Projekte entwickelt, die nur Layouts und Positionierungen benötigen.

Einen Blick wert; Wer weiß, Skeleton könnte das sein, wonach Sie die ganze Zeit gesucht haben!

Milligramm

Milligramm, ein CSS-Framework für Geschwindigkeit und Produktivität. Die Entwickler haben es unter 2 KB groß gehalten, was nach heutigen Maßstäben viel bedeutet.

Ein Milligramm ist eine unterhaltsame kleine Version von CSS-Frameworks, die Sie zu schätzen wissen werdenate arbeiten mit. Die Erweiterung ist einfach und mit ein paar Zeilen benutzerdefiniertem CSS können Sie das Erscheinungsbild nach Ihren Wünschen ändern.

Rückenwind CSS

Tailwind FürsprecherateDer Schreibstil und die Verwendung von CSS lösten bei vielen einen Aufschrei aus. Ich meine, schauen Sie sich die Verwendung von CSS-Klassen im folgenden Codeabschnitt an (von der Tailwind-Website):

<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 is the only framework that I've seen scale
        on large teams. It’s easy to customize, adapts to any design,
        and the build size is tiny.”
      </p>
    </blockquote>
    <figcaption class="font-medium">
      <div class="text-cyan-600">
        Sarah Dayan
      </div>
      <div class="text-gray-500">
        Staff Engineer, Algolia
      </div>
    </figcaption>
  </div>
</figure>

Wenn Sie seit mehr als ein paar Jahren Entwickler sind, werden Sie wahrscheinlich Übelkeit verspüren. Damit . . . viele . . . Klassen . . . ! Und obwohl es hier kein Inline-CSS gibt, fühlt es sich so an, wenn man bedenkt, wie explizit (und hässlich?) Die Klassennamen sind.

Also, seit geraumer Zeit, Adam Wathan (der Schöpfer von Tailwind) lief von Säule zu Säule (dh in Podcasts, Konferenzen, Blog-Posts, Tweets), warum er der Meinung war, dass Utility-basiertes CSS semantischem CSS überlegen sei.

Heutzutage hat dienstprogrammbasiertes CSS einen beträchtlichen Einbruch erlitten. Schauen Sie sich diesen Bootstrap 5-Code an und sehen Sie, wie prevAusstehende Dienstprogrammklassen sind geworden:

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

Nachdem wir über das „große Ganze“ von Rückenwind gesprochen haben, wenden wir uns den konkreten Vorteilen zu, die es bietet:

• Mehr Produktivität: Nun ist Produktivität etwas, worüber wir den ganzen Tag streiten können und das wir nie erreichen; Das heißt, Entwickler, die Tailwind ausschließlich übernommen haben (insbesondereally für große Projekte) sagen, dass sie viel mehr sind productive. Aber Sie müssen nachhaltig investieren effort im Voraus, denn Tailwind wird nur dann für Sie funktionieren, wenn Sie „Best Practices“ aus der Vergangenheit verlernt haben.
• Kleinere Bündelgröße: Rückenwind ist mehr oder weniger JS, das CSS manipuliert, so dass einige elegante Dinge möglich sind. Wenn Sie beispielsweise das Projekt erstellen, kann der Compiler alle unnötigen CSS entfernen. Dies ist ein ziemlicher Kontrast zu einem typischen Webprojekt, das das Bootstrap-CSS-Modul verwendet. In diesem Fall wird das gesamte Bootstrap-CSS in die letzte Sache gepackt.
• Konfigurierbar und anpassbar: Rückenwind ist nicht nur extrem modular aufgebaut, sondern unterstreicht auch die einfache Konfiguration und Anpassung. Es gibt nichts Schöneres als „in 2 Minuten mit Rückenwind beginnen“, denn Sie müssen lernen, was, wo, warum und noch viel mehr. Ein weiteres Beispiel: Wenn Sie Ihr Design-System nicht bereit haben und die Standardeinstellungen nicht mögen, werden Sie frustriert sein. Sie haben Um die anfängliche Lern- / Anpassungskurve zu durchlaufen, bevor Sie „Wow!“ sagen können.
• Keine Benennung oder Kontextumschaltung: Eine der größten Aufgaben, die Entwickler haben, ist das Benennen von Dingen. Sollte das Endergebnis aufgerufen werden totalAmountForUnits or expensesAcrossUnits, Zum Beispiel. Bei CSS ist das Problem noch schwerwiegender, da ein Projekt Hunderte (oder sogar Tausende) von Klassen enthalten kann. Ein weiteres Problem ist der Kontextwechsel: Sie wechseln ständig zwischen HTML und CSS, um die CSS-Änderung zu sehen. Mit Tailwind werden die Namensentscheidungen bereits für Sie getroffen, und da Sie immer nur Klassen zu HTML hinzufügen/entfernen, ist das auch so zero Kontextwechsel.
• Wiederverwendung von Code: Wenn Sie Ihre findenself Tailwind „verwendet“ einige nützliche Klassen durch projektübergreifendes Kopieren und Einfügen und verfügt über eine Funktion namens „Components“, um dieses Problem elegant zu lösen. Lesen Sie mehr über diese Funktion hier.

Für viele war Tailwind ein Hauch frischer Luftesperatedringend benötigt. Wenn Sie Ihre aktuelle CSS-Bibliothek satt haben und etwas Radikales und Neues ausprobieren möchten, ist Tailwind genau das Richtige für Sie!

Stillschweigend

Tacit ist jemandes Nebenprojekt, auf das ich gestoßen bin, als ich nach interessanten Dingen für diesen Artikel gesucht habe. Ja, einfach ein Nebenprojekt; nichts weiter als die Arbeit einer Person nach ihrem Geschmack.

Warum betone ich das so sehr?

Weil dieses Genally bedeutet, dass das Risiko, verlassen zu werden, sehr hoch ist. Aber dann fallen mir auch ein paar positive Aspekte ein: 1) Die Projekt ist auf GitHub. Wenn Sie also Entwickler sind und Tacit unterstützen/erweitern möchten, wissen Sie, was zu tun ist. 😉 2) CSS ist in Bezug auf Veränderung oder Weiterentwicklung nicht wie JavaScript; whateDas von Ihnen heute verwendete Styling wird von b unterstütztrowsschon sehr lange.

Also, was genau ist diese stillschweigende Sache?

Wie der Screenshot sagt, Stillschweigend ist für diejenigen, die CSS nicht kennen oder einen schlechten Geschmack im Design haben. Die Idee ist neu: Fügen Sie den CSS-Link zu Ihrem Projekt hinzu, und Sie erhalten sofort eine gut aussehende Website! Aber stellen Sie sicher, dass Sie Ihr Versprechen halten: Fügen Sie niemals anderes CSS hinzu und mischen Sie keine Inhalte aus anderen Frameworks, da dies die Dinge schwer beschädigen wird.

Und sieht eine Tacit-Website gut aus?

Wenn Sie mir glauben wollen, würde ich sagen, dass der gewählte Designstil „sehr gut“ ist. AktuallyIch finde es sogar noch angenehmer als Semantic UI, eines der beliebtesten CSS-Frameworks/-Bibliotheken überhaupt! Ohne mich auf einen Flammenkrieg einzulassen und Screenshots nebeneinander zu vergleichen, möchte ich das Thema fallen lassen und sagen, dass Design subjektiv ist. Aber Sie können vergleichen und für sich entscheidenself. 🤪

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

Erstens sehen Formelemente so aus:

Und so sehen Tabellen in ihrer grundlegendsten Form aus:

Zum Abschluss wiederhole ich das Offensichtliche: Wenn Sie der Meinung sind, dass diese Art von Farben, Schriftarten, Stilen usw. als Standardeinstellungen großartig sind, Stillschweigend wird sich als willkommene Erleichterung erweisen.

Spektrum

Modern, flexibel, leicht - wenn Sie etwas mit diesen Eigenschaften suchen, ist Spectre einen Blick wert.

Lassen Sie mich meine Wahl der Adjektive für erklären Spektrum:

• Modern: Das Layoutsystem von Spectre basiert auf Flexbox, was zu den besten Dingen gehört, die uns modernes CSS gegeben hat. SimultanneoNormalerweise gibt es viele Einrichtungen und Werkzeuge, die in modernem CSS zu finden sind workflows oder andere Frameworks sind ebenfalls enthalten.
• Flexibel: Sie können das modularste und fortschrittlichste CSS-Framework schreiben, aber es nützt wenig, wenn dies nicht der Fall ist leicht anpassbar. Mir gefällt, dass die Anpassung ganz oben in ihren Dokumenten erwähnt wird. Folge dem Rabbit Loch, und Sie werden umfangreich finden Erläuterungen.
• Leicht: Wir befinden uns in einer Zeit, in der die Bedenken hinsichtlich der Webleistung im Aufwind sind. Jedes übertragene Kilobyte wird geprüft und kritisiert. Als solches packt Spectre alles in ein süßes 10-KB-Paket, das nicht für uns alle „zu viel“ sein sollte. 😝

Leicht zu sein bedeutet nicht, dass Spectre die Funktionalität opfert. Es gibt alles, was Sie als Bootstrap-Fan gewohnt sind: Komponenten (Akkordeons, Brotkrumen, Karten und mehr), Elemente (Formulare, Tabellen, Schaltflächen usw.), Layout (Gitter, Heldenbereich, Navigationsleiste usw.), Dienstprogramme (Lader, Spinner usw.) und mehr.

Was halte ich von Spectre? Ich bin mehr oder weniger überzeugt, aber es gibt ein paar Dinge, die ich erwähnen möchte. Erstens mag ich die standardmäßige Primärfarbe Blau nicht so sehr, daher ist es das erste, was ich in meinen Projekten tun würde, sie zu ändern. 😬 Zweitens denke ich, dass das CSS Grid im Jahr 2020 das beste Tool für Layouts ist; Ich finde Flexbox a bit Es ist seltsam, alle Layout-Dinge zu erledigen, daher wünschte ich, Spectre hätte Grid anstelle von Flex verwendetbox.

Aber das ist kaum ein Deal-Breaker, wenn ich mich schnell entwickeln und gute Ergebnisse erzielen kann. Also werde ich sagen, mach weiter und probiere Spectre furchtlos aus!

Grundierung

Grundierung ist nicht ein CSS-Framework oder eine Bibliothek. Es ist nicht einmal eine Sammlung von CSS-Klassen oder eine andere seltsame Wendung in der Terminologie.

Warum steht es dann auf dieser Liste? Zwei Gründe:

• It hat ein CSS-Framework.
• Es ist eines der umfassendsten und umwerfendsten Dinge, die Sie jemals sehen werden.

Ja, wie der Screenshot zeigt, ist Primer ein Designsystem, das von GitHub für den eigenen Gebrauch entwickelt wurde. Eventually, erkannten sie, dass dieses Ding leistungsstark und äußerst nützlich für Frontend- und visuelle Arbeiten war; Also haben sie es Open Source gemacht.

Ich habe mich bemüht, die richtigen Worte zu finden, um Primer zu beschreiben. Ihr eigenes Design System Team nennt es. . . Ja, ein Design-System, aber ich denke, der Anwendungsbereich ist weitaus breiter als das, was wir unter „Design-System“ verstehen.

Grundierung umfasst viele Dinge, deren Bedeutung möglicherweise nicht unmittelbar erkennbar istateganz offensichtlich. Zumindest für Backend-/Full-Stack-Entwickler. Schauen wir uns also an, was diese besonderen Dinge sind und warum sie besonders sind:

• Schnittstellenrichtlinien: In einem Ein-Personen-Team ist das Entwerfen und Warten von Benutzeroberflächen trivial. Aber fügen Sie dem Team drei weitere Leute hinzu – und noch dazu qualifizierte, erfolgreiche Leute – und Sie werden sehen, wie sich alles zu verschlechtern beginnt. 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 geliefert nice eingestellt von Richtlinien dass Sie heben oder an Ihre Bedürfnisse anpassen können.
• Figma Komponenten: Obwohl ich Entwickler bin, weiß ich genug über Design, um zu verstehen, dass das Fehlen einer eindeutigen Referenz / Verwendung von Komponenten im Verlauf des Projekts außer Kontrolle geraten kann. Wie soll die Taste aussehen, wenn sie beispielsweise im Dunkelmodus gedrückt wird? Wenn niemand dies dokumentiert hat und Druck besteht, zu liefern, gibt es verschiedene Varianten. Und so haben die Leute bei Primer ihre eigenen zur Verfügung gestellt Figma Komponenten, damit wir lernen und es besser machen können.
• CSS-Framework: Finally, das Ding, das verdient hat Grundierung ein Platz auf dieser Liste! 😄 Primer verfügt über ein modulares CSS-Framework im BEM-Stil, das separate Funktionen bietetate Stile für die Produkt- und Marketingseiten. Dies ist etwas, was GitHub aus Bequemlichkeitsgründen getan hat, und es steht Ihnen frei, es nicht zu berühren oder die Gesamtphilosophie so zu akzeptieren, wie sie ist. Auch wenn Sie nur das CSS interessiert, empfehle ich Ihnen, einen Blick darauf zu werfen hier.
• Symbole (Oktikonen): Jedes kohärente Designsystem hat seine eigenen Ansichten zu Symbolen. Zum Grundierung, die Antwort ist Octicons. Anscheinend gibt es nicht so viele Symbole. Trotzdem setze ich dies weiter oben auf die Liste, da Symbole Teil der absoluten Grundlagen sind: Wenn alles übereinstimmt, aber einige Symbole nicht übereinstimmen, ist das Ergebnis eine Benutzeroberfläche, die zu einer Bindehautentzündung führt. 😝
• Komponenten reagieren: Und da React die beliebteste Frontend-Bibliothek ist, haben die GitHub-Leute die CSS-Elemente natürlich als React codiert Komponenten, die jetzt für uns alle verfügbar sind!
• Präsentationen: Dieser Teil der Grundierung dreht sich alles darum, welche Designsprache bei der Präsentation vor Publikum verwendet werden soll (wie sie von den Leuten bei GitHub verwendet wird). internally). Schriftarten, Farben, Ränder, Kontraste – alle Entscheidungen sind bereits getroffen. Es steht Ihnen frei, sie zu studieren Richtlinien und entwickeln Sie Ihre.

Der größte Vorteil von Primer besteht darin, ihn als Ganzes zu umfassen. Dies ist möglicherweise nicht für alle möglich, und einige stellen möglicherweise sogar fest, dass ihre Designsprache mit der von GitHub in Konflikt steht. Und dann finden einige Leute einen bestimmten Teil (oder sogar einen Teil des Teils!) von Primer nützlich und laufen damit.

Egal wo Sie in diesem Spektrum stehen, Primer hat Ihnen etwas zu bieten: entweder reusable, hochwertige Design-Systemkomponenten oder Denkanstöße für Ihre eigenen processes und Richtlinien!

Fiktoan

Fiktoan ist ein intuitives Framework für Webdesigner, die Benutzeroberflächen erstellen möchten. Der Rahmen war created, um die Grenzen zwischen Entwicklern und Designern zu verwischen. 

Die Entwickler glauben, dass Designer die Benutzererfahrung und die Benutzeroberfläche vollständig kontrollieren sollten. Andererseits sollten sich Entwickler auf die Leistung und Dinge wie die Bereitstellung konzentrieren. 

Warum Fictoan verwenden?

• Eine Vielzahl von Komponenten: Fictoan besteht aus Hunderten von Komponenten, die in verschiedene Kategorien eingeteilt sindateblutrünstig. Wenn Sie beispielsweise nach einem Formular suchen, gibt es mehr als zehn Designs. 
• Open Source: Fictoan kann kostenlos verwendet werden, und Sie finden den Code auf GitHub. 
• Zugänglich: Der platform ist mit einem starken Fokus auf Zugänglichkeit gestaltet. Designer können den verfügbaren Code auch anpassen, um die Barrierefreiheit zu verbessern. 
• Einfacher Einstieg: Fictoan war created für React-Projekte.

Sie können erstellenate eine einfache React-App zur Demonstrationate wie es funktioniert. Verwenden Sie diesen Befehl;

npx create-react-app fictoan-app

cd fictoan-app

Sie können Ihrer React-App jetzt fictoan wie folgt hinzufügen:

npm install fictoan-react

Wir können das Projekt in einem Code-Editor öffnen und erstellenate ein einfacher Knopf. 

<Button kind="primary">

  Button

</Button>

• 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 Veröffentlichung auf GitHub gepusht. Der platForm hat weniger als 10 Forks und hat noch einen langen Weg vor sich attract die Massen.  
• Eingeschränkte Funktionen: Obwohl Fictoan einige erstaunliche moderne Designs hat, hat es noch einen langen Weg vor sich, um mit anderen wie Bootstrap in Bezug auf Funktionen zu konkurrieren. 
• Verlässt sich auf Abhängigkeiten: Fictoan hängt von einigen Bibliotheken ab, wie z styled-components Funktionieren. So viele Abhängigkeiten zu haben, kann zu einer großen App-Größe führen. 

Vanille 

Vanille ist ein einfaches, erweiterbares CSS-Framework, das in Syntactic geschrieben istally Awesome Style Sheets (Sass), ein hochgestelltes CSS. In den meisten Fällen wird Vanille verwendet Kanonisch Produkte wie Ubuntu und JAAS. 

Um mit der Verwendung von Vanille zu beginnen, create eine Projektdatei und Navigationate hinein. Anschließend können Sie Vanilla mit installieren yarn or npm.

yarn add vanilla-framework

Or

npm install vanilla-framework

Alternativ können Sie einen CDN-Link in der hinzufügen <head> Abschnitt Ihrer HTML-Datei, 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 Vanille verwenden?

• Es reagiert: Mit Vanilla Framework gestaltete Apps reagieren auf unterschiedliche Bildschirmgrößen, z. B. Smartphones und PCs. 
• Geschrieben in Sass: Sass macht definierend Variablen und Mixins in Ihrem CSS Code einfach. 
• Mehrere browsers-Unterstützung: Sie können Vanilla-Apps auf verschiedenen b verwendenrowsProgramme wie Firefox, Chrome und Safari. 
• Composable: Sie können den von Ihnen benötigten spezifischen Code einfügen oder das gesamte Framework in Ihrem Projekt installieren. 
• Open Source: Der Quellcode ist Open Source, Createentwickelt und gepflegt vom Canonical Web Team. 

Nachteile der Verwendung von Vanille

• Begrenzte Anpassungsmöglichkeiten: Vanilla bietet möglicherweise nicht die Anpassungsstufen, die manche Entwickler wünschen.
• Eingeschränkte Dokumentation: Im Vergleich zu anderen CSS-Frameworks wie Foundation und Bootstrap ist die Dokumentation von Vanilla nicht so gründlich. 
• Fehlende lebendige Community: Vanilla hat im Vergleich zu anderen Frameworks keine große Community. 

Welches CSS-Framework ist das beste?

Geben Sie zu, Sie haben bereits ähnliche Fragen gestellt und die folgende enttäuschende Antwort erhalten: keine. 😀 Auswahl eines Frameworks (oder a Werkzeug, oder sogar eine Person in Ihrem Leben) hängt von vielen Faktoren ab.

Wenn Sie meinen Rat wollen, hier ist er: Schalten Sie den Lärm aus. Nur weil die Leute verrückt nach etwas Neuem und Glänzenden sind, heißt das nicht, dass Sie es lernen müssen, oder Sie werden zurückgelassen. Neue Dinge auszuprobieren ist toll, aber auf der Suche nach dem perfekten Werkzeug im Kreis herumzulaufen ist, nun ja, Verschwendung.