0:00
don't know
0:06
[Music]
0:10
so layers allows us to create amazing
0:13
layouts that kind of break the mold of
0:15
your traditional column and grid-based
0:17
layouts as you see here we can have a
0:20
layout that has overlapping layers these
0:23
layers can be positioned wherever you
0:25
want within your layout and as you see
0:27
we can also apply a many different
0:29
styles and rotations and things like
0:31
that to our content so here's a few
0:34
examples of things that we can do and
0:36
we'll review a lot of these today in
0:37
this video
0:39
so you see here we have a gallery where
0:41
we have images kind of like thrown out
0:43
on the page this kind of central image
0:46
kind of is our focal point and all the
0:48
other images are kind of thrown out on
0:50
the outskirts of that and positioned and
0:52
rotated
0:54
um all around it
0:56
here we have a simple kind of two column
0:58
card layout here where our two columns
1:00
are overlapping each other and then we
1:02
have a nice little title that's kind of
1:05
floating above our form
1:08
and you've probably noticed this this is
1:09
the layout that's on our reverse Weaver
1:12
space start page and this layout we've
1:16
been asking for years people have been
1:18
asking us how we've created this so we
1:20
finally released the layer stack which
1:21
is how we've done it
1:23
um and this is exactly what it does
1:24
right it basically uses layers takes all
1:27
these various components and uh you know
1:30
layers them and and kind of stacks them
1:32
on top of each other so you can create
1:33
these really interesting layouts that
1:36
are actually fully responsive as well so
1:38
let's jump into rap Weaver really quick
1:39
and kind of show you uh how these
1:41
layouts were created
1:43
um so first off we'll just show you by
1:45
adding a base layer stack to the page
1:47
right it's just so you can kind of see
1:49
what things look like uh blank so here
1:52
we have a default drop area where you
1:54
can add kind of your static content
1:57
and then if you wanted any floated
1:59
content or any layers you can go ahead
2:01
and click this plus button and there's
2:03
two different things that we can add a
2:05
layer shift and a layer float
2:08
um the layer shift allows us to
2:10
basically think of it as static content
2:13
but it allows us just to kind of shift
2:15
things up down left or right okay
2:18
and then if we want the the full-blown
2:20
floating capabilities we would add a
2:22
layer float stack that allows us to
2:25
really position this content anywhere
2:28
that we want within our layout
2:30
so let's quickly uh review the layers
2:32
stack
2:33
um inside the main layer stack uh it's
2:36
kind of broken down into two main
2:37
sections first we have a container okay
2:40
um so basically the the wrapper around
2:42
our layout we need to define the height
2:45
so by default is auto so it'll be based
2:47
on the stacks that you add in here the
2:49
static Stacks that you add but we can
2:52
also make things like variable so if you
2:53
want it to always be let's say 40 height
2:55
of the browser 50 or maybe even 100
2:58
height the browser you can do that
3:01
um you can fill this is kind of a more
3:03
advanced technique
3:04
um if you already have an existing
3:05
layout and you want this to just fill
3:07
that layout you can use that it's
3:09
probably like only like one percent of
3:11
the time you'll use something like that
3:12
and then lastly we can do scale which is
3:14
basically allows us to create an aspect
3:16
ratio so let's say like a 16 by nine or
3:19
maybe you want a square layout that
3:21
would be a one by one and then you can
3:22
set minimum and maximum height limits on
3:24
that as well
3:26
then we have our paddings and margins
3:28
this is horizontal or top and bottom
3:30
padding okay and top and batting top and
3:33
bottom padding and margin uh and then we
3:35
can set our overflow okay and then if
3:37
you're for all the foundation six and
3:39
CSS lovers out there we have the ability
3:41
to add classes to this wrapper so you
3:43
can add additional styling or things
3:45
like that with swatches
3:47
so now the rest of the settings within
3:49
the layer stack all have to do with
3:50
styling and setting up the background
3:53
layer within your layers layout so by
3:56
default we can add in a background image
3:58
let's go ahead and add in this image
4:00
here
4:01
and that gives us our background layer
4:04
that's kind of a the background that all
4:06
the other layers sit on top of even the
4:08
static content sits on top of the
4:10
background layer now we can apply an
4:12
overlay we can actually blur the image
4:14
as well so we can kind of apply a blur
4:17
uh we can apply an opacity and then we
4:20
can also change it maybe we make it a
4:22
static color we can make it actually
4:24
have stack content
4:26
which we'll I'll show you in a little
4:27
bit and then we can also do Warehouse
4:30
image which also gives you total CMS
4:31
support as well
4:34
so let's go back to this color so we can
4:35
kind of see play around with things here
4:37
let's go back to the image that's a cool
4:39
kind of stacks Stacks Pro Image there
4:41
now if we look at the background sizing
4:44
okay we can either have the background
4:46
be on the left or the right we can
4:49
adjust the width of that background
4:51
layer and then we can also adjust the
4:53
offset so if you see here as I as I'm
4:56
moving it it's kind of like a I'm
4:57
determining the location of that
4:59
background layer
5:00
now we can also apply round corners so
5:03
if we want it let's say a little bit
5:05
more rounded we'll see that those round
5:06
corners are there you can also um do
5:09
detailed rounding
5:10
um so you can actually do rounding for
5:12
each Corner can be unique okay
5:15
uh and lastly is we have some responsive
5:18
settings for the background because we
5:21
can position this and we can size it but
5:23
maybe this these sizes don't necessarily
5:26
work well on mobile or even tablet okay
5:28
so we can basically say we can make the
5:30
background Go full width on a particular
5:32
size so by default I think it's medium
5:35
but we can set it to let's say small on
5:38
small it's actually going to go full
5:40
width so that background layer is going
5:42
to take up the entire width and then you
5:43
can also set a height as well so that on
5:47
this particular breakpoint I want to
5:49
adjust the height of this
5:51
um you know the layers container to be a
5:53
different height than what it is by
5:54
default
5:57
all right let's dive into the layer
5:59
shift and layer float Stacks
6:01
um very similar the layer shift as I
6:03
said it keeps your content static but it
6:06
just basically shifts it left or right
6:09
or up or down you can constrain you can
6:12
adjust the sizing and the height and if
6:14
you want to adjust the direction you can
6:16
adjust top or bottom and then you can
6:18
shift it by either a percentage or a
6:20
pixel amount okay now the percentage is
6:23
the size of the actual content within
6:26
the layers shift stack right so
6:29
um if you do let's say I want to move it
6:31
10 percent it'll be 10 of the size of
6:34
the content within that layer basically
6:37
and the same goes for horizontal you can
6:39
do left or right and then you can either
6:41
shift it by percentage or pixels
6:44
and last but not least we can actually
6:46
do some rotation as well and let's say
6:49
if we rotate I can go ahead and preview
6:51
that within oh well it's within this
6:54
layer shift stack but you can preview
6:56
the rotation as well if you kind of want
6:57
to see because sometimes it's kind of
6:59
hard to visualize what a percentage
7:01
rotation is or what you know what 30
7:03
degrees really is this allows you to
7:06
visualize that with the preview button
7:09
next is the layer float stack now this
7:11
kind of takes it up a notch from the
7:13
layer shift because it also gives us
7:15
break points okay
7:18
um so here we can do the horizontal and
7:20
vertical float so we can give it the
7:21
actual position within the layout so do
7:24
we want it top uh or left zero top zero
7:27
things of that nature uh we can also
7:30
constrain the width just like we could
7:32
in the layers shift stack
7:34
we can still rotate like we did in the
7:36
other stack as well uh and here
7:38
important thing is stacking order uh the
7:41
stack order the larger no the number the
7:44
on more on top of what will be so this
7:46
allows you to uh create the layered look
7:49
to Define what objects lay on top of
7:51
other objects
7:54
um so there we go next is we have the
7:56
break point so I kind of skipped over
7:57
that
7:59
if we break on small medium or even a
8:01
custom break point okay it will use the
8:04
brake settings within the float settings
8:07
here okay so
8:09
um if we Define you know it's break
8:11
point small
8:13
um it would be Zero by default but then
8:15
on at that particular break point it
8:18
would use the break point values
8:22
okay so you can add as many layers as
8:25
you want you're not limited you can have
8:26
again as many as you want let's go ahead
8:28
and look at some of these
8:29
implementations that we have here so
8:31
here in that top
8:33
um let's look at that that's that top
8:34
Gallery here
8:37
okay so in this layout let's look how
8:40
how we're going to build this again this
8:42
picture of the Golden Gate Bridge is
8:44
kind of Center focused it's right in the
8:46
middle it's our static content and then
8:49
all the other ones kind of float around
8:51
it so let's look at those
8:53
so if you notice inside the layers I
8:54
just have the picture stack in there and
8:57
um that picture stack is anchored
8:59
directly into there and then I have a
9:00
bunch of layer floats okay and this
9:03
layer float allows me to this particular
9:05
image here is uh at top 20 percent right
9:10
zero percent
9:12
and then the width is 25 okay so let's
9:15
look at that so here it's at top 20 so
9:19
it's 20 from the top
9:21
it is zero percent from the right
9:22
because so it's it's all the way out
9:24
here on the right
9:26
um and then uh we're restricting it to
9:28
25 the width of the entire layout
9:33
now you also notice here that when you
9:36
choose your floating you can also Center
9:38
the origin
9:39
by default the top left corner of your
9:42
layout
9:43
um is what is used so if I were to set
9:46
this to be
9:47
um 0 0 uh if I were to set this to say
9:51
right zero bottom zero okay or let's say
9:54
right zero top zero the right corner
9:57
would be at the top right of the layout
10:00
okay but by clicking the center origin
10:03
what that does is it sets the center of
10:06
the image as the position Point instead
10:07
of the either top left or top right
10:09
corner or bottom or bottom left or
10:12
bottom right so depending on whether or
10:13
not you're choosing Left Right top or
10:15
bottom instead of using the actual
10:17
Corners as the position it's going to
10:19
use the center of the layer as the
10:22
position Point okay depending on what
10:25
you want to do
10:26
um it might make sense to either turn
10:27
Center on or off
10:29
okay
10:32
um so basically the rest of the images
10:34
here are very similar it's just other
10:36
layer
10:37
um floating layers that have different
10:39
percentages
10:41
um different widths to find different
10:43
rotations defined and of course
10:45
different Z indexes defined as well or
10:47
stack order
10:49
okay
10:50
so they're all just very similar layouts
10:53
it's just positioned differently and
10:56
sized slightly differently because I
10:58
didn't want all the images to be the
10:59
same size either kind of make it a
11:00
little bit more dynamic
11:02
so scroll down let's look at the next
11:05
file now I should note that this is the
11:08
demo file that ships with layers So you
11:09
you're going to get this file so you can
11:12
work with it directly
11:14
so inside this layer stack uh here I
11:17
have my one column that is my static
11:19
content
11:20
um and then here I have my float right
11:23
so here this header
11:24
um it's floating it's a floating layer
11:26
I've defined the sizes and positions of
11:29
those as well as a different float layer
11:31
has that form okay the card that has the
11:34
form on it
11:39
further down now here in this particular
11:41
stack okay in this set here I actually
11:43
don't have any
11:45
static content in here now when you
11:48
don't have static content you're going
11:50
to want to make sure that you set the
11:52
height here so here on these particular
11:54
ones I have it set to be variable height
11:56
and it's currently set to be 25 of the
11:58
browser height but then you can also set
12:00
the minimum and maximum value for that
12:02
okay
12:04
um and then basically all of my layers
12:06
here
12:08
um are floating within that okay so I do
12:11
have a background layer you can kind of
12:12
see that in the back and here's an
12:14
example of it being blurred okay so that
12:16
that image is getting blurred in the
12:18
background
12:19
um I then have a layer float here now
12:22
here I have a visibility stack uh this
12:24
is from the starter pack my free starter
12:25
pack and this basically hides this
12:28
particular image on small right because
12:29
I didn't want my my layouts to get
12:32
totally cramped on mobile
12:35
um and so what I'm doing is I'm hiding
12:37
that now one other thing to combat that
12:39
is in your responsive breakpoints if you
12:42
say stop layer float that basically what
12:45
that does is that will
12:48
um make this the content within the
12:50
layer float stack static content at the
12:53
break point
12:54
okay I actually do that inside this two
12:57
column layout here
12:59
so let's look at what that does
13:04
if you notice here
13:06
um in this particular layout we have our
13:07
layered layout but if we were to go to
13:09
mobile okay what you'll notice is this
13:12
layout there it's now stacked on top of
13:14
each other because I'm removing that
13:16
float and basically I'm turning it into
13:18
static content on the breakpoint which
13:21
is mobile devices small devices in this
13:23
particular point
13:25
okay so that's what that stop layer
13:28
float does it allows you to
13:30
um stop the float at a particular break
13:32
point and just make that particular
13:33
content static
13:36
the rest of this is pretty simple it's
13:37
just a bunch of other layer floats that
13:39
have different positioning different
13:41
sizes and different stacking orders to
13:44
make sure that they're stacking on top
13:45
of each other the way that I envisioned
13:47
it okay
13:49
now last but not least here in this very
13:52
last
13:53
stack here in this example here I have
13:57
I'm using a background of a stack okay
14:00
and if you notice here um what I've done
14:02
here is I've actually added a wallpaper
14:04
stack in there and um now you could add
14:07
content into that
14:10
but what you'll notice is um here at
14:13
basically this is a wallpaper that has
14:14
it's one of my stacks that has you know
14:16
nice fancy gradients as well as some SVG
14:19
background
14:20
um to just kind of give it an accent
14:22
right so
14:23
um I think I'm not sure quite sure how
14:25
useful it is to actually put content
14:27
within your background layers but you
14:30
know I think the background layers used
14:31
best for kind of access accenting
14:34
content like here we have these blurred
14:36
images here I just have kind of a
14:37
wallpaper that's set to fill its
14:39
container
14:40
um so we get a nice accent behind our
14:43
content and here you'll also notice that
14:45
I made the wallpaper a circle okay and I
14:48
did that with some CSS and swatches so
14:52
that is the layer stack
14:53
um thank you very much I hope you enjoy
14:55
it um it's a really interesting stack to
14:57
give us some very different layouts that
14:59
we don't normally create on our websites
15:01
you know the outs getting outside of
15:03
that box of just using columns and grids
15:06
and and really overlapping content can
15:08
really make for some really interesting
15:10
intriguing
15:12
um layouts for our websites so hope you
15:13
enjoy that
15:20
[Music]