Edit CSS in Edge Reflow

I may have just not discovered this yet, but after all my searches I can't find anywhere that will tell me how to directly edit the CSS in Edge Reflow. So what I am asking is
a) are you able to edit css in Reflow, and if so b) how on earth do you do it?

Hi -
You're correct - the only way to edit CSS in Reflow is to use the Property Inspector.
thanks,
Vic

Similar Messages

Generate Edge Reflow link not in edit menu...

After loading Photoshop CC and looking in the Edit menu the is no 'Generate Edge Rflow' link. It should be under 'save for web' according to one of your videos but its simply not there. It is Photoshop CC I'm openning and I have tried quitting and reloading.

It should be under the file menu, and you need to have a PSD open in photoshop for the menu to enable. If you see the "File > Generate > Image Assets" menu but not "Edge Reflow Project" try installing or re-installing Reflow. The Reflow installer installs a plugin into Photoshop. You can also download a standalone mac plugin installer from http://adobe.com/go/reflowpsplugin_mac
You can also learn more about the plugin here http://html.adobe.com/edge/reflow/photoshop-plug-in.html
For refernence, here is what the menu should look like:
Thanks for trying the feature out. Hopefully this helps and let us know how we can improve it for you.

Fireworks to Edge Reflow?

I know Adobe don't like Fireworks but I'm hoping that they will have a workflow from FW6 to Edge Reflow. Is there any info on this?
Photoshop is great for image editing but it sucks real hard for web and mobile design, I just can't use it for that sort of work. I still find it mid-boggling how many people have FW installed and yet use PS for all their web and mobile design work. Unbelievable.

The output is bad, but it doesn't have to be, so I'm wondering which steps in building the FW layout in a particular way are most onerous. If you had to put all the elements you want to appear in a div together in their own sublayer, would that be too bad? What about naming elements in a particular way to specify how they get output? What if you had to use a special div auto shape instead of a rectangle to draw backgrounds and things?
I tried this process with great excitement when FW became able to export CSS-based layouts but the results were terrible so I abandoned it and just went back to producing the layouts as they were required visually. Your ideas are on the right track in terms of setting up the FW page and getting good output (with a better engine). Personally, I don't like to use lots of layers and never use sub-layers (selecting objects on the canvas in FW is so easy), so the sub-layers approach is less appealing but I do like the idea of a DIV auto shape. It would have to act as a container and be able to 'hold' the elements inside it, including other DIVs and possibly tables. I think shapes and text (content) should be styled using FW styles which would be converted into CSS styles (does it already do this? I haven't checked).
I think to really test the integrity of this process would require some more thinking and scenario-based documentation, which I would gladly do if you were interested in doing something in this space. I love FW and use it every single day.
That would require rebuilding it from the ground up, but I also believe that a graphics app built on an HTML renderer is the future, since you get layout reflows and rich styling for free. Reflow is nowhere to having sufficient tools for even a very basic drawing app (not that that's what it's trying to be right now).
I totally agree re the graphics app on HTML renderer which is why I'm so interested in moving the design and layout process onto a real HTML layer right from the start. This includes interactivity as well eg. rollovers, content flips, sliders etc. etc. ER immediately made me think like this but as you say, it's miles away from it and I don't expect Adobe to go to that place.
John, if you're interested in pursuing any of these ideas, I would be delighted to provide input and research into any effort. I am a UI designer/strategist for a web-based CRM/CMS company.
Cheers
Paul

Edge Reflow + Animate workflow.

I've already added my vote for that in the "ideas" section but I wanted to post a website that I'm working on that integrates the workflow... meaning I started the layout in Edge Reflow and then added Edge Animate assets.
Utimately I have to finish the whole thing in raw code only because the 2 programs are really not compatible in any way that makes sense. All I can take from that is there must be some other program in the works that will take these assets and make them work together -- however my desire is to simply begin a design in Edge Reflow and finish the work in Edge Animate.
Anyway, here's the website (low on content at the moment) that shows the workflow I'm after as a proof of concept.
If you dig into the CSS you will see that I customized the code to allow for a easier hand-editing approach... but obviously this is somewhat limited in that Edge Animate outputs javascript styling instead. I could deal with one or the other, but having to manage both is really a pain in the butt... so I would prefer it all in javascript for compatibility with Edge Animate.

Thanks for the feedback! I think your general view is right. Even if you were only using just one of the products, you would still need to do some final hand coding at the end to get the site to be the way you want. We definitely want to make it easier to use the two products together and smooth the whole overall workflow. The goal isn't to ever elminate the need to hand code, but make it really easy to move the relevant parts of code to where you want them to go. We're just starting on this path so your experience and comments on workflow are really valuable.

Creating Responsive Layouts in Reflow | Adobe Edge Reflow | Adobe TV

The true power of Reflow is not only designing and creating layouts using CSS, but the ability to have those layouts respond to different screen sizes. From desktop to tablet to mobile. Evangelist Paul Trani takes you through how to take an initial layout, add breakpoints and modify that layout to your liking for all the various screen sizes you'd like to target. Download Adobe Edge Reflow Preview from the Creative Cloud today and give us your feedback through the Adobe Forums or on Twitter: @Reflow @PaulTrani
http://adobe.ly/Y7cXmM

This is really nice, but how does it fit into the workflow in creating and editing a web site? I'd like to see an example of what you do with it once you've created a beautiful re-flowing page.

What Edge Reflow should keep in consideration

I've been following Edge Reflow for some time now, have used it to showcase developers my mockups, and have even used it in some rather large projects. Although currently mostly unusable to me for production in the current Preview, there is a lot you can do with it. The demand of responsive layout is no longer an option in my opinion, its what everyone expects. I've looked everywhere to try to find something similar, and recently came across a few sites that pull off what Edge is trying to do. So for the developers currently working on this or other Designers that need a good reference, here are some sites that I hope Adobe can bring into the Edge-Reflow-Photoshop workflow.
http://www.webflow.com/
http://froont.com/
https://www.easel.io/

My point with the post was not so much a single or multiple features within the other products, but rather the ease of use and intuitive design. The current design approach in Reflow at first seems VERY simply, until you begin actually moving your responsive elements around and realize its completely rearranging the DOM (of course, after reading multiple threads you realize there is a solution to it). The current Preview generated css is buggy and produces countless lines of **.123i482gg86dedsdfweflkj** infinite gibberish, not presenting me with a recognizable ID or class that I can later manually edit. The APPROACH of simplicity, the clean css, the ease of use, is the "feature" I'm pointing out to devs and designers alike in the above referenced. Wether the tools are browser apps, desktop software, web apps or whatever other list the can pertain too is not so much the point. I think Adobe has definitely taken the right approach with Reflow and looking to integrate with its current services. These tools cater to the designers. Most web devs already know how to configure a responsive web project and what code they need to make it happen, but in my experience (not putting anyone down here) lack a sense of composition and aesthetic principles. I'm not trying to to say that all web devs are colorblind angry geeks on green vga terminals that demand code knowledge for validation of a designers skills. My point is simply that intuitive tools which Reflow is intending and the afformentioned help a designer better navigate and explore aesthetic boundaries that other UI tools cannot provide, and therefor bring the reference of well executed projects currently being used and available as a landmark to where I believe Adobe should compare itself to.

Edge Reflow Integration Easier Blog Integration

Could you imagine if Muse had the same UI as Edge Reflow? Or atleast the same functions? Both Muse and Reflow generate HTML and CSS if Muse got rid of the three layouts for the Desktop, Tablet, and Phone and just used the same features as Edge Reflow, I could see so many more people using Muse. One of the major benefits for example would be when a client or anyone changes something in the in browser editing they are only changing that item in the desktop layout only. Were as with Edge Relfow it is only one single HTML page so it would change across all degrees of the responsive page. This would be my biggest suggestion right now for MUSE!! Mobile devices are the future of the internet and having a cleaner and faster website with only one HTML page rather than 3 different ones for different layouts would make a HUGE DIFFERENCE!!
The last thing I think Muse needs to work on the most is easier Blog integration. I have been able to use BC and integrate a blog but you still have to write code and take the CSS from your built website and then add it to the BC Blog. If there was a way for this to by easier that would be amazing!!
Thank you so much for listening to my suggestions.

this would be a dream.

How do I uninstall Edge Reflow CC?

I recently downloaded the app because I was curious about using it. Now I'm having issues on my print files (end of file) and the stability of Photoshop CC when I do things like adding layer masks and vector masks. When I look at the dump for output it's indicating that I'm using an unsupported layer type due to Reflow.
How can I uninstall Edge Reflow CC? I have an uninstaller for Edge Animate CC, but not one for Edge Reflow CC.
Applications > Utilities > Adobe Installers
Mac OS X 10.8.5
Thanks for any (helpful) responses in advance.

I said dump, I meant log. I didn't get a screenshot of the message. It said something to the effect of Generator had and error and close Photoshop. When I tried to save my files I received unexpected end of file encountered upon reopening the files upon restarting Photoshop. The first time I received a message was on creation of a layer mask from a vector path. The second time was in a different file, I was converting the vector path to a vector mask. Luckily I saved the original file. It's just a jpg. I was eventually able to edit the file (3 attempts).
[1;31mUnknown layer type, something is wrong with the document
[0mHandling an unknown change by deleting all generated files and resetting the state
Getting document info with these params: {"documentId":78,"flags":{"compInfo":true,"imageInfo":true,"layerInfo":true,"expandSmartO bjects":false,"getTextStyles":true,"selectedLayers":false,"getCompSettings":true}}
Photoshop message: {"id":16,"body":{"version":"1.0.0","timeStamp":1383789844.116,"id":78,"file":"/Volumes/cl ients/client/Images/industrial/hpu/G-18-T.jpg","bounds":{"top":0,"left":0,"bottom":1015,"r ight":2035},"selection":[0],"resolution":300,"globalLight":{"angle":120,"altitude":30},"ge neratorSettings":false,"layers":[{"id":4,"index":0,"type":"layer","name":"Layer 0","bounds":{"top":58,"left":54,"bottom":942,"right":1988},"visible":true,"clipped":false ,"mask":{"bounds":{"top":58,"left":54,"bottom":942,"right":1988}},"pixels":true,"generator Settings":false}]}}
Received complete document: {
    "version": "1.0.0",
    "timeStamp": 1383789844.116,
    "id": 78,
    "file": "/Volumes/clients/client/Images/industrial/hpu/G-18-T.jpg",
Also
Resetting state for document 78
Document path changed from "/Volumes/clients/client/Images/industrial/hpu/G-18-T.jpg" to "/Volumes/clients/client/Images/industrial/hpu/G-18-T.jpg"
Scheduling change to layer 4 of 78
Creating layer context for layer 4
Photoshop message: {"id":16,"body":"[ActionDescriptor]"}
[1;31mUncaught exception on Wed Nov 06 2013 21:04:04 GMT-0500 (EST):
Error trace: TypeError: Cannot read property 'name' of undefined
    at startLayerUpdate (/Applications/Adobe Photoshop CC/Adobe Photoshop CC.app/Contents/Required/Plug-Ins/Generator/assets.generate/main.js:1001:70)
    at /Applications/Adobe Photoshop CC/Adobe Photoshop CC.app/Contents/Required/Plug-Ins/Generator/assets.generate/main.js:980:21
    at runPendingUpdates (/Applications/Adobe Photoshop CC/Adobe Photoshop CC.app/Contents/Required/Plug-Ins/Generator/assets.generate/main.js:956:38)
    at null._onTimeout (/Applications/Adobe Photoshop CC/Adobe Photoshop CC.app/Contents/Required/Plug-Ins/Generator/assets.generate/main.js:982:17)
    at Timer.listOnTimeout [as ontimeout] (timers.js:110:15)

New Update to Edge Reflow CC Available!

Today, we are pleased to announce that an update to Edge Reflow is now available. Included in this release are the following new features:
Multi-page design: On the right side of Reflow’s design surface (below the recently added ‘Assets Panel’ and above the canvas resize handle), you’ll notice a brand new ‘Pages Panel.’ Here, you can easily duplicate, rename and navigate between all of the pages in your project. Once your design is created, a new navigation bar at the top of the browser preview will allow you to switch between all the pages within your project.
In-app preview mode: There is now a simpler and more immediate way to see your design. Try the new in-app preview mode by hitting the TAB key. The app’s UI, including on canvas guides, will disappear, leaving you with just your design.
Right-click support: Also included in this release is the support for right-click. Now, with a simple right click, you will be able to copy and paste styles, duplicate elements and turn an asset into a background image.
Cmd/Ctrl: One of the most commonly used actions in Photoshop and Illustrator is the Cmd/Ctrl key, which allows you to toggle between placement and selection mode. You can now use the same shortcut in Edge Reflow. You can also pull up the ‘short cut sheet’ in Reflow by hitting Cmd/Ctrl +/.
Improvements to “Undo”: Drastic improvements have been made to the reliability of the undo function. We are aware of some odd behaviors in the past, and they have been addressed in this release.
Save to generate HTML/CSS: In this release, we’ve made the HTML and CSS more accessible. Previously they were only created when the project was previewed in Chrome or on devices using Edge Inspect. Now, however, every time you save your work, the HTML/CSS for each page will be generated and made available in the ‘assets’ directory of your project.

Hi all,
If you are unable to see the update in your Creative Cloud application, uninstall the Creative Cloud application and reinstall it.
Thanks,
Preran

Can I get my Edge Reflow website hosted anywhere?

Will I be able to take my Edge reflow website to bluehost to be hosted? How do I get it over there? Thanks Wendy

I just found this online, is it true?
PUBLISHING AND EXPORTING
Keep in mind that Edge Reflow currently has no exporting or publishing functionality. When previewing the website in a supported browser, Reflow generates the HTML and CSS, but inline comments warn you against using the code in a production environment. Judging by the response in Edge Reflow’s forums, this hasn’t stopped people from trying. Reflow does enable you to copy and paste the generated CSS to use further downstream on your actual website.

Inconsistent font style behavior on Edge Reflow CC (Preview) for Windows

Adobe Edge Reflow CC Preview for Windows has wildly inconsistent behavior regarding font styles. Why is there no button for bold in the UI? Why do I have to type "bold" into the Weighting dialog text box to have my styled text render as such in Chrome? Why does text inside a box/div styled with the italics button render in Reflow but not in Chrome?

Hey there,
The font weight can be changed here:
With CSS there are both text values such as "bold" and numerical values from 100-900 usually. We gave you the ability to use either.
If you are seeing issues with a font rendering set to italic in Reflow and not in previewing properly in Chrome, can you let me know the typeface you are using? I'd like to check it out as well.

Screen resolution to set up photoshop file for edge reflow

hi :
i'm learning responsive design along with edge reflow. I'm designing a web site that works responsively for all devices. I'm starting with a psd layout. I set up my photoshop at of 960x1136 currently.
my edge reflow breaking point for mobile is 768px currently. Perhaps i should modify my psd file to 768 width as well. but before i do that i have the following problem to resolve. When i view this on my iphone thru edge inpect. it's displaying a width of prob. 320 viewport width. which makes all the fonts and images look too big and of course the layouts are in disarray b/c there isn't a corresponding layout for that view port size.
i understand the difference btw viewport size and screen size. But I'm confused re: the size to set up my photoshop file.
should i have set up my photoshop file based on "viewport " size rather than screen density?? (ie. 320x480 viewport for the smaller iphone rather than 640x960 which is the actual screen pixels) and create high res images separately for retina displays??
what i'd like to have is to have corresponding font sizes and box sizes btw the edge flow file and photoshop psd. so if pick 1.5 em font in edge reflow, the same font in photoshop file is also 1.5 em. and perhaps saving images as smart object so the images can have higher resolution?
please advice.
thx
grace

Maybe I'm wrong, but the best option would be to work with percentages, not pixels.
You can see examples in this Adobe links:
CSS Percentage vs. Pixels - Re: How can convert the em,px,pt and % in css - CSS Width percentage layout issues - Re: DW CC Fluid grid layout how to change px width for desktop layout
I hope it has been helpful
sorry, I forgot this link in Adobe site: Ten things you need to know about responsive design | Adobe Developer Connection
See you,
Masters and MBA

My option to export to edge reflow isn't there in Photoshop CC 2014

We recently went to the Creative Cloud at work (from CS5) and we are running CC2014 for most items.
I'm running a similar set up at home and my export to edge reflow seems to work fine. On my work machine the option isn't even there.
I've un-installed and re-installed edge reflow, I've manually installed the plugin anything else I can do to fix this issue?
Thanks

I have solved it myself after hours upon hours of research that is now completely foolish.
I feel completely stupid and here's why:
All I needed to do was go into Photoshop CC and go into Edit>preferences>performance>and select 'use graphics processor'
If you're like me and KNOW your computer is good enough to run this, make sure it's running your actual graphics card.

A Sneak Peak of Adobe Edge Reflow | Adobe Edge Reflow | Adobe TV

Adobe Edge Reflow is our latest and cutting edge tool to help you create responsive layouts using standards-based CSS. Check out this video where Senior Product Manager, Jacob Surber, will share with you Reflow's design philosophy and core features.
http://adobe.ly/QQ6dbJ

I'm confused on how these new Edge products will work into the product line in relation to Dreamweaver. Dreamweaver CS6 has some very effective responsive web design capabilities which I am using heavily, but it seems like with Edge Reflow and Edge Code, Adobe might be steering things in a different direction.
I am a developer, and spend a good portion of my days in Dreamweaver. I've also got a substantial investment on Dreamweaver extensions. Can you shed some light on how Edge products are meant to complement or compete with Dreamweaver? It seems like you need to sell Dreamweaver and the Edge products to the same audience. How's that going to work?

Introduction to Reflow | Adobe Edge Reflow | Adobe TV

In this video Evangelist Paul Trani takes you through a new tool Adobe is working on called Reflow. Reflow allows designers to create and style layouts and then make that same layout responsive, allowing it to work across desktop, tablet and mobile devices. Download Adobe Edge Reflow Preview from the Creative Cloud today and give us your feedback through the Adobe Forums or on Twitter: @Reflow @PaulTrani
http://adobe.ly/12cnyEN

also will this work with external stylesheets that you can load into the program. for instance, there could be an FTP section where you can put in FTP addresses for various websites. You log into the FTP for a site, it loads all of the external CSS files, and then you can start tweaking the CSS that's already available in them visually, add breakpoints, etc. instead of starting from scratch.

Edit CSS in Edge Reflow

Similar Messages

Maybe you are looking for