Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Experimenting with Adobe Edge Reflow and Brackets

DZone's Guide to

Experimenting with Adobe Edge Reflow and Brackets

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

 

reflow-brackets-workflow

Disclaimer: Reflow isn’t intended to be used the way I will lay out, and this isn’t an official Adobe thing. This is just me fooling around with some ideas. 

As a follow up to my post about what you do after you work with Adobe Edge Reflow, I’ve been exploring the source code Reflow creates looking to see what I can do with it. I’ve also been experimenting with Brackets to see if I could use that to deliver some workflow here. My experiments have yielded the unoriginally named “Brackets Reflow Cleaner.” It does what it sounds like: cleans the output you generate with Reflow in Brackets into something approaching that which you would use in a hand-coded HTML file. How does it work?

In Reflow, I use the ability to label parts of my design to indicate what I want things to be.  

reflow-cleaner-org-orig

I label things with element names to output them as elements.

reflow-cleaner-org-element

I add a period to the front of a string to mark it as a class.  

reflow-cleaner-org-classes

From all this I can create an outline that looks like my eventual HTML should look.

reflow-cleaner-org-all

Now, Reflow doesn’t really care about all this, as you can see by the HTML it outputs. It turns them into id’s.

reflow-cleaner-html-before

However, I have the HTML. I can run processes on it to convert it to something else.

reflow-cleaner-html-after

Now the CSS is a little different.  It is very verbose, full of ids, and crazy percentages. I’m not sure what to do with it.  But I can analyze it and maybe pull out some interesting details from it.

Color

reflow-cleaner-colors

Font

reflow-cleaner-fonts

Breakpoints

reflow-cleaner-css-breakpoints

I can even use the intelligence on the classes I setup in the Reflow file to analyze classes to figure out what was the same about them and create common classes for them.

reflow-cleaner-css-after

Here’s a video with a complete demonstration of it.

I wrapped all of this up in a Brackets Extension so that if you wanted to play with it, you could. It’s Open Source and available on github. 

This is an experiment and a starting place. I’d love to hear from anybody that give this a try. Is it usable? Does it help you do anything. Is this a crazy waste of time? All opinions welcome.


Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

Published at DZone with permission of Terrence Ryan, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}