CSS-Frameworks gibt es schon seit Jahren, aber die Einführung responsiver Design-Praktiken hat viele unserer alten Favoriten nutzlos gemacht. Glücklicherweise haben viele wirklich talentierte Entwickler die Lücke mit der nächsten Generation von CSS-Frameworks und Boilerplates geschlossen.
Es gibt bereits eine Menge dieser Dinge im Umlauf. Jeder hat eine Liste, aber niemand führt Sie durch die Unterschiede zwischen den einzelnen Gerüsten und Boilerplates, sodass Sie eine fundierte Entscheidung treffen können. Das ist heute unser Ziel. Folgen Sie uns, während wir uns ansehen, was jedes dieser 22 responsiven CSS-Frameworks und Boilerplates einzigartig macht.
Gumby
Das Gumby-Framework nimmt das 960-Raster, an dem wir uns alle die Zähne geschnitten haben, an und bringt es mit einem ansprechenden Touch in die moderne Zeit des Webdesigns. Außerdem gibt es vordefinierte Stile für Formulare, Schaltflächen, Umschaltflächen, Dropdown-Menüs, Registerkarten und mehr.
Das semantische Gittersystem
Wenn Sie Gittersysteme und ihr aufgeblähtes, nicht semantisches Markup hassen, ist dieses für Sie. Das Semantic-Grid-System nutzt die Möglichkeiten von CSS-Präprozessoren (LESS, Sass und Stylus), um anpassbare Variablen für Dinge wie Rinne und Spaltenbreite zu erstellen. Alles was Sie tun müssen, ist ein paar vorgefertigte Mixins in Ihrem CSS, kein zusätzliches Markup erforderlich!
Gridless
Gridless ist eine leistungsstarke Heizplatte, die sich mithilfe von Mobile First Responsive Web Design an die Breite des Geräts anpasst. Es ist außerdem mit tollen Funktionen wie CSS-Normalisierung, IE-Fehlerbehebungen und Typografiestilen ausgestattet.
Rahmenlos
Frameless ist schwer zu klassifizieren, da es technisch eher eine empfehlenswerte Vorgehensweise ist, als auf einen realen Satz von Dateien zuzugreifen, die Sie herunterladen können. Es gibt drei Schritte: Erstellen Sie zunächst ein reguläres Raster mit fester Breite, lassen Sie es dann unendlich oft wiederholen und beenden Sie es, indem Sie es im Ansichtsfenster zentrieren.
Die Website gibt ausdrücklich an, dass Frameless kein Framework ist und dass keine Dateien heruntergeladen werden können. Trotz dieser Behauptung gibt es tatsächlich einige grundlegende Vorlagen, die Ihnen den Einstieg erleichtern.
Proportionalgitter
Mit proportionalen Rastern werden einige große Probleme gelöst, die beim Versuch des ansprechenden CSS-Layouts auftreten, nämlich das Schachteln von Rastern und das Wrestling mit prozentualen Werten in den unterschiedlichsten Ansichtsfenstern.
Proportional Grids verwendet CSS-Box-Sizing, um eine Lösung zu erstellen, mit der feste Rinnen (ems / rems) mit Flüssigkeitssäulen gemischt werden können. Der Abstand zwischen den Spalten bleibt an jedem Haltepunkt im Verhältnis zur Basisschriftgröße gleich. Spalten werden durch einen Anteil definiert, z. eine Hälfte, ein Drittel, zwei Drittel und kann beliebig oft wiederverwendet werden, selbst wenn sie verschachtelt sind.
Der Goldlöckchen-Ansatz
Der Goldilocks-Ansatz zielt darauf ab, die Tendenz von responsiven Designs zu reduzieren, sich auf die Unterstützung bestimmter Geräte zu neigen. Stattdessen wird ein universelles Design angestrebt, das von keinem Gerät abhängig ist.
Der Goldilocks-Ansatz verwendet eine Kombination aus ems, max-width, Medienabfragen und Musterumsetzungen, um drei Zustände zu berücksichtigen, in denen Ihre Designs auflösungsunabhängig sind.
Twitter Bootstrap
Twitter Bootstrap braucht keine Einführung. Es ist eine der größten und bösartigsten CSS-Boilerplates im Internet und ist der Ausgangspunkt für zahlreiche professionelle und persönliche Websites von Entwicklern auf der ganzen Welt.
Twitter Bootstrap enthält ein responsives Grid-System, zusätzlich zu einer Vielzahl von vorgefertigten Elementen wie Formularen, Schaltflächen, Navigationsmenüs und mehr. Schauen Sie sich unsere vollständige Einführung hier an.
Gründung von ZURB
Foundation ist der bedeutendste Konkurrent von Twitter Bootstrap, da die beiden Projekte sehr ähnlich sind. Wie Bootstrap bietet Foundation Ihnen ein responsives Grid sowie verschiedene UI-Elemente.
Foundation 3 wurde erst kürzlich gestartet. Wenn Sie sich also das Projekt seit einiger Zeit nicht mehr angesehen haben, ist es an der Zeit, vorbeizuschauen und es auszuprobieren. Es ist zweifellos eines der hilfreichsten und gründlichsten Rahmen, die Sie überall finden können.
Skelett
Skelett war eine der ersten reaktionsschnellen Platten, die auftauchte, und es ist immer noch eine der besten. Im Konzept ist es ein bisschen wie bei Foundation, nur fühlt es sich leichter an (Typ, Schaltflächen und Formulare sind die einzigen enthaltenen Elemente der Benutzeroberfläche).
Sehen Sie sich unser Skeleton-Tutorial an, um zu sehen, wie unglaublich einfach es ist, mit dem reaktionsschnellen Design innerhalb weniger Minuten einsatzbereit zu sein.
Amazium
Amazium ähnelt Gumby in der Hinsicht, dass es ein reaktionsfähiges Gitter ist, das auf den 960-Gittertechniken von alt aufbaut. Das Framework wurde zwar vor kurzem aktualisiert und reicht nun bis auf 1.200 Pixel, sodass Sie große Displays nutzen können. Es beinhaltet sogar Unterstützung für Retina-Displays!
Goldenes Rastersystem
Das Golden Grid System nennt sich "Klappgitter". Dies ist wirklich nur eine schicke Möglichkeit zu sagen, dass Medienabfragen verwendet werden, um das ursprüngliche sechzehn Spaltenlayout in acht und dann in vier Spalten zu reduzieren, wenn sich das Ansichtsfenster verengt.
Wie bei einigen anderen Gittern, die wir bisher gesehen haben, verwendet Golden Grid System Rinnen auf Ems-Basis, so dass die Rinnen immer im Verhältnis zum Inhalt bleiben.
Das 1140px-CSS-Rastersystem
Dies ist ein ziemlich normales Rastersystem ohne etwas Besonderes. Es beginnt mit einem 12-Säulen-Flüssigkeitsgitter, das prozentuale Rinnen verwendet, und eignet sich hervorragend für 1.280- und 1.140px-Monitore. Da das Ansichtsfenster kleiner wird, werden einige einfache Medienabfragen zum Umfließen des Inhalts verwendet.
StackLayout
StackLayout ist für die Rebellen, es wird sich sehr von anderen Frameworks unterscheiden, die Sie ausprobiert haben. Tatsächlich entstand es aus einer Abneigung gegen typische CSS-Layout-Frameworks.
Grundlegend ist dabei, dass StackLayout den Inline-Block als Grundstein für ein einzigartiges Layout-System verwendet. Das System ist ein bisschen schrullig, aber trotzdem ziemlich beeindruckend. Sehen Sie sich hier eine Komplettlösung an.
SimpleGrid
SimpleGrid ist ein weiteres einzigartiges Layoutsystem, an dem Sie Freude haben werden, wenn Sie es lieben, mit diesen Dingen herumzuspielen, genauso wie ich. Das Raster basiert auf vier verschiedenen Bildschirmbereichen: Bildschirme mit einer Breite von weniger als 720px, Bildschirme mit einer Breite von mehr als 720px, Bildschirme mit einer Breite von mehr als 985px und Bildschirme mit einer Breite von mehr als 1235px.
Um das System zu implementieren, verwenden Sie? Slot? Klassen aus vier und sechs Spalten. Das hört sich kompliziert an, ist aber tatsächlich dem Namen treu und recht einfach zu implementieren.
Grundlinienraster
Das Fluid-Grundlinienraster ist auf starke Typografie ausgerichtet, die an einem Grundlinienraster haftet. Es enthält auch ein dreispaltiges Klappgitter, das einen hilfreichen Ausgangspunkt und keinen zu befolgenden Standard darstellt.
Säulenförmig
Columnal ist eine Art Hybridgittersystem, das die besten Elemente aus verschiedenen anderen Frameworks übernimmt. Es hat die elastische DNA des 1140px-CSS-Rastersystems mit einigen 960.gs. Es ist ziemlich normal, aber wenn die anderen nicht gut passen, könnten Sie es ausprobieren.
Inuit.css
Inuit.css ist ein großartiges Framework, das im Hinblick auf Erweiterbarkeit konzipiert wurde. Verwenden Sie den benutzerdefinierten Grid-Builder, um ein eigenes responsives Grid zu erstellen, und laden Sie dann einige Iglus (Plugins) herunter, um das Framework sinnvoll zu erweitern.
320 und höher
320 and Up ist wie eine Sammlung von Webdesign-Schlagworten (auf eine gute Art und Weise). Es enthält ein responsives Layout-System, das die mobile zuerst verwendet. Mentalität, zusammen mit den visuellen Stilen von Bootstrap, den Symbolen „Awesome Icons“, Modernizr, Selectivizr, LESS und Sass. Es ist eine beeindruckende kleine Toolbox mit Leckereien, die Sie meiner Meinung nach genießen werden.
Susy: Responsive Raster für Kompass
Dies ist für Super-Nerds wie ich, die Layout-Systeme sowie Sass und Compass lieben. Erstellen Sie Ihre Layouts in nur wenigen Minuten mit der Magie von Mixins und Variablen.
Da Compass vor kurzem die systemeigene Unterstützung für Netze vollständig eingestellt hat, sollte Susy sich für diejenigen als nützlich erweisen, die sie vermissen.
Initializr - Responsive HTML5-Vorlage
Initializr ist ein Tool, mit dem Sie Ihre HTML5-Projekte schnell und einfach mit HTML5-Boilerplate, Bootstrap oder einer neuen responsiven Boilerplate starten können.
Die Auswahl der Responsive-Vorlage ist nur der Anfang. Von dort können Sie Ihren Download individuell anpassen, indem Sie aus allen Ressourcen auswählen, die Sie normalerweise benötigen, z. B. Modernizr und LESS.
Noch eine mobile Heizplatte
YAMB ist ein hervorragender Ausgangspunkt für responsive Webprojekte, die auf einigen wichtigen Funktionen basieren: ein responsives Fluidgitter, Dropdown-Navigationsmenüs, die automatisch zu Auswahlfeldern auf kleinen Bildschirmen werden, und responsive Bilder / Diashows.
Ich finde die Website ziemlich hässlich, aber das Toolset selbst ist ziemlich praktisch!
Wirefy
Wirefy wurde speziell für schnelles reaktives Wireframing-Experiment entwickelt. Es verwendet eine modifizierte Version des sechzehn-spaltigen 960-Gitters zusammen mit einigen Bootstrap-ähnlichen Oberflächenelementen (Menüs, Formulare, Diashows, Schaltflächen, Bilder usw.).
Welches ist dein Favorit?
Unweigerlich ziehen diese Arten von Posts Kommentare an, die das Bedürfnis haben, den gesamten Begriff der Verwendung von Vorlagen oder Rastersystemen für das Webdesign zu diskreditieren. Sie sind einfach nicht für alle und ich respektiere Ihre Meinung, wenn Sie sie nicht leiden können.
Wenn Sie sich jedoch mit Gittersystemen auskennen, würde ich mich sehr über Ihr Feedback zu den oben genannten Optionen freuen. Welche haben Sie ausprobiert und was haben Sie davon gehalten? Welches ist dein Favorit?