Elliot Jay Stocks is a designer, speaker, and author. He is the Creative Director of Adobe Typekit, the founder of typography magazine 8 Faces, one half of Viewport Industries, and an electronic musician.

CSS Regions and Edge Reflow

Posted on 27 September 2013 4 comments

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.

4 comments

  1. Michel

    Michel

    27 September 2013 @ 01:04PM #

    A note:

    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?

    The Photoshop feature you mention have been available for long time to Adobe Fireworks users, as a simple free extension (see: http://johndunning.com/fireworks/about/GenerateWebAssets). Actually, this new “feature” is a very close rip-off of the Fireworks “Generate Web Assets” command that John Dunning released early in 2013… It’s sad when I see Ps Team lately copying features from other apps and then claiming them as “new features”; I can say this for sure about the “generate web assets”, “rounded rectangles panel” (available in Fireworks for 10+ years!) and many more… :-(

  2. Iain

    Iain

    28 September 2013 @ 01:20PM #

    @Michel — In regards to what you have said (which is completely tangential), that comment works both ways, my friend, and your point is redundant. I find it cute when people claim Adobe is ripping off other applications when they haven’t considered the framework, the demand, the upkeep, the code, and the method. Yes Fireworks had rounded rectangles for 10 years but a reason that Photoshop didn’t is because it’s not exactly the same framework or software as Fw, so it’s still effort to put that piece of software together and make it work.

    When people whinge and whine about Adobe/Photoshop stealing other features when they haven’t considered anything to do with the company or how it’s made or why, THAT’S sad.
  3. Pera Detlic

    Pera Detlic

    30 September 2013 @ 01:08PM #

    @Michel
    It seems that you are implying that Photoshop team ripped off
    Fireworks team? But, if you take into account that Adobe owns both, Photoshop and Fireworks, is it still rip off? :)

  4. Pera Detlic

    Pera Detlic

    30 September 2013 @ 01:09PM #

    Btw, nice tools. I don’t believe I will ever use code generation tools, but still I like what is done by Adobe in that domain.

© 2005 – 2014 Elliot Jay Stocks. All rights reserved. Powered by Harmony and tracked by Gaug.es. To keep updated with new content, you might like to subscribe to my RSS feed.