Ich finde es toll, kostenlose Tools zu finden, die meinen Job (und Ihren) etwas einfacher machen. Die Webentwickler-Community ist voll von talentierten Leuten, die mehr als gewillt sind, ihre Kreationen mit der Welt zu teilen und dabei nichts zu verlangen.
Heute werden wir uns ein solches Werkzeug von Erskine Design namens Gridpak anschauen. Damit können wir schnell und einfach ein eigenes responsives Raster erstellen, um Webseiten zu erstellen, die für viele verschiedene Bildschirmgrößen geeignet sind. Die Implementierung ist etwas kompliziert. Wir helfen Ihnen dabei, herauszufinden, wie Sie Ihre Stile nach dem Download einrichten können.
Dieser Artikel ist Teil unserer Serie "Blick über das Desktop-Design hinaus", die Sie in Partnerschaft mit Heart Internet VPS erhalten haben.
Triff Gridpak
Ich bin mir sicher, dass Sie wissen müssen, dass beim Erstellen eines einfachen, nicht reagierenden Gitters einiges an Mathematik involviert sein muss, und es wird viel komplexer, wenn Sie dieses Gitternetz an verschiedenen Haltepunkten ändern. Wenn Sie ein Konstrukteur sind, der nach Möglichkeit Mathe vermeidet, kann das Angehen eines solchen Projekts eine ziemlich einschüchternde Aufgabe sein.
Gridpak ist eine kostenlose Web-App, die Ihnen die Erstellung Ihres eigenen responsiven Grid-Systems erleichtert. Sie müssen sich weder an die starre Struktur eines von einem anderen Benutzer erstellten Gitters anpassen, noch müssen Sie zu hart arbeiten, um Ihr eigenes zu erstellen. Mit nur wenigen Mausklicks und Drag-Aktionen erhalten Sie eine beeindruckende Vorlage für ein responsives Raster, die Ihren Spezifikationen entspricht.
Obwohl Gridpak ein Kinderspiel ist, kann es anfangs etwas verwirrend sein, wenn Sie nicht wissen, was Sie tun. Als ich die Site zum ersten Mal fand, habe ich mich eine Weile herumgeklickt, bevor ich das Gefühl hatte, ich hätte den Prozess wirklich im Griff. Ich werde Sie durch die Funktionsweise führen, damit Sie dieses praktische Werkzeug schnell und effizient in Ihrem Workflow einsetzen können.
Die Kontrollen
Wenn Sie die Gridpak-Seite zum ersten Mal laden, wird ein Bild mit einem sechsspaltigen Raster angezeigt. Rechts neben dem Raster befindet sich eine Reihe von Steuerelementen. Obwohl dies wie eine bescheidene Anzahl von Einstellungen erscheint, ist der Anpassungsgrad hier recht gründlich.
Wie Sie sehen, können Sie die Anzahl der Spalten sowie die Auffüllung und die Rinne schnell und einfach in Prozent oder Pixeln einstellen. Der kleine runde Knopf mit den Pfeilen repräsentiert im Wesentlichen Ihren Darstellungsbereich. Ziehen Sie es nach links und rechts, um zu sehen, wie das Raster auf die Änderung der Größe des Ansichtsfensters reagieren würde. Es gibt auch eine Schaltfläche zum Hinzufügen eines Haltepunkts, den wir als nächstes besprechen.
Haltepunktanzeige
Am unteren Rand der Benutzeroberfläche befinden sich ein Pixellineal und ein kleines Symbol, das darauf hinweist, dass das aktuelle Standardraster auf das gesamte Kontinuum der Viewport-Größen angewendet wird, von null bis unendlich. Dies bedeutet im Grunde nur, dass noch keine Haltepunkte hinzugefügt wurden, daher gilt das gleiche Raster für alle Größen.
Hinzufügen unseres ersten Haltepunkts
Der springende Punkt hier ist, dass Sie möchten, dass sich das grundlegende Rahmenwerk für Ihre Site ändert und auf unterschiedliche Ansichtsfenstergrößen erweitert wird. Der Schlüssel dazu ist, dass Sie daran denken, Ihr Raster in Bezug auf reichtNicht nur Haltepunkte. Für einen bestimmten Bereich von Einstellungen gibt es eine Reihe von möglichen Ansichtsfenstergrößen, in denen das Raster aktiv ist.
Der typische Anwendungsfall besteht darin, jeweils ein Raster für mobile, Tablet- und Desktop-Größen einzurichten. Die Einrichtung ist ganz einfach. Ziehen Sie den Schieberegler einfach auf Ihre Zielbreite, fügen Sie einen Haltepunkt hinzu, schieben Sie auf die nächste Zielgröße, fügen Sie einen weiteren Haltepunkt hinzu usw.
Hier habe ich den Schieberegler auf 320 Pixel gesetzt und einen Haltepunkt hinzugefügt, dann auf 480px gesetzt und einen weiteren Haltepunkt hinzugefügt. Wenn Sie den Schieberegler ziehen, wird das Raster basierend auf den angewendeten Einstellungen aktualisiert. Die von Ihnen eingerichteten Bereiche sind unten sichtbar, wobei der aktuelle Bereich rot hervorgehoben ist.
Der Arbeitsablauf hier ist etwas unklar. Der Trick besteht darin, sicherzustellen, dass Sie den richtigen Bereich ausgewählt haben. Wenn ich also meine Einstellungen für 0-319px anpassen möchte, füge ich bei 420px einen Haltepunkt hinzu und schiebe meinen Schieberegler etwas nach links, um sicherzustellen, dass der Bereich aktiv ist.
Weiter geht's
Wenn Sie das Raster für den ersten Breitenbereich ermittelt haben, fügen Sie einen weiteren Haltepunkt hinzu, bewegen Sie dann den Schieberegler etwas zurück und legen Sie das Raster für diesen Abschnitt fest.
Hier können Sie sehen, dass ich ein dreispaltiges Gitter gesetzt habe, das von 320-479px aktiviert wird. Wenn Sie diesen Schieberegler vor und zurück bewegen, kann ich das Rasterupdate live auf die verschiedenen Einstellungen des Ansichtsfensters sehen.
Zum Schluss füge ich noch ein weiteres Gitter hinzu, das den Bereich von 480 bis 599 einnimmt, und ein letztes, das auf alles mit 960 Pixeln oder mehr reagiert.
Der Download
Sobald Sie Ihre Gitter ausgearbeitet haben, ist es Zeit, die Dateien herunterzuladen und mit der Arbeit zu beginnen. Der Download ist einer der beeindruckendsten Aspekte der gesamten App. Es ist sehr umfangreich und bietet nicht nur eine CSS-Datei, sondern auch LESS- und SCSS-Dateien sowie Raster-PNGs für Photoshop und ein JavaScript, um das Raster in Ihrem Live-Dokument zu überlagern.
Auf der Gridpak-Info-Seite erfahren Sie alles über die einzelnen Elemente, die im Download enthalten sind. Ich werde die Redundanz überspringen und Sie dort nachprüfen lassen. Wichtiger ist, wie Sie das Raster in Ihre eigene Arbeit implementieren können. Das Abziehen ist wahrscheinlich nicht so einfach, wie Sie es sich erhoffen. Lass uns eintauchen und sehen warum.
Netzkomplikationen
Dank der Web-Benutzeroberfläche ist es jetzt sehr einfach, einen guten Teil des benutzerdefinierten Codes für Medienabfragen einzurichten. Wenn wir unser CSS, LESS oder SCSS betrachten, können wir deutlich sehen, dass die Medienabfragen tatsächlich generiert wurden.
Obwohl ein Großteil der CSS-Arbeit für Sie erledigt ist, sind Sie definitiv noch nicht fertig. Zugegebenermaßen ist es ziemlich schwierig, das Netz sinnvoll zu implementieren.Der Grund dafür ist natürlich, dass Responsive Design ziemlich kompliziert sein kann, Rastersysteme kompliziert sein können, und wenn man die beiden zusammen wirft, erhält man viel Komplexität. Wenn Sie wirklich mit CSS zu tun haben, sollten Sie es herausfinden können, aber wenn Sie recht neu sind, werden Sie wahrscheinlich viele Kopfschmerzen bekommen. Daher empfehle ich das sollte nicht Seien Sie Ihr erster Streifzug durch responsives Design.
Wie es funktioniert
Da dies ziemlich kompliziert sein kann und nicht viele Dokumentationen verfügbar sind, versuche ich, es durchzugehen. Wie bei jedem CSS-Grid-System gibt Gridpak einige vorgefertigte Klassen für Ihre Inhalte aus. Der Entwickler empfiehlt jedoch, stattdessen eigene semantische Klassen zu verwenden und nur die vorgefertigten Klassen als Leitfaden zu verwenden.
Angenommen, Sie haben ein Div, das drei Textabschnitte enthält. Welche Klasse solltest du darauf setzen? Dies ist schwierig, weil Sie möchten, dass es span_one und ein Punkt und span_three an einem anderen Punkt ist. Glücklicherweise haben wir uns bereits entschieden, unsere eigenen Klassennamen zu verwenden, damit es etwas einfacher wird.
Wenn wir unseren Absatzabschnitt als "Features" bezeichnen möchten, fügen wir diesen Klassennamen zu jedem Absatz in unserem HTML-Code hinzu und springen dann zum CSS. Hier suchen wir zuerst nach generischem Container-CSS. Fügen Sie unsere neue Klasse hinzu, um sicherzustellen, dass sie diese Stile aufnimmt:
Dann gehen Sie in die spezifische Medienabfrage und legen die Stile für Ihre Feature-Class innerhalb dieses Bereichs fest. Wieder müssen Sie die Klasse zu den bereits vorhandenen generischen Klassen hinzufügen:
Als Nächstes gehen Sie hinein und fügen die Klasse neben der spezifischen Spanne hinzu, die Sie erreichen möchten. Bei dieser Größe des Ansichtsfensters möchte ich, dass alle drei Absätze in einer einzigen Zeile angezeigt werden. Daher füge ich die Features-Klasse neben der Klasse span_2 hinzu (hier handelt es sich um ein sechsspaltiges Gitter, also sind drei Zweier gleich sechs).
Dies macht, so dass alle drei Absätze in einer einzigen Zeile erscheinen. Was passiert aber, wenn wir ein anderes Ansichtsfenster betreten? Bei der kleinsten Größe möchten wir beispielsweise, dass die Absätze mit einer Breite von 100% übereinander gestapelt werden. Wieder gehen wir hinein und finden die Spannweite, die der gewünschten Breite entspricht, zufällig span_2, und fügen sie in unserer .features-Klasse hinzu (vergessen Sie nicht, sie auch zu den generischen Klassen hinzuzufügen).
Sie werden zweifellos auch auf einige Margenprobleme stoßen, wenn Sie dies tun (ich bin sicher). Dies liegt daran, dass die Ränder nur nach jeder Zeile zurückgesetzt werden. div, aber wenn jeder Absatz 100% der Breite einnimmt, müssen wir die Ränder für alle aufheben. Erwarten Sie letztendlich, dass viele Anpassungen notwendig sind.
Denken Sie auch daran, dass span_2 nicht immer die richtige Wahl für dieses Beispiel ist. Wenn unser Raster beispielsweise bei voller Größe auf 12 Spalten hoch ist, möchten wir wahrscheinlich die Feature-Class in der Klasse span_4 hinzufügen, wodurch sichergestellt wird, dass die drei Absätze wieder die volle Breite einnehmen.
Ist das nützlich?
Als ich meinen ersten Download erwischte, war die Implementierung ziemlich mühelos. Es hat jedoch definitiv einige Zeit gedauert, bis ich meinen Kopf damit beschäftigt habe, damit es funktioniert. Vielleicht bin ich es zu kompliziert, aber es scheint, dass jemand, der genug für die Implementierung von Gridpak ist, wahrscheinlich genug ist, um es ganz zu überspringen, während jemand, der Hilfe beim responsive Design benötigt, das CSS am Ende etwas zu kompliziert finden könnte.
Um ehrlich zu sein, würde ich gerne Gridpak als benutzerdefinierten Generator für die Skeleton Boilerplate umbauen, die über ein reaktionsfähiges Gitter verfügt, das vielseitiger und einfacher zu implementieren ist.
Trotzdem hatte ich viel Spaß mit Gridpak zu spielen und sehe es definitiv als eine solide Möglichkeit, ein responsives Projekt zu starten, solange Sie wissen, was Sie tun. Wie ich bereits gesagt habe, bin ich nicht der größte Fan von Medienanfragen, die speziell auf gängigen Bildschirmgrößen basieren. Dies ist jedoch ein Argument für einen anderen Tag.
Ich würde gerne deine Gedanken hören. Haben Sie Gridpak verwendet, um tatsächlich eine Webseite zu erstellen? Was hast du darüber gedacht? Haben Sie einen anderen oder besseren Workflow als meiner? Ich würde es gerne hören!