kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

CSS Regions mit Adobe Edge Reflow

CSS Regions sind eine CSS-Technologie mit deren Hilfe Inhalte durch verschiedene Container geleitet werden können. Sollte euch das Konzept hinter CSS Regions unbekannt sein, lest bitte zunächst meine Einführung in dieses Thema. In Adobe Edge Reflow – einem Design-Tool für Responsive Web Design – sind CSS Regions nun ebenfalls verfügbar. Die Einführung in Edge Reflow findet ihr wiederum hier.

In diesem Beitrag erkläre ich wie CSS Regions in Edge Reflow aktiviert und eingesetzt werden können.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

Schritt 1 – CSS Regions in Reflow aktivieren

CSS Regions sind zum Veröffentlichungszeitpunkt dieses Artikels noch ein experimentelles CSS-Feature. Die Funktion muss daher zunächst in Reflow aktiviert werden.
Wählt in Reflow den Menüpunkt »View → Shiny Web Features«. Es erscheint ein Fenster mit verschiedenen experimentellen CSS-Funktionen. Aktiviert hier den Schalter für CSS Regions und bestätigt den Dialog.

CSS Regions in Reflow aktivieren
CSS Regions in Reflow aktivieren

Schritt 2 – Region Container erstellen

Wählt das Textwerkzeug von Reflow, zieht einen Textrahmen auf und schreibt ein wenig Text hinein. Über einen Rechtsklick auf den Textrahmen öffnet ihr das Kontextmenü. Wählt hier den Eintrag »Create Region Container«.

Textrahmen in Region Container umwandeln
Textrahmen in Region Container umwandeln

Schritt 3 – Verkettete Textrahmen erstellen

In der unteren rechten Ecke des Textrahmens ist nun ein kleines rotes Plus-Icon erschienen. Klickt das Icon an und zieht anschließend einen weiteren Textrahmen auf. Ihr erkennt anhand einer dicken blauen Verbindungslinie, dass die beiden Textrahmen nun verkettet sind. Die Funktion ist nahezu identisch mit Überhangtexten in InDesign.
Bei Bedarf können weitere Textboxen erstellt werden.

Verkettete CSS Regions in Reflow
Verkettete CSS Regions in Reflow

Schritt 4 – CSS Regions testen

Um sehen zu können wie die CSS Regions funktionieren, verändert die Größe der ersten Textbox soweit, bis Inhalte in den zweiten Container herüberfließen. In Reflow könnt ihr auch über eine Skalierung der Arbeitsfläche die Textboxen stauchen.

Wenn ihr das Projekt im Browser anschauen möchtet, wählt die Funktion »View → Preview in Chrome«. Achtet darauf, dass dazu CSS Regions im Browser aktiviert sein müssen.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

2 Kommentare

  1. Flo

    Verfasst am 30. Oktober 2013 um 10:41 Uhr.

    Was ist hier der unterschied zu dem css3-Slektor columns: ?

    Ich habe Reflow schon für den Produktiveinsatz probiert, aber im Moment erscheint es mir noch einfacher bzw zielführender, den Code selber zu schreiben. Eigentlich ist das Tool im Moment nur für Wireframing zu gebrauchen.

    • Jonas Hellwig

      Verfasst am 30. Oktober 2013 um 14:42 Uhr.

      Der Unterschied ist u.a., dass bei CSS-Columns der gesamte Inhalt in einem Container-Element steht. Bei Regions fließt Inhalt durch verschiedene HTML-Elemente. Abgesehen davon kann mit Regions ein viel komplexeres Layout konstruiert werden.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.