Seien wir ehrlich, Responsive Design ist harte Arbeit. Webdesign war schwierig genug, wenn wir nur Desktop-Plattformen in Betracht zogen, aber die Herausforderung, scheinbar unendlich viele Bildschirm- und Viewport-Größen zu variieren, hat die Komplexität des Website-Layouts wirklich erhöht.
Egal, ob Sie für responsive Design völlig neu sind oder sich als Experte auf diesem Gebiet verstehen, das Werkzeug, das wir uns heute anschauen werden, wird Sie umhauen. Es heißt Gridset und es ist erstaunlich.
Was ist Gridset?
Gridset ist ein Mark Boulton-Projekt, das sich derzeit in der Beta-Phase befindet und das Ziel hat, den responsiven Webdesign- und Entwicklungsprozess drastisch zu vereinfachen.
Sie haben zweifellos viele Werkzeuge gesehen, die dieses Versprechen machen. Die Sache ist, die meisten sind wenig mehr als verherrlichte Gitterrechner. Gridset ist anders. Damit erhalten Sie ein robustes Toolset, mit dem Sie verschiedene Raster erstellen und anwenden können, die für eine beliebige Anzahl von Geräten optimiert sind.
Es ist schwer zu beschreiben, wie und warum Gridset so großartig ist. Warum zeige ich es Ihnen nicht mit einem Beispielprojekt?
Erstellen Sie ein neues Gitterset
Wenn Sie sich zum ersten Mal bei der App anmelden, wird eine Liste mit Gittersätzen angezeigt, die Sie in der Vergangenheit erstellt haben (Sie erstellen nicht nur ein, sondern mehrere). Sie können entweder eine davon bearbeiten oder eine neue erstellen. Ich erstelle eine von Grund auf. Um dies zu tun, klicken Sie auf das? Neue Set? Schaltfläche und geben Sie einen Namen Ihrer Wahl an.
Danach ist es Zeit zu springen und mit dem Aufbau Ihres ersten Gitters zu beginnen. Der folgende Bildschirm wird angezeigt. Hier haben Sie die Möglichkeit, zwischen einigen praktischen voreingestellten Raster-Vorlagen zu wählen und eigene zu erstellen. Wir werden im nächsten Schritt mit dem Aufbau unserer eigenen beginnen.
Richten Sie vier Raster ein
Mit den grundlegenden Steuerelementen auf der linken Seite des Bildschirms werden vier verschiedene Raster ausgeblendet: Desktop A, Desktop B, Table und Mobile. Denken Sie daran, dass dies wirklich willkürliche Auswahlen für dieses Lernprogramm sind. Sie können Ihre eigenen Entscheidungen hinsichtlich der Entscheidungen treffen, die wir im gesamten Artikel treffen. Sie sollten trotzdem in der Lage sein, mitzukommen.
Dadurch werden im primären mittleren Bereich vier verschiedene leere Schieferraster erstellt, von denen wir jeweils für unsere Zwecke anpassen möchten.
Passen Sie Ihr erstes Gitter an
Nun ist es an der Zeit, wirklich nachzusehen und zu sehen, wie dieses Ding funktioniert. Standardmäßig sollten Sie etwas wie das Beispiel in der Abbildung unten als Standardstatus eines bestimmten Rasters sehen:
Dies ist noch nicht wirklich ein Gitter, sondern nur eine große Spalte. Um das Raster anzupassen, verwenden wir die Reihe von Steuerelementen oben. Nehmen wir an, ich wollte ein Drei-Säulen-Raster mit 30px-Dachrinnen, das bei 990px Breite und darüber aktiviert wird. Ich muss nur diese Werte in die Felder eingeben.
Was ist das Präfix?
Es gibt ein kleines Feld, das nach einem "Klassenpräfix" fragt. Was ist das alles über? Die Antwort ist, dass, nachdem Sie die verschiedenen Raster mit Gridset eingerichtet haben, das Anwenden dieser Raster so einfach ist, wie ein paar Klassennamen in Ihrem HTML-Code.
Nachdem Sie die verschiedenen Raster mit Gridset eingerichtet haben, können Sie sie einfach anwenden, indem Sie einige Klassennamen in Ihrem HTML-Code anschlagen.Mit Gridset können Sie genau auswählen, wie diese Klassen aussehen werden. Sie beschränken sich jedoch auf drei Zeichen, sodass die Semantik hier wahrscheinlich ein wenig geopfert wird. Das typische Beispiel ist die Verwendung von? D? für Desktop? t? für Tablet und? m? für mobiles. Ich werde zwei Desktop-Grids erstellen, also werde ich da verwenden. und? db? um sie getrennt zu halten.
Verhältnis und Aktualisierung
Nur weil ich drei Spalten verwendet habe, heißt das nicht unbedingt, dass sie gleichmäßig verteilt werden sollen. Glücklicherweise können Sie mit Gridset das Verhältnis mit einem kleinen Dropdown-Menü anpassen. Übrigens möchte ich, dass meine in Drittel geteilt wird, also gehen wir auf diese Option.
Wenn Sie alle Einstellungen vorgenommen haben, klicken Sie einfach auf die Schaltfläche Aktualisieren, um die Aktualisierung des Rasters anzuzeigen.
Wie Sie sehen, zeigt die Vorschau jetzt ein dreispaltiges Raster, das die von uns gewählten Einstellungen widerspiegelt. Hier gibt es viel mehr Flexibilität, wenn Sie es brauchen. Klicken Sie auf eine Spalte, um die Einstellungen einzeln anzuzeigen oder zu optimieren, oder klicken und ziehen Sie, um die Spalten neu anzuordnen.
Richten Sie Ihre anderen Netze ein
Nun, da wir sehen, wie man ein Raster aufbaut, wollen wir uns die drei anderen ansehen. Um zu veranschaulichen, wie flexibel Gridset sein kann, richten wir ein anderes Desktop-Grid, "db", ein. Diese ist praktisch gleich, nur in vier Spalten aufgeteilt, falls wir den Inhalt der Seite in Hälften oder Viertel teilen möchten. Wir richten keine neue Breite ein, die berücksichtigt werden muss, sondern nur ein anderes Raster innerhalb desselben Bereichs.
Zum Schluss richten wir ein Tablettgitter ein, das 768 Pixel breit ist, mit 20px-Rinnen und vier Säulen, und dann ein mobiles Gitter mit 320px Breite, 10px-Rinnen und zwei Säulen.
Achten Sie wieder auf die Präfixe, da sie bald wichtig werden. Wir nahmen die Standardroute und benutzten? T? für Tablet und? m? für mobiles.
Beachten Sie auch, dass jede einzelne Spalte in allen Rastern gekennzeichnet ist: da1, db3, t2 usw. Diese stellen bestimmte Slots dar, die wir in unserem Code verwenden können.
Verwenden der Raster
Bis zu diesem Punkt hat sich Gridset "ordentlich" nähert. aber nicht unverzichtbar. Es ist schön, ein paar visuelle Darstellungen unserer Netze zu haben, aber was nützt das, ohne Implementierungshilfe?
Dies ist, wo Gridset wirklich die Konkurrenz wegbläst. Um zu sehen, warum, klicken Sie auf? Schaltfläche oben in der linken Symbolleiste.
Stellen Sie von hier aus sicher, dass Sie? Einbetten? Wenn Sie diese Option auswählen, wird ein einfacher Stylesheet-Link angezeigt, den Sie direkt in Ihren Code einfügen können. In meinem Fall war es folgendes:
Dies bedeutet, dass Gridset die Arbeit, die ich in den Rastern erledigt habe, übernommen habe, die erforderliche CSS-Datei generiert und diese so hostet, dass ich Tests ausführen kann. Diese Datei wird bei Bedarf automatisch aktualisiert. Wenn ich also in das Raster einsteige, muss ich nicht eine einzige Codezeile berühren. Wie cool ist das?
Andere Goodies
Es gibt drei weitere Registerkarten in der? Verwendung? auch abschnitt. ?Herunterladen? Ermöglicht das Herunterladen des generierten CSS, sodass Sie nicht darauf angewiesen sind, dass Ihre Datei nach Abschluss der Testphase gehostet wird. ?Betrügen? zeigt Ihnen alle Maße für die von Ihnen erstellten Raster an, so dass Sie Ihr eigenes Layout einfach mit denselben Zahlen codieren können. Die Formatierung hier ist wirklich nett und es empfiehlt sich, ein Referenz-PDF zu drucken.
?Zugriff? Mit dieser Option können Sie die E-Mail-Adresse eines anderen Benutzers eingeben, der auch das Raster verwenden möchte. Das ist ideal, wenn Sie mit einem Team arbeiten.
Ein Beispiel codieren
Nun, da wir alle unsere Raster eingerichtet haben, ist es an der Zeit, den Style-Sheet-Link in eine HTML-Datei zu legen und das Layout einer Testfahrt zu unterziehen. Die Implementierung hier ist extrem einfach, nutzen Sie einfach die zuvor erstellten Grid-Klassen.
Nehmen wir zum Beispiel an, dass wir zwei Divs hatten, die jeweils eine Überschrift und einen Absatz enthielten. So wie:
Nun stellen wir uns vor, wir wollten diese aufteilen, so dass sie in derselben Reihe waren, aber das erste Div nahm 2/3 der Seitenbreite ein und beließ 1/3 für die zweite. Mit unserem? Desktop A? Gitter würden wir die? da? Präfix.
Unser erstes Div würde sich über beide Seiten erstrecken. und? da2? Spalte, also die Klasse, die wir anwenden möchten, ist da1-da2. Wir möchten nur, dass das zweite div die dritte Spalte besetzt, also würden wir hier einfach "da3" eingeben.
Hinzufügen der anderen Raster
Einfach richtig? Wie machen wir diesen Sauger ansprechbar? Darum geht es bei dieser ganzen Sache, also machen wir uns daran! Wir müssen lediglich Klassen für die anderen von uns eingerichteten Gitter hinzufügen.
Beginnen Sie mit dem Mobile Grid und arbeiten Sie sich dann nach oben. Ich möchte, dass der Inhalt sowohl auf der Mobil- als auch auf der Tablet-Version gleichmäßig aufgeteilt wird. und? t1? t2? und div zwei auf? m2? und? t3-t4 ?.
Dies bedeutet, dass jedes div in der mobilen Ansicht eine Spalte belegt, dann in der Tablet-Ansicht auf zwei Spalten hochspringt und dann in der Desktop-Ansicht wieder zu einer 2: 1-Aufteilung springt. Das ist ein schickes Layout-Voodoo mit sehr wenig Arbeit!
Lass uns das machen
Nun gut, jetzt, da wir wissen, wie das funktioniert, lassen Sie uns eine vollständige Beispielseite mit sieben verschiedenen divs erstellen.