Reflow Cleaner

reflow-brackets-workflow

Disclaimer: Reflow isn’t intended to be used the way I will layout, 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, it 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. 

 

6 thoughts on “Reflow Cleaner

  1. Thanks for sharing! What an amazing tool I really hope to see updates. The problem you just pretty much solved is what causes most to not use Reflow, because it can’t generate production ready code.

    Like

  2. Hello, Terrence–

    Thanks for this effort. I am a bit puzzled by your ability, in the video, to do things am unable to do in Reflow. In the video you create articles, sections, define classes, assign headers to strings of text. I cannot see how to do any of this.
    Earlier this month on the Adobe forums the question was asked whether there were plans to enable in Reflow the ability to “Create reusable CSS with class definitions?” Vic Mitnick of Adobe replied, “Actually, we have better CSS management, including class styles, on our backlog for Reflow, but just haven’t gotten to it yet.”
    In the video, you show the line at the bottom of the Reflow screen that exposes the CSS. That line is read-only, as far as I can tell, You show in the video all sort of CSS that I have not been able to find a way to write. Have you found an undocumented way to define classes, create sections etc?
    Thanks

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s