Monthly Archives: November, 2013

Send an object to the front or back in Edge Reflow

In the past week, someone asked on our user forums how to send an object to the front or back in Reflow. In Reflow, as elements are placed on the canvas, their default position value is “static”. When items are position: static, they do not support the z-index property which determines stack order.

To change the stack order of elements in your Reflow design, you must first change the position property from static to “absolute”, “relative” or “fixed”. You can do this in the Layout -> Advanced pane.

Image

Once your element is fixed, absolute or relatively positioned, you will see options in this pane for z-index.

Image

Click on the first button to push an element back in the stack order. Or, click the second button to send the object back in the stack order.

Push a style to all breakpoints in Edge Reflow

While working on a responsive design in Reflow. You may find yourself styling an element while you are in one of your breakpoints. For example, you may have added a background color and image to a box while in your 350px breakpoint like this:

Image

However, you actually want all of these styles on the default breakpoint. To push these styles to the default breakpoint, hover over the right edge of each style. You should see a button show up looking like this: Image. Pushing this button next to a style will push that region specific style to all breakpoints.

Image

Turning on CSS Filters and CSS Regions in Edge Reflow

Because CSS Filters and CSS Regions are not yet supported in all the browsers, Edge Reflow doesn’t have support for them turned on, by default. To use CSS Filters or CSS Regions in the tool, you need to go to the menu item: View -> Shiny Web Features. You will get the following dialog describing these features.

Image

Turn these features on.

Now, you will be able to use CSS filters at the bottom of your Styling tab for any element on your canvas.

Image

Or, you will be able to use CSS Regions which I have a tutorial for in an earlier blog post.

Where did my Generate menu go in Photoshop CC?

In just the past week, I’ve seen at least two situations where customers suddenly had their Generate -> Image Assets and Generate -> Edge Reflow Project disappear (or become disabled).

The first thing to troubleshoot in this case is to look at your preferences. Go to the menu item Photoshop -> Preferences -> Plug-Ins

Image

In the dialog menu, ensure that “Enable Generator” is checked. I’m sure there is a bug somewhere, but, this preference gets turned off sometimes!

Image

Hopefully, this helps. 

In the case of exporting Edge Reflow projects, if you are not able to see a menu option for File -> Generate -> Edge Reflow Project, please check that you have the folder: <install directory> / Adobe Photoshop CC/ Plug-ins/Generator/reflow.generate.  If you do not have this directory, uninstall and reinstall Edge Reflow. The Edge Reflow installer should automatically install the plug-in for you.

Using Min Media Queries in Reflow

Some things are not obvious in Edge Reflow. I’ve always found that modifying breakpoints that you have created is one of those things. By default, Reflow using max media queries. If you want to change your project to use min media queries, do the following:

1. At the very top right of the application long press on the down arrow (to the right of the plus symbol).

Image

 

This will bring up the orientation dialog.

Image

 

Here, you can change your project to use min media queries, update breakpoint labels or change the value of each breakpoint.

Simple… but, honestly, hard to find.