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