Follow us

The future of responsive layouts is here!

By Jacob Surber on September 24, 2013 in Update
10

Apple’s recent release of iOS7 is not only poised to change the landscape of mobile operating systems, but is also a huge step forward in mobile browsing.  The new version of Safari introduces CSS Regions, a feature that will revolutionize how people approach responsive designs.  Regions enable designs to separate layout and content, something that was previously not possible.  Content can be made to “flow” through different containers of regions– ignoring DOM orders–which are typically laid out differently depending on screen size.

We are thrilled to announce that Reflow is the first design tool to support CSS Regions. A quick shout out to our friends from the Edge Code team, as they’ve also worked really hard to enable code hinting for CSS Regions in their latest release.  However, because CSS Regions is what we call a ‘shiny web feature’—something so cutting edge that it is not supported in all browsers, yet—you’ll need to enable it within Reflow.  To do so, simply click “View > Shiny Web Features,” and you will be able to turn on CSS Regions.

 

So how does CSS Regions work in Edge Reflow?

At its simplest, draw two text boxes on the canvas, right-click and select “Create Region Container.” Once you’ve done so, the content will be extracted from those text boxes and “flow” between the containers as you resize them.  What’s more interesting is if you place an image between the two containers, the content can still flow around the other elements in the DOM.  This is extremely powerful in creating the next generation of responsive layouts.

 

Some tips and tricks:

Double-clicking on region container will enter ‘region edit mode.”  This is where you’d be able to add or edit the content in the region.  To go back to the primary design surface, either click the back arrow in the DOM Bar or simply double-click the background.

You will see a “+” button on the bottom right hand side of your region containers.  Clicking this button allows you to draw the next box in your region flow. The “+” turns red to indicate that there is content not being displayed.  Click the icon and your cursor will change, allowing you to add another region container.

 

More information:

For more information on CSS Regions, please check out the blog post from Adobe’s Web Platform team.  Additionally, we’ve created a video walkthrough of adding CSS Regions to your responsive design in Reflow.  A few sample projects are also available to get you started on our new Shiny Web Features page.  As usual, if you have any feedback, please let us know either via Twitter (@Reflow) or the in-app feedback panel.

About the Author

Jacob SurberView all posts by Jacob Surber >