Fibonacci Flexbox Composer: Komfortables Tool macht Flexbox einfach

Flexbox Patterns

Dieter Petereit

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

Die schlichte Web-App Fibonacci Flexbox Composer vom Niederländer Max Steenbergen erleichtert den Einstieg in den Umgang mit CSS Flexbox ganz enorm. Im Grunde musst du nicht einmal einen Funken Ahnung davon haben.

Flexbox: die flexible Seitenaufteilung erfordert Einarbeitung

Hier bei Dr. Web haben wir uns bereits desöfteren mit Flexbox beschäftigt. Die generellen Vorteile zeigten wir dir in diesem Artikel. Wenn du dich schnell und konzentriert einarbeiten willst, schau mal in diesen Artikel, in dem ich dir einen Videokurs vorstelle, der nicht mal etwas kostet.

Um schneller zum Ergebnis zu kommen, habe ich dir an dieser Stelle einige Flexbox Patterns, quasi Code-Textbausteine gezeigt, bei t3n stellte ich das kleine Werkzeug Flex Layout Attribute vor, das ebenfalls den Workflow beschleunigen soll.

Am Ende lässt sich nicht leugnen, dass Flexbox eine erhöhte Einarbeitung benötigt. Möchtest du es nutzen, ohne diese Zeit aufbringen zu können, benötigst du ein visuelles Tool, das dir das Coding weitestgehend abnimmt.

Fibonacci Flexbox Composer: visuelles Griddesign

Fibonacci Flexbox Composer: visuelles Griddesign

Fibonacci Flexbox Composer: Visuelles Strukturieren von Flexbox-Layouts

Steenbergens Fibonacci Flexbox Composer ist genau dieses Tool. Du startest mit einem Div, das die Bearbeitungsfläche des Browserfensters komplett füllt. Nun kannst du mit der Maus eben dieses Div weiter unterteilen. Dazu genügen wenige Klicks. Willst du einzelne Untercontainer näher definieren, kannst du links vom Editor Werte dazu erfassen. Da jedes geteilte Element wieder beliebig oft horizontal und vertikal teilbar ist, sind ebenso viele Layouts denkbar.

Hast du dein Design zusammengeklickt, scrollst du nach unten und findest dort die Möglichkeit, das erforderliche HTML und CSS zu exportieren, um es in dein eigenes Projekt zu integrieren. Ab diesem Zeitpunkt ist es wieder sinnvoll, über grundlegende Kenntnisse zu verfügen. Denn sonderlich sprechend ist der Code natürlich nicht angelegt.

Fibonacci Flexbox Composer: HTML-Vorschau

Fibonacci Flexbox Composer: HTML-Vorschau

Mit einer gewissen Akribie wird es dir dennoch gelingen, die Codestruktur zu durchschauen und deine Inhaltselemente an den vorgesehenen Stellen zu integrieren. Betrachte die Arbeit mit dem Composer als guten Einstieg in die Verwendung von CSS Flexbox.

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

E-Book Bundle von Andreas Hecht

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

Hinterlasse den ersten Kommentar!

Benachrichtige mich zu:
avatar