Share
In diesem kurzen Tipp verwenden wir Bulma, ein beliebtes, auf Flexbox basierendes CSS-Framework von Jeremy Thomas, um ein responsives Blog-Layout zu erstellen.
Um eine erste Vorstellung von dem, was wir erstellen, zu erhalten, werfen Sie einen Blick auf die zugehörige Codepen-Demo (überprüfen Sie die größere Version für ein besseres Erlebnis):
Bulma benötigt nur eine einzige CSS-Datei. Sie können eine Kopie dieser Datei abrufen, indem Sie die GitHub-Seite, einen Paket-Manager (z. B. npm) oder ein CDN (z. B. cdnjs) besuchen..
Für dieses Tutorial wählen wir die letzte Option. Wir setzen also einen Link auf die gewünschte Datei in der unseres HTML-Dokuments:
Jetzt können wir mit dem Aufbau des Blog-Layouts beginnen!
Unser Raster hat eine maximale Breite und wird horizontal zentriert. Um dies zu erreichen, verwenden wir Bulma's Sektion und Container Hilfsklassen:
Auf kleinen Bildschirmen sollten alle Artikel vertikal gestapelt sein:
Standardmäßig platziert Bulma, das Mobile-First-Design ist, die Artikel mit einer Breite von 769 Pixeln im Ansichtsfenster. Alles, was wir tun müssen, ist das Blog-Layout zu erstellen, wenn der Darstellungsbereich 768px überschreitet.
Dafür brauchen wir nur ein Element: das Fliese. Wie Sie gleich sehen werden, besteht der Trick darin, mehrere Kachelelemente zu verschachteln.
Schauen wir uns das gewünschte Desktop-Layout genauer an. Wie Sie der folgenden Visualisierung entnehmen können, besteht sie aus drei Zeilen:
Für jede Zeile erwartet Bulma mindestens die folgende verschachtelte Hierarchie:
Fliese ist Vorfahr | Datei ist Elternteil | Datei ist Kind
Lassen Sie uns das erklären:
Accentsconagua
is- * Klassen wo * ist eine Zahl zwischen 1 und 12. Zum Beispiel eine Kachel mit der is-6 Die Klasse nimmt 50% der horizontalen Fläche ein.ist vertikal Klasse.ist-Kind Klasse dazu und die ist-Elternteil Klasse zum übergeordneten Feld.An diesem Punkt sind wir bereit, diese Theorie in die Praxis umzusetzen.
Die erste Zeile enthält drei Spalten. Die erste und die dritte Spalte nehmen ein Viertel der Breite der Zeile ein, während die zweite eine Hälfte der Breite der Zeile ausmacht. Darüber hinaus besteht die dritte Spalte aus zwei untergeordneten Spalten.
Basierend auf dem, was wir oben besprochen haben, ist hier die erforderliche Markierung:
Beachten Sie, dass wir nur für die zweite Spalte über das Feld eine bestimmte Breite definieren is-6 Klasse. Wenn wir wollen, können wir natürlich das hinzufügen is-3 Klasse auch in die erste und dritte Spalte. Dies ist jedoch nicht erforderlich, da beide Spalten wachsen (haben sie) Flex-Grow: 1) Um den verbleibenden horizontalen Raum zu teilen.
Darüber hinaus weisen wir jedem Artikel nur für das Styling einige benutzerdefinierte Klassen zu. Der Einfachheit halber verzichten wir auf den Inhalt der Artikel.
Ähnlich wie in der ersten Zeile enthält die zweite Zeile drei Spalten. Die erste nimmt eine Hälfte der Breite der Reihe ein, während die zweite und die dritte ein Viertel der Breite der Reihe ausmachen. Darüber hinaus enthält die zweite Spalte zwei untergeordnete Spalten.
Hier ist das verwandte Markup:
Die dritte Reihe ist etwas komplizierter; Hier haben wir zwei Spalten. Die erste ist doppelt so groß wie die zweite. In der ersten Spalte haben wir zwei Unterzeilen. Die erste Unterzeile enthält drei gleich große Spalten, während die zweite Unterzeile zwei gleich große Spalten enthält.
Der Markup für diesen Fall lautet wie folgt:
Wie Sie dem obigen Code entnehmen können, sieht die verschachtelte Hierarchie folgendermaßen aus:
Fliese ist Vorfahr | Die Datei ist -8 ist-vertikal | | | Datei / * Zusatzklasse für IE * / | | | | | Datei ist Elternteil | | | Datei ist ein Kind | | | | | Datei ist Elternteil | | | Datei ist ein Kind | | | | | Datei ist Elternteil | | Datei ist ein Kind | | | Datei / * Zusatzklasse für IE * / | | | Datei ist Elternteil | | Datei ist ein Kind | | | Datei ist Elternteil | Datei ist ein Kind | Datei ist-Elternteil Datei ist-Kind
Wenn Sie sich ein besseres Bild von der Funktionsweise des Kachelelements machen möchten, lesen Sie die Dokumentation durch und überprüfen Sie die zugehörigen Klassen mit den Entwicklerwerkzeugen Ihres bevorzugten Browsers.
Heutzutage bietet Flexbox eine wirklich großartige Unterstützung, und unser Blog-Layout sollte daher in allen modernen Browsern funktionieren.
Während ich die Seite in verschiedenen Browsern testete, stellte ich jedoch fest, dass der IE 11 nicht das gewünschte Ergebnis lieferte. Folgendes habe ich gesehen:
Beim Testen mit Microsoft Edge sind diese Probleme jedoch nicht aufgetreten. Vielleicht ist es ein Fehler mit den neuesten Versionen von IE. Trotzdem habe ich versucht zu sehen, ob es eine schnelle Lösung gibt, um diese Probleme zu vermeiden.
Ich habe es durch Hinzufügen gelöst Flex-Basis: Auto zu den Artikeln und den obersten Fliesen der ist vertikal Kachel der dritten Reihe (siehe vorherige Hierarchie).
Auch dies ist eine schnelle Lösung, die für dieses spezielle Beispiel zu funktionieren scheint. Für Ihre eigenen Implementierungen müssen Sie möglicherweise einige andere Änderungen in Ihrem Code vornehmen.
In diesem kurzen Tipp haben wir gelernt, wie Sie mit Bulma, einem auf Flexbox basierenden Framework, ein responsives Blog-Raster erstellen.
Haben Sie Bulma schon einmal in einem Ihrer Projekte ausprobiert? Was denkst du darüber? Teilen Sie Ihre Erfahrungen in den Kommentaren unten.
