Reflow Cleaner is a new extension for Brackets that helps front-end developers produce clean HTML and CSS from Adobe Edge Reflow design comps.
To explain this extension you have to start with Adobe Edge Reflow.
Reflow is a tool for building responsive HTML based design compositions. It’s a great way to ideate out designs that will work in a browser. However, the code it produces is not ready for production HTML work. It’s div and id heavy, and it’s written for display purposes.
I love Reflow, but I hate having to start from scratch when the content is tantalizing close to good HTML. Enter the Reflow Cleaner extension from Brackets. It allows me to convert the HTML Reflow creates into clean element based CSS, as long as I organize it in Reflow first.
It then goes a step further and allows me to extract information from the CSS Reflow creates. It pulls out information like colors, fonts, and responsive breakpoints. It can even extract out classes from the CSS using some analysis of the common properties.
See for yourself
This extension is available on the Brackets extension registry. To install, simply click the extension icon in the Brackets toolbar. Then select the
Available tab and search for
Brackets Reflow Cleanser.
Right now, this is all pretty experimental. I’d welcome feedback, and any ideas what more it should do.