Edge Reflow application is used by web designers to create a native web surface with CSS design and layout features in a familiar and intuitive way. Edge Reflow helps designers to create resizable layouts that simulate the look and feel of both desktop and mobile devices; control media query breakpoints in design for custom device sizes, add typography to their projects using the integrated Edge Web Fonts, and preview their work on desktops as well as mobile devices using the integrated Edge Inspect plug-in. You can extract CSS code and hand off to developers with confidence that your design vision will remain uncompromised throughout development.
Edge Reflow does not supply with HTML export features, but you can preview HTML designs in web browsers and experience the responsive behaviors in end-user environments. Now let us get to know the new features of Edge Reflow.
Flexible design approach and media-query breakpoints
To change the sizes of design canvas there is resizable canvas handle available that can be moved in horizontal direction.
With each resize, you can begin to see sizes where your design will break down. Once you hit a size where the design breaks, move the canvas back to the last known good size and add a breakpoint. To do this, click on plus icon that adds a new media query marker to the ruler above the design surface.
Any change you make will be specific to this new media query. As you change your design at this size, specific CSS styles for this region will be highlighted in the properties inspector as a matching color to the current region’s color
To delete a breakpoint, select a marker and click the minus button.
By default, Edge Reflow uses maximum media queries and a desktop first approach. To change to mobile first, use minimums, defined in the media query manager panel. To show the panel, press and hold the plus button at the right of the media query ruler. Click on the button ‘Minimum’ to use minimum media queries.
In each new project there will be two elements available for you, the Body and a Primary Container. Any element you add to the canvas will be a child of this primary container. Design elements such as boxes, text and images can be dragged along the design surface. There sizes can be changed by dragging the markers of bounding box
Layout tab is designed to control all the CSS properties of the object. Here you can change the unit type, such as pixel, em and percent
You can place boxes, text or images in the primary container, or as children of other boxes.
Add a Text Box Tool (T) is designed to create text objects. To control text parameters choose the Styling tab.
If you exit text editing mode, you will be able to control the styles of the entire text element. You can add backgrounds, borders and shadows to text.
To add a Typekit or Edge Web Font to your project click on the “T+” icon in the Typography panel. To add a font to your project, click on the thumbnail. A blue checkbox will appear at the top right of the thumbnail to indicate that a font has been added.
The “Custom” tab on dialog allows you to add Typekit fonts. To do this, enter the seven character kit id to the input field.
Fluid customizable grid system
To change your grid settings in Edge Reflow, select the primary container. Now Grid Options panel appears in the Layout tab.
Here you can specify the number of columns, gutter sizes, option to show outer gutters and an opacity setting. These settings can and should be adjusted for all breakpoints. When we move or resize objects on the Edge Reflow design surface, the elements will snap to the grid. You have the option to turn off the snapping in: View > Snapping > Snap to Grid.
Any images assets pasted into the project will be viewable in the Assets panel.
Here you can see the list of all the assets in your project. With the help of the Assets panel you can replace images with other images or delete them from the project.
You can apply styles to the elements of your design in the Styling tab of the property inspector. Styling options include adding borders, backgrounds and shadows.
You can copy Visual Styles from one element to any number of selected elements. To do this, select an element you’ve styled and go to Edit > Copy Visual Styles. Now select one or more other elements and go to Edit > Paste Visual Styles.
Edge Inspect is integrated into Reflow that allows to show how your design works responsively on various screen sizes. To use Inspect with Edge Reflow, start Inspect on your desktop and all your devices. Click on the Edge Inspect icon on the top right of Edge Reflow.
This will open up the Edge Inspect panel. From the device, add a connection to Edge Reflow by specifying the IP address of your desktop. Now, any changes you make on the Edge Reflow canvas will be reflected on your device, in real time. Designs can be also previewed in your Chrome browser (View > Preview in Chrome).
Exposing Design Details
You can easily inspect the CSS that describes entire element on the design surface. To grab the CSS of an element, select the element and then click the “< >” icon in the DOM bar. The CSS in the panel describes layout and styling across every media query you’ve defined.
All CSS can be copied and pasted into the code editor of your choice. This allows the developers closely follow the original design vision.
Edge Reflow is currently a preview release, which means that app has the limited functionality. Goal of Edge Reflow team is to provide community members an opportunity to try out the application and hear all your feedbacks on the Edge Reflow web forum. Future updates will allow a Photoshop or Illustrator file to be imported as a starting point, speeding up the responsive design process for users of those tools.