In today’s, we are going to explore a new tool from Adobe called Edge Reflow. I believe it helps creating a responsive website “looks so easy”, definetely something a designer and developer should check out.
Adobe Edge Reflow is at the time of this writing in public beta stage, and available to download for free. To download, login to the Adobe Creative Cloud site, and you can find the app listed in theApps Center page under the Edge Tools and Service section.
Setting-Up Grid And Workspace
Edge Reflow comes with a set of UI that allows you to manage responsive layout without dealing with codes.
At the left of the workspace, you will find several options to control webpage properties; you can set the number of columns, column gutter, the width of the content and specify the unit measurement for those lengths – px, percentage, or em.
In Edge Reflow, You can set “break points” easily. The break points are the threshold where your website styles will shift. To set the break points, click on the Plus button that is found at the top right of the workspace. Then, slide the page handler to the right or left and click on the plus button to set a new break point.
You can specify different styles for the elements on how they should look or adapt within each break points.
Adding Elements And Styling
Adding an element in Edge Reflow is as easy as a click. To create a new element, click on the rectangle icon and drag your mouse across the workspace. Upon selecting the element, Edge Reflow will display the properties that are applied, such as the width and the height, the margins, and the paddings.
You can find more options to add styles in the Styling tab. In this tab, you can add background color (even with gradients), borders (including border radius), and adjust the opacity for selected elements.
You can inspect the styles of the elements from the DOM Tree Inspector. It is found at the bottom of the workspace.
You can also preview the result in the browser by pressing Command + F12 (on Mac) or Ctrl +F12 (on Windows).
Conclusion
Since this is only a Preview, there are several key features that are not included. In the current version, I can’t find how to export projects to HTML and stylesheet documents, and the Preferencemenu is disabled.
Still, Adobe Edge Reflow looks really promising as a tool in the niche, and it could be very helpful particularly for entry-level users. With Reflow, they can create a responsive website without having to deal with the codes behind the screen.
