Dieter Petereit 14. Oktober 2016

Fibonacci Flexbox Composer: Komfortables Tool macht Flexbox einfach

Flexbox Patterns

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.

Dieter Petereit

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+.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück