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, das so einfach und vernünftig klingt, wie das Zentrieren einer Box in einer Box, ist in CSS unglaublich schwierig zu bewerkstelligen. Es sei denn, Sie sind ihm schon einmal begegnet. Und das Code-Snippet irgendwo gespeichert. Und selbst wenn Sie es schaffen, es durchzuziehen, gibt es immer die lauernde Angst, dass es irgendwo in einem dummen Browser schrecklich kaputt gehen könnte!

CSS steht zusammen mit JavaScript an erster Stelle der „notwendigen Web-Übel“. Ein Standard, der willkürlich entstanden ist, von verschiedenen Browser-Herstellern unterschiedlich interpretiert wurde und mittlerweile so widersprüchlich ist, dass sich niemand mehr als „CSS-Experte“ zu bezeichnen wagt.

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 wird für die Einführung von Responsive Design in großem Maßstab gewürdigt. Es war der erste Rahmen, der die Philosophie von „Mobile-First“ förderte. Das Entwerfen für kleinere Bildschirmgrößen war kein eigenständiges Projekt mehr. Alles, was Sie tun mussten, war, die relevanten Bootstrap-Klassen einzuschließen, und das Design wurde automatisch an verschiedene Bildschirmgrößen angepasst (na ja, fast).

Responsive Design in Bootstrap (4.0 vs. 3.0)

Bootstrap erzielte ein reaktionsschnelles Design, indem es die Idee eines Rasters einführte. Ein Raster ist eine unsichtbare Aufteilung des Bildschirms in Spalten (zusammen mit der Breite). Wenn Sie beispielsweise drei „Kästchen“ haben, die Sie auf großen Bildschirmen nebeneinander, auf kleineren Bildschirmen jedoch vertikal positionieren möchten, gehen Sie folgendermaßen vor:

 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 Browsern direkt unterstützt werden. In den unteren Versionen von Bootstrap wurde das Raster als insgesamt 12 Spalten definiert, was zu Code wie z

Damit ein Div ein Drittel der Bildschirmbreite bei großen Geräten und die Hälfte der Breite bei mittelgroßen Geräten einnimmt. Die Syntax ist jetzt viel angenehmer, erfordert jedoch Vertrautheit mit Flexbox.

Bootstrap-Profis

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

Rapid-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, um den HTML-Code zu schreiben und dann die entsprechenden CSS-Klassen anzuwenden, lässt die Reaktionsfähigkeit lebendig werden.
Großes Ökosystem: Bis heute verfügt Bootstrap über das größte Ökosystem unter den Front-End-Frameworks. Die Anzahl der mit Bootstrap erstellten Website-Layouts, -Themen, Admin-Panels, UI-Komponenten usw. ist umwerfend und wird immer besser. Für Berater und Produktunternehmen bedeutet dies, dass vorgefertigte Artikel und Community-Support immer ausreichend sind.
Unterstützt von Twitter: Ein aufkommender Trend bei Open Source ist der Anstieg von Projekten, die von einer kommerziellen Einheit gesponsert werden. Meistens bauen diese Unternehmen profitable Geschäfte rund um ihr Angebot auf. Kotlin (JetBrains), WordPress (Automattic, Inc.), Angular (Google), React (Facebook) usw. sind einige Beispiele. Wenn ein Projekt von einer etablierten Einheit unterstützt wird und keine Einzelausstellung ist, gibt es der Community (insbesondere den Unternehmenskunden) das Vertrauen, dass das Projekt eine klare Roadmap und eine langfristige Zukunft haben wird.
Eine große Sammlung von Komponenten: Bootstrap bietet sofort 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 bedeutet dies praktisch, dass kein dediziertes Front-End-Team erforderlich ist.
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 WENIGER (wie es kein Entwickler mit Selbstachtung tun sollte, oder?), Aber hey, es gibt massive Projekte, die auf WENIGER angewiesen sind. Natürlich können Sie keine auswählen und Ihre einfachen CSS-Dateien ausschreiben.

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 ist ein Framework mit einer Meinung. Mit anderen Worten, es enthält Ideen zu Layouts, und Sie arbeiten besonders hart, wenn Sie möchten, dass es anders aussieht / sich anders verhält. Berücksichtigen Sie die Standard-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 das Limit von 600px anstreben möchten? Nun, viel Glück damit! Dies ist bei fast allen anderen Komponenten im Bootstrap der Fall: Zeilen und Container haben ihre Standardauffüllung, Schaltflächen haben Farben und Ränder, die ohne großen Aufwand nur sehr schwer 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 dies zumindest eine gewisse Wahrheit ist. Foundation wurde entwickelt, um auf natürliche Weise zum Rails-Framework zu passen, und einige der „zenartigen“ Leitprinzipien von Rails sind bei der Arbeit zu sehen.

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 technisch falsch zu sagen, dass Foundation ein CSS-Framework ist. Ich meine, es ist, aber es wurde als große und modulare Sammlung von gebaut Werkzeuge das zielt darauf ab, fast alle Arten von Front-End-Problemen zu lösen. Es gibt separate Framework-Angebote für Websites und E-Mails, die stark für die jeweiligen Domains optimiert sind. Foundation verfügt außerdem über eine Befehlszeilenschnittstelle (Command Line Interface, CLI), die für Entwickler, die mit Webpack oder anderen Modulbündlern arbeiten, wie Musik klingt.
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: Während Bootstrap von Twitter erstellt wird, ist es ein Nebenprojekt und ein sehr kleiner Teil des Gesamtbildes. Das Unternehmen hinter der Stiftung (ZURB) ist jedoch bestrebt, diese zu nutzen, weiterzuentwickeln und zu fördern. Für Großkunden werden Schulungen und professionelle Beratung angeboten. Dies ist ideal für Unternehmen, die auf massive Projekte abzielen und bereit sind, dafür zu zahlen.

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 Schlimmeres an Vanille-CSS gewöhnt sind, wird Foundation sich wie eine unendliche Explosion der Komplexität anfühlen. Ebenen in Ebenen, Komponenten mit Komponenten, endlose Anpassungsmöglichkeiten. . . Schon bald werden Sie anfangen, die Nützlichkeit des Lebens selbst in Frage zu stellen! Andererseits hat die Stiftung ein ganz anderes Ziel und kann nicht dafür verantwortlich gemacht werden.
Zu viele Optionen: Manchmal möchte man einfach nur Scheiße machen und sich später um Perfektion sorgen. In solchen Zeiten ist es frustrierend, zu viele Optionen mit geringfügigen Abweichungen zu erhalten. Denken Sie zum Beispiel daran, ein Subway-Sandwich bestellen zu müssen, wenn Sie so hungrig sind, dass Sie Schlamm essen könnten. Natürlich ist Foundation nicht für solche Zeiten.
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 in kurzer Zeit einen Namen gemacht. Es ist beitractiveDie Hauptsache liegt in einem strengen, reinen CSS-Ansatz (es gibt keine JavaScript-Komponenten) und eleganten Standardeinstellungen, womit viele Entwickler mit einem guten Auge für Design ein Problem haben, wenn sie mit Bootstrap arbeiten.

Ein Großteil der Dynamik von Bulma beruht auf hohen Akzeptanzraten bei der Laravel-Community (ein PHP-Webframework, falls Sie es nicht wussten), was Vue.js sicher zu einem Höhepunkt der Popularität verholfen hat 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 sehr modular aufgebaut und wurde entwickelt, um die praktischen, alltäglichen Probleme zu lösen, auf die kleinere Teams und einzelne Entwickler stoßen. Sie werden feststellen, dass Bulma sehr einfach 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. Dies hilft Ihnen, 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 leidenschaftliche Community. Wenn Sie also all den Flaum beseitigen und dennoch in Rekordzeit elegant aussehende Benutzeroberflächen entwickeln möchten, ist Bulma der richtige Weg. Für Bootstrap-Entwickler hat Bulma einen separaten Abschnitt, um sie zu überzeugen und ihnen bei der Migration zu helfen.

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, denke ich, dass Uikit die Krone für UI-Design übernimmt und dem Material Design von Google mehrere Meilen voraus ist.

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 in sich geschlossenes System, und Sie können es nicht ohne großen Aufwand ändern oder erweitern.

Semantic UI

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

Bootstrap 4 deckt all dies ab und ist auch vollständig anpassbar. Ein Vorteil der semantischen Benutzeroberfläche ist jedoch, dass sie standardmäßig zu gut aussehenden Layouts führt. Trotzdem sieht es nicht besonders gut aus, weshalb ich es später auf meine Liste setze.

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 zu diesem Zeitpunkt ein wenig bekannter Rahmen, aber es ist eine faszinierende und erfrischende Idee. Susy ist ein weiteres Framework mit reinem Layout und verzichtet auf alle vordefinierten Ideen von Float, Grid, Flexbox, Tabellen oder anderen Dingen 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 denke, dass der Code ziemlich selbsterklärend ist, obwohl er nicht für diejenigen gedacht ist, die es eilig haben. 🙂 Susy ist absolut sinnvoll, wenn Sie die Aufblähung, die moderne Frameworks Ihnen auferlegen, satt haben und Layoutanforderungen haben, von denen Sie wissen, dass kein gewöhnliches Framework sie erfüllen kann.

Materialize

Wenn Sie in Googles Material Design verliebt sind, ist Materialise ein Rahmen du wirst es genießen. Das Beste ist, dass es nur eine Handvoll Komponenten und Klassen zu lernen gibt und sich darauf konzentriert, Sie so schnell wie möglich produktiv zu machen. Es gibt nur wenige Anpassungsoptionen, und Materialise folgt dem beliebten 12-Spalten-Rasterformat, das von Bootstrap festgelegt wurde.

Wenn Sie mich jedoch fragen, a Material Design wird so üblich und ist so. . . Standardmäßig flach, dass wir uns ziemlich bald darüber beschweren werden, wie wir es mit dem Problem tun, dass alle Websites von Bootstrap gleich aussehen. Trotzdem ist es zunächst ein schöner Rahmen.

Pure

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 die Extrameile gegangen und es 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 sich nicht einmal als CSS-Framework, Bibliothek oder gar Modul bezeichnet. Es ist Kochplatteund 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!

Milligram

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 lustige kleine Version von CSS-Frameworks, mit denen Sie gerne arbeiten werden. Das Erweitern ist einfach und mit ein paar Zeilen benutzerdefiniertem CSS können Sie das Erscheinungsbild nach Ihren Wünschen ändern.

Tailwind CSS

Tailwind befürwortete einen Schreibstil und die Verwendung von CSS, der viele vor Ekel schreien ließ. Ich meine, sehen Sie sich die Verwendung von CSS-Klassen im folgenden Code an (entnommen aus 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.

Heute hat Utility-basiertes CSS eine beträchtliche Delle gemacht. Sehen Sie sich diesen Bootstrap 5-Code an und sehen Sie, wie häufig Dienstprogrammklassen geworden sind:

<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: Jetzt können wir über Produktivität den ganzen Tag streiten und niemals irgendwohin gelangen. Entwickler, die Tailwind ausschließlich (insbesondere für große Projekte) eingeführt haben, sagen jedoch, dass sie viel produktiver sind. Sie müssen jedoch im Voraus nachhaltige Anstrengungen unternehmen, da Rückenwind nur dann für Sie funktioniert, 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. Das Problem ist in CSS noch schwerwiegender, da ein Projekt Hunderte (oder sogar Tausende) Klassen enthalten kann. Ein weiteres Problem ist das Umschalten des Kontexts: Wechseln Sie ständig zwischen HTML und CSS, um zu sehen, wie sich das CSS ändert. Mit Tailwind sind die Namensentscheidungen bereits für Sie getroffen, und da Sie immer nur Klassen zu HTML hinzufügen / daraus entfernen, gibt es keine Kontextumschaltung.
Wiederverwendung von Code: Wenn Sie feststellen, dass Sie einige nützliche Klassen wiederverwenden, indem Sie sie projektübergreifend kopieren, bietet Tailwind eine Funktion namens Components, um dieses Problem elegant zu lösen. Lesen Sie mehr über diese Funktion hier .

Für viele war Rückenwind ein Hauch frischer Luft, den sie dringend brauchten. Wenn Sie Ihre aktuelle CSS-Bibliothek satt haben und etwas Radikales und Neues ausprobieren möchten, ist Rückenwind genau das, wonach Sie suchen!

Tacit

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 dies im Allgemeinen bedeutet, dass das Risiko, verlassen zu werden, sehr hoch ist. Aber dann kann ich mir auch ein paar positive Dinge vorstellen: 1) Die Projekt ist auf GitHub und wenn Sie ein Entwickler sind und Tacit unterstützen / erweitern möchten, wissen Sie, was zu tun ist. 😉 2) CSS ist in Bezug auf Änderung oder Entwicklung nicht wie JavaScript. Welches Styling Sie heute verwenden, wird von Browsern sehr lange unterstützt.

Also, was genau ist diese stillschweigende Sache?

stillschweigendes CSS-Framework-e1608729803870

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 mein Wort dafür nehmen möchten, würde ich sagen, dass der gewählte Designstil „sehr gut“ ist. Eigentlich finde ich es noch angenehmer als die semantische Benutzeroberfläche, eines der beliebtesten CSS-Frameworks / Bibliotheken da draußen! Ohne in einen Flammenkrieg zu geraten und Screenshot-Vergleiche nebeneinander anzustellen, werde ich das Thema fallen lassen, indem ich sage, dass Design subjektiv ist. Aber Sie können vergleichen und selbst entscheiden. 🤪

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

Erstens sehen Formelemente so aus:

stillschweigende CSS-Frameworks-Formulare

Und so sehen Tabellen in ihrer grundlegendsten Form aus:

stillschweigende CSS-Frameworks-Tabellen

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.

Spectre

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 dem Besten gehört, was uns modernes CSS gegeben hat. Gleichzeitig finden sich viele Möglichkeiten und Werkzeuge in modernem CSS 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, wie die Anpassung ganz oben in ihren Dokumenten erwähnt wird. Folgen Sie dem Kaninchenbau, und Sie werden umfangreiche 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 denke ich über Spectre? Ich bin mehr oder weniger verkauft, aber es gibt ein paar Dinge, die ich erwähnen möchte. Erstens mag ich die standardmäßige primäre blaue Farbe 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-Raster im Jahr 2020 das beste Werkzeug für Layouts ist. Ich finde Flexbox etwas seltsam, um alle Layout-Dinge zu erledigen, also wünschte ich mir, Spectre hätte Grid anstelle von Flexbox verwendet.

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!

Primer

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 sagt, ist Primer ein Design-System, das von GitHub für den eigenen Gebrauch entwickelt wurde. Schließlich stellten sie fest, dass dieses Ding mächtig und äußerst nützlich für das Frontend und die visuelle Arbeit war. Also machten sie es Open Source.

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 sofort offensichtlich ist. Zumindest für Backend- / Full-Stack-Entwickler. Schauen wir uns also an, was diese besonderen Dinge sind, warum diese besonderen sind:

Schnittstellenrichtlinien: In einem Ein-Personen-Team ist das Entwerfen und Verwalten von Benutzeroberflächen trivial. Wenn Sie dem Team jedoch drei weitere Personen hinzufügen - und noch dazu qualifizierte, erfolgreiche Mitarbeiter -, können Sie sehen, wie sich alles verschlechtert. Der Grund ist das Fehlen klar definierter und strikt durchgesetzter Richtlinien, sodass jeder weiß, was in jeder Situation zu tun ist. Primer kommt mit einem schönen Satz 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: Endlich das, was verdient hat Grundierung ein Platz auf dieser Liste! 😄 Primer verfügt über ein modulares CSS-Framework im BEM-Stil, das separate Stile für die Produkt- und Marketing-Seiten bereitstellt. Dies ist etwas, was GitHub für ihre Bequemlichkeit getan hat, und Sie können es nicht berühren oder die allgemeine Philosophie so akzeptieren, wie sie ist. Auch wenn es nur das CSS ist, das Sie 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 Hier geht es darum, welche Designsprache für die Präsentation vor Publikum verwendet werden soll (wie sie von Leuten bei GitHub intern verwendet wird). Schriftarten, Farben, Ränder, Kontraste - alle Entscheidungen wurden bereits getroffen. Sie können ihre 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 auf diesem Spektrum stehen, Primer hat Ihnen etwas zu bieten: entweder wiederverwendbare, hochwertige Design-Systemkomponenten oder Denkanstöße für Ihre eigenen Prozesse und Richtlinien!

Fictoan

Fiktoan ist ein intuitives Framework für Webdesigner, die Benutzeroberflächen erstellen möchten. Das Framework wurde geschaffen, um die Grenzen zwischen den Entwicklern und den 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 hat Hunderte von Komponenten, die in verschiedene Kategorien eingeteilt sind. 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: Die Plattform ist mit einem starken Fokus auf Barrierefreiheit konzipiert. Designer können auch den verfügbaren Code anpassen, um die Zugänglichkeit zu verbessern.
Einfacher Einstieg: Fictoan wurde für React-Projekte erstellt.

Sie können eine einfache React-App erstellen, um zu demonstrieren, wie sie 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 eine einfache Schaltfläche erstellen.

<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 Version auf GitHub gepusht. Die Plattform hat weniger als 10 Gabeln und hat noch einen langen Weg vor sich, um die Massen anzuziehen.
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.

Vanilla

Vanille ist ein einfaches, erweiterbares CSS-Framework, das in Syntactically Awesome Style Sheets (Sass), einem hochgestellten CSS, geschrieben wurde. Vanille wird in den meisten verwendet Kanonisch Produkte wie Ubuntu und JAAS.

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

yarn add vanilla-framework

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.
Unterstützung mehrerer Browser: Sie können Vanilla-Apps in verschiedenen Browsern wie Firefox, Chrome und Safari verwenden.
Zusammensetzbar: 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, erstellt 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.