Einer der interessantesten und nützlichsten responsiven Grid-Generatoren ist ein Tool namens Gridpak, mit dem Sie eine einfache und unterhaltsame Benutzeroberfläche verwenden können, um flüssige, medienabfragegesteuerte Grids zu erstellen. Wir haben Gridpak vor rund einem Jahr überprüft und sind zu dem Schluss gekommen, dass es zwar nützlich ist, sich aber im Hinblick auf die Benutzerfreundlichkeit bei der Implementierung des Codes als unzureichend erwies.
Die Entwickler haben in diesem Bereich einige Fortschritte gemacht und ich denke, es wird Zeit, dass wir uns das noch einmal ansehen. Begleiten Sie uns, um zu erfahren, wie Gridpak sein Code-Angebot und seine Struktur verbessert hat, um Benutzern ein besseres und strafferes Erlebnis zu bieten.
Triff Gridpak
Gridpak wurde bereits in etlichen responsive Webdesign-Toolrunden vorgestellt, so dass Sie wahrscheinlich ein paar Mal darauf gestoßen sind. Hier ist ein Screenshot zum Joggen Ihrer Erinnerung:
Falls Sie unseren letzten Artikel nicht gelesen haben, sehen Sie hier eine visuelle Darstellung Ihres Gitters. Die Hauptgrafik in der Mitte zeigt die Spalten, die Auffüllung und die Rinne basierend auf Ihrer Eingabe und dem aktuell ausgewählten Bereich. Gehen wir kurz auf die Funktionsweise dieses Tools ein.
Haltepunkte hinzufügen
Um zu beginnen, schnappen Sie sich den großen Kreis rechts mit zwei Pfeilen und ziehen Sie ihn nach links oder rechts. Sie sehen das gesamte Rasterfeld und erweitern Sie dabei. Auf der Unterseite finden Sie eine Anzeige, die Ihnen die aktuelle Breite angibt. Wenn Sie dies an einer Stelle erreicht haben, an der Sie einen neuen Haltepunkt einfügen möchten, klicken Sie auf "Haltepunkt hinzufügen". Taste.
Beim Einrichten von Haltepunkten wird der untere Teil der Benutzeroberfläche in verschiedene Abschnitte unterteilt, die als Bereiche für die Breite des Ansichtsfensters dienen. In der Abbildung unten sehen Sie, dass mein erster Bereich von 0 bis 319px reicht. Dann gibt es einen Haltepunkt, der einen neuen Abschnitt erstellt, der von 320px bis 479px reicht. Wir setzen diesen Prozess fort, bis alle Medienabfragen Ihres Designs berücksichtigt sind.
Das Gitter optimieren
Beachten Sie im vorherigen Screenshot, dass dieser Bereich unten rot markiert ist, wenn sich meine aktuelle Breite in einem bestimmten Bereich befindet. Dies bedeutet, dass ich die spezifischen Rastereinstellungen für diesen Bereich festlegen kann. Dafür verwende ich die einfachen Werkzeuge ganz rechts auf der Seite.
Hier können Sie die Anzahl der Spalten, die Auffüllung und die Rinnenbreite für jeden Abschnitt festlegen. Ziehen Sie einfach Ihr Raster, um jeden Abschnitt hervorzuheben, und richten Sie dann das Raster für diesen Abschnitt ein, um es so zu gestalten, wie Sie es von allen anderen Abschnitten möchten. Beispielsweise hat Ihr Mobile Grid möglicherweise nur eine oder zwei Spalten, während Ihr Desktop-Grid zwölf hat.
Der Download
Wenn Sie mit dem Einrichten Ihres Grids in Gridpak fertig sind, können Sie Ihre Dateien herunterladen. Dieses Mal werden Sie feststellen, dass wir einige weitere Dateien haben, mit denen Sie arbeiten können:
Wie ich oben bereits erwähnt habe, habe ich den Entwicklern zuvor eine grobe Zeit eingeräumt, weil zu diesem Zeitpunkt der Spaß vorbei war und Gridpak so kompliziert zu bedienen war. Es scheint, als hätten sie das Erlebnis verbessert, indem sie sich auf drei Hauptpunkte konzentrierten:
- Eine voll funktionsfähige Demo: Das ist absolut wichtig. Das letzte Mal, als wir uns Gridpak angesehen haben, war keine Demo dabei, sodass wir uns selbst ein Bild machen konnten. Wenn wir dies in der Hand haben, können wir in ein Beispiel eintauchen, das richtig eingerichtet ist und lernen, wie die Dinge funktionieren. Ich denke, dass die meisten Entwickler dazu neigen, zu lernen, so dass es für Gridpak-Benutzer zum ersten Mal eine viel bessere Erfahrung bietet.
- Eine bessere? README? Datei: Die? README? Die Datei scheint auch viel besser geworden zu sein. Es führt Sie durch die einzelnen Teile des Downloads und bringt Sie auf den richtigen Weg, um mit den vorgefertigten Klassen in Ihrer CSS-Datei zu arbeiten.
- Ausführliche Kommentare: Zusätzlich zu den Anweisungen in der? README? Und vielleicht sogar noch nützlicher sind die Kommentare, die Sie in den verschiedenen Codedateien finden. Die Entwickler haben darauf geachtet, jedes Puzzleteil zu erklären, so dass Sie, egal wo Sie sich in einer Datei befinden, eine schöne Beschreibung des Vorgangs erhalten, der Ihnen hilft, mit dem zu arbeiten, was Ihnen gegeben wurde.
Im Allgemeinen haben die Leute hinter Gridpak nichts an ihrer Funktionsweise geändert, aber die Verbesserungen, die sie bei der Verbreitung nützlicher Informationen und Anweisungen für den Benutzer vorgenommen haben, machen das gesamte Tool viel zugänglicher und benutzerfreundlicher.
Verwendung des Codes
Letztes Mal habe ich nur kurz angesprochen, wie das Gridpak-System funktioniert. Mit mehr Informationssupport als je zuvor ausgestattet, möchte ich ein wenig tiefer eintauchen, damit Sie sicher sein können, dass Sie genau wissen, wie alles funktioniert, und dass Sie dies in einem Projekt ziemlich schnell verwenden können.
Die Stücke
Ihr Download enthält eine Reihe von CSS-Dateien (CSS, LESS und SCSS) sowie eine Handvoll Bilder und eine JavaScript-Datei. Die Demo enthält auch eine HTML-Datei als Referenz.
Die Bilder und die JavaScript-Datei dienen lediglich dazu, eine Rasterüberlagerung zu erstellen, damit Sie sehen können, wie Ihre Spalten funktionieren. Jedes Rastersystem hat eines davon, und ich benutze es offenbar nie, also werfe ich es heraus und konzentriere mich auf die tatsächlichen Teile, die Sie für Ihren Entwicklungsworkflow verwenden werden.
Das HTML
Als erstes sollten Sie Ihre eigene HTML-Datei einrichten. Codieren Sie Ihren Kopf wie gewohnt und starten Sie die Markierung wie folgt:
Alles, was Sie erstellen, wird in diese Seite geworfen. div, das im Wesentlichen nur als Wrapper dient, der den Inhalt der Seite zentriert.
Als Nächstes teilen Sie Ihren gesamten Inhalt in Zeilen auf. Dazu wird jedes Element auf der Seite in ein div mit einer Klasse von "row" geworfen. Sie haben mehrere davon:
Innerhalb der Zeile können Sie wie gewohnt Ihren normalen Inhalt platzieren. Stellen Sie sicher, dass Sie die? Col? Klasse in jedem Teil des Inhalts, wobei im Wesentlichen die globalen Spaltenstile angewendet werden.
Semantische Klassennamen
Nach dem Auftragen der? Col? Klasse können Sie einen semantischen Klassennamen anwenden. Sie müssen keine lustigen Klassennamen wie? 1-3-6? Verwenden. oder? m1 ?, verwenden Sie etwas Beschreibendes, das genau kommuniziert, was dieser Abschnitt ist und was er tut. Hier ist ein Beispiel mit einem Header:
Wenn wir dies etwas erweitern, um einige verschiedene Abschnitte einzubeziehen, würde unser Code so aussehen. Beachten Sie die klaren, beschreibenden Klassennamen und die Einbeziehung von? Col? bei jedem div.
SCSS
Letztes Mal haben wir uns Gridpak angesehen, wir haben uns in das einfache CSS gestürzt. Um dies zu ändern, schauen wir uns die SCSS-Datei diesmal an, denn Sass ist fantastisch und Sie sollten es wahrscheinlich nur nachgeben und es bereits verwenden.
Drei Mixins
Um vollständig zu verstehen, was in der SCSS-Datei passiert, müssen Sie Ihre drei drei Mixins einbeziehen: col, span und span_first.
col
Das erste Mixin, das uns begegnet, ist "col", mit dem wir diese Cols definieren. Klassen, die wir im HTML oben gesehen haben.
Ich habe dies in drei Abschnitte unterteilt, damit Sie leicht sehen können, was los ist. Der erste Teil verschiebt die Spalten und fügt jeder einen transparenten Rahmen hinzu. Als Nächstes legen wir die Größe der Box und den Hintergrundclip fest. Diese helfen, das Box-Modell in etwas mathematischer zu gestalten.
Dieses Mixin ist leicht genug zu implementieren, es wird einfach direkt in die "Col" -Funktion geworfen. Klasse. Sie werden hier auch zusätzliche Spaltenstile platzieren, die Sie selbst anwenden möchten.
Spanne
Als nächstes ist die? Span? mixin. Hier wird die ganze fantastische Mathematik durchgeführt, um die verschiedenen möglichen Breiten herauszufinden.
Dieser Teil des Codes kann aufgrund der Variablen sehr verwirrend sein. Schauen wir uns also jeden einzelnen an und sehen, was er tut.
- $ num: Wenn wir dies später implementieren, wird der Mixin in der Spalte angezeigt, in der wir uns befinden. Wenn wir die erste von drei Spalten einrichten, wird diese auf 1 gesetzt.
- $ gutter_pc: Die Rinne, ausgedrückt als Prozentsatz.
- $ gutter_px: Die Rinne, ausgedrückt als Pixelwert.
- $ padding: Die Auffüllung wird entweder als Pixelwert oder als Prozentsatz ausgedrückt.
- $ max_columns: Die Anzahl der Spalten in unserem derzeit aktiven Rastersatz. Es kann für das mobile Raster auf 1 und für den Desktop auf 12 festgelegt werden.
- $ one_col: Die Breite einer einzelnen Spalte, automatisch berechnet.
Das hört sich nach einer Menge Arbeit an, bei der Sie diese Variablen jedes Mal festlegen, wenn Sie eine neue Medienabfrage erstellen. Denken Sie jedoch daran, dass diese Aufgabe tatsächlich bereits abgeschlossen ist. Die Einstellungen, die wir in den ersten Schritten der Benutzeroberfläche eingegeben haben, definieren die Einstellungen für diese Variablen an jedem Haltepunkt oder Bereich.
span_first
Dies gilt für den ersten Bereich in jedem Bereich. Der linke Rand der ersten Spalte wird gelöscht.
Verwenden Sie Ihre Gitter
Direkt aus Gridpak heraus finden Sie einen Abschnitt Ihres CSS oder SCSS, der jedem Bereich gewidmet ist, den Sie eingerichtet haben. Jeder Abschnitt ist sehr gut kommentiert, damit Sie wissen, was los ist. Hier ist einer meiner Bereiche ohne zusätzlichen Code, den ich hinzugefügt habe:
Wie Sie sehen, ist der Abschnitt mit einem Kommentar versehen, der uns den Bereich (0-319px) sowie die Spannweiten angibt, die wir in diesem Bereich finden. Es sieht so aus, als wäre dies unsere mobile Reichweite, also finden wir zwei Bereiche, einen bei 48% und einen bei 100%. Die Spanne von 48% erstreckt sich auf eine Spalte und die Spanne von 100% auf alle Spalten.
Die entsprechenden Ränder und Polsterungen werden auf unsere? Col? Klasse, dann werden Variablen für unser Span Mixin gesetzt. Wieder werden diese Werte automatisch eingefügt, je nachdem, was Sie in der Web-App gemacht haben. Hier können wir das Ergebnis dieses Prozesses sehen:
Als nächstes wird der ersten Spalte unser? Span_first? Mischen, um diesen linken Rand zu entfernen.
Schließlich wird jede der Spannenbreiten unter Verwendung der? Span? mixin mit den obigen Variablen als Eingabe.
Dies ist der Teil, in dem wir tatsächlich manuelle Eingaben machen müssen. Um die Breiten für die verschiedenen Teile in unserem HTML-Code festzulegen, fügen wir die Klassennamen einfach mit dem entsprechenden Bereich hinzu.
Wenn wir beispielsweise möchten, dass unser Feature- und Hauptinhalt jeweils eine einzelne Spalte einnimmt, die sich um die halbe Seite befindet, fügen wir deren Klassennamen mit "span_1" hinzu. Wir möchten, dass unser Header über die gesamte Seite gestreckt wird. Wir geben ihn mit "span_2" ein, das sich über die gesamte Seite erstreckt.
Das ist wirklich alles! Sie müssen lediglich diesen schnellen Vorgang des Hinzufügens von Klassen für jeden Bereich wiederholen, den wir in der Web-App eingerichtet haben.
Nehmen wir zum Beispiel an, wir gehen zu unserem Desktop-Bereich und er enthält zwölf mögliche Bereiche. Hier möchten wir, dass der Header 100% Breite einnimmt, der vorgestellte Inhalt ein Drittel der Breite und der Hauptinhalt 2/3 der Breite. Wir fügen den Header hinzu. Klasse zu "span_12", der "Hauptinhalt" Klasse zu? span_9? und das? Klasse zu "span_3".
Hier sehen Sie die Breiten, die dieser Code auf jeden dieser Abschnitte anwenden würde. Mit sehr wenig Aufwand haben wir ein schönes kleines Raster von Inhalten:
Fahren Sie einfach mit der Einrichtung jedes Bereichs fort, ändern Sie dann die Fenstergröße, und Ihre Inhalte werden automatisch angepasst. Wenn Sie es in Aktion sehen möchten, besuchen Sie die Demoseite, die in jedem Gridpak-Download enthalten ist.
Fazit
Nachdem ich seit meiner ersten Überprüfung einige Zeit mit Gridpak verbracht hatte, hielt ich es für notwendig, dieses Tool erneut zu besuchen und zu sagen, dass ich tatsächlich denke, dass es als Startpunkt für responsives Design durchaus nützlich ist. Die aktuelle Dokumentation und das Kommentieren sollten Sie durch alles führen, was Sie wissen müssen, und die Lernkurve erheblich senken.
Wenn Sie die SCSS-Version wie oben beschrieben verwenden, haben Sie ein recht kurzes und flexibles Framework, von dem aus Sie beginnen können, und Sie benötigen sehr wenig Aufwand, um Ihre Inhalte an die verschiedenen Haltepunkte halten zu können. Das Einrichten dieser Elemente mit der Web-Benutzeroberfläche ist auf jeden Fall einfacher als die manuelle Codierung.
Ich habe immer noch ein Problem mit der Idee, mit Medienabfragen zu beginnen und Inhalte einzufügen, anstatt Medienabfragen zu erstellen, da der Inhalt führt. Wenn Sie jedoch mit der richtigen HTML-Struktur beginnen, können Sie möglicherweise trotzdem auf diese Weise arbeiten und dabei Gridpak nutzen .
Hinterlassen Sie einen Kommentar und lassen Sie mich wissen, was Sie von Gridpak halten. Würden Sie es als Ausgangspunkt für Ihr nächstes responsives Designprojekt in Betracht ziehen? Welche anderen nützlichen RWD-Tools sind Ihnen in letzter Zeit begegnet?