Blog

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

This extension is available on the Brackets extension registry. To install, simply click the extension icon 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.

12 Responses


10 Comments

  1. Takao says:

    Big extension, reflow with clean code is the dream for front-end developers i hope you will continue to improve it !

  2. Staublicht says:

    Wow. This makes Reflow much more useful. I had just stopped working on my first prototype in Reflow after realising that I’d have to lay out the whole structure and CSS again later. With this I can at least salvage some of the work for coding the html templates. Also your excellent rigorous approach towards the messy CSS will help me with rewriting it in SCSS.

  3. Kingfo says:

    Hi, great fix. Is it possible to make list-elements from Reflow – css and html – with Cleaner Extension or do you have any clue how to solve it in an easy way? I´m trying to implement a navigation to WordPress theme with the id “site-navigation”.

  4. Kingfo says:

    Well I solved it. I just renamed the text label beginning with “list” in RF to “list_liClassName1″. Then I cleaned it!

    Before cleaning with Brackets in RF:

    Box
    list_Text1
    list_Text1
    list_Text1

    … or something like this

    ul_ulClassName
    list_liClassName1
    list_liClassName2
    list_liClassName3

    Thank you for a good extension. I hope you update, it would be very nice :)

  5. Kingfo says:

    Sorry, it should be:

    Box
    list_Text1
    list_Text2
    list_Text3

  6. […] using the code in a production environment. Judging by the response in Edge Reflow’s forums, this hasn’t stopped people from trying. Reflow does enable you to copy and paste the generated CSS to use further downstream on your […]

  7. Wendy Barner says:

    CANT FIND LINK TO YOUR DOWNLOAD :BRACKETS REFLOW CLEANER

    Hi, I just started working in Reflow today and became awAre of the Smashing Magazine article below: anyway this is all way over my head but I love working in reflow. My clients domain name is with Blue host for a year and I fear I wont be able to get it over there?

    PUBLISHING AND EXPORTING
    Keep in mind that Edge Reflow currently has no exporting or publishing functionality. When previewing the website in a supported browser, Reflow generates the HTML and CSS, but inline comments warn you against using the code in a production environment. Judging by the response in Edge Reflow’s forums, this hasn’t stopped people from trying. Reflow does enable you to copy and paste the generated CSS to use further downstream on your actual website.

  8. […] the code in a production environment. Judging by the response in Edge Reflow’s forums, this hasn’t stopped people from trying. Reflow does enable you to copy and paste the generated CSS to use further downstream on your […]

  9. Tony says:

    How do i use or install this? I just download it from github. There are a bunch of javascripts.

    • Tony says:

      I see, those js are extensions of Bracket.

      • Peter Flynn says:

        See the bottom of the blog post: “To install, simply click the Extension Manager Icon in the Brackets toolbar. Then select the Available tab and search for Brackets Reflow Cleanser.”

        If you’d prefer to install it more manually, you can open Extension Manager, click the Install From URL button, and enter the GitHub URL there. But you normally shouldn’t need to do it that way.

  10. Tony says:

    Thank you!

2 Trackbacks

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*


eight − = 2

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>