Webflow Grid Overlay

let's go ahead and jump into the next

section

of these tabs which is the cards we know

we are going to follow a little bit of

what our grid

layout has on our design uh we have a

card on the left and the card on the

right has a width of 380 to match the

the guide and then the middle card which

is 300 pixels which matches the

grid right now i only have three tabs

available but in fact we're going to

need four tabs because the very first

tab is going to be this

intro this intro screen so what i want

to do is copy another

another one of these panes as soon as i

do that it duplicated

that very first tab image so what i want

to do

is because it duplicated that

first tab and it added it to the very

last one

we can actually swap this out

so that this first card right here

is actually going to be a a close

button so let me just add a text block

this is going to be a close

button we can remove this

we know that this first tab is going to

take care of that

intro uh we can even pull in the image

the x square we know that this little

icon is going to be our first tab

so that it closes all of these and i've

added this icon

to identify that it's going to act as a

close button

so that every time i click on this it's

going to take us back to this

intro

there we go so now we have the right

order

and if we preview this we're gonna have

tab one

that's our intro tab two this

the second vr headset tab three tap four

and so on so the first card we know

is going to be uh it's going to have the

pricing

the title and a little bit of summary so

i go ahead and copy this title

or this summary vr card

and i'm gonna add some properties like

the background i want this to be

completely white

so simply enter that

and in the v card i want to add a

text block for the price

oh but notice now that this whole

text whatever text we add in here even

if it's a heading

it's going to be white so it's going to

be hard to read

and so what i want to do is make sure

that this

card that we just created this vr card

is

going to have topography uh it's going

to have

enough contrast so we're gonna use this

dark color

okay so this one's gonna be our pricing

4.99

and this h1 we're going to turn it into

an h3

and this is going to be the name of the

device or product

name okay and then the third is going to

be

a paragraph this paragraph we want it to

copy and paste over what we have

but right now there's no limit to how

big this card can be

so what i want to do is add a vr card

max width

so on the class i'm going to go over

here to the max width

and that will match the 380 pixels from

our grid

and if we do that same thing we can copy

this

card and duplicate it on this one we're

just going to have

features so features what we can do

instead for having a paragraph

we want to have a list so if we go to

the

elements layout we can look for the

basic

and we can add in a list and within the

list

we can have some items as you can see

here there's some items already

populated for us we can add in a text

block and so we can start filling this

text block with the information that we

have from the design

and each card should have because they

have its own class

i want to add some some padding so some

spacing

across i think at 20 pixels is what we

have in our design

so it's about let's see here we have 16

from the top and 24 from the side

so we can go and change these manually

like so

16 and 16.

there we go if you remember back

from our previous lesson remember that

we created

a class on the section so if we were to

click

on any of these cards right now all

these orange

highlights mean that there's some

updates created

based on the inherited class so the

section

has a class to center all the text

because we are using

centered across many sections but we

might not necessarily want to have

center text

in some of these cards so we can

overwrite that by simply changing that

value to the left text align left so we

can set a class for the price

this price is using this color and it

uses

uh the class of archival narrow at 36.

we might want to repurpose this class in

another time

so what we could do is try to get these

these styles

of the leading i see that we have this

as a leading text

so it's archival narrow 22 pixels and

this one is archivonero

36 pixels so let's create a class called

lead xl this lead excel is going to

resemble what we created here

on our style sheet with with we have

leading excel and leading excel bold and

leading

m so we can use those as a secondary

class

those ones are going to use the archivo

narrow font

and they're going to be 36 so 36 divided

by

16 rems that's about 2.22

that's still pretty big for me i think

so i'm gonna just keep that

now that i see it on the web i'm gonna

keep that at 2

and i think that's a pretty good size

same for this one this is a 22 i believe

22 bold

archivo narrow bold so we can call this

one

lead m

and we're going to make this archivo

narrow

and the font size is going to be 22

divided by 16 rems

there we go now i noticed that the

normal size is actually not

as light as we see on the design here so

that's okay for now

what i want to do is just have different

styles for different

or different elements that we can

repurpose

then we can call a we can have a global

class for that particular color

so if we go into our playground and

let's say i wanted to add a specific

color to something

so text color primary and anytime we use

that and then we can duplicate

this and call this another one called

secondary

so we know the color on this one is

going to be the secondary color

like that tc primary and tc secondary

lead

xl we can just refer back to that global

class that we just created tc

primary and just like that we're using

that nice pop accent

another thing we can do is now start

adding another div block inside here

and this is going to be the flex we're

going to use the flex because there's

going to be two elements inside

these two elements are going to be the

logo and the buy

button so let's add in the image

now going back to the flex let's go back

and add the image that we just uploaded

which is the oculus logo

and we're going to use the primary just

like that

also notice that flex now has everything

aligned

to expand to expand vertically and

stretch

but we want to do is justify these

elements and space them between each

other

okay so we can have a combo class called

space between

and we can call this space between

just like that we have a combo class on

the flex

that takes care of the justification of

each of these elements

this is going to be at the third vr card

and inside of it we want to add an image

a

vr card we know that the vr card of

course is going to have some properties

like padding and stuff like that

we want to have a combo class for this

particular

card which is actually just the

thumbnail right so we want to call this

the clip

and we're referencing this a lot from

what we did here with figma

in figma we've named some of these cards

in a way that it's easier for us to

bring over

so pf box this is the details this is

the features and this is the clip

and so what i want to do is add those

border radius now to add some

to add the styles of these vr cards

making sure that we've selected

the vr card global and not the combo

class card that we just made

so we select the vr card going down to

our borders

and make this about 12 pixels

just like that we have those nice border

radius

and also what i want to do is stack

these vr cards

in a flex so that they start

aligning to each other if i do that

right here i can't because it has

the original padding that's created

based on

what we made one thing i can do is just

turn this into flex like that

and it's going to apply the flex global

property that we just created

we can organize this however we think

will work best

so we have that image in the middle and

that's on the top

but the problem right now is that this

flex class is

always going to stretch all the cards

out

vertically and we don't want to stretch

these cards vertically

we want them just to just align uh

nicely within so let's remove that

actual

clasp from here and remove the padding

as well and we're going to call this

just flex

and right now notice that because i've

ha

i'm adding this directly into the pane

it's not letting me change some of the

values

over here unfortunately because we're

adding

uh a class and and flex on that type tab

pane directly

webflow does not let us modify the

alignment and justification on it so

instead we're just going to

keep this back to how we had it which is

the px20

or the p20 actually to add the spacing

of the padding and we're going to create

a new container

we're going to call this diff block flex

so just the same way we've been doing

i'm going to call this flex

and we're going to add in all those

cards inside okay

right like that

and we want to swap this out this one

goes at the end

again you can also modify the order of

these

flex items or these cards based on

the property panel but right now to keep

it simple i just want to use the order

from the navigator panel

on the vr card on this particular clip

we're gonna get rid of all the spacing

and padding

so that there's no spacing similar to

how we have these cards

and then on flex we're gonna add a class

called align

center and this is going to remove the

stretch of the align

properties now all we got to do is start

having these elements float on top of

the actual

card in the middle so if you notice the

design this card is floating on top and

this one is also floating on top

so the way to do that again is we have

to make sure that we establish some

sizes right now uh the the clip itself

is

actually expanding to 380 similar to

the other cards but in fact the clip we

want this to be three pixels

or 300 pixels so it matches kind of the

grid that we got going on here

and because all the elements are

shrinking um

are expanding are trying to fit

within these uh the flex layout

notice how each one of those cards has

some sizing

settings you can size it so that it

shrinks if needed

or if it grows if possible and etc

but what we're going to end up actually

just doing is making these elements

float

over above all right so let's select

each of these vr cards

this one we need to establish some

naming conventions okay so the first

card we're gonna have

it's gonna be called details and this

one we wanna

float uh we don't wanna float it

position absolute but instead i want to

have this relative

and i want to have this details card

come on top of this one

the way i can do that and right now

is by simply changing the c index to 20.

so the c index the way it works these

little values here we have

called the cnx so the first one is just

going to be

kind of like the first layer right so

anything

above one is going to be on top of this

one

if if you have this other card for

example and i call this

the features this one also can be a

relative

but i'm going to call this on c index 2

so on the second level of the c

index and what that does allow us to do

is to start modifying some of the

offsetting using margins but before we

do that i want to go back to the

fee card and simply

change something here and i want to add

is 100

with this 100 width is going to try to

expand

the card itself to match the max width

that we have given it and notice that we

have

these cards but they're not aligned to

the

grid if we click on any of these vr

cards we know we have 100

width so it's responsive but we also

have set a maximum of 380 pixels so it

doesn't go past 380 pixels

and currently what flex is doing is

trying to

adapt every element to fit this entire

container but it's not setting the

the the width that we are looking for

which is 380

and 380 and 300 we're going to have to

force those sizes

into each of these elements by using the

minimum width

so the minimum width on this particular

card is going to be 380

and that's obviously going to push

things out so that everything else is

going to be

shrinking it's going to start shrinking

this card

in particular we want it to be 300

pixels

and now notice how the features is super

tiny because it's using a hundred

percent

and on this card we want this to be 380.

what that's going to happen is going to

take all that excess and

take it into an overflow right it's

going to overflow because you're

you're you're making all these blocks

try to fit into a container it's just

not going to be possible

so because these are relative and have a

c index

we can start transforming a little bit

of the margin to start

offsetting this so that it matches

the grid so right about there you can

see that it starts to match the size

that we're looking for

and we're going to offset this one to

the

to the right margin we're going to

offset it about 60

so right about there notice how that

image is

aligned to the to the three columns in

the

overlay and then this one on the

end we're going to do the same and we're

going to try to match it

around the same size which is negative

60 and that's about the size of

each of these columns on the overlay

so 60 on the left margin for the v

card and 60 on the

right on the right margin of this other

detailed v card

and boom there we go we have created

a over um an overlapping layout

utilizing a relative uh a position

relative

on each of these cards and urala

and and by using the negative margins

we've created some offsets

to create the illusion that one is on

top of the other

let's finish up by simply adding some of

the overflow

so the vr card class we set to have

12 pixels of radius but it won't it

wasn't visible because the card itself

was not overflowing

but now that it's overflowing it's going

to act like a mask

and it's going to take in consideration

those order radius

so let's toggle these off now that we

have aligned our elements to the grid

all right so let's finish up here and

try to match some of the styling here we

know we're missing some padding on the

top and the bottom

but we don't want to affect the padding

on the sides yet because we

we want the sizing to fit naturally to

the overlay

so on this tab pane i'm going to call

this

product pane

and we're just going to affect the top

padding and the bottom padding so it's

about

40 pixels

on the list item

and there we go we have a nice

spacing between each of these elements

great so now we just need to do the same

thing copy this over to each

tab just tap three tap four

now we have these beautiful cards

interacting with the content

and this is bound to happen where you

would have

this elements and these elements

of course these elements are position

absolute and this one is also position

relative so every time you try to move

things

into different tabs you make this little

bug

happen where things are kind of

overlapping

what i suggest we do for this type of

situation

is we make sure that the actual tab

component so here we select the tabs

uh has a higher

the actual tabs has a higher c index

than the vr

headsets right now vr headsets they

don't really have a c

index defined so if i were to change

this c index headset to

one what's gonna happen is that

this one as well is gonna be using the

one

but the actual container this one

is still not it's not above those

elements so we might need to change the

c index on this container

so it's higher than those headsets

so let me actually just move these over

in here

like that and make sure that the tabs

we have a tab so we can call this

product tabs

has a c index higher so let's say this

one is a hundred

this is going to be higher than the

actual headset

which we've defined as a one c index

and when we do that we'll automatically

make sure that

every time this loads these headsets on

the side

will always stay below the tabs

and anytime we interact with the tabs

they will always be

above it cool guys i'm going to simply

select this vr tab

and i'm going to call this the close tab

because this combo class is going to

have some properties that will make it

float

on top of things i'm going to make this

a position absolute

and i'm going to turn this into a

50 and it's relative to the section

of course and i want this to be

at top zero so right now it's it is at

the top

zero so we can't see it because of

course everything is falling on top of

it

so if we see it like this those tabs are

nicely aligned in the middle

but there's not enough room for us to

see

that close button to toggle it so the

next thing i want to do is make sure

that i select the

the correct tab here the tab the first

tab which is close tab

we're going to change the c index

and we're just going to start changing

the value into a negative space so maybe

around

around there so about 60 pixels we want

that to

just move move it over but we know we're

gonna need to make compensate for that

space

in the section so we click on the

section we can start adding some padding

to the top so that that space that we're

adding is to compensate that

offset of that of that button

i still think this button is not

completely centered so let's go ahead

and fix that

this needs to be now that it's at

50 percent we need to make sure that the

sizing in this case

it's about 50 pixels so we need to

offset this by 25 so negative 25

right about there that's the perfect

middle

and that looks a little better

this vr headset uh does not have

the spacing correctly okay i see what

happened we have the spacing added

on this tab because we move things

around

so in fact what we want to do is add the

mx

class over here so we have the mx

or the margins left and margin right add

it to the middle tab

instead of this first one that happened

when we started moving things around

okay all right so this is starting to

look a little bit more balanced and this

is where we want it to be

first tab second tab third tab and then

we close this

and we see all of our although and we

see the intro section

right here it was a long class guys i

know it took a while to get

over this section but i know that this

treatment that you

are learning is something you're going

to be able to apply on your own projects

and i guarantee it you will

‍