Platinum Partner
css,html5,tips and tricks,html & xhtml,brackets,adobe edge reflow,reflow cleaner

Experimenting with Adobe Edge Reflow and Brackets

 

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.


Published at DZone with permission of {{ articles[0].authors[0].realName }}, DZone MVB. (source)

Opinions expressed by DZone contributors are their own.

{{ tag }}, {{tag}},

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

{{ parent.tldr }}

{{ parent.urlSource.name }}
{{ parent.authors[0].realName || parent.author}}

{{ parent.authors[0].tagline || parent.tagline }}

{{ parent.views }} ViewsClicks
Tweet

{{parent.nComments}}