EJS logo

CSS Regions and Edge Reflow

Article illustration for CSS Regions and Edge Reflow

Since joining the ranks of Adobe, I’ve been lucky enough to get sneak peeks at early betas and access to the folks building some of these exciting new tools. The Edge team, like Typekit, seem to enjoy a degree of autonomy that allows them to work on some seriously boundary-pushing new apps, and lately they’ve been showing me what they’ve been up to with Edge Reflow.

CSS Regions

I’ve been excited about CSS Regions for quite some time. Not only will they play a huge part in making responsive designs more robust, but they also enable web designers to flow content in a print-like manner — if you’ve ever used InDesign to flow a Story over several text boxes, you’ll get the idea. As the W3C spec says:

The CSS regions module allows content to flow across multiple areas called regions. The regions are not necessarily contiguous in the document order. The CSS regions module provides an advanced content flow mechanism, which can be combined with positioning schemes as defined by other CSS modules.

In the latest version of Reflow, CSS Regions are baked right in. Here’s a quick video walkthrough from Jacob:

There’s more information on the Reflow blog and the Web Platform team’s blog. I thoroughly recommend reading them for the full details.

CSS Filters

While we’re on the subject of experimental CSS features, Edge Code — the code editor built by the Edge team — has a number of them built in as well, in addition to CSS Regions ( here’s how you use CSS Regions in Edge Code). CSS Filters (graphical filters in the Photoshop sense) are now available to use in the latest build, and you might be surprised to know that they work in the latest versions of Chrome and Safari (including iOS 7 Safari).

Reflow / Photoshop sync

Jumping back to Reflow, the latest build now sports some extremely useful integration with Photoshop. At this point I’ll be honest and admit that for a long time I wondered how the app could fit into my workflow, given that I usually jump back and forth between Photoshop and hand-coding during the design process (I’ll probably blog about this properly at some point, but for now it’s safe to say that I share Dan Mall’s opinion on this sort of design process), but given Reflow’s recent updates and what I’m about to show you, it’s clear that it’s become a real web design application:

In essence this means I can move my loose design ideas straight over into Reflow without needing to start a new Reflow project from scratch, and in my mind that’s a massive hurdle that’s just been removed. You can get the full details in the Edge team’s blog post.

Also worth noting, in case you missed it: you can now generate assets from Photoshop just by naming your layers. That’s pretty cool, isn’t it?

You can get all this awesome new stuff from creative.adobe.com.