Flexbox Patterns: Fertige Bausteine für dein Design

Flexbox Patterns

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren...

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 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
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.

Flexbox Patterns
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.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

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.

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.

Hinterlasse einen Kommentar

1 Kommentar auf "Flexbox Patterns: Fertige Bausteine für dein Design"

Benachrichtige mich zu:
avatar
Sortiert nach:   neueste | älteste | beste Bewertung
Robert
Gast

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.

wpDiscuz