Edge Reflow, Edge Code, CSS Regions, and iOS 7 Mobile Safari

What do Edge Reflow CC, Edge Code CC, CSS Regions, and Mobile Safari have in common? As of today the CSS Regions feature is supported by Edge Reflow and Edge Code joining Mobile Safari which added support for CSS Regions with its latest update from last week (iOS 7 release).

Note: If you don’t know what CSS Regions is all about, then imagine a simple and elegant syntax that allows you, among others, to tell the browser to flow content through a chain of containers. And the browser will figure out how much content fits in each container.

Edge Reflow CC

Edge Reflow CC is arguably the first designing tool that adds support for CSS Regions. It is quite intuitive and helps you to use CSS Regions together with the rest of Responsive Design techniques in order to create a better layout.

In case you didn’t know CSS Regions can give web designers lots of power, conciseness, and expressiveness when authoring Responsive websites.

In order to enable CSS Regions support in Reflow, you have to click on View > Shiny Web Features… and then enable CSS Regions support.

ref-1

A very simple workflow would be:

  1. Create two or more containers.
  2. Select them and then right-click on them and select “Create Region Container”.
  3. After step 2, as you resize the containers (maybe because you added media queries to tweak the content for particular resolutions) the content flows between them.
  4. If you want to edit the content just double-click on any region. This will get you into region edit mode. This allows you to change the content of the regions.
  5. If you want to add new containers (regions) to your existing chain of regions just click on the “+” icon of any of the existing regions.
  6. If you want to delete a region from a chain, just select it and press Delete. This will delete just that node and the content will be redistributed between the remaining regions.

rf-2

Here the Reflow product manager is explaining the new workflow.

You can read more about this workflow on Reflow’s blog.

Edge Code CC

Edge Code CC brings support to CSS Regions support when writing CSS – you get code completion for CSS Regions syntax. You also get the WebPlatform.org documentation for this feature right within the tool.

You can read more on Code’s blog. Vincent Hardy, Director of Engineering for Web Platform at Adobe has a good post about CSS Regions and Reflow.

Why CSS Regions is important

Even if you don’t like what CSS Regions brings to the table and you don’t believe that it makes Responsive Design any better there is still one reason that makes CSS Regions important.

Three years ago there was no CSS Regions spec whatsoever. Then Adobe – a company that doesn’t offer a browser – came to W3C and made a proposal and showed some custom WebKit builds to showcase the use cases. Then over the next three years together with the rest of the CSS Working Group (people from Apple, Microsoft, Mozilla, Google, Opera, etc) we’ve worked hard to make sure we offer something that will truly push the web forward.

And the last amazing bit happened last week with the arrival of iOS 7. For the first time, our CSS Regions code is enabled in a consumer facing browser and one of the most popular, Mobile Safari (CSS Regions has been enabled in WebKit nightly and Canary/Chrome builds for some time now, and Microsoft’s version of CSS Regions has been enabled since IE 10). We can only expect to see it enabled in the rest of the browsers moving forward.

Finally, this makes Adobe the first non-browser company that has managed to add a major HTML/CSS feature to the “web population”.

Getting Edge Code CC and Edge Reflow CC

You can get them from the Creative Cloud website. All you need is a subscription and guess what, the free one is good too. You can download the Bike & Co example from here.

Follow the teams on Twitter at @reflow and @Edge_Code.

Leave a Reply

Your email address will not be published. Required fields are marked *