Reflow Cleaner Extension

Article by: Terrence Ryan

Reflow Cleaner Extension

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
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.

HTML
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.

CSS
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

The video cannot be shown at the moment. Please try again later.

This extension is available on the Brackets extension registry. To install, simply click the extension icon Brackets Extension Manager Icon in the Brackets toolbar. Then select the Available tab and search for Brackets Reflow Cleanser.

The Future
Right now, this is all pretty experimental. I’d welcome feedback, and any ideas what more it should do.

Leave a Reply

Your email address will not be published. Required fields are marked *