Join Paul Trani for an in-depth discussion in this video Getting familiar with the interface, part of Edge Reflow: Creating a Responsive Design.
Now when you first launch Adobe Edge Reflow, you're actually greeted by this welcome project. And if you don't see it, just go to the Help menu and open up Welcome Project. But this is great because this gives you an opportunity to start to play with some of this content. So I can select this text, for instance, and start to adjust the width of this text if I want to. Either visually or even numerically off to the side under the Layout tab. So I can adjust the size if I want to, just like that.
I can change the styling, potentially the color if I wanted to just like that as well. But not only that, there's more that's going on here, because there's actually media queries, otherwise known as break points, in this welcome project. So, I can click on this green bar, which will change this content to a 960 pixel size for any devices that would be that size. And click on 768. See the content change. Clear down to my mobile view right down here, and see that content change as I scroll through it.
So that's the basic of Edge Reflow, but really, what I want to do is I want to create my own project. So I'm going to go to File > New Project. And the first thing I'm going to do is just click on this background. And I want you to be aware of what's selected. So right down here, it says the container is selected. Okay? So that is great for that container. Notice how I can adjust the columns. And it's nice because I want to be able to layout content using a grid-based view. And adjust the opacity if I'm not happy with that. But now I can play with this container.
So I'll go into the Styling tab, and I'm just going to change the background color. Done very easily as I start to change it to sort of a darker teal color, kind of like that. Change it any way I want visually. But what's actually going on here as I come right down here. I'll click on these two carets, and this brings up the code that was just created. So it shows me the background CSS. I can copy that, use that wherever I want. But this is what's generated.
And I have the confidence in knowing that what I create in Edge Reflow is actually going to look great and be exactly what I'd expect in all modern web browsers. Now, I just made a, a simple change, but really, if you want to preview your project, you can go up to View and select Preview Mode, or just hit the Tab key. And you can toggle between your layout view and more of a full-screen view, if you want to. I'll also save this project just to my desktop as EdgeReflowProject.
And now I'm going to go ahead and preview it in Chrome or Safari. And you'll see, again, this isn't terribly exciting but you can see the content would appear here. And what it created is this HTML page. So let's go ahead and take a look at what gets generated. So going out to that folder, here's my Edge Reflow project. I'll go into this Assets folder. You can see my project previewer HTML, my actual page for my HTML file, as well as my CSS page.
So I can actually take this and use this anywhere I want if I want to. But I wanted to highlight this to show you that Reflow actually just generates CSS that I can use anywhere I want. In fact, my next step for this project is to add content to this page to start to create my layout.
- Understanding websites and mobile devices
- Creating your first layout
- Adding text that reflows automatically
- Building navigation
- Creating and styling HTML forms
- Creating tablet and mobile layouts
- Linking multiple pages
- Previewing your layout