2

I am building a project using Reflow. It allows to play with the layout, set the breakpoints and so on. How can I get the code (HTML and CSS) for the finished page?

There is an option Preview in Chrome which creates a preview files, but the code is not perfect and it says: <!-- This code is only meant for previewing your Reflow design. -->

2 Answers 2

2

You can't export HTML and CSS from Reflow at the moment. From the Adobe Edge Reflow FAQ:

Does Edge Reflow provide HTML export features?

No, but you can preview HTML designs in web browsers and experience the responsive behaviors in end-user environments.

Also:

While Edge Reflow creates HTML during the design process, the tool is focused on enabling designers to share their responsive design intent and for CSS to be extracted for use either by the designer or a developer as part of the website production process.

Edge Reflow is a prototyping tool at the moment, not a WYSIWYG web design tool that provides friendly HTML export. Adobe intend you to use it as a bridge between Photoshop and hand-coding:

  1. Create art assets in Photoshop.
  2. Mock up your design in Edge Reflow using a real browser rendering engine.
  3. Hand-code the design yourself. Copy CSS by clicking each container in Reflow's navigation bar at the bottom of the screen if you need to:

Copying CSS in Adobe Edge Reflow

That's about as good as you'll get at the moment. Is is a 'preview' app, though, so it's early days.

0

From http://forums.adobe.com/message/5259055

Save (or Save As) your current Reflow Project. Navigate inside the project folder and locate the "assets" subfolder. Inside you will find all the HTML, CSS and JavaScript code of your project.

1
  • This doesn't work for me. Save doesn't create any files in Assets folder. Only Preview in Chrome creates the project_preview.html file.
    – strah
    May 28, 2013 at 9:46

Not the answer you're looking for? Browse other questions tagged or ask your own question.