Adobe unveils Reflow for responsive design

Adobe Edge Reflow is a new responsive Web design tool for creating layout and visual designs with CSS and is available immediately as a preview at no charge in Creative Cloud. Edge Reflow features a resizable design surface that shows how layouts and visuals will adapt to different screen sizes. Leveraging the power of CSS, Edge Reflow enables users to create high fidelity Web designs on the application’s native Web surface.

Users can preview in the browser, inspect their design in real-time via Edge Inspect extension, and extract the CSS for use in Edge Code, Dreamweaver or any code editor. During the preview period, Adobe is actively seeking user feedback for Edge Reflow in order to help evolve the product. Users are encouraged to submit their feedback to Adobe through Github

In addition, Adobe also announced updates to Adobe Edge Animate with 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 exciting CSS capabilities found in modern WebKit browsers, including blur, greyscale, sepia, brightness, contrast, hue-rotate, invert and saturate filters. Previously, filter effects could only be achieved using tools like Adobe Photoshop.

Creative Cloud members also get an exclusive Dreamweaver update 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 leverage 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.

Check out this short video from Adobe