In der Vergangenheit haben wir über Twitter Bootstrap viel diskutiert. Viel mehr als der würdigste Konkurrent: die Zurb-Stiftung. Foundation befindet sich nun in der dritten Iteration und ist ein robustes und reaktionsfähiges Front-End-Framework, das täglich von Hunderten von Entwicklern verwendet wird.
Im Verlauf mehrerer Artikel werden wir uns mit den verschiedenen Aspekten aus der Perspektive eines Anfängers auseinandersetzen. Das heutige Thema ist mein Lieblingsteil: das Raster. Folgen Sie mit, um zu sehen, wie es funktioniert!
Gitter verrückt
Wenn Sie regelmäßig von Design Shack lesen, wissen Sie wahrscheinlich bereits, dass ich eine Art Nuss bin. Layout ist der Aspekt von CSS, der mich am meisten fasziniert, und ich liebe es einfach, mit den verschiedenen Rastersystemen zu graben, die von den Leuten erstellt werden. Nein, sie sind nicht immer perfekt semantisch (obwohl es einige sind), aber sie können eine unglaublich hilfreiche Methode sein, um wirklich komplexe Layouts mit sehr geringem Aufwand auszuschalten.
Das in Foundation integrierte Raster bildet keine Ausnahme von dieser Regel. Es ist bemerkenswert einfach zu bedienen, verfügt über alle gewünschten Funktionen und passt sich gut an verschiedene Ansichtsfenster an. Lass uns einen Blick darauf werfen.
Das Foundation Grid
Wie unzählige andere Gitter ist das Fundament Grid auf einem Zwölfsäulensystem aufgebaut. Standardmäßig ist das Raster 940px breit, wenn es seine volle Breite hat. Das Raster ist jedoch fließend. Wenn Ihr Ansichtsfenster schmaler als 940px wird, passt sich das Raster an.
Auf Codeebene bedeutet dies natürlich, dass jede Spalte im Raster keine statische Breite hat, sondern stattdessen mit Prozentsätzen zugewiesen wird. Wenn wir das CSS aufbrechen, können wir feststellen, dass dies tatsächlich der Fall ist:
Reaktionsschnell
Die fließende Beschaffenheit des Foundation-Rasters hilft beim Anpassen, wenn sich das Ansichtsfenster verengt, aber sobald Sie etwa 767px erreicht haben, beginnt eine Medienabfrage und vereinfacht Ihr komplexes Layout in einer einzigen Spalte. Es ist offensichtlich, dass eine solche einfache Lösung nicht immer wünschenswert ist. Es gibt also Möglichkeiten, Ihr Layout absichtlich in ein vierspaltiges mobiles Raster umzuwandeln. Wir werden später sehen, wie das geht.
Fertig machen
Wenn Sie überhaupt an Rastersystemen gewöhnt sind, sollte Foundation ganz einfach zu finden sein. Wenn Sie mit Rastern völlig neu sind, machen Sie sich keine Sorgen, ich werde Sie durchgehen, und Sie werden in kürzester Zeit weiterkommen.
Grundsätzlich hat Foundation den Großteil der umfangreichen CSS-Layout-Arbeit für Sie erledigt. Die Mitte 940px der Seite ist in zwölf Spalten aufgeteilt und verschiedene mögliche Spaltenkombinationen werden Klassen zugeordnet. Das bedeutet, dass Sie zur Erstellung eines grundlegenden Layouts kein einzelnes CSS-Zeichen schreiben müssen. Sie müssen lediglich die richtigen Klassen in Ihrem HTML-Code verwenden.
Eine Reihe erstellen
Das erste, was Sie tun müssen, wenn Sie Inhalte zur Seite hinzufügen, ist das Erstellen einer Zeile. Genau das klingt nach einem Stück Inhalt, der auf derselben horizontalen Ebene angezeigt wird. Alle Floating-, Polster-, Ränder- und verschiedenen Layout-Komplexitäten wurden berücksichtigt, damit Sie sich auf Ihren Inhalt konzentrieren können.
Um eine Zeile zu beginnen, erstellen Sie einfach ein div mit einer Klasse von "row".
Wie einfach war das? Nun wollen wir mal sehen, wie man einige Spalten hinzufügt.
Spalten hinzufügen
Um Inhaltsspalten hinzuzufügen, erstellen Sie ein neues div und weisen zwei Klassen zu. Die erste Klasse ist eine Zahl, die der Anzahl der Spalten entspricht, die dieser Inhalt umfassen soll. Wenn Sie also möchten, dass Ihr Inhalt drei der verfügbaren zwölf Spalten aufnimmt, weisen Sie drei zu. als eine Klasse.
Die zweite Klasse, die Sie anwenden, ist? Spalten? (oder? Spalte?). Dies gilt einheitlich für alle Ihre Divs, für die Sie die standardmäßige Foundation-Spaltenbehandlung wünschen. Kombinieren Sie diese beiden Klassen und Sie sollten so etwas haben:
Hier habe ich einen schönen kleinen Container, der automatisch Grenzen innerhalb des Inhalts setzt, so dass er nicht mehr als acht Spalten aufnimmt. Normalerweise (wenn auch nicht immer) möchten Sie nun die gesamten zwölf Spalten einer bestimmten Zeile auffressen. Wir haben bereits acht Spalten in unserem ersten Div verbraucht. Wenn wir also noch eine weitere wollen, schreiben wir? Vier Spalten? im Klassenbereich (8 + 4 = 12).
Nach dem schreiben nur diesen Code im Hauptteil eines HTML-Dokuments. Wenn wir unsere Seite in einem Browser betrachten, sehen wir Folgendes:
Wie Sie sehen, haben wir effektiv zwei Textblöcke mit einem Breitenverhältnis von 2: 1 erstellt. Das macht absolut Sinn, weil wir die Klassen verwendet haben acht und vier, die auch ein Verhältnis von 2: 1 haben. Wenn sich dies wirklich in Ihrem Gehirn anklickt, wird es zu einem mächtigen Konzept, da Sie mit nur wenigen einfachen Klassennamen plötzlich fast jedes gewünschte Layout erstellen können.
Beachten Sie, dass Sie nicht alle zwölf Spalten ausfüllen müssen. Verwenden Sie das? Ende? class, wenn Sie möchten, dass ein div das letzte in einer Zeile ist, das sich nicht über zwölf Spalten erstreckt.
Weitergehen
Mit den Prinzipien, die wir gerade gelernt haben, können wir alle Arten von Layouts erreichen. Nehmen wir an, wir wollten eine Reihe, die in vier gleich große Abschnitte aufgeteilt wurde. Alles was wir tun müssen, ist die "Drei" zu benutzen. Klasse.
Inzwischen sollten Sie wissen, wie das funktioniert. Wenn Sie die mathematische Fähigkeit haben, Dinge in zwölf zu unterteilen, können Sie diesen Rahmen verwenden. So können wir sehen, wie dies in einem größeren Maßstab funktioniert. Lassen Sie uns in ein komplexes Seitenlayout einsteigen.
Lassen Sie sich nicht von diesem großen Code einschüchtern, er verwendet genau die gleichen Prinzipien, die wir in den kleineren Beispielen verwendet haben.
Dadurch wird ein Div erstellt, das sich über sechs Spalten erstreckt und es auf der Seite zentriert. Wenn wir hier eine horizontale Regel werfen würden, hätten wir eine schöne kleine Trennlinie mit sechs Spalten.
Sie können Divs nicht nur zentrieren, sondern auch verschieben und neu anordnen. Um ein div zu versetzen, verwenden Sie "offset-by". Also um einen Punkt versetzt? wird es um einen Slot und "Offset-by-Two" versetzt, gut, Sie bekommen den Punkt.
Hier sehen Sie, dass die Klassennummern nur zehn ergeben, so dass zwei Plätze übrig bleiben. Ich erkläre dies mit einem zweispaltigen Versatz. Hier ist das Ergebnis.
Um Divs in der Ausgabe anders anzuordnen als in der Quellreihenfolge, verwenden Sie Push- und Pull-Klassen, ähnlich wie im alten 960-Rastersystem.
Überprüfen Sie jetzt das Ergebnis. Obwohl die drei? Kolumne kommt vor den? neun? Spalte in der Quelle zeigt die Live-Vorschau das Gegenteil davon.
Die Logik dahinter ist normalerweise SEO-bezogen. Angenommen, Sie wollten Ihren Firmennamen als Kopfzeile in der Mitte der Seite zwischen zwei anderen Spalten haben, ist es für SEO möglicherweise besser, wenn der Firmenname in der Quellhierarchie höher ist.
Verwenden des vierspaltigen mobilen Rasters
Standardmäßig reagiert Foundation, aber das Verhalten dieses Aspekts des Frameworks ist sehr einfach. Rückkehr zu unserer großen Live-Demo im? Going Further? Abschnitt oben, wenn das Ansichtsfenster zu eng wird, wird alles einfach in ein einzelnes Spaltenraster gegliedert:
Das funktioniert, ist aber nicht sehr hübsch oder robust. Glücklicherweise gibt es ein zweites Gitter, auf das Sie zugreifen können, das mit der mobilen Medienabfrage aktiviert wird. Dieses Raster besteht aus vier Spalten und verwendet die folgenden Klassen:
- Mobile-One
- Handy-zwei
- Handy-drei
- mobile-vier
Diese Klassen werden genauso implementiert wie für das Raster in voller Größe. Bewerben? Mobile-three? bewirkt, dass ein Element drei der vier verfügbaren Spalten im Mobilfunknetz umfasst. Lassen Sie uns vor diesem Hintergrund das vorherige Layout überarbeiten: