CSS Regions and Edge Reflow
Posted on 27 September 2013
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.
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:
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.