Adobe launches Edge Reflow beta, plus updates to Dreamweaver and Edge Animate

You can finally try out Adobe's responsive design tool, as long as you're a Creative Cloud subscriber.

Adobe has today released the first public preview of Edge Reflow (above), a visual design application for creating responsive design layouts of websites – as well as generating CSS to pass to developers.

Like all of the new tools released today, the Edge Reflow beta is available only to subscribers to Adobe's Creative Cloud subscription service. Edge Reflow features an resizable layout window that shows how layouts and visuals will adapt to different screen sizes. Using a base of CSS code, Edge Reflow enables users to create high fidelity Web designs on the application’s native Web surface. It allows users to preview in the browser, inspect their design in real-time via the  Edge Inspect extension, and extract the CSS (below) for use in Edge Code or Dreamweaver (or any other code editor).

Adobe also announced an update to Edge Animate (above) to give it new CSS-based features, including gradients, CSS filters, and enhanced font support. Users will now be able to style and animate elements using radial or linear gradients, and preview Edge Web Fonts live in a new interface.

New CSS filter support for Edge Animate allows users to take advantage of CSS capabilities found in modern WebKit browsers, including blur, greyscale, sepia, brightness, contrast, hue-rotate, invert and saturate filters.

In addition, Adobe delivered an update to Dreamweaver (above) just for Creative Cloud members that improves interoperability with the Adobe Edge Tools & Services family and includes several new features to enhance code authoring ability and workflow. Fluid grid layout, a feature first introduced with Adobe Dreamweaver CS6, now allows developers to use class tags in addition to ID tags and features a new editing interface. Developers can also now easily preview, select and incorporate Edge Web Fonts into their Dreamweaver projects (below).  

This preview release of Edge Code includes features such as Live Development, which allows users to see changes in the browser as they make code edits, and also Quick Edit, which lets users edit code in context instead of switching between files. This latest update adds code hinting for CSS properties and HTML tags and attributes.

Note: We may earn a commission when you buy through links on our site, at no extra cost to you. This doesn't affect our editorial independence. Learn more.

Read Next...