IntroductionWelcome| 00:00 |
(music playing)
| | 00:04 |
Hello. I am Joseph Labrecque, senior interactive
software engineer, Adobe education
| | 00:10 |
leader, and Adobe community professional.
I've been working with web standards
| | 00:15 |
technologies for well over a decade and
Edge Reflow is an exciting new visual
| | 00:19 |
design and layout tool for creating
responsive web designs.
| | 00:24 |
The lessons I'll be presenting in this
course will provide a solid overview of
| | 00:29 |
the Edge Reflow tool.
First, we'll explore the major interface
| | 00:34 |
elements, such as the application menu,
toolbar and design surface.
| | 00:38 |
Next, we'll have a look at the included
tools and see how to build out a
| | 00:43 |
responsive layout.
Finally, we will learn various export
| | 00:47 |
options and examine some next steps in
order to complete our exploration of the tool.
| | 00:54 |
As part of the Adobe Edge tools and
services offering, available through
| | 00:58 |
Creative Cloud, Edge Reflow is poised to
change how web professionals approach the
| | 01:03 |
task of visual web design with responsive
techniques.
| | 01:07 |
Let's get started.
| | 01:08 |
| | Collapse this transcript |
|
|
1. Getting StartedResponsive web design| 00:02 |
This lesson provides an overview of
responsive web design, and how Reflow can
| | 00:06 |
assist with the design of responsive web
layouts.
| | 00:10 |
So when we're talking about responsive
web design, what we mean is that the
| | 00:15 |
content is authored in such a way that
it's going to respond to any sort of
| | 00:21 |
changes in screen size.
So it's sort of screen agnostic.
| | 00:27 |
And right here you can see that I've got
this website for Reflow actually opened
| | 00:33 |
up on a desktop browser.
And if we scroll down we can see that
| | 00:38 |
things are optimized for desktop.
But, if I take this and actually start
| | 00:45 |
resizing it to, say, something that would
be compatible with a smart phone, then
| | 00:53 |
when we scroll down we can see that all
the content responds to that change in
| | 00:59 |
layout and everything kind of shrinks
down to one column.
| | 01:02 |
And it's very easy to actually flick
through on something like a smartphone.
| | 01:10 |
Similarly if we were on a tablet the
layout would adapt to that as well.
| | 01:18 |
While many people have found good
solutions for doing this in the past,
| | 01:23 |
it's most always been available only
through hand coding of CSS properties.
| | 01:28 |
That's where Reflow comes in because
Reflow is a visual tool to create these
| | 01:34 |
responsive layouts from a designer's
perspective.
| | 01:37 |
So Reflow has this design surface that
you can actually move to adapt to any
| | 01:45 |
specific size that you want.
It also has a system of break points.
| | 01:51 |
And these break points can be adjusted as
we go through here.
| | 01:54 |
And you can change this depending on, you
know, things you want to practice, things
| | 01:59 |
you want to try out.
And also items that, you know, might
| | 02:03 |
actually be something you want to target.
You could target specific smartphone
| | 02:07 |
sizes, specific tablet sizes, and so
forth.
| | 02:10 |
Reflow allows for all of this.
So this has been a quick lesson in
| | 02:15 |
responsive web design and Reflow's role
in creating these designs.
| | 02:22 |
To learn more about responsive web design
I can recommend some other courses on lynda.com.
| | 02:30 |
Among these are Responsive Design
Fundamentals with James Williamson,
| | 02:36 |
Creating a Responsive Web Design with
Chris Converse, and Responsive Design
| | 02:42 |
Work Flows with Justin Putney.
These three responsive web design courses
| | 02:48 |
will provide you with a great foundation
when it comes to responsive design.
| | 02:54 |
| | Collapse this transcript |
| Acquiring and installing the software| 00:02 |
This lesson details how to go about
acquiring the Reflow software, and
| | 00:06 |
installing it upon your machine.
So, if you'll notice, we're at the
| | 00:10 |
website here called html.adobe.com, and
when you actually get to this website,
| | 00:16 |
you won't necessarily be at the Reflow
section just yet, but it's very easy to find.
| | 00:22 |
All you have to do is go to edge tools
and surfaces.
| | 00:25 |
And then choose edge reflow.
Once you're here, you can scroll down a
| | 00:30 |
little bit.
And here's a button that says get started.
| | 00:34 |
So if we click this, we're actually taken
to creative.adobe.com, which is the Adobe
| | 00:38 |
creative cloud.
So I already have an Adobe ID, you can
| | 00:45 |
create one here if you want to.
And creating an Adobe ID will gibe you
| | 00:49 |
access to the creative cloud starter
account.
| | 00:52 |
Which basically gives you free access to
a few different tools and services.
| | 00:57 |
I'm going to type in my actual Adobe ID
though.
| | 01:02 |
And my password for that ID.
And just sign in.
| | 01:08 |
So once this happens I"m actually taken
into the Adobe Creative Cloud, and from
| | 01:20 |
here i can click on Apps...
And once I'm in Apps, I can scroll down
| | 01:27 |
to edge tools and services.
And you'll see here that there are a
| | 01:32 |
number of different edge tools that you
can download.
| | 01:34 |
Such as Edge Animate, Edge Code, Edge
Inspect.
| | 01:38 |
And here we have Edge Reflow.
So, what you'll want to do is actually
| | 01:42 |
download Edge reflow here.
And at preview two, this actually
| | 01:47 |
downloads a little installer file.
So just hit OK.
| | 01:50 |
And you can see here comes the installer.
And that will come down to our machine
| | 01:56 |
locally, where we'll be able to run it to
install the program.
| | 02:02 |
Okay.
This is now downloaded to my local
| | 02:04 |
machine, so I can click on the installer
to actually run the installation process
| | 02:11 |
for Reflow.
So here's the Adobe Edge Reflow preview setup.
| | 02:16 |
We have to accept the terms of the
license agreement, and of course you
| | 02:19 |
should go through and make sure that this
is acceptable to you, and then we hit next.
| | 02:27 |
At next, we can actually specify a
specific folder to install this to.
| | 02:31 |
I'm just going to use the default.
Next.
| | 02:35 |
And here we can click install to complete
the installation of Edge Reflow.
| | 02:52 |
Alright, so it tells us that Edge Reflow
was succesfuly installed and to click finish.
| | 02:58 |
So I'm going to do just that.
And from here we should be able to just
| | 03:02 |
go to Reflow on our local machine and run
it.
| | 03:07 |
I happen to be on Windows, so just go to
the start menu and, there's Reflow.
| | 03:12 |
So in this lesson we've seen how to
acquire and install Adobe Edge Reflow.
| | 03:22 |
| | Collapse this transcript |
| Using the exercise files| 00:02 |
In this lesson we provide an overview of
how to use the course exercise files.
| | 00:07 |
Many of the lessons in this course have
associated exercise files which you can
| | 00:13 |
acquire form the website.
And once you download these they will be
| | 00:18 |
organized in a succession of chapters,
depending upon which chapters actually
| | 00:24 |
have exercise files assigned to them.
So within each chapter, things are broken
| | 00:31 |
by chapter lesson.
So chapter four, lesson one, chapter
| | 00:34 |
four, lesson two.
So on and so forth.
| | 00:36 |
So let's say I wanted to have a closer
look at chapter four, lesson five.
| | 00:42 |
I could just go in there, find the
particular project that I want to open.
| | 00:49 |
Here's the actual Reflow document, so a
.rflw document.
| | 00:57 |
Double clicking on this will open it up
in Reflow and at this point we can
| | 01:02 |
examine any of the objects in here and
peruse the different elements, break
| | 01:08 |
points, styles and values at our leisure.
So, this lesson has been a quick
| | 01:13 |
overview, of how to access, the exercise
files, for this course.
| | 01:19 |
| | Collapse this transcript |
|
|
2. Exploring Edge ReflowThe application menu| 00:02 |
The Reflow application menu is a small,
but necessary part of the overall application.
| | 00:08 |
This lesson examines the options
available through this menu.
| | 00:12 |
So here we've opened up Edge Reflow and
the Application menu is located right at
| | 00:18 |
the top here.
And we have normal things like File,
| | 00:21 |
Edit, View, and Help.
So let's have a look at these.
| | 00:25 |
Under File, we have the option to create
a new Reflow document.
| | 00:29 |
We can open an existing Reflow document.
We can save the current document or save
| | 00:36 |
the current docment as another document.
We can also exit Reflow from the file
| | 00:43 |
menu and you'll notice that each one of
these options actually displays a
| | 00:47 |
keyboard shortcut next to it.
In the edit menu we have an undo And a redo.
| | 00:56 |
We can duplicate elements from here,
delete elements.
| | 01:01 |
We have an Align menu, so aligning to
left center, right, top, middle, and bottom.
| | 01:07 |
An Arrange menu to match the width of
items, to match their height or to match
| | 01:12 |
both width and height.
And this is very, very useful when
| | 01:17 |
drawing out something like columns in the
design.
| | 01:19 |
And you want them to be the same width
and height.
| | 01:23 |
We can create groups from different
items.
| | 01:26 |
Also ungroup those items from this menu.
We can also add parent elements or remove
| | 01:32 |
parent elements.
There's also options for select all and
| | 01:36 |
deselect all.
Underneath the view menu we're able to
| | 01:41 |
zoom in or out of the design surface or
actually reset it to its actual size.
| | 01:51 |
We can choose to globally show edges,
show the grid, and show panels.
| | 01:58 |
You can see that these are check boxes,
so, it's very simple to just toggle these
| | 02:02 |
on and off.
The View menu also has an option to
| | 02:07 |
preview in Google Chrome.
Under the Help menu, we can Check for
| | 02:13 |
Updates, we can access the Edge Reflow
Help, the Adobe Product Improvement
| | 02:19 |
Program, the About screen, and a Getting
Started link.
| | 02:27 |
So let actually have a closer look some
of the options in the Help menu.
| | 02:32 |
Here's check for updates, and if we click
this it'll go out and see if there's an
| | 02:37 |
update or not.
And Reflow actually does this
| | 02:40 |
automatically for you, if you have an
internet connection enabled, where it'll
| | 02:45 |
go and if there's an update to Reflow
you'll see this little gift box here, and
| | 02:50 |
once you click on that you're able to
actually Access the updated version.
| | 02:55 |
You can see here that we're up to date.
Going to Reflow Help actually pulls down
| | 03:04 |
a really useful kind of cheat sheet and
you can see that we have different tools
| | 03:09 |
and things like that with their
associated shortcuts.
| | 03:13 |
So this is hugely helpful if you can't
quite remember something.
| | 03:17 |
You can just pull this down and access
any of the shortcuts.
| | 03:24 |
We also have the Adobe Product
improvement program where you can see you
| | 03:28 |
can participate or not if you want.
And then the general About window.
| | 03:36 |
And this is actually kind of important,
since Reflow is updated so often.
| | 03:41 |
You're able to see here the precise
version that you're actually running on
| | 03:45 |
your machine.
And then this last option, Getting
| | 03:50 |
Started: This'll just open up your web
browser to a number of different resources.
| | 03:55 |
To help you get you jump started with
Reflow.
| | 03:59 |
So this lesson is provided a basic
overview of the application menu in Adobe
| | 04:05 |
Edge Reflow.
| | 04:09 |
| | Collapse this transcript |
| The design surface| 00:02 |
The design surface is the display area
upon which elements are created and organized.
| | 00:08 |
In this lesson, we have a look at the
design surface and how to work with it.
| | 00:13 |
So, I've opened up a sample project here,
that sort of displays upon this area
| | 00:20 |
right here known as the design surface.
And with the design surface, you can
| | 00:26 |
actually scroll up and down.
You can also though, grab this little
| | 00:31 |
handle over here.
And you can adapt the design surface to
| | 00:36 |
different sizes.
So you can see, you can pull it all the
| | 00:39 |
way down to (LAUGH) just a few pixels
here, which probably isn't very useful
| | 00:43 |
for anyone.
But you can definitely set things to
| | 00:49 |
particular break points.
You can see these break points have been
| | 00:53 |
created up here along top the ruler.
And the design surface when you're
| | 00:57 |
actually resizing it, if you do have
break points enabled, you can see that it
| | 01:03 |
sort of snaps to each of those break
points as I move it along.
| | 01:08 |
And one of the great things about using a
design surface like this, is because you
| | 01:14 |
don't have to go to those particular
break points.
| | 01:17 |
If I want to see some sort of a size
somewhere between my tablet and
| | 01:21 |
smartphone break points?
I can easily just sort of adapt my design
| | 01:26 |
surface to that by simply clicking and
dragging on this little handle here.
| | 01:32 |
Another useful feature when checking out
sizing of the design surface is any of
| | 01:38 |
these break points, you can actually just
click on each one.
| | 01:43 |
So if I want to click on smartphone, you
can see the design surface adapts to that
| | 01:48 |
break point.
If I click on tablet, it jumps over there.
| | 01:51 |
And desktop, there we go.
So we can see how all of these different
| | 01:56 |
things adapt, and you'll notice as well
that as we adapt to these different break
| | 02:02 |
points, everything sort of reflows within
our design surface.
| | 02:06 |
So here, from desktop to tablet, we see
everything gets a little thinner.
| | 02:12 |
We have the text area up top actually
expand out a bit, and so does the kind of
| | 02:19 |
containing banner area here.
But when we go down to smartphone, you
| | 02:25 |
can see that not only does everything
kind of shrink a little bit more, but if
| | 02:31 |
we scroll down, those different content
areas that I've defined, let's say in
| | 02:37 |
desktop as columns, under smart phone,
they actually reflow to be one column
| | 02:43 |
instead of two, which is most useful on a
smart phone device.
| | 02:50 |
You'll notice as well that on the design
surface is an overlay.
| | 02:54 |
We can see this grid and you can see also
the grid adapts as I change the design surface.
| | 03:01 |
The grid is actually something you can
toggle on and off through the layout
| | 03:06 |
properties of the document.
And when we look at layout properties in
| | 03:10 |
a future lesson, we'll be able to see
exactly how to do that.
| | 03:14 |
So in this lesson, we've examined the
design surface in Reflow and seen some of
| | 03:20 |
the particulars around using this design
surface.
| | 03:27 |
| | Collapse this transcript |
| Canvas zoom level| 00:02 |
In this lesson, we see how to adjust the
zoom level of the design surface in order
| | 00:07 |
to step back and view a layout in its
entirety, or zoom in for greater detail.
| | 00:13 |
So, the way that you access the zoom
level is just right below the design
| | 00:18 |
surface, right here.
You can see as I hover over, it says
| | 00:21 |
Canvas Zoom level, then, a little tool
tip, and it shows, of course, the little
| | 00:26 |
Magnifying glass and that, right now,
we're actually at 100% zoom.
| | 00:32 |
So, if I go down to smartphone, you know,
potentially all of my content is going to
| | 00:38 |
be below my visible area on the design
surface right here, so, I might want to
| | 00:43 |
zoom out a bit to actually see what's
down there, and you can see that we can
| | 00:47 |
zoom out all the way to 25% if we desire.
So, I'm going to click that now, and if
| | 00:53 |
we had a ton of content in here, we'd be
able to see it all the way down.
| | 00:56 |
And, of course, as I'm zoomed out 25%,
that is both along the height, but also,
| | 01:04 |
the width of my document.
So, if I had a number of different
| | 01:08 |
breakpoints expanding out to, you know,
here, in the ruler, 3,600 pixels, I could
| | 01:14 |
actually see all of those break points
laid out here, and test my design across
| | 01:20 |
these different screen widths.
You can also zoom in 200% into the design
| | 01:28 |
surface and this is useful, especially,
when you're making particular adjustments
| | 01:34 |
to actual elements that you have laid out
on the design surface and you want to
| | 01:40 |
make sure that everything is hitting
margins, or the grid just at precise points.
| | 01:47 |
So, it's very useful for that, sort of,
detailed work that might be useful in
| | 01:53 |
other applications.
Of course, we can go to the View menu, at
| | 01:57 |
any time, to also zoom in, zoom out, or
even reset to the actual size, which is
| | 02:04 |
actually going to correspond to our
normal 100% level zoom that we started
| | 02:11 |
out with.
So, in this lesson, we've seen how to
| | 02:15 |
zoom in and out of the design surface
using the little zoom tools below the
| | 02:21 |
design surface, itself.
| | 02:22 |
| | Collapse this transcript |
| The Objects toolbar| 00:02 |
This lesson provides a brief introduction
to the Toolbar.
| | 00:05 |
In the tools that are available from
within Edge Reflow.
| | 00:10 |
So here, I have just a sample document
opened up.
| | 00:13 |
And up top here, right under the
application menu, we can see four
| | 00:19 |
different tools.
This is the Application Toolbar right here.
| | 00:24 |
And the tools that are within it include
the Selection Tool, which is accessed
| | 00:28 |
with a keyboard shortcut of V.
The Add a Box tool, which can be accessed
| | 00:35 |
through the keyboard shortcut M.
The Add a Text Box tool, which the
| | 00:42 |
shortcut to this is T.
And finally, the Add An Image tool, which
| | 00:47 |
is accessed through the keyboard shortcut
I.
| | 00:52 |
So, you can think of any of these tools
as creating different containers in an
| | 00:59 |
HTML document.
So, this just creates a basic box.
| | 01:04 |
You can consider it like a div.
With the text box, it will, of course,
| | 01:09 |
create text on our design surface from
which we're able to define the actual
| | 01:16 |
content of the text, the font face, and
things of that nature.
| | 01:20 |
And then, inserting images is going to
insert specific images for us that we can
| | 01:26 |
then manipulate on the design surface.
The only one that actually requires an
| | 01:33 |
additional element, an additional
selection, is the Image Box because we
| | 01:39 |
have to choose an image to actually
insert within our Reflow document within
| | 01:43 |
our design surface.
But all of the others, you can just use
| | 01:48 |
stand alone.
So, to demonstrate this, I'm going to
| | 01:52 |
just go between Box and Text Box.
So, just clicking T and M, and you can
| | 02:00 |
see my cursor's down here.
So, if we hit T, it goes to out Text
| | 02:04 |
Tool, and M goes to our Box Tool.
And if I hit V that'll go back to my
| | 02:10 |
Selection Tool again.
So, this has been a lesson on the
| | 02:15 |
Toolbar, in Edge Reflow, and what the
four different tools are actually for.
| | 02:21 |
| | Collapse this transcript |
| Layout properties| 00:02 |
The Reflow Properties panel is divided
into two separate views, Layout and Styles.
| | 00:09 |
In this lesson, we'll have a look at the
Layout view.
| | 00:12 |
So, in the default here, we have nothing
selected.
| | 00:16 |
So, we can simply choose Margin and
Padding in our Layout Properties panel.
| | 00:25 |
And simply clicking in either of these,
and then changing them, you can see how
| | 00:30 |
it actually affects the design surface.
So, for instance, I'm just pushing up and
| | 00:36 |
down on the keyboard to actually enable
the change of these different values.
| | 00:44 |
And you can do the same thing with
Padding, of course.
| | 00:48 |
Any of the little input boxes here can be
adjusted in that way or we can actually
| | 00:54 |
go in and actually type a value in there,
hit Enter, and that will work the same.
| | 01:01 |
So, let's clear that out to 0.
And you'll notice we also have specific
| | 01:10 |
items for Top, Bottom, Right, and Left.
So, you can see here, if we just adjust
| | 01:19 |
one of these, the Margin setting adapts
to that, and so does the visual setting
| | 01:27 |
within the design surface.
If we go through and actually select an
| | 01:32 |
item, so let's actually select maybe,
this sort of container box right here.
| | 01:41 |
When we do that, you can see that the
Layout Properties panel expands greatly.
| | 01:47 |
We have a lot of other things that we can
change.
| | 01:51 |
We can change the size, in terms of
Width.
| | 01:53 |
We can change the Min-width, we can
change the Min-height, the Max-width, and
| | 02:02 |
the Max-height.
And you'll notice as we go through these,
| | 02:06 |
that each one of these is going to
correspond to different CSS rules that we
| | 02:12 |
can set for each individual property.
But because we're just dealing with HTML,
| | 02:17 |
and CSS, with Edge Reflow.
Here are Margin and Padding again, which
| | 02:22 |
we've already seen.
And then, we also have Visibility, so we
| | 02:26 |
can set things to Visible or Hidden.
Advanced might be sort of Hidden, but
| | 02:34 |
just hit this little twirly right here,
and it'll expand down for you.
| | 02:39 |
Here, we can choose the position, so
whether it's Static, Absolute, Relative
| | 02:43 |
or Fixed.
We can choose the CSS Display setting and
| | 02:48 |
set that to Block or None.
And we can choose Float, so you can see
| | 02:53 |
right here we've floating to the Center
which it actually tells you in the tool
| | 02:57 |
tip exactly what its doing in the CSS.
It's setting the Margins to Auto, and its
| | 03:02 |
setting Float to None.
Because we actually have a size, a width
| | 03:07 |
defined, setting Margins to Auto is
actually going to center our rlement.
| | 03:14 |
We can also choose to Float Left or Float
Right, and we have different clear
| | 03:18 |
options for those floats.
So, clearing Left, clearing both, or
| | 03:22 |
clearing Right.
For any element like this, we have
| | 03:27 |
Overflow settings.
So right now, it's set to Visible, we
| | 03:30 |
could change it Inherit, Scroll, Hidden,
or Auto.
| | 03:36 |
If I choose this text element here, you
can see that we have all of the same
| | 03:42 |
Layout Properties available to text as we
do with any regular sort of box container.
| | 03:50 |
So, this has been an overview of the
Layout Properties panel in Adobe Edge Reflow.
| | 03:59 |
| | Collapse this transcript |
| Style properties| 00:02 |
The Reflow Properties panel is divided
into two seperate views, Layout and Styles.
| | 00:07 |
In this lesson, we're going to have a
look at the Styles view.
| | 00:12 |
So, here's our sample document opened up,
and you'll notice that by default, the
| | 00:18 |
Layout tab within the Properties panel is
actually going to be selected.
| | 00:22 |
You can move over to Styling and just
click that.
| | 00:26 |
And now we can look at all of the
different style properties that we have.
| | 00:31 |
The style properties we see right here
pertain to the sort of root of the document.
| | 00:37 |
So, all you can do here is add a
background.
| | 00:42 |
However, when we select a different
element, so let's say this main container
| | 00:47 |
here, you can see that things get a
little more interesting.
| | 00:51 |
We get not only backgrounds, things like
borders, shadows, and opacity for this
| | 00:57 |
particular element.
So as far as backgrounds go, we already
| | 01:01 |
have a background defined here.
And you can see it's RGBA, which of
| | 01:07 |
course stands for red, green, blue, with
additional alpha properties.
| | 01:12 |
And that alpha property is defined at the
very end here, so it's some sort of a
| | 01:17 |
value between zero and one.
One being totally opaque, zero being
| | 01:24 |
completely transparent.
And you can change all of this through
| | 01:29 |
the sliders.
And see the results of that change on the
| | 01:34 |
design surface itself.
So it's very, very useful.
| | 01:38 |
You'll notice here that we also have
recent colors.
| | 01:41 |
So these different colors are things that
we've selected in the past, and you can
| | 01:46 |
have up to, it looks like 16 recent
colors are here.
| | 01:52 |
If we want to, we can just click on one
of those, and it will actually jump to
| | 01:58 |
that color in all these different sliders
and everything in our panel, so it's very
| | 02:02 |
easy to use and reuse different color
settings.
| | 02:08 |
You'll see here we also have borders, so
we can define the radius of these
| | 02:12 |
borders, right now it's a 4 pixel radius.
If I wanted to make it very apparent, I
| | 02:16 |
could do something like 20 pixels, and if
we scroll down we can see that, sure
| | 02:22 |
enough, there's a nice, big, 20 pixel
radius being applied to this element here.
| | 02:28 |
You can't see it up here, simply because
we have this additional header element
| | 02:35 |
that's obscuring that.
And we can change each individual
| | 02:41 |
property so top, bottom, left and right
for our radius as well.
| | 02:47 |
Here we have the different borders, so if
we wanted to apply borders to every side
| | 02:52 |
of our element, we can do so, that's the
default.
| | 02:56 |
Or we can only apply borders to top,
right, bottom or left if we desire.
| | 03:01 |
There are no borders on this item at this
moment.
| | 03:06 |
So let's actually create one.
So I'm going to go into borders here and
| | 03:12 |
choose something like a bright green just
so it shows up really nice.
| | 03:16 |
And then clicking off, you can see that
there's the RGB for bright green, and we
| | 03:21 |
can barely see it here, but if we go into
width and actually bump that up quite a
| | 03:26 |
bit, you can see that the border's quite
apparent.
| | 03:30 |
You can also choose the style of the
border, so from these regular kind of CSS
| | 03:35 |
properties here, solid, dash, dotted,
etc.
| | 03:39 |
You can also define shadows here, and
make opacity changes.
| | 03:44 |
So if we wanted to change the opacity of
that entire element, we can do so here
| | 03:50 |
through this slider.
You'll notice as well, if we select a
| | 03:55 |
different type of element, so let's
actually choose this text element here.
| | 04:02 |
You can see that everything changes in
the styling properties to reflect that we
| | 04:08 |
have this text element selected.
So we can choose the type face, we can
| | 04:13 |
choose the color of the text, we can
choose its size, and also the units that
| | 04:19 |
correspond to that value.
We can choose line height, the style of
| | 04:24 |
either normal or italic.
The weight, so making things bolder, or not.
| | 04:30 |
Spacing, underlines, transforms,
alignment within the text box.
| | 04:39 |
So this can all be controlled from right
here.
| | 04:40 |
We can also add shadows to text, and of
course change the opacity of that text.
| | 04:49 |
So again, depending upon what type of
element we actually have selected, the
| | 04:54 |
styling panel is going to actually adapt
to the properties that we can change for
| | 05:02 |
that particular element.
So this has been an overview of the
| | 05:05 |
Styling panel.
That's a properties panel within Adobe
| | 05:09 |
Edge Reflow.
| | 05:13 |
| | Collapse this transcript |
|
|
3. Using the ToolsUsing the Selection tool| 00:02 |
The selection tool is the basic tool used
to select and position elements within a layout.
| | 00:08 |
This lesson describes the use of this
tool.
| | 00:11 |
So, here we have the selection tool
selected already.
| | 00:16 |
But if you don't have that tool selected,
you can always hit the keyboard shortcut v.
| | 00:21 |
Or simply click on the tool in the tool
bar in order to activate it.
| | 00:26 |
And I also have a sample layout opened up
inside of Edge Reflow.
| | 00:35 |
So, you'll notice that as we sort of
mouse over any of these different objects
| | 00:40 |
within our layout design.
We'll have a cursor that turns in to a
| | 00:45 |
little move cursor and that of course
signifies that we're able to select and
| | 00:51 |
simply click and drag any of these
elements to move them over the screen.
| | 00:56 |
So we can position these in any sort of,
position on the design surface that we
| | 01:02 |
want to.
And you'll notice as well, when we have
| | 01:04 |
something selected, that we can actually
see the margins and the padding for each
| | 01:10 |
specific element.
So for instance, I have this object right
| | 01:15 |
here selected.
I can see that the left margin is 11.39%.
| | 01:22 |
And the top margin is 49 pixels.
And as I adjust this, those values
| | 01:30 |
actually change for us.
We can also go in and select multiple
| | 01:35 |
elements at once, either by simply
holding down Shift and then selecting
| | 01:40 |
multiple elements.
And in that case, we get a number of
| | 01:45 |
different elements selected and we can
change the values of these elements
| | 01:49 |
within the layout properties.
So maybe I want to change the padding to
| | 01:53 |
ten instead of 20, you can see that this
cascades across all selected elements.
| | 02:02 |
Something else that can be done with any
selected elements, is that we can select
| | 02:07 |
them and we get these little handles on
all the sides and corners which of
| | 02:12 |
course, allow us to actually, resize any
of these elements appropriately.
| | 02:18 |
And of course, holding down Shift, we'll
resize and constrain our proportions on
| | 02:26 |
the particular element as we resize it.
And we can do that from any of the
| | 02:33 |
different sides.
It gives us quite a bit of freedom, using
| | 02:37 |
this particular tool.
The last thing to see about the selection
| | 02:42 |
tool is the click and drag ability to
select multiple elements.
| | 02:47 |
So we already saw how you can hold down
the shift key and select multiple elements.
| | 02:52 |
You can also click anywhere on the design
surface to create a selection rectangle.
| | 02:59 |
And then drag that across elements in
order to select multiple elements within
| | 03:05 |
the design surface.
And you can see here in the layout panel,
| | 03:09 |
that any of those values, any of those
properties that have values which are
| | 03:14 |
different between elements, are going to
show up as sort of this little kind of
| | 03:18 |
blank line.
And if we wanted to, we could, of course,
| | 03:21 |
override all of these at once, simply by
clicking within any of these and
| | 03:27 |
inputting a specific value, such as I've
done here.
| | 03:33 |
So in this lesson, we've seen how to use
the selection tool in order to select one
| | 03:38 |
or multiple elements and then change the
values of those elements.
| | 03:43 |
Either based on direct interaction with
the tool, or through the layout
| | 03:48 |
properties panel.
| | 03:49 |
| | Collapse this transcript |
| Adding a box| 00:02 |
The Box tool will draw out a simple div
element into our layout.
| | 00:07 |
This lesson examines the use of this
tool.
| | 00:10 |
So here we see a fresh Reflow document.
So there's absolutely nothing on the
| | 00:16 |
design surface whatsoever.
And in our toolbar here, we can choose
| | 00:22 |
the Add a Box Tool, and we can choose
this either by clicking on the tool
| | 00:26 |
directly or by clicking M on the
keyboard.
| | 00:30 |
So, I'm going to click on that, and you
can see that the cursor, when hovered
| | 00:35 |
over the design surface, will turn into a
little cross-hair with a box defined.
| | 00:39 |
So, this signifies that by clicking and
dragging upon the design surface, we're
| | 00:45 |
actually able to draw out a box element.
We can see that defined down here within
| | 00:52 |
this element bar below the design surface
that we have a simple box laid out.
| | 00:58 |
And by default, you'll notice that the
box itself really doesn't have any sort
| | 01:03 |
of stylistic properties to it whatsoever.
It of course, has a top margin in pixels,
| | 01:10 |
a left margin in terms of percent by
default and that's about it.
| | 01:17 |
It doesn't have anything other than the
width and the height that we've assigned it.
| | 01:21 |
So if we want to go in to our Styling tab
in the Properties panel, we can do things
| | 01:27 |
like add backgrounds to it.
So, let's define a simple black
| | 01:33 |
background color.
We can define that as RGBA, hex, or HSLA.
| | 01:38 |
We're just going to do a simple RGB,
zero, zero, zero color value, which of
| | 01:46 |
course, is just straight black.
So using that, we can see that it defines
| | 01:52 |
that color right away within our element.
But you'll notice here that we also have
| | 01:58 |
two additional methods of instituting
backgrounds.
| | 02:03 |
We have the ability to add a gradient
layer to our background, and even add a
| | 02:07 |
image layer.
So let's choose Add a Gradient Layer to
| | 02:11 |
add some more depth to this.
You can see right away, we've got a
| | 02:14 |
gradient that's applied that goes from
white to black.
| | 02:17 |
And that's not quite subtle, so let's
make some adjustments on here, and you
| | 02:23 |
can make the adjustments by simply
clicking anywhere within this color
| | 02:27 |
space, or even just dragging this color
selection little circle right here along
| | 02:33 |
that color space.
So if we drag that down to this gray
| | 02:36 |
color, and then we can select this other
portion of the gradient.
| | 02:42 |
Now we don't want it to be straight
black, we want it to be a little more gray.
| | 02:46 |
That's pretty good.
And at this point, we can also go and
| | 02:51 |
define the gradient angle.
And you can see that reflected upon the
| | 02:55 |
design surface itself.
And when we're happy with it, we can just
| | 03:01 |
click anywhere off of this color picker
and it will be defined.
| | 03:06 |
You'll notice as well, that you have this
little grabby over here on the
| | 03:10 |
background, and this actually allows us
to sort our background colors.
| | 03:16 |
And background gradients, and so forth.
Since I don't have any additional
| | 03:20 |
gradients, I can't really sort it right
now.
| | 03:23 |
But if we add another gradient layer, so
in this case, let's add something a
| | 03:27 |
little more red.
We'll do like a dark red there, and a
| | 03:32 |
little bit lighter red up here.
So now that I have two gradients defined,
| | 03:37 |
I'm actually able to drag these and stack
them and so forth.
| | 03:43 |
Which of course, brings something else to
mind, and that is the ability to actually
| | 03:48 |
have transparency on these gradients.
So clicking on this swatch here, you'll
| | 03:53 |
notice we have this opacity slider.
So I can pull this down a little bit, and
| | 03:57 |
you can see that red color from our
additional gradient bleeding through just
| | 04:02 |
ever so slightly upon this box.
And you can stack as many background
| | 04:08 |
gradients and images as you want to on a
particular div background layer.
| | 04:13 |
So it's pretty interesting.
You can also choose certain borders.
| | 04:18 |
So maybe we want to change the border
radius itself.
| | 04:22 |
In that case, we can do that.
Let's put something subtle like four
| | 04:25 |
pixels, and if we click off that, you can
kind of see, let's zoom in a little bit.
| | 04:31 |
And you can sort of see there, that four
pixel corner radius.
| | 04:37 |
Maybe something else you want to do is
actually choose a border color for this.
| | 04:41 |
So let's go straight black, and change
this width to perhaps, five pixels.
| | 04:51 |
And you can see that it's defined it upon
this particular container, which any
| | 04:57 |
Reflow object actually has.
If we want to have it on this element,
| | 05:02 |
this box element we created, we have to
select that individually.
| | 05:09 |
And change that color to black, as we've
done before, and then go into our width
| | 05:14 |
and adjust the width of that particular
border.
| | 05:17 |
So you can see you can apply borders to
all sorts of different elements here.
| | 05:22 |
We can also define a border style, so
let's just choose something like dashed,
| | 05:27 |
and you can see how that works out.
Any of these can be collapsed simply by
| | 05:32 |
clicking on these little triangles here.
Now and from here, you can see we can
| | 05:37 |
also apply shadows.
So, let's actually, zoom out to 100%
| | 05:41 |
again, and we'll have this object
selected and we'll add a shadow.
| | 05:49 |
We can choose to add an outset or an
inset shadow.
| | 05:54 |
We can choose the particular color, and
just for the sake of clarity, let's
| | 05:59 |
choose something that's a little bit blue
here.
| | 06:03 |
You can choose the offset simply by
clicking and dragging in this little
| | 06:07 |
offset window.
And you can see that's immediately
| | 06:10 |
reflected within the design surface.
We can choose blurring, and this is
| | 06:18 |
defined in either pixels or m's.
So let's just use our arrow keys to blur
| | 06:24 |
this out a bit.
So that's pretty nice, 57.
| | 06:28 |
And we can also change the offset.
If we're not comfortable doing it in this
| | 06:32 |
way, we can always change the offset
specifically along the X and the Y
| | 06:38 |
coordinates through these precise value
controls here.
| | 06:42 |
Additionally, we can change the shadow
spread.
| | 06:45 |
So as you see, we have all the different
box shadow properties that we can change
| | 06:53 |
that are the same properties that you
would adjust with any sort of CSS rules
| | 06:58 |
upon a div element.
Finally, we have opacity down here, and
| | 07:03 |
this is opacity for the entire object.
So we can take this down if we want to,
| | 07:09 |
pull it up, and you can see that it
definitely affects every aspect of that
| | 07:15 |
object that we have on the design
surface.
| | 07:18 |
This lesson has been an overview on how
to use the Box tool and additionally, how
| | 07:24 |
to change some of the stylistic
properties of a box within Edge Reflow.
| | 07:32 |
| | Collapse this transcript |
| Adding a text box| 00:02 |
The text box tool allows us to create
elements which display text within our layout.
| | 00:08 |
This lesson examines the use of this
tool.
| | 00:11 |
So here I have just a basic new document
opened up in Reflow, and if I hover over
| | 00:18 |
the text box tool, you can see that you
can select this particular tool either by
| | 00:24 |
typing T on your keyboard, or by simply
clicking on it with your mouse or stylus.
| | 00:29 |
The icon, once we hover over the design
surface, becomes a little cross hair with
| | 00:35 |
a box with a little T inside of it, to
signify that we can create a text box
| | 00:40 |
from this.
And there are actually two ways of
| | 00:42 |
creating a text box.
The most direct way is just clicking upon
| | 00:47 |
the design surface.
And you can see here that it's created a
| | 00:50 |
text box with the value text within it.
Another way is actually by clicking and
| | 00:56 |
dragging a text box out, and this gives
us a bit more control.
| | 01:02 |
You can see that it also displays the
simple value of text within that, as well.
| | 01:09 |
So, once we have a text box created,
there are actually a number of different
| | 01:13 |
things that we can do with it.
We can of course, adjust the layout, so
| | 01:18 |
the size, the width, min and max margins,
padding, invisibility.
| | 01:24 |
All of that sort of thing.
But much more interesting is the styling
| | 01:29 |
tab here, because we can choose things
such as the type face and the color and
| | 01:34 |
the size and so forth.
So let's actually go in here and bump up
| | 01:38 |
the size quite a bit.
By default, it's set to be one m.
| | 01:42 |
So let's just pull that up a bit to, this
is 3.8m, and let's go in and actually
| | 01:50 |
change this text to read something a
little more friendly.
| | 01:54 |
Let's just call it Edge Reflow and put a
little exclamation point after that.
| | 02:03 |
And you can see that my selection tool is
at this point, selected.
| | 02:08 |
So now that I have this particular text
box selected, anything that I do is going
| | 02:14 |
to be reflected upon the entire contents
of the text box.
| | 02:18 |
And you can see that it's selected,
because we have things like the top and
| | 02:22 |
the left margin on display here.
So let's actually go in and change the typeface.
| | 02:29 |
You'll see here that we have a number of
different typefaces already defined for us.
| | 02:34 |
Such as Arial, Comic Sans, Courier,
Georgia, and so forth.
| | 02:40 |
But if we wanted to use a specific web
font for this?
| | 02:44 |
It's actually really very simple to
access the Adobe Edge Web Fonts
| | 02:50 |
collection directly from within Edge
Reflow.
| | 02:53 |
And to do that, we click on this typeface
icon.
| | 02:58 |
And this brings up this really useful
little window here for Adobe Edge Web fonts.
| | 03:02 |
So from here, we can actually search for
a particular font if we want to, or we
| | 03:07 |
can enable any of these different
filters.
| | 03:11 |
So perhaps we want to go in and look for
a specific slab serif front.
| | 03:17 |
We can click on that, and it's going to
bring all of the different fonts that
| | 03:21 |
actually match that category for us right
here.
| | 03:25 |
So let's choose one.
I'm going to choose this one right here.
| | 03:29 |
And hit this little check box to say yes,
this is the one I want to use.
| | 03:37 |
So with this selected, we'll now click
off of the Adobe Edge Web Fonts dialog in
| | 03:41 |
order to dismiss it.
You'll notice that Sans Serif is still
| | 03:46 |
selected up here in the combo box.
So we need to take the additional step to
| | 03:52 |
choose the particular type face that we
selected within the Edge Web Fonts window.
| | 03:59 |
So once we do that, it automatically
loads it in for us.
| | 04:04 |
Then we can go through and change the
color if we want to.
| | 04:07 |
We can bump this up a little bit more so
it's nice and big.
| | 04:10 |
We can change things like line height.
The particular style.
| | 04:15 |
That is, whether it's normal or
italicized.
| | 04:18 |
We have a weight slider.
So this defines whether it's bold or not.
| | 04:22 |
And, if it is bold, what step of boldness
that we're actually applying to it.
| | 04:27 |
I can see here we can choose from 100 to
900.
| | 04:31 |
Let's go to 800 there.
That's nice and bold.
| | 04:35 |
And then we can choose letter spacing, we
can choose text indent.
| | 04:41 |
We can also underline, strike through,
over line, set some transforms, such as
| | 04:47 |
uppercase, lowercase, and capitalize, and
perform some other alignment such as
| | 04:54 |
left, center, right or justification.
I'm going to choose center for this.
| | 05:02 |
And I'm also going to change the color a
little bit.
| | 05:04 |
Let's make it red.
And from here, that is the basic type.
| | 05:13 |
But we can also go through and create
some text shadows on here.
| | 05:16 |
So, this is the same dialogue box that
you would normally see with just a simple
| | 05:23 |
box element within Reflow.
There's a couple less options, because we
| | 05:27 |
are dealing with text shadows instead of
box shadows here.
| | 05:31 |
But we can choose basic things, such as
the color.
| | 05:34 |
And you can see that this shadow appears
right away here.
| | 05:38 |
And we can also change the blurring.
I'm going to blur that out a little bit
| | 05:43 |
and that looks pretty good to me, so I'll
click off to dismiss it, and you can see
| | 05:48 |
right here that we can also add multiple
shadows if we desired.
| | 05:53 |
So, maybe I want to choose something
that's kind of orange.
| | 05:59 |
Just something off-red a bit here.
So let's choose that, and then we can
| | 06:08 |
blur that out a bit more, with the
keyboard.
| | 06:13 |
And actually, let's just center that all,
right there, so zero along the X and the
| | 06:19 |
Y axis, and you can see how that gets
applied.
| | 06:23 |
Interestingly enough, we can also change
the stacking order of any of these
| | 06:28 |
shadows to make them appear a bit
differently.
| | 06:31 |
And I think you'll agree this is a pretty
nice effect that we have here.
| | 06:36 |
Where we have, sort of, like this glow to
it, but also a nice little shadow defined.
| | 06:42 |
It really makes it stand out.
We can also of course, like with any item
| | 06:49 |
within Reflow, adjust the overall
opacity.
| | 06:52 |
For any advanced textual features, we can
actually click within the text box.
| | 07:01 |
And once we do that, we can change
particular spans within our text.
| | 07:08 |
So you can see here that right now in the
elements bar, we have text selected.
| | 07:13 |
If we select a portion of that text and
then make some adjustments to it.
| | 07:18 |
Let’s say, take the weight down and
change the color, make it a little darker
| | 07:24 |
there and so forth.
If we go and do that and then click off,
| | 07:30 |
you can see that absolutely we can
actually add spans of text within our
| | 07:37 |
text box element.
Again, double clicking within there, and
| | 07:42 |
selecting a particular portion of text is
going to allow us to change and adjust
| | 07:51 |
any of the particular portions of text
that we have changed previously.
| | 07:56 |
And you'll see now in the elements bar
here, we actually have a little span
| | 08:01 |
within our text box.
If we just click the normal text box
| | 08:05 |
stuff that we didn't do any particular
individual character spans adjustments to.
| | 08:11 |
You can see that this is still just our
normal text.
| | 08:14 |
But of course, this can be on a per
character level.
| | 08:18 |
So let's bump up that F a bit.
You can see that really just about
| | 08:24 |
anything is possible within the limits of
HTML and CSS.
| | 08:28 |
So this lesson has shown us how to access
and use, and modify the text box tool,
| | 08:39 |
and any resulting text box objects within
Edge Reflow.
| | 08:47 |
| | Collapse this transcript |
| Adding an image box| 00:02 |
The image box will allow the import and
display of image assets within a layout.
| | 00:07 |
This lesson examines the use of this
tool.
| | 00:10 |
So here I have a Reflow document open,
it's a blank document.
| | 00:15 |
And what I'm going to do is select my
Image Box Tool, so Add an Image.
| | 00:20 |
You can also get to this by using the
keyboard shortcut I.
| | 00:25 |
Once I select this tool, this Insert
Image dialogue is immediately going to
| | 00:30 |
pop up in which I can browse my file
system to choose a sample image.
| | 00:35 |
So I've got one right here.
It's a basic JPG, 1024 by 682.
| | 00:40 |
And we're going to choose to actually
open that.
| | 00:43 |
You can see here as well, that there are
a number of file types that you can
| | 00:48 |
insert into a Reflow document, so we have
gif, jpg, png, bmp, webp and svg.
| | 00:57 |
So, let's open that up, and here you can
see the default behavior is just to
| | 01:03 |
display the image as sort of a ghostly
place holder.
| | 01:08 |
Which we can then position anywhere on
the design surface.
| | 01:12 |
So, I'm going to go all the way up top
here.
| | 01:15 |
And click to position that.
You can see once it's positioned, it
| | 01:21 |
actually takes on a more natural look,
because it's not a temporary image
| | 01:26 |
anymore, it's actually part of our
document now and we can see that down
| | 01:30 |
here, that we have this image placed in
here for us.
| | 01:34 |
So by default, it's going to be set to a
max width of 100%.
| | 01:40 |
And min at zero pixels.
So, what's that going to do when we resize?
| | 01:45 |
You might imagine it's actually going to
resize with the document.
| | 01:52 |
So this makes the image at least
partially responsive already.
| | 01:59 |
So let's look inside of the Styling
properties to see how that appears with
| | 02:04 |
an image.
We can see, here's the image.
| | 02:06 |
And if we click on that image, the little
thumbnail right there, we're actually
| | 02:12 |
able to substitute another image if we
want to.
| | 02:16 |
We can change the borders and the radius,
so let's play with those a little bit.
| | 02:20 |
Let's do like 10 pixel radius, or maybe
20 so it shows up a little better.
| | 02:26 |
There we go, that's very obvious now.
And this is of course, applied to all
| | 02:31 |
four corners.
And then we can choose, again, borders.
| | 02:35 |
So perhaps I just want a nice thick,
black border here.
| | 02:41 |
So we can choose black.
And then bump that up to something like
| | 02:46 |
16 pixels.
Okay.
| | 02:50 |
Now that we have that, we could add a
shadow if we wanted to.
| | 02:53 |
So, let's add a basic black shadow to
this.
| | 02:57 |
Increase the blurring a little bit.
Maybe to eight pixels.
| | 03:03 |
And of course, opacity is going to adjust
opacity for the entire image.
| | 03:07 |
If we wanted to change the opacity of,
say, just the border, we could actually
| | 03:13 |
do that from here, using the color
selector with the opacity slider.
| | 03:18 |
So, you can see how that works right
there.
| | 03:22 |
Now we have red, green, blue, and then an
additional alpha property being passed
| | 03:28 |
in, and that's going to be a property
somewhere between zero and one.
| | 03:34 |
Alright, so that looks pretty good, but
let's actually go and define a specific
| | 03:38 |
size for this now.
So maybe I want to size it something like
| | 03:44 |
that and have it positioned center on my
display.
| | 03:47 |
So going back to the layout properties
panel, I can go in here and you'll notice
| | 03:54 |
that by default, just about anything that
you do in Reflow is going to be floated
| | 03:59 |
to the left.
You can also choose to float things to
| | 04:02 |
the right, and you'll notice when that
happens, the actual margin appears right
| | 04:08 |
here, this margin indicator.
It'll skip from the left to the right as
| | 04:12 |
we select those things.
If we instead choose to center, it'll set
| | 04:17 |
both of the margins to auto and it, it'll
set float to none.
| | 04:22 |
So, you can see it centers it
automatically.
| | 04:25 |
And we've got automatic margins on either
side.
| | 04:29 |
So now, if we go through and resize, you
can see how wonderfully everything is
| | 04:35 |
scaling per the size of our actual design
surface here.
| | 04:43 |
So in this lesson, we've seen how to use
the image insertion tool within Adobe
| | 04:49 |
Edge Reflow.
And adjust some of the properties of an
| | 04:52 |
image object.
| | 04:53 |
| | Collapse this transcript |
| Challenge: Creating a Reflow design| 00:02 |
In this lesson, the viewer is asked to
create a basic layout in Reflow.
| | 00:06 |
Using all three of the element creation
tools available in Reflow.
| | 00:12 |
So, for this challenge, we have a blank
document here.
| | 00:15 |
And you'll be able to use any sort of
assets you want.
| | 00:20 |
The main thing is that we want to use the
add a box tool, the add a text box tool,
| | 00:26 |
and the add an image tool, in order to
place upon our design surface and
| | 00:32 |
appropriately style or layout all three
of these element types.
| | 00:37 |
So we want to create a simple box.
We want to create a text box and we
| | 00:45 |
want to create an image.
And when we lay these out on our design
| | 00:50 |
surface, you can apply any sort of
stylistic and layout elements and values
| | 00:56 |
that you want to these.
We just want to.
| | 00:59 |
Be sure that we can incorporate all three
of these objects onto the design surface
| | 01:05 |
within the same document.
So this lesson is an invitation to do
| | 01:09 |
just that.
In the next lesson, we'll see a possible
| | 01:12 |
solution for creating a ReFlow design.
| | 01:15 |
| | Collapse this transcript |
| Solution: Creating a Reflow design| 00:02 |
This lesson examines the solution for the
previous lab exercise on creating a
| | 00:07 |
Reflow design.
So, here we have a possible solution.
| | 00:12 |
Previously, you were asked to create a
Reflow design using all three of the
| | 00:17 |
tools so the Add a Box tool, the Add a
Text Box tool, and the Add an Image tool.
| | 00:24 |
This is just one possible layout that you
might come up with.
| | 00:28 |
The important thing is that you've used
all three of these tools and feel
| | 00:32 |
comfortable adjusting their layout
properties and style within that Reflow.
| | 00:38 |
So, here we have a box, and this
particular box has a number of stylistic
| | 00:45 |
attributes to it and layout attributes.
So, for one thing I'm centering this box,
| | 00:51 |
so it's centered right there if we adjust
it its going to stay centered and simply
| | 00:57 |
resize per the adjusted document width.
For styling I've created this gradient
| | 01:04 |
background here and I've given it a 20
pixel border radius on all four corners
| | 01:12 |
and a slight shadow.
You'll notice here that we've got the
| | 01:17 |
Shadow Opacity at about 50%, that's
because I don't want it to be too overpowering.
| | 01:24 |
Within this element we have a text box
and this particular text box is using a
| | 01:30 |
custom type face from Adobe Edge Web
Fonts.
| | 01:34 |
So we're using this particular font right
here.
| | 01:39 |
And we've given it a number of specific
stylistic attributes.
| | 01:44 |
So, for one thing, we've made the color
just straight white.
| | 01:48 |
We've set the size at 5.5 ms.
And we've centered the font.
| | 01:55 |
We've also given it a very, precise
shadow in this case.
| | 02:00 |
The blurring has been taken down to two
pixels, and the actual color is just a
| | 02:05 |
solid RGB value.
If we go to layout, we can see that not a
| | 02:12 |
lot has changed here.
It's basically the defaults that are
| | 02:16 |
created when you draw out a text box.
So nothing that special.
| | 02:21 |
Something else we've done is created an
additional box right down here.
| | 02:26 |
And for this one, again, nothing very
special in the layout.
| | 02:31 |
Except we've done some things to the
margins, and it's definitely floated to
| | 02:36 |
the left and so forth.
And we can see that by these indicators
| | 02:39 |
here exactly how it's being positioned
for our styling attributes.
| | 02:45 |
We've created this sort of light blue
color, as an RGB value, and we've given
| | 02:50 |
it this Dashed one-pixel border around
every edge.
| | 02:56 |
So, this could represent something like a
column of text that you might have within
| | 03:01 |
a specific layout.
The final object that we have here is
| | 03:05 |
this image object.
And we've used the same sample image that
| | 03:09 |
we used in a previous exercise.
And here what we've done is actually
| | 03:15 |
created a black border.
So an 8 pixel solid border around it.
| | 03:20 |
But you'll notice I've done something
kind of interesting here.
| | 03:23 |
We've got this space between the border
and the image itself.
| | 03:27 |
So I've done that by using the layout
properties and by giving it a ten pixel padding.
| | 03:32 |
And so what this does is padding is going
to show up between the content of the
| | 03:38 |
object and the bored.
So I've got my border, I've got my
| | 03:42 |
padding, and then I've got my actual
content.
| | 03:44 |
So it gives us this nice frame effect.
And, again, this is just floated to the left.
| | 03:51 |
And we can see that by the indicators
displayed on the design surface.
| | 03:55 |
This is one possible solution to creating
a Reflow design by using the three object
| | 04:02 |
creation tools inside of Adobe Edge
Reflow.
| | 04:08 |
| | Collapse this transcript |
|
|
4. Building a Responsive LayoutDocument and container properties| 00:02 |
In this lesson, we have a look at the
properties specific to the Reflow
| | 00:06 |
document and the main container element.
So here I have a new Edge Reflow document
| | 00:13 |
opened up.
And we can see that by default, we have
| | 00:17 |
this container element selected.
You can see that down here in the
| | 00:21 |
elements bar.
And the container element is something
| | 00:25 |
that is always going to be created when
you create a new Reflow document, and it
| | 00:31 |
basically creates a big container that
everything else sort of falls under.
| | 00:37 |
So anything that I create, let's say I go
in and add a box to our Reflow design,
| | 00:45 |
you'll notice that this particular box is
within the container itself.
| | 00:49 |
So anything at all that you create and
layout within a Reflow design surface is
| | 00:55 |
going to be contained within this
container element.
| | 00:59 |
So it's fairly important to understand
how it works.
| | 01:04 |
With the container element, you've got a
number of different things that you can modify.
| | 01:08 |
You can change the size, so you can see
here we're at 90%.
| | 01:13 |
And we do get a little white margin on
either side when this is set to 90%.
| | 01:18 |
If I use my arrow keys to turn that up to
100%, we can see that we get total
| | 01:22 |
coverage at that point of the actual
container element.
| | 01:28 |
You'll also notice that all of the grid
lines that we have here are actually
| | 01:33 |
overlaying and adapt to the size of our
container element, so they're tied
| | 01:37 |
directly to that.
We've got a min and a max width right
| | 01:43 |
here, and then we have our normal margins
and padding and our float.
| | 01:48 |
By default, the container element is
going to be centered.
| | 01:51 |
But we can of course, float it to the
left or the right, just like any other
| | 01:56 |
element within Reflow.
Here are our grid options.
| | 02:01 |
So, this is pretty important when you
first start out, laying out a Reflow layout.
| | 02:08 |
The columns is going to be, how many
columns are actually overlaid within
| | 02:13 |
Reflow, and as you draw out elements and
move elements on the design surface,
| | 02:19 |
we're actually going to snap to all these
different little gutters and margins and
| | 02:23 |
so forth.
So you're going to want to choose this
| | 02:27 |
when you first create your document, and
probably not change it as you go forward.
| | 02:32 |
So you can see here, I've got this set to
three.
| | 02:34 |
You can go all the way down to one or all
the way up to 16.
| | 02:38 |
By default, it's set at 12.
But say I go down to four and then I go
| | 02:44 |
and move my design surface, resize it.
You can see how that actually works.
| | 02:51 |
It's the same as it was when it was at
12.
| | 02:54 |
But it's important to know how these
things work.
| | 02:57 |
When we go into Gutters right here it's
2.4%, and you can see as I increase the
| | 03:03 |
gutters, the gutters themselves actually
increase on the design surface for me.
| | 03:09 |
So let's just set those something like
3%.
| | 03:13 |
And then here, we can show outer gutters
or not.
| | 03:16 |
I've got that off right now, that's the
default.
| | 03:18 |
But if I click this, you can see the
outer gutters actually can be enabled
| | 03:23 |
through this mechanism right here.
Let's turn them back off.
| | 03:27 |
And here's probably the most useful one,
and that's an opacity slider for the grid itself.
| | 03:34 |
So as we take the opacity of the grid
down, we can see exactly what the design
| | 03:39 |
surface will render like.
Sometimes when you're actually laying
| | 03:43 |
stuff out at the beginning, and you're
not trying to be too precise just yet, or
| | 03:47 |
at the end of a project when you want to
see exactly how it looks within the
| | 03:51 |
design surface itself.
It sometimes makes sense to either bring
| | 03:55 |
this down or turn it off completely by
going down to zero.
| | 04:00 |
And that allows you to see everything
that you've laid out in your design
| | 04:04 |
without having to deal with looking at
all those kind of grid overlays.
| | 04:09 |
For styling, you've got backgrounds that
you can set.
| | 04:14 |
And this is almost exactly like it would
be for a normal box element that you
| | 04:19 |
would create.
You can add colors.
| | 04:21 |
You can add images as the background
layer.
| | 04:24 |
Or a gradient as the background layer.
You've got your borders, so you can
| | 04:28 |
adjust the borders of the container box
itself.
| | 04:31 |
You can add the border color and what
particular width it is, and what style
| | 04:37 |
and so forth.
And you can also add a shadow to your
| | 04:41 |
container elements, and that's about it
for the container.
| | 04:46 |
If you want to adjust the actual document
body, this is possible as well.
| | 04:51 |
And to do that, you can just click off of
the container.
| | 04:55 |
So you see my container actually isn't
selected anymore, and down here, you can
| | 05:00 |
see that body is the currently selected
element.
| | 05:03 |
So if we look here, we can change the
margin and padding of our body.
| | 05:08 |
And under styling, we can add a color,
add an image layer for the background or
| | 05:13 |
even a gradient layer.
So let's go through and add a gradient layer.
| | 05:17 |
You can see that right away we've got a
white to black gradient up here, and
| | 05:22 |
maybe what I want to do instead is kind
of make a dark to lighter blue.
| | 05:28 |
So in that case, I can adjust all these
different sliders until it appears as I
| | 05:35 |
want it to.
Maybe, in this case, we take it down like this.
| | 05:40 |
And of course, this takes some tweaking
as you go through things here.
| | 05:44 |
And here you can see that the body itself
at this point has an actual gradient upon it.
| | 05:53 |
If we select our container once again,
and go back to Layouts under Grid
| | 05:59 |
options, now when we pull down the
opacity slider to zero, you can really
| | 06:04 |
see how that opacity slider and the grid
overlay affects how you view the document itself.
| | 06:12 |
This has been an overview of the document
properties and container element
| | 06:17 |
properties Within Adobe Edge Reflow.
| | 06:19 |
| | Collapse this transcript |
| Working with elements| 00:02 |
Elements can be boxes, text boxes, or
image boxes.
| | 00:06 |
This lesson will describe how to work
with such elements within a layout.
| | 00:11 |
So here we have a basic document.
The only thing I've actually changed in
| | 00:17 |
this document is I've changed the body
element here, so let's click on Body, and
| | 00:22 |
go to Styling.
You can see I've added a Gradient to the
| | 00:27 |
body background.
And then the container element itself
| | 00:31 |
I've gone in and added an RGBA value for
that.
| | 00:35 |
And I've also gone through and turned the
opacity of the grid down to 0.5, so it's
| | 00:42 |
only half Opacity.
And I've changed the gutters to three and
| | 00:47 |
the columns to eight.
Just to kind of simplify things for myself.
| | 00:50 |
So now what I want to do is actually
start creating some sort of a layout.
| | 00:56 |
Let's say maybe this is a prototype for a
client.
| | 00:59 |
What I'm going to do is go up to the Add
a Box button, and layout some boxes upon
| | 01:05 |
my design surface here.
And I do that simply by Clicking and Dragging.
| | 01:10 |
Each one of these, and you'll notice if
you snap to the different Gutters and so forth.
| | 01:17 |
So let's make sure that's snapped
properly, and you can see right here that
| | 01:21 |
I have a two pixel space between the
header that I just created in the top of
| | 01:27 |
the container.
I'm going to move this with my arrow
| | 01:30 |
keys, just hit up twice, to precisely
place that.
| | 01:34 |
I could also go of course into my Layout
Properties here for that element and
| | 01:40 |
adjust them manually there as well.
So I'm going to go into Styling and just
| | 01:45 |
give this background a nice solid
background color.
| | 01:49 |
And lets add some actual color into this
so everything is not all grey and so forth.
| | 01:55 |
So I'm going to choose a, kind of an
orangey color.
| | 02:00 |
So that element has been created now.
So the next thing I want to do is
| | 02:04 |
actually add some text.
So I'll draw out a text block.
| | 02:11 |
And I'll say something like, welcome to
our website.
| | 02:19 |
Then I'll choose my Selection tool so
that this entire element is selected here.
| | 02:25 |
And here I'm going to change my typeface.
So, maybe I want to use something like
| | 02:30 |
this Allan font here.
And then I'm going to actually apply that
| | 02:36 |
typeface that I've selected through this
Combo box, and perfect.
| | 02:42 |
The color of black is just fine, but I am
going to adjust the size somewhat,
| | 02:49 |
because I want it to be nice and big, and
I also want this to centered on my screen.
| | 02:54 |
So I'll use this Align Center button to
do that.
| | 02:59 |
And then make some further adjustments to
the size of my actual text box.
| | 03:06 |
The next thing I'll do is choose the Add
a Box Tool once again because I want to
| | 03:10 |
try out some columns here.
So, just draw two little columns that,
| | 03:17 |
you know, they'd probably have some text
in them or something of that nature.
| | 03:21 |
And we'll draw them out, just like that,
and let's go into Layout and make sure
| | 03:26 |
that both of these are the same size,
which they are.
| | 03:32 |
But we are going to want to adjust the
margin here, because it's 64 there and 65
| | 03:38 |
there, or 63 now it's 65, and let's make
this one 65 as well.
| | 03:43 |
So it's as easy as selecting the object
and using the arrow keys to adjust the
| | 03:49 |
placement of that object.
So now I'm going to hold down Shift, and
| | 03:53 |
select both of these boxes.
Go into Styling and actually add a
| | 03:58 |
Background Layer to each of them
simultaneously.
| | 04:02 |
And, pull down the Opacity of that color
somewhat.
| | 04:08 |
All right, great.
So now that this has happened, I'm going
| | 04:14 |
to scroll down my design surface here
because I want to add a big photo right here.
| | 04:19 |
So what I'll do is select this Add an
Image.
| | 04:22 |
And I'll choose the Sample photo and
place it.
| | 04:27 |
Once it's placed, I can use these
different tools here to actually resize
| | 04:36 |
it and then reposition it as well.
So maybe I want that 15 pixels down from
| | 04:42 |
that top element, perfect.
So this lesson has demonstrated how to go
| | 04:48 |
about adding different elements to the
design surface.
| | 04:53 |
And then to adjust them Change their
properties and move them around so that
| | 04:59 |
they're a nice layout for a website
prototype.
| | 05:03 |
| | Collapse this transcript |
| Managing breakpoints| 00:00 |
Break points are measurements along the
width of the design surface that
| | 00:06 |
determine when changes should occur.
This lesson explores this unique Reflow feature.
| | 00:12 |
Here we have the project that we built
out in the last lesson, and what we want
| | 00:18 |
to do is add break points to this
project.
| | 00:21 |
Because if we change the design surface,
you can see that, you know, everything
| | 00:27 |
sure gets a little thinner, but it
doesn't exactly look that great.
| | 00:33 |
for instance, if we had text in these
boxes here, in these columns, they'd be
| | 00:37 |
barely readable.
If we had stuff up in the header, it'd
| | 00:40 |
probably go all over the place.
So let's have a look at fixing some of this.
| | 00:47 |
And what we're going to do is use break
points within Reflow.
| | 00:51 |
Right above the ruler here, you can see
this break points bar, and right now we
| | 00:56 |
only have a default region.
By default, you're always going to have
| | 01:01 |
this one region selected.
So, probably the next thing to do is just
| | 01:07 |
to figure out exactly where things start
breaking down.
| | 01:11 |
And there are kind of two approaches to
doing this, to approaching break points
| | 01:15 |
within Reflow.
One is to just start creating break
| | 01:19 |
points at different widths.
So, you know, maybe you figure a smart
| | 01:25 |
phone is going to break down at 400
pixels, and a tablet might break down at
| | 01:29 |
700 pixels, and a desktop design could
break down at something like 900 or 960.
| | 01:36 |
You could always just do break points
like that if you wanted.
| | 01:39 |
But, sometimes it makes a little more
sense to actually go through and see
| | 01:44 |
where things start degrading as you move
and resize the design surface.
| | 01:48 |
So if I go down here, you can see there's
a major break right there.
| | 01:56 |
So this is probably about where I want to
create my first break point.
| | 02:02 |
So let's go down to 600 just to make
things nice and clean.
| | 02:05 |
And over along the side here, you can see
there's a little plus button.
| | 02:10 |
If I click this, it'll add a break point
specifically where I've resized to.
| | 02:16 |
And you can see of course, 597.
That's not quite what I wanted.
| | 02:21 |
So what I can do is actually long press
on this, so hold down my mouse button,
| | 02:26 |
and from here I can change the
orientation, whether I want this to
| | 02:30 |
reflect maximum or a minimum, and you can
see that the visual elements also change
| | 02:38 |
to reflect that.
I'm going to stick with maximum.
| | 02:40 |
And I can actually go in here and adjust
this manually to 600.
| | 02:45 |
I can also add a label, or remove this
particular one.
| | 02:50 |
If I want to add a label, I can just kind
of go in there and maybe I'll just call
| | 02:55 |
this wide.
Okay, so if I click off of that, you can
| | 03:00 |
see that no longer does it show me
exactly what numeric value this break
| | 03:05 |
point has, but it gives me the label that
I've assigned to it.
| | 03:08 |
If I want to see that value, I can always
go back into my break points panel to see
| | 03:13 |
what that value is.
So let's make some adjustments here.
| | 03:17 |
One thing I'm definitely going to want to
do, is change the size of this particular typeface.
| | 03:24 |
So I'll go in and instead of 3m, I'll use
my arrow keys to switch this down to
| | 03:31 |
something a little nicer.
Perhaps at this point, these boxes are
| | 03:36 |
still wide enough, so I'm going to select
all of these other elements down here and
| | 03:41 |
use my arrow key to move them all
simultaneously to about 20 pixels from
| | 03:50 |
the top.
Okay, so that looks pretty good for this
| | 03:55 |
particular break point.
Let's continue to go down and look at that.
| | 04:01 |
We just broke down again.
Maybe at this point, things are okay with wrapping.
| | 04:08 |
Maybe wrapping looks alright for this
particular title.
| | 04:11 |
But these are getting far too thin for
what I want.
| | 04:15 |
So let's go down here to maybe, well,
right around 450.
| | 04:22 |
And we'll create an additional break
point here.
| | 04:24 |
450.
And here, perhaps what we want to do is
| | 04:29 |
actually adjust how these columns are
positioned.
| | 04:34 |
So let's scroll down so we can actually
move some of these objects.
| | 04:38 |
Let's move that down a bit.
And I'll select this right column and
| | 04:43 |
place it directly underneath the left
column.
| | 04:49 |
I can further go in and resize this.
Resize that one.
| | 04:57 |
And then even move this down more so that
it doesn't cover up any of that other stuff.
| | 05:08 |
That's pretty good.
Let's actually squish this down even more
| | 05:13 |
and see what happens.
Yeah, right about here is probably all we
| | 05:18 |
want to get to.
So let's say this is probably the
| | 05:21 |
smallest target that we could possibly
imagine.
| | 05:24 |
So let's add another break point right
here, and maybe we don't want somebody to
| | 05:30 |
scroll for too long.
If they're on a, a phone, let's say.
| | 05:34 |
So let's go through and actually adjust
this header.
| | 05:39 |
So I'll make it like a 130 pixels or
something, 125.
| | 05:44 |
And we'll actually move this text as
well.
| | 05:49 |
And let's resize the text once again, so
that it's all one line here.
| | 05:56 |
And then we can adjust both of these
columns up more.
| | 06:07 |
And scrolling down, we've got this image,
but maybe we don't even want the image to
| | 06:12 |
appear on mobile.
In that case, we could go into layout and
| | 06:17 |
choose to have display to none.
And then we don't have to worry about
| | 06:23 |
that image anymore when it comes to the
smallest of our designs.
| | 06:28 |
So, now we can test between each one to
see how everything flows.
| | 06:33 |
And it actually does pretty well.
If we wanted to jump precisely to any of
| | 06:39 |
these break points, all we need to do is
click upon each one of these break point
| | 06:44 |
regions in order for the design surface
to automatically resize according to the
| | 06:50 |
break points that we have set.
So this has been a lesson on how to go
| | 06:54 |
about creating specific break points
within our Reflow design.
| | 06:59 |
And adjust the properties of different
elements within the document to
| | 07:04 |
accommodate for these new sizes.
| | 07:06 |
| | Collapse this transcript |
| Challenge: Building a responsive design| 00:02 |
In this lesson, you're invited to build
out a responsive design with certain
| | 00:07 |
specific characteristics.
So, some of these characteristics will
| | 00:12 |
include creating a header box with an
image background layer.
| | 00:18 |
Creating a text box with the page title,
using an edge web font.
| | 00:24 |
Creating two boxes to represent columns
along the left and the right of your design.
| | 00:31 |
Finally, create three separate break
points.
| | 00:34 |
One for desktop.
One for tablet and one for smartphone.
| | 00:40 |
Label each appropriately.
Once you have all of that together,
| | 00:45 |
you're invited to view the solution for
this challenge.
| | 00:49 |
| | Collapse this transcript |
| Solution: Building a responsive design| 00:02 |
This lesson examines the solution for the
previous lab exercise, building a
| | 00:07 |
responsive design.
So here we have an example of what the
| | 00:12 |
solution to your challenge might look
like.
| | 00:17 |
So for instance, let's go through each of
the requirements and have a look at how
| | 00:21 |
they are implemented within this
solution.
| | 00:24 |
Let's take the first challenge, and that
is to create a header box with an image
| | 00:30 |
background layer.
So here in our layout, if I select this
| | 00:35 |
header box here and go to Styling, we can
see that we have three different
| | 00:41 |
background layers.
We have our regular RGB layer, we have an
| | 00:47 |
image layer, and then we have a gradient
layer.
| | 00:49 |
So, if I have a look at this image layer,
we can see the image itself that's being used.
| | 00:56 |
And of course, only a small amount of
that image is actually being displayed
| | 01:01 |
within the background area of our
element.
| | 01:05 |
The scaling is set to auto, it's set to
no repeat, and the attachment is fixed.
| | 01:12 |
As we go through to our various break
points, we can see that the image
| | 01:19 |
background actually stays the same, it's
just the box itself that sort of moves
| | 01:27 |
and forms around the image.
The reasoning for this gradient layer, is
| | 01:34 |
so that this text shows up a little
better.
| | 01:37 |
So if we actually move this gradient
layer below our image layer, we can see
| | 01:41 |
that there's a bit of a conflict between
the image in the background, and the text
| | 01:47 |
in the foreground.
Though, if we move that up, the text pops
| | 01:53 |
a lot nicer because there's more
contrast.
| | 01:57 |
The second challenge was to create a text
box with a page title, using an Edge Web font.
| | 02:03 |
And we see that here.
Hollow Lens photography.
| | 02:07 |
If we choose that item, we can see that
we are using an Edge font.
| | 02:13 |
And if we go into the Edge fonts here,
we'll be able to actually look through
| | 02:19 |
and find that particular font.
And here it is.
| | 02:24 |
And you can see it does indeed match.
So some other things I've done with this
| | 02:30 |
font, I've set it to be sort of an
off-white color.
| | 02:36 |
I've changed the size.
It's 401% on my desktop break point.
| | 02:42 |
I've centered it, and I've also added a
slight shadow to this font.
| | 02:48 |
And the shadow, again, it helps make the
font, the title actually pop out.
| | 02:54 |
It gives it a little bit more contrast, a
little bit more separation from the background.
| | 03:01 |
And of course, as I go through these
break points, we can see that the font
| | 03:06 |
actually does adjust to this, simply by
having the box itself scale up or down,
| | 03:14 |
depending upon which direction we go in.
The next item involved in this challenge
| | 03:20 |
was to create two boxes to represent
columns on the left and the right.
| | 03:25 |
Here we see these two boxes on desktop.
Both of these are floated to the left,
| | 03:32 |
and if we go to Layout, we can see that
for sure here.
| | 03:37 |
Moving down to tablet, nothing much has
changed, they're just scaling appropriately.
| | 03:44 |
And going down to smartphone, we've made
some decisions to set this initial box
| | 03:50 |
floated to the left, and have the second
one up here below that in a column
| | 03:57 |
floating to the left with clear both
selected.
| | 04:05 |
Our last item of course, in this
challenge, was to create the three
| | 04:09 |
separate break points for desktop,
tablet, and smartphone.
| | 04:13 |
And of course, we can see that we have
done this here.
| | 04:19 |
And if we go into our break point panel,
we can see the precise values as they're
| | 04:26 |
shown here region size.
And each particular label that we have
| | 04:32 |
created for these break points.
So in this lesson, we've seen a possible
| | 04:37 |
solution to the previous challenge of
building a responsive web layout within
| | 04:44 |
Edge Reflow.
| | 04:45 |
| | Collapse this transcript |
|
|
5. Exporting and DistributionUsing Preview in Chrome| 00:02 |
This lesson will detail the Preview in
Chrome feature which will additionally
| | 00:06 |
render the layout to HTML and CSS on the
local drive.
| | 00:11 |
So, let's say that I have this prototype
here that I want to show to my clients.
| | 00:17 |
It's all ready to go but I need to be
able to share this with them in some way.
| | 00:22 |
Well, up here in the View menu is this
selection called Preview in Chrome.
| | 00:29 |
And you can see, it has a little shortcut
assigned to it as well.
| | 00:32 |
And once we click this, what will happen
is, Chrome will open up.
| | 00:38 |
And all of our Reflow document, the
entire design surface, is going to
| | 00:44 |
actually render out to HTML and CSS that
we can then distribute.
| | 00:50 |
Now the first time you do this you're
going to see a little window that tells
| | 00:53 |
you, that this isn't production quality
code.
| | 00:56 |
And that Reflow isn't meant to create
websites.
| | 01:01 |
However, you can always have a look in
here.
| | 01:05 |
So let's actually go to Adobe Edge Code,
as our Code Editor.
| | 01:10 |
You can use any editor you want.
And I'm pointing this to the Chrome
| | 01:15 |
Preview Lesson, here, that we just had a
look at.
| | 01:18 |
And you'll notice that, here's our actual
reflow document.
| | 01:21 |
Which, the Reflow document, itself, you
can see it's just JSON.
| | 01:25 |
So, JavaScript Object Notation.
So it's easily editable outside of Reflow
| | 01:31 |
if you desire.
But we've now got this assets folder, and
| | 01:35 |
within the assets folder you can see we
have a boiler plate CSS which is the
| | 01:40 |
HTML5 boiler plate.
We also have Reflow.css, and you can see
| | 01:47 |
this code is only meant for previewing
your Reflow design.
| | 01:51 |
And within here, we have our primary
container and then all of our different
| | 01:56 |
boxes and text boxes and things like
that.
| | 01:59 |
We have our media queries in here and all
of the different rules that pertain to
| | 02:07 |
specific break points.
We also have this little preview html
| | 02:12 |
file here.
You can see it's doc type is html making
| | 02:16 |
it html 5 of course and again, here's the
little notes that the code is only meant
| | 02:21 |
for previewing the reflow design.
We also have all of our includes here for
| | 02:27 |
our fonts from Adobe Edge Fonts.
And we also have a number of checks to
| | 02:34 |
see whether we're using Chrome or not.
And you can see here this document right.
| | 02:41 |
We have a disclaimer tag.
Which tells you that it's meant to be
| | 02:45 |
viewed in Chrome and may not be displayed
properly in other browsers.
| | 02:49 |
The reason for that is because within
reflow itself, the design surface is
| | 02:54 |
actually Web Kit.
So it's actually chrome building to Reflow.
| | 03:00 |
So everything that is done for preview in
visual layout purposes within Reflow is
| | 03:06 |
good for Chrome.
But you might have to make some
| | 03:08 |
additional weeks to hit other browsers
properly.
| | 03:12 |
So then we have our actual document
structure.
| | 03:15 |
So we have our primary container div and
then we have our various boxes, text
| | 03:20 |
elements, so forth and so on.
And these of course match up with our CSS
| | 03:26 |
files which are included within the
header.
| | 03:29 |
So, even though this is made for preview,
we could always take this skeletal
| | 03:35 |
structure, Copy it into our Production
Code, and tweak it however we like.
| | 03:41 |
We could then go into our actual CSS and
we can, of course, Copy and Paste any of
| | 03:46 |
these CSS rules from this document into
our production code.
| | 03:52 |
So while this preview option does come
with a lot of disclaimers on how you
| | 03:57 |
shouldn't just use this for anything but
preview purposes.
| | 04:00 |
Of course you can go in there and Copy
and Paste until your heart's content to
| | 04:07 |
speed up your workflow on your production
systems.
| | 04:11 |
So this lesson has been an overview of
the Preview in Chrome feature in Adobe
| | 04:15 |
Edge Reflow.
| | 04:19 |
| | Collapse this transcript |
| Copying styles to an IDE| 00:02 |
The most direct method of exporting data
from Reflow to a project is to copy any
| | 00:07 |
CSS chunks to the clipboard.
This lesson will show you how this is accomplished.
| | 00:13 |
So, here we have a Reflow document with
really nothing to it just yet.
| | 00:19 |
Perhaps I'm creating something and I want
to style a block, a div element, in a
| | 00:25 |
very specific way.
Popping over to my code editor, you can
| | 00:30 |
see here I'm using Adobe Edge Code, and
I've two files.
| | 00:33 |
I have an HTML file, which simply has a
link to my CSS.
| | 00:39 |
And then within my body, I have a div
element with an ID of block.
| | 00:44 |
If we switch over to my CSS file, you can
see I already have a rule for block, kind
| | 00:50 |
of blocked out here.
So if we hop on back to Reflow, and let's
| | 00:57 |
actually add a box.
And we'll go through and actually style
| | 01:02 |
this box.
And for this example, I care much more
| | 01:06 |
about the styling than the actual layout.
Because the layout I can control though
| | 01:10 |
CSS in my stylesheet if I want to.
I could always use the layout code in here.
| | 01:16 |
But I'm looking more to use Reflow in
this instance, as a really nice visual
| | 01:22 |
style editor.
So let's go and add some backgrounds.
| | 01:26 |
So let's create this red, solid
background here, and also add a gradient
| | 01:33 |
on top of that.
Just like this.
| | 01:41 |
And we'll take the border radius down to
maybe 18.
| | 01:46 |
So we have these nice, rounded borders.
And actually, let's set this one upper
| | 01:51 |
left-hand border to zero.
So that we have a nice, sharp edge here.
| | 01:57 |
I can go through and define my borders,
so let's make a very dark red.
| | 02:06 |
Three pixels solid border.
We'll even give it a shadow.
| | 02:11 |
And we'll make that a little bit red as
well, but very close to black.
| | 02:22 |
Take the blurring up a bit.
Let's take the alpha transparency down a
| | 02:28 |
ways as well, so it's not so thick.
And we'll position it around two pixels
| | 02:35 |
along the offset y, zero on the x.
That looks pretty good.
| | 02:40 |
So how do we now get this style for this
element over into our code here?
| | 02:49 |
You'll probably notice that each element
when we have it selected, has this little
| | 02:53 |
code icon next to it.
If we click that, we can see that all of
| | 02:59 |
this CSS styling is actually exposed to
us.
| | 03:03 |
If we click on this little clipboard
here, it'll actually copy all this code
| | 03:09 |
into our clipboard.
So hopping back over to Edge Code, going
| | 03:15 |
into my sample.css file, let's put a few
extra lines in here.
| | 03:21 |
I'm going to go to Edit > Paste.
So you can see what's happened here, is
| | 03:27 |
it's actually put its own little Reflow
ID along with a media query in here to
| | 03:34 |
actually do this.
That's not going to be so useful for us,
| | 03:38 |
because we just want to add this code to
our block here.
| | 03:42 |
There's a number of ways we can get
around this.
| | 03:45 |
One is to simply copy or even cut all
that code out of there, and then just
| | 03:51 |
paste it into our block element.
But another way and sort of the way I
| | 03:56 |
prefer to do it, is within Reflow, simply
click and drag to copy only the pieces
| | 04:05 |
that we want.
So I hit Ctrl+C on my Windows machine
| | 04:09 |
here to copy this.
You could use Cmd+C on a Mac to do the
| | 04:13 |
same thing, and then hopping back over to
Edge Code, now I can just do Ctrl+V, or
| | 04:20 |
Cmd+V on a Mac, to paste that in.
So now, I don't necessarily want anything
| | 04:28 |
to do with the actual margins or width or
anything like that, so let's actually
| | 04:33 |
remove that.
All I want is the background right here,
| | 04:39 |
the border, the border radius settings,
and the shadow settings.
| | 04:46 |
So, we'll save that, and what I'll do is
actually test this.
| | 04:52 |
And one of the super things about Edge
Code, is we actually have this little
| | 04:57 |
lightning bolt here, which stands for
live preview.
| | 04:59 |
And if we turn that on, it'll open it up
in Chrome for us.
| | 05:04 |
And we can see what it looks like.
So you can tell since we have no width,
| | 05:08 |
height or any sort of layout to this
development, it looks basically just like
| | 05:13 |
a large, thick horizontal line with a
shadow.
| | 05:18 |
But we can fix that if we go back into
Edge Code, and within Edge Code, go to
| | 05:24 |
our sample CSS.
Now we can go ahead and add our own
| | 05:28 |
specific width and height properties to
this.
| | 05:31 |
So maybe I just want this 500 pixels
across, and have the height be something
| | 05:39 |
like 380 pixels, and let's give it a
margin of 50 pixels.
| | 05:48 |
Just so it stands out nicely.
Of course, we could use all of the layout
| | 05:53 |
information from Reflow if desired, but
in this case I don't really want to, I
| | 05:58 |
want to add my own stuff.
So now let's refresh.
| | 06:02 |
You can hit F5 in Chrome or use this
little refresh button here to reload the page.
| | 06:07 |
And you can see that all of the styles
that I've created within Reflow for this
| | 06:13 |
element, I was able to easily export,
just copy those, paste them into Edge
| | 06:19 |
Code in my CSS file, and apply them to
specific CSS rules to get this wonderful effect.
| | 06:26 |
So, Reflow itself, you can use it in many
different ways.
| | 06:30 |
And this is actually one of the primary
ways that I've used it, in order to, as
| | 06:36 |
we've seen in this lesson, create and
export visual CSS styles for the web.
| | 06:43 |
| | Collapse this transcript |
| Challenge: Copying and applying styles from Reflow into a skeletal design| 00:01 |
This lesson introduces a challenge, to
create a layout in Reflow, with the
| | 00:06 |
express purpose of styling a skeletal
document from this Reflow design.
| | 00:12 |
So the challenge entails actually
creating a new document in Reflow and
| | 00:18 |
then creating a number of different of
either layout or style properties for a
| | 00:24 |
number of different objects, whether
they're simple boxes, text boxes, images,
| | 00:29 |
this is sort of up to you.
But you should create at least three
| | 00:33 |
separate types or styles of container
element that you are then going to in
| | 00:40 |
some way, copy the rules from there and
then paste them into your document's skeleton.
| | 00:48 |
I've already created a skeletal document
for you to work with.
| | 00:52 |
Popping over to Adobe Edge Code, and of
course, you can use any editor you like,
| | 00:58 |
you can see in the challenge folder, we
have created an index.html and a
| | 01:02 |
styles.css file for you.
A styles.css already has a body tag with
| | 01:10 |
a body color, black.
In the index.html already is a basic
| | 01:16 |
skeletal HTML5 document.
We've already included the style sheet in
| | 01:21 |
here for you, and we've actually created
four separate blocks for you to style.
| | 01:27 |
One is the container, and then nested
within there is a header, a column left
| | 01:34 |
and a column right.
So the challenge is, within Reflow, to
| | 01:39 |
create a style for each one of those
pieces and then apply them within the
| | 01:46 |
code editor.
In the next lesson, we'll have a look at
| | 01:50 |
a possible solution for this challenge.
| | 01:52 |
| | Collapse this transcript |
| Solution: Copying and applying styles from Reflow into a skeletal design| 00:02 |
In the previous lesson we were presented
with a challenge to copy and apply styles
| | 00:07 |
from Reflow into a skeletal HTML design.
So this is a possible solution for this challenge.
| | 00:16 |
Here's our actual Reflow solution here
that I've come up with.
| | 00:20 |
And for this I basically have my gray
container element here.
| | 00:26 |
And this particular element has very
little styling attached to it, just the
| | 00:30 |
basic gray box.
Within that, I have my header, which has
| | 00:35 |
a nice Gradient applied to it, rounded
corners and so forth.
| | 00:42 |
I've also got for my left column, a deep
red Gradient.
| | 00:46 |
We've got a little bit of a Border Radius
going on here and that's about it for my
| | 00:53 |
right column, it's quite simple as well.
We simply have some rgba values here, so
| | 01:03 |
it's basically a black with a bit of
Opacity to it.
| | 01:08 |
And we also have a black border of two
pixels attached to it as an inset style,
| | 01:16 |
that’s about it.
Looking over at our skeletal framework
| | 01:23 |
that we created, our document, we have
this in Adobe Edge Code.
| | 01:26 |
You can use any editor that you want.
And I actually haven't changed any of
| | 01:30 |
this document here.
Of course you may have felt the need to
| | 01:34 |
do so and that's fine.
But for this purpose I haven't actually
| | 01:38 |
made any adjustments to the HTML.
Everything I have done is within these styles.CSS.
| | 01:44 |
In all this as included is creating/g,
rules, CSS rules for each one of the ID's
| | 01:51 |
that I've created within my HTML file.
So here's the header div ID, going back
| | 01:59 |
over here, here's the rule for that, and
basically I've copied this straight from Reflow.
| | 02:07 |
So, popping back over to Reflow.
For the header I simply click on this, I
| | 02:13 |
go into my box code.
And then I Copy from here and Paste
| | 02:21 |
within my header block.
And you can see that Reflow does tend to
| | 02:26 |
produce some rather interesting numbers
when it comes to different widths and heights.
| | 02:33 |
Depending upon how you have created its
parent element.
| | 02:37 |
And you can see all of the different
styles here for my two columns, my
| | 02:41 |
header, my container.
And I've even adjusted the body a little
| | 02:45 |
bit, and that's it.
If we actually look at this in the
| | 02:49 |
browser, we can see that it definitely
looks very similar to what we saw within Reflow.
| | 02:56 |
So here's Reflow and here's a browser.
Of course, you're going to have to make
| | 03:04 |
additional adjustments for any of this
stuff.
| | 03:06 |
Like all the disclaimers say, its not
meant for simply generating ready to go
| | 03:13 |
web site design straight out of the gate.
But it is excellent for creating these
| | 03:19 |
stylistic elements, and its also
excellent for providing a nice preview
| | 03:24 |
for people.
So in this lesson we've seen in a very
| | 03:28 |
basic way how to complete the challenge
put forth in the previous lesson.
| | 03:33 |
| | Collapse this transcript |
|
|
6. Next StepsThe Elements panel| 00:00 |
It's a bit out of the way, but Reflow
does include a very useful Elements panel.
| | 00:07 |
This lesson will examine this panel in
detail.
| | 00:11 |
So down in my elements bar here, we can
see of course, any of the elements that
| | 00:16 |
are selected at any point in time and
also see how they're enclosed in parent elements.
| | 00:24 |
So for example, we'll always have body
and container, because that is what makes
| | 00:29 |
up a Reflow document.
Past this, it's all custom to our
| | 00:34 |
particular design.
So here you can see I have main box, and
| | 00:39 |
within there, I have box.
If we look over to the left right here,
| | 00:44 |
we can see elements panel, and it's
signified by the sort of layered element
| | 00:50 |
visual right here.
So let's click this open.
| | 00:53 |
And from here, we can actually see all
the different elements within our layout.
| | 00:59 |
And notice as I hover over each of these
elements, they actually get highlighted
| | 01:04 |
upon the design surface.
So we have our body and our container,
| | 01:08 |
which are always going to be present in
our Reflow documents.
| | 01:12 |
And then, any of these other elements can
be collapsed and expanded as we wish.
| | 01:19 |
If we want, we can actually toggle the
visibility of any of these elements at
| | 01:24 |
any particular time.
And of course, depending on how things
| | 01:28 |
are laid out and those that properties
associated with them, it's going to
| | 01:32 |
determine how poorly everything kind of
degrades once we toggle these things on
| | 01:38 |
and off.
You'll notice that these boxes here
| | 01:43 |
aren't just called box, they have names
that mean something.
| | 01:47 |
So main box, header box.
In order to actually change the names of
| | 01:52 |
any of these elements, all we need to do
is double-click, and then we can type in
| | 01:57 |
our own name.
So maybe instead of header box, we call
| | 02:00 |
this particular one banner main.
Hitting enter will commit that, and you
| | 02:07 |
can see it's reflected down here, as
well.
| | 02:10 |
Banner main, here's banner main.
Within there we have our title text, and
| | 02:15 |
so forth.
So, for instance, right here we have two
| | 02:19 |
different elements, both named box.
That's not very useful.
| | 02:24 |
What if we highlight this one?
We can see it's on the left.
| | 02:29 |
So let's just call this left column.
And then this one on the right we can
| | 02:36 |
name right column.
Now if we dismiss the elements box by
| | 02:44 |
clicking away from it, we can go in,
click on one of these columns and see
| | 02:49 |
right away that we have clicked the right
column.
| | 02:53 |
Similarly, if we click on the left
column, that will also be displayed down
| | 02:58 |
here below the design surface.
So this has been a quick overview of the
| | 03:03 |
Elements panel within Edge Reflow.
| | 03:10 |
| | Collapse this transcript |
| Positioning and z-index| 00:01 |
A variety of positioning rules can be
applied to the base document or the
| | 00:06 |
elements contained within.
This lesson examines how these changes
| | 00:11 |
can affect a layout.
So here we have five simple
| | 00:15 |
gradient-styled objects upon our design
surface.
| | 00:21 |
And we can see right now, that it appears
as though the ones on the outer edges are
| | 00:28 |
closer to us.
And as we get down more so these two
| | 00:32 |
black ones are a little farther away.
And finally towards the back, behind
| | 00:37 |
everything else is this centered red
square.
| | 00:41 |
Now of course, this has to do with the Z
indexing, and positioning of these elements.
| | 00:49 |
For a better look at this, let's actually
go into the Container, and pull down the
| | 00:55 |
opacity of our grid.
So we can just barely see it here.
| | 01:03 |
Now it becomes a bit more apparent what's
happening.
| | 01:06 |
So we have this one, followed by this
one, and this third one at the very back
| | 01:12 |
of the stack.
You'll notice that each of these under
| | 01:15 |
the Advanced Layout Properties is
positioned statically.
| | 01:21 |
Now, as we change the positioning type
for any of these objects, no matter which
| | 01:26 |
one it is, these options in Advanced are
actually going to change as well.
| | 01:32 |
So let's go and change this Static
positioning to Absolute.
| | 01:37 |
You can see when we have absolute
positioning, some of the layout options
| | 01:40 |
adjust up here and we also now have
access to Z indexing.
| | 01:47 |
So we can use these buttons to increase
or decrease the current Z index.
| | 01:52 |
And you can see right now, by default,
it's simply set to auto.
| | 01:55 |
So let's actually decrease this.
So we decrease it by one, by two, by
| | 02:01 |
three and you'll notice nothing's
actually happening.
| | 02:04 |
So why is that?
Well this is now set to zero, but all of
| | 02:08 |
the others are just set to auto.
So, clicking on this one, setting it to
| | 02:14 |
absolute, and then going down one.
It's now zero.
| | 02:19 |
But what happens if we go up one?
You see how now it actually overlays the
| | 02:25 |
previous element.
If we go back to this red square, you'll
| | 02:29 |
notice it still has a Z index of zero.
The black square Now with a z index of one.
| | 02:35 |
We could do the same thing to this red
square that, right now, appears way
| | 02:39 |
behind everything else.
Let's change its positioning to absolute,
| | 02:45 |
and go up one, two.
And now you see, sure, it looks like the
| | 02:50 |
one that was previously closest to us in
the stacking order is now the farthest away.
| | 02:57 |
There are a number of other display types
in here, of course, for positioning.
| | 03:02 |
We can choose to have relative
positioning and fixed positioning.
| | 03:09 |
If we do choose absolute positioning or
fixed positioning, you'll notice that we
| | 03:15 |
also have top, bottom, right, and left
adjustments.
| | 03:21 |
Because these are how fixed and absolute
items are positioned.
| | 03:26 |
So as I adjust this, it's precisely laid
out at, in this case, 310 pixels from the
| | 03:35 |
top and 86 pixels from the left.
If we go into one of these items, which
| | 03:41 |
is still static, you can see we don't
have those options for us.
| | 03:47 |
However, if we change this to fixed we do
get the options.
| | 03:52 |
Relative, of course, is going to adjust
the object relative to where it belongs
| | 04:00 |
in the rendering order.
So in this lesson we've seen some of the
| | 04:04 |
positioning rules we can use with
elements Adobe Edge Reflow, and also how
| | 04:11 |
to adjust the Z indexing in case we don't
want to have Reflow do that for us automatically.
| | 04:20 |
| | Collapse this transcript |
| Testing with Edge Inspect| 00:00 |
Adobe Edge Reflow has built in
integration with Adobe Edge Inspect, for
| | 00:07 |
testing across mobile devices, as well
desktops.
| | 00:11 |
This lesson will demonstrate the use of
this exciting feature.
| | 00:15 |
So, here in Reflow, we've just got a
basic document opened.
| | 00:21 |
You'll notice though that right here in
the corner is what looks like a cluster
| | 00:27 |
of mobile devices and it happens to be
green right now because I actually have
| | 00:33 |
Edge Inspect installed on my machine and
connected to a Motorola Droid 3 Phone
| | 00:40 |
that I have just on my local Wifi
network.
| | 00:47 |
Edge Inspect, if we go to this webpage,
at html.adobe.com, we can see that using
| | 00:52 |
Edge Inspect you can preview your design
across various devices.
| | 00:59 |
When these devices are all connected on
the same network to Adobe Edge Inspect,
| | 01:06 |
they will all update automatically as you
change your design.
| | 01:09 |
And this is the same way it works within
Edge Reflow.
| | 01:14 |
Going back to Reflow here, we can see if
we click upon Edge Inspect, the little
| | 01:19 |
icon, we can toggle it on and off.
And we can see what devices are actually
| | 01:24 |
connected at this time.
So here's my Droid 3.
| | 01:27 |
I can disconnect that if I want to.
Or I can force a refresh.
| | 01:33 |
Or show full screen and show full screen
is basically going to show this
| | 01:38 |
particular display in full screen mode
sort of outside of the Edge Inspect
| | 01:46 |
application on the device, so you'll have
sort of that full screen experience.
| | 01:51 |
So let's go ahead and sort of draw out
the basic design on our design surface here.
| | 01:57 |
I'll start off by making a big, fat
header just like this, and styling that
| | 02:03 |
in some way.
Let's keep it simple.
| | 02:06 |
Add a color here.
I'll do this dark red.
| | 02:08 |
And then we'll go back and perhaps create
a couple little boxes right here maybe
| | 02:21 |
just one.
Go to Style and perhaps we'll make this a
| | 02:26 |
different color kind of like this grey.
And that's probably good enough.
| | 02:30 |
Now I haven't even saved this project
yet.
| | 02:33 |
But, if I go in here, I can go through
and show this full screen.
| | 02:40 |
I can refresh.
I can also go in to my device and tell my
| | 02:46 |
device through Edge Inspect to generate a
screenshot for me if I need to send this
| | 02:51 |
to someone.
And you can see right here, screenshots transferred.
| | 02:55 |
I'll click on that to make it go away and
if I go into my browser view you'll
| | 03:03 |
notice in the browser I also have an
extension in Chrome.
| | 03:07 |
This is a little inspect icon right here,
and if I click on that I can also see
| | 03:12 |
that my Droid 3 is connected.
But I also have access to the different screenshots.
| | 03:18 |
So if I want to request a screenshot in
Chrome I could do this here.
| | 03:21 |
But if I want to open the folder that has
all my screenshots within it in order to
| | 03:26 |
view them, I'll actually be able to see
the particular screenshot that was generated.
| | 03:35 |
So, here we can see it's a 540 by 826
screenshot.
| | 03:38 |
So it's not the full size of my Droid 3.
But here is how the current reflow
| | 03:45 |
documents will render on this particular
mobile device.
| | 03:49 |
If I had many of these connected, I would
be able to see them all at once.
| | 03:54 |
And I would also be able to, if desired,
take a screen shot of all of them at once.
| | 04:01 |
And they would all be collected in one
folder on my desktop for me to then
| | 04:06 |
distribute to whomever needs to see them.
Of course any adjustments I make to this.
| | 04:13 |
So let's go through and actually change
the color on both of these.
| | 04:26 |
So any adjustments I make, I can of
course go inside once again.
| | 04:30 |
Instruct my device to take another
screenshot and here we can see that
| | 04:34 |
screenshot has been transferred.
And we can see right there is my
| | 04:39 |
secondary screenshot with the green and
the blue exposed, instead of those
| | 04:45 |
previous color.
So I can even take a history of
| | 04:48 |
screenshots based on things I do within
reflow in order to compare how things
| | 04:55 |
look as I adjust my layout upon the
design's surface.
| | 05:00 |
So this has been a quick introduction on
Reflow and Edge Inspect integration.
| | 05:09 |
| | Collapse this transcript |
|
|
ConclusionAdditional resources| 00:02 |
This lesson closes out the course with
some suggestions on where to go next.
| | 00:07 |
So there are three other courses I'd like
to highlight that are part of the
| | 00:12 |
lynda.com library.
There's responsive design fundamentals
| | 00:16 |
with James Williamson.
Creating a responsive web design with
| | 00:21 |
Chris Converse and responsive design
workflows with Justin Putney.
| | 00:27 |
All three of these are going to give a
good responsive web design overview.
| | 00:32 |
So if you're looking to get more into
that, beyond tool like Reflow I would
| | 00:37 |
suggest Rchecking them out.
Additionally, you can go to
| | 00:42 |
html.adobe.com where you can learn more
about Reflow and other Adobe Edge Tools
| | 00:49 |
and Services.
Simply by clicking on the links here to
| | 00:54 |
look at things like Edge Animate, Edge
Reflow, Edge Code, Edge Inspect, Edge Web
| | 01:00 |
Fonts, Type Kit and PhoneGap Build.
So thanks for viewing this course, and
| | 01:07 |
have fun with Edge Reflow.
| | 01:11 |
| | Collapse this transcript |
|
|
