5 Top-Grid-Systeme für Webdesigner
Wenn ich ein neues Projekt beginne, beginnt die halbe Miete auf dem rechten Fuß. Ich stelle mir vor, andere fühlen sich genauso, wenn sie in unzähligen Tools und Blogs navigieren, um herauszufinden, was neu und empfohlen ist. Unabhängig davon, welches Problem wir lösen möchten, sind immer einige Elemente erforderlich, und eines davon ist ein Rastersystem.
Während Bootstrap und Foundation in vielen Fällen großartig sind, kann es viel Arbeit kosten, sie für jedes Projekt anzupassen, und die Vielzahl von Optionen kann sie schwer und klobig machen, mit vielen unnötigen Funktionen. Bei Gittern ist es wichtig, ein leichtes Werkzeug zu finden, mit dem Sie sofort arbeiten können. Es sollte CSS-Klassen haben, die einfach zu verwenden sind, und es sollte reaktionsschnell und designfreundlich sein.
Viele Tools gliedern sich nach Gerätetyp (z. B. Handy, Tablet, Desktop), aber mit verschiedenen Modellen und Retina-Displays ist dies nicht so einfach. Befolgen Sie die Anweisungen von Trent Walton: Führen Sie einen Haltepunkt ein, wenn das Design selbst bricht und nicht, wenn eine neue Gerätegröße beginnen soll.
Gute Rastersysteme beruhen auf Entwurfsprinzipien, um bessere Haltepunkte zu bestimmen: geeignete Spaltenbreiten für die Typografie; Gitter mit 12, 16, 18 oder 24 Spalten, die Flexibilität bei der Aufteilung von Spalten ermöglichen; und Konsistenz im Abstand.
Das Verlassen auf saubere und leichte Rastersysteme erleichtert das Codieren eines neuen Standorts erheblich. Es nimmt einige Rätselraten mit der Struktur, aber ohne die Möglichkeiten einzuschränken.
01. Einfaches Gitter
Simple Grid ist Open Source und hält es einfach mit einem 12-Spalten-Raster, leicht zu merkenden Klassennamen und einer schönen Dokumentation.
02. Rein
Pure wird häufig von einem meiner Kollegen bei The Iron Yard verwendet. Die Dokumentation ist so gut gemacht, als würde sie Entwicklern bessere CSS-, Design- und Reaktionspraktiken vermitteln.
03. Flexbox Grid
Flexbox Grid ist besonders interessant, da es eines der ersten Grid-Systeme ist, das ich gesehen habe und das speziell die Flex-Anzeigeoption in CSS verwendet.
04. Bootstrap
Bootstrap ist auf die Front-End-Entwicklung zugeschnitten und enthält eine Vielzahl von HTML- und CSS-basierten Entwurfsvorlagen. Es ist Open Source, kostenlos und enthält JavaScript-Erweiterungen.
05. Stiftung
Foundation eignet sich für jedes Gerät und jedes Medium und ist eine vielseitige Plattform für die Erstellung reaktionsschneller Front-End-Frameworks. Es ist einfach zu bedienen und äußerst flexibel, und das Team von Foundation aktualisiert ständig seine Ressourcen.
Dieser Artikel wurde ursprünglich in veröffentlicht Netzmagazin Ausgabe 282. Kaufen Sie es hier.
