Flexbox: Neuer Open-Source-Editor für den CSS-Layoutmodus

Ein quelloffener Drag-&-Drop-Editor erlaubt es auch Nicht-Entwicklern Flexbox-Layouts zu erstellen. Wir haben uns das Tool für euch angeschaut.

Flexbox: Einfacher Editor für den CSS-Layoutmodus

Mit CSS-Layoutmodus Flexbox könnt ihr Elemente innerhalb eines Containers für unterschiedliche Bildschirmgrößen positionieren. Der US-amerikanische Entwickler Brian Diehr hat jetzt einen einfachen Editor entwickelt, mit dem ihr Flexbox-Layout bequem per Drag-&-Drop erstellen könnt. Anschließend braucht ihr nur noch den fertigen CSS und HTML-Code zu kopieren.

flexbox_editor_css_1-595x337

Über den Flexbox-Editor könnt ihr Einfluss auf die einzelnen Elemente nehmen und so beispielsweise die Ausrichtung oder die maximale Größe festlegen. Alle Änderungen werden automatisch in fertigen CSS-Code übernommen. Den Quellcode der Web-App hat Diehr auf GitHub veröffentlicht.

Flexbox: CSS leicht gemacht mit diesem 20-teiligen Videokurs

Das CSS-Box-Modell ist ein hakeliges Dingen, mit dessen Hilfe sich etwas anspruchsvollere Websites nur unter Schmerzen erstellen lassen. Insbesondere für responsive Designs wird man sich als Entwickler bereits aus Gründen des Selbsterhaltungstriebs nach Alternativen umsehen. Eine der besten dieser Alternativen ist Flexbox. Ein leicht verständlicher Videokurs führt in die Materie ein.

Wer einmal mit Flexbox gearbeitet hat, geht definitiv nicht zurück. Dabei ist der Einsatz des alternativen Modells zwar nicht ausgesprochen schwierig, jedoch durchaus mit einer Lernkurve ausgestattet. Der kostenlose Videokurs, den wir euch heute vorstellen wollen, hilft da ungemein.

flexbox_editor_css_1-595x337

Der großzügige Spender des Kurses „What the Flexbox” stammt aus Kanada, heißt Wes Bos, und ist seines Zeichens sowohl Vollblut-Entwickler als auch Vollblut-Trainer. Mit einem Zeitaufwand von über 60 Stunden erstellte er jüngst einen umfangreichen, dabei leicht verständlichen Videokurs zu CSS Flexbox.

Dieser umfasst 20 einzelne Tutorials mit einer Länge zwischen vier und 16 Minuten. In den ersten 13 Teilen beschäftigt sich Bos mit den Grundlagen der Verwendung, während die folgenden sieben Teile Beispiele realer Anwendungsfälle, etwa eine Preistabelle oder ein Layout für eine Mobil-App, vorstellen.

Spielerisch CSS Flexbox lernen: Mit diesem Game hast du die neue Spezifikation in Nullkommanix drauf

Flexbox Froggy ist ein unterhaltsames Online-Game, das euch die Funktionsweise von CSS flexbox näherbringt. Wir verraten euch, wie das funktioniert.

Flexbox Froggy

Flexbox ist ein CSS-Layoutmodus, mit dem ihr Elemente innerhalb eines Containers passend für unterschiedliche Bildschirmgrößen anordnen könnt. Mit Flexbox Froggy gibt es jetzt ein lustiges Online-Game, das euch den Umgang mit dem Layoutmodus näherbringen will. Ziel des Spiels ist es, die auf der rechten Seite des Screens angezeigten Frösche auf die jeweiligen Seerosenblätter zu bewegen.

Statt per Tastatur oder Gamepad steuert ihr die Frösche in Flexbox Froggy allerdings per CSS-Code. Aber keine Angst, das Spiel richtet sich natürlich an Einsteiger, die sich mit Flexbox noch nicht auskennen. Daher werden euch auch Tipps angezeigt, sodass ihr nicht nur zum jeweils nächsten Level kommt, sondern auch lernt, wie das Layouten mit Flexbox funktioniert.

original: Flexbox: Neuer Open-Source-Editor für den CSS-Layoutmodus | t3n

Advertisements

Kommentar verfassen

Bitte logge dich mit einer dieser Methoden ein, um deinen Kommentar zu veröffentlichen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s