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.
Eine Antwort zu „Flexbox Patterns: Fertige Bausteine für dein Design“
— was ist Deine Meinung?
Ist mMn mehr als eine Alternative, insofern kann ich da nur beipflichten, dem Thema Flexbox mehr Zeit zu schenken. Meine erste Website wo ich mal wirklich Flexbox etwas einsetzen konnte, hat Fun gembacht. Das ganze fühlte sich ungewohnt an, aber ist schon ganz geil. Auf alte Browser gebe ich recht wenig, von daher konnte ich das hier mit ruhigem Gewissens machen, auch wenn der Browser-Support mittlerweile ausreichend ist.
Macht viele Dinge auf jeden Fall einfacher. Noch ein paar mal nutzen, bis es dann auch in Fleisch und Blut übergegangen ist, hoffentlich.