Flexbox Patterns: Fertige Bausteine für dein Design

Wer sich einmal intensiver mit Flexbox als Alternative zum klassischen CSS Box-Modell beschäftigt hat, wird wahrscheinlich nicht mehr zurück wollen. Der Haken an der Sache ist eben, dass man sich erstmal intensiv damit befassen muss. Wer hat dafür heute schon genügend Zeit? Und so bleibt man desöfteren alten Arbeitsweisen verhaftet, einfach nur, weil man weiß, wie man damit zum Ergebnis kommt. Lass uns das mal ändern. Für den Schnelleinstieg in Flexbox zeige ich dir heute das Projekt Flexbox Patterns.

Flexbox: Tiefer einsteigen

Wer die Zeit hat, sollte sich durchaus mal den kostenlosen Videokurs ansehen, über den ich für die Kollegen von t3n an dieser Stelle berichtete. Immerhin 160 Minuten Grundlagenwissen werden dir da vermittelt. Zwar ist der Kurs komplett in englischer Sprache, jedoch hat der Macher Wes Bos sich wirklich Mühe gegeben, langsam und verständlich zu sprechen. Wenn dir also etwa das Lesen von Harry Potter auf Englisch keine sprachlichen Probleme bereitet, sollte es auch mit dem Flexbox-Kurs klappen.

Flexbox Patterns: Startseite

Auch auf Dr. Web haben wir schon hier und da das Thema Flexbox aufgegriffen. Bei unserer Schwester Noupe gibt es eine Anleitung zum Bau eines responsiven Kommentarbereichs.

Flexbox Patterns

Dankenswerterweise hat sich nun auch noch der Interface-Designer CJ Cenizal des Themas angenommen und mit der Website Flexbox Patterns eine Sammlung mit sofort verwendbaren Best Practices als Bausteinsystem ins Leben gerufen. Zwar stehen momentan erst knapp ein Dutzend fertig einsetzbare Module zur Verfügung, das Projekt ist jedoch expansiv angelegt und im Übrigen decken die vorhandenen Module die wichtigsten Anwendungsfälle schon ab.

Beispiel: alternierende Reihen mit Flexbox

Zu jedem Modul erklärt Cenizal ausführlich und verständlich, was er warum und wie getan hat. Die entsprechenden Code-Schnipsel sind jeweils ebenso dabei, wie die vollfunktionsfähige Umsetzung der Elemente an sich. Generell sind alle UI-Elemente per Copy and Paste nutzbar, Cenizal empfiehlt aber, sie im Zusammenhang eines auch ansonsten semantisch korrekten Konzepts zu verwenden, also etwa mit HTML5-Elementen.

Flexbox Patterns bekommt eine ganze Menge Hype ab, seit es seinen Weg auf die Startseite von Product Hunt geschafft hat. Das zeigt zumindest, dass es für das Angebot eine große Nachfrage gibt.