Blog-Startseite mit Flexbox als Grid darstellen

Eine Freundin hatte mich gefragt, wie man die Beiträge auf der Startseite statt als Liste in einem Grid darstellen könnte. Ich habe ein wenig darüber nachgedacht und da ich in der Vergangenheit CSS Flexbox noch nicht so oft eingesetzt habe, wollte ich es einmal damit versuchen. Also habe ich letzte Woche im Zug zurück nach Berlin ein wenig an einer kleinen Lösung gebastelt.

Die Startseite von TwentyFifteen als Grid darstellen

Ich braucht zum Experimentieren natürlich wieder ein Theme und habe mich dabei wieder für TwentyFifteen entschieden, da es genügend Platz bietet, um die Startseite als Grid darzustellen. Wie sieht nun die Startseite des Themes normalerweise aus?

Screenshot of the default layout of TwentyFifteen

Die Beiträge werden in einer Liste von article Tags dargestellt. Jedes Tag hat einen margin zu den Seiten und ein top margin (im Bild nicht dargestellt), für den Abstand zwischen den einzelnen Beiträgen. Diese Darstellung wollen wir nun in ein einfaches Grid mit zwei Spalten umwandeln.

Erstellung des grundlegenden Grids

Um die article Tags in Reihen auszurichten, brauchen wir nur ein paar einfache CSS Flexbox Eigenschaften:

.home .site-main {
   display: flex;
   flex-wrap: wrap;
}

.home .site-main > article {
   flex: 1;
}

Das positioniert die article Tags nebeneinander, aber die Höhe und die margins sehen noch nicht wirklich gut aus:

TwentyFifteen with aligned articles

Anpassen der Höhe und der margins

Wie wir zuvor gesehen haben, hatten die einzelnen article Tags einen margins zu den Seiten. Diese addieren sich auf und die Abstände im Grid werden hierdurch zu groß. Wir entfernen diese margins und ersetzen sie durch paddings auf dem Container-Element (inklusive Responsive-Breakpoints) und fügen lediglich kleine margins zu den article Tags hinzu. Außerdem setzen wir eine Breite für die Flex-Items (dritte Wert der flex Eigenschaft):

@media screen and (min-width: 38.75em) {
	.home .site-main {
		padding-left: 7.6923%;
		padding-right: 7.6923%;
	}

	.home .site-main {
		display: flex;
		flex-wrap: wrap;
		margin: auto -2%;
	}

	.home .site-main > article {
		flex: 1 0 46%;
		margin: 0 2% 5%;
	}
}

@media screen and (min-width: 59.6875em) {
	.home .site-main {
		padding-left: 8.3333%;
		padding-right: 8.3333%;
	}
}

Mit diesen Erweiterungen sieht unser Ergebnis schon recht gut aus:

TwentyFifteen with fixed heights and margins

Aber es gibt noch immer ein Problem. Wenn die Auszüge unterschiedlich lang sind, haben die article Tags zwar die gleiche Höhe, aber der Footer ist nicht am Ende des Tags.

Mehrere Flexbox Layout einsetzen

Mit dem CSS, das viele von euch bereits kennen, ist das keine ganz leicht zu lösende Aufgabe. Eine Lösung, die man hier oft verwendet, ist die absolute Positionierung des Footers am Ende, sowie einem zusätzlichen Padding am Ende, in der Höhe des Footer, damit dieser den Inhalt nicht verdeckt. Es gibt aber eine sehr viel einfachere Lösung, indem wir einfach ein zweites Flexbox Layout verwenden:

@media screen and (min-width: 38.75em) {
	.home .site-main {
		padding-left: 7.6923%;
		padding-right: 7.6923%;
	}

	.home .site-main {
		display: flex;
		flex-wrap: wrap;
		margin: auto -2%;
	}

	.home .site-main > article {
		flex: 1 0 200px;
		margin: 0 2% 2%;
		display: flex;
		flex-direction: column;
	}

	.home .site-main > article footer {
		margin-top: auto;
	}
}

@media screen and (min-width: 59.6875em) {
	.home .site-main {
		padding-left: 8.3333%;
		padding-right: 8.3333%;
	}
}

Flexbox-Items können an zwei Achsen ausgerichtet werden. Innerhalb der article Tags richten wir die Items in einer Spalte statt einer Reihe aus (was die Standardausrichtung ist, die wir im ersten Flexbox Layout verwenden). Jeder Eigenschaft betrifft nun die vertikale Ausrichtung. Um den Footer am Ende des article Tags auszurichten, setzen wir einfach das margin-top auf den Wert auto.

Das Resultat

Mit diesen wenigen Zeilen, können wir die Startseite von TwentyFifteen in eine Grid-Darstellung verwandeln:

TwentyFifteen with the final grid layout on the home page

Ihr könnt das Beispiel-Theme für diesen Artikel wie immer in einem GIST finden. Es kann sicherlich an der ein oder anderen Stelle noch verbessert werden, aber die Idee sollte klar werden.

Ich würde gerne in Zukunft noch ein wenig mehr mit Flexbox experimentieren. Vielleicht finde ich ja ebenfalls eine einfache Lösung für eine Masonry-Darstellung der Startseite, die nur Flexbox verwendet. Oder hat vielleicht jemand von euch schon so etwas gefunden? Dann würde ich mich sehr über einen Kommentar von euch freuen.

Selbst-Pings auf einer Multisite deaktivieren

In einem Projekt wollte der Kunde alle Pingbacks von der eigenen Seite deaktivieren. Ich habe hierzu ein kleines Snippet gefunden, zu dem es sogar ein fertiges Plugin gibt. Es funktioniert aber nur für die aktuelle Seite. Was macht man also, wenn man auch Pingsbacks zwischen verschiedenen Seiten einer Multisite deaktivieren möchte?

Das erweiterte Snippet

Jedes Mal, wenn ein Beitrag oder eine Seite veröffentlicht oder aktualisiert wird, sendet WordPress einen Pingback an alle URLs aus dem Inhalt. Um die Liste der anzupingenden Seiten zu verändern, können wir die Action pre_ping mit einer einfachen Callback-Funktion verwenden:

Weiterlesen →

WordCamp Turin – Mein zweites italienisches WordCamp

Letztes Wochenende war ich auf meinem zweiten WordCamp in diesem Jahr und meinem zweiten in Italien: dem WordCamp Turin. Auf dem WordCamp London vor vier Wochen war ich noch sicher, dass ich dieses WordCamp nicht besuchen werde. Aber nur eine Woche später konnte ich einfach nicht widerstehen und habe meine Pläne geändert 🙂

Freitag: Contributor Day

Da ich das Ticket nur zwei Wochen vor dem WordCamp gekauft habe, waren eigentlich alle Tickets für den Contributor Day schon verkauft. Aber zum Glück konnte das Orga-Team noch etwas Platz finden und so konnte ich doch noch teilnehmen. Für das bevorstehende WordCamp Europe bin ich ja im Orga-Team und entwickle dabei aktuell an einem neuen Standard-Theme für WordCamps. Daran habe ich dann am Contributor Day gearbeitet. Ich hoffe, ich kann euch das Resultat davon bald mal vorstellen. Es gab außerdem einen kleinen Workshop zum Thema VVV, was mir sehr entgegen kam, da ich gerade ein neues Setup mit dem Meta-Environment für die Arbeit am neuen Theme aufgesetzt hatte.

Weiterlesen →

Mein drittes WordCamp London und das erste Mal als Volunteer

Vorletztes Wochenende kamen rund 600 Leute zum größten jährlichen WordCamp in einer europäischen Stadt zusammen: dem WordCamp London 2017. Dies war das dritte Mal in Folge, dass ich dieses Event besucht habe und es ist noch immer mein Lieblings-WordCamp. Ich hatte mein Ticket schon vor Wochen gebucht. Aber als das Orga-Team ein paar Last-Minute-Volnuteers etwas einen Monat vor dem großen Event brauchte, habe ich nicht lange gezögert und mich als Volunteer beworben.

Mein zweites WordCamp als Volunteer

Ich habe schon sehr viele WordCamps besucht, auf einigen davon gesprochen und bisher 3 Camp in Berlin mit organisiert, aktuell als Lead-Organizer für das nächste WordCamp Berlin. Aber dieses WordCamp war erst das zweite, bei dem ich mich als Volunteer beworben habe. im Gegensatz zu normalen Teilnehmern trifft man als Volunteer nicht nur viele neue Leute und kommt mit vielen weiteren in Kontakt. Man lernt auch sehr viel als Organisator dazu. Es gibt sehr viele Dinge, die alle WordCamps gemeinsam haben. Aber das WordCamp ist immer ein gutes Beispiel, in vielen Details, was man noch besser machen kann. Das Team um Jenny Wong hat wieder einen tollen Job gemacht. Genau wie schon in den Jahren zuvor.

Weiterlesen →

Umsetzung eines Datepicker Fallbacks für das HTML5 Datumsfeld

In einem meiner Adventskalenderbeiträge habe ich auch beschrieben, wie ihr Bereichsattribute für Datumsfelder setzen könnt. In einem Kommentar wurde ich darauf hingewiesen, dass dieses neue Eingabefeld bisher noch nicht in Firefox unterstützt wird. Es wird wohl zukünftig unterstützt (ab Verion Firefox 56+ kann es über einen Flag aktiviert werden), aber bis dahin sollten wir einen Fallback implementieren.

Browsersupport prüfen

Ich bevorzuge die nativen Eingabeelemente gegenüber den JavaScript basierten Datumsauswahlfeldern, besonders auf mobilen Geräten. Um zu prüfen, ob der Browser diese neuen Felder unterstützt, könnt ihr diesen einfachen Test verwenden:

Weiterlesen →