Webflow Combo Classes

All right guys.
So let's start stylizing adding some of

the color swatches that we have from our
Figma system, I'm going to start pulling out

these primary colors, we can use the code
panel and just pull out the colors from there.

And I can select any element here I'm just
gonna select playground and I'm not

gonna change any color here, just want to
start adding some swatches, so I'm just

gonna select and paste, I'm gonna paste
the text color.

Cool, so let's just go back to the color we
had originally, the original dark slate.

So now we know for sure we have this
nice colors here, so out of these tones

we can actually come up with some
interesting gradients.

So the first button I wanna create is
this simple button.

It's very important that you identify
which elements from your library

are going to be done via code and
which ones are going to require you

to export specific asset, for example this
button right here of Google, this image

is not possible with CSS alone, or with
code, so you'll have to export this

image as an SVG but for these ones
you'll notice when you click on any

of these buttons you have a
background-linear class, so all this

code that you don't need to worry
about, it can be generated by Webflow.

The only thing we need to do is add
those settings, those property settings

in our Webflow so let's do the first
one.

All right so what I've done it's Ive
created a class called button and we

are gonna start changing some of the
values that, most of these buttons will share.

If we go back to Figma, and we select one
of the buttons of the design we can see

right away that I have this created as
an auto layout.

The auto layout has some spacing on
the sides of 30px and 12 on the vertical.

If you actually select option, click
on option key, you can just move

the values from the left and right

So this would be 30...

and then select option again and just the
top, so this would be 12.

And inside notice we have these
gradients so you can start adding

and changing kind of the values
right from there.

But the problem with this is that
you are adapting, your changing

the values to the actual class button,
but we will probably have all sorts

of buttons, different type of buttons,
so we have a button that has this

gradient, we have an orange gradient,
and we even have this nice kind of

blue-ish dark tone gradient.

So because there is 3 types of buttons
even comparing over here, this 3 types

of buttons need to use, they share the
same spacing and they share the same

shadow, but they don't share the same
color of the background.

So, let's go ahead and make sure that
the button does not affect the color,

instead we are gonna create something
called combo class.

A combo class is just an additional class
that you add on top of the original

class to change some of the secondary
properties, so in this case I could say:

"Ok, this could be the primary color"
So this is going to be button and this

is gonna be our primary button.

This is gonna be our secondary button
and this is gonna be our third button.

Whatever properties I'm changing now,
is gonna affect the primary class, not

the button class, and we can simply click
on this little inheriting selectors,

and notice now we have two, you
can go back to each one of this.

So, if you go back to button you
have access to those properties

but if you go back to primary you
now have the ability to start changing

the properties of that combo class.

So let's add a gradient by simply
clicking on the + icon and then

selecting the type "linear gradient,
and what we are going to do is

select from the colors over here,
on this color spectrum, we are gonna

select the color blue that we have,
the primary and we are gonna do the

same thing with the secondary node
and call that secondary magenta color.

And the cool thing about this is that
it gives us this little angle wheel where

we can start playing around where we
want that linear to start from, and

end from.
In this case if we were trying to match

the same over here, we know it
starts magenta, then it goes into

blue, and it's slightly into an angle,
so we can do that just by simply

swapping that out like that and, just
around there I think that looks good.

So we just created a button which
has properties for the spacing and

we created a combo class which
specifically changes the linear gradient.

Another thing that they all share
is the roundedness, they all have

a border radius of 5px, I wouldn't
add it in primary because I know

primary is only taking care of the
actual background color.

What I wanna do is go back to the
selector and select the button selector

so this original class and we are going
to go over to borders, and in the

borders we are gonna see the radius,
so the border radius is going to be

5px, so that it matches same properties
that we have on all buttons.

So this drop shadows right here that
I've added if you go back in here we have

multiple drop shadows so for example
the first drop shadow we know it's

13px on the Y axis, it has a blur of 14px
and it's 20% opacity, simply opening

on Webflow the effects property panel
we can add a box shadow, so the angle is

going to be about... straight down, just
straight down and we want this

property to be about 2px or 3 of the
opacity. So lets take this down to 25

and boom... we just created that shadow
similar to how we have it on our settings.

I personally think that this is a bit too
much, on the web, there might be some

slight differences, but we can start adding
multiple drop shadows also in Webflow.

This is our first drop shadow, so I wanted
just simply have this be maybe 10 and 10

so it's not so expanded downwards.

...change that to 10.

All right, let's add another one and
this one we are gonna try to match

the second one we have here, so the
second one is only 3 or 4px and the

blur is about 3 and it's similar to that,
so let's do 3, 3 make sure this is 180

right directly below it, and make sure
that the opacity is over here, we can

move this lighter down as well, to change
the opacity level, and just like that we

created a style of box shadows to that
button class.

What we are gonna do now is just duplicate
this, I'm gonna copy the button simply

by copying and pasting it, and I just
removed this combo class and right

away I can see that all these buttons
that I have here are sharing the same

class called button, so think about
this how symbols and components

work on Figma, how styles work in Figma
so, you have the same style called button

and it's been applied throughout but on
top of that style you can have combo styles

that can change some additional
properties like the background color.

Now remember the box model, we talked
about how boxes stack on top of each

other, how come in this particular case
this are not stacking on top of each other.

Well, the reason why is because every
button by default on Webflow is created

as Display Inline-block so what it does
it just behaves like inline and adapts

itself to whatever the properties content
it's inside, so if for example I change

this button to say: HELLO THIS IS A
BUTTON, whatever it contains inside

it's gonna adapt itself and expand based
on this inline-block style, but what

happens if we were to turn this button
class into a display Block?

Immediately display Block turns the whole
element to expand to the width of the

parent which in this case is playground.

So this is the different types of blocks
and that's why is important to understand

the difference, this one is a display Block
and then the default is by Webflow is

created as a display Inline-block, it kind
of aligns in line into other elements.

So we are gonna see a lot of this into
other lessons and how we apply both

inline and display Block, so let's just
finalize here by adding some of the

secondary combo classes.

So this one is gonna be secondary,
and the secondary is gonna use a

background linear gradient, similar
to what we did but this one is going

to use the orange.

And comparing over here, we have
different types of orange, so we can

pull out the colors from our Figma
and look out for... ok this one is this

yellow, I think we already added it.
And then there is a darker kind of

red-ish tone, so we wanna copy that,
and bring it over here.

We don't have that as a swatch but
we could added... Just like that

let me just add this one, the color tomato
it's interesting the naming

and let's change the same idea here,
we have that gradient starting from the

top right like that.
So that looks good.

Great, now that we have kind of our based
styles, we have heading ones we have

paragraphs, we have quotes and we have
buttons.

Now we need to think about how we can
establish these buttons for a bright screen

or a bright white background and a
dark background.

In order for us to do this with the
minimal amount amount of classes

we wanna create a contrast class so
let's jump in a start doing that in Webflow.

Over here I am just going to duplicate
playground and I am gonna copy that

and paste it but with this playground
now that we understand how combo

clases work we can actually change
this background to something that

says dark mode or dark right.
So, we know that playground and

the combo class dark is gonna use
a different background color.

So I'm going to select the color over
here and use the dark color.

We wanna make sure that the color
that we are using is actually going

to be readable, so what we can do
is: on the dark you can simply

change the color value of the typography
to color white.

And just like that our combo class
playground dark is turning everything

that's inside of it completely white.

For now I just want you to have a clear
understanding of how combo clases work

and the ability for us to have a nice
playground to access all of our styles

that we have created.
Over here we have our style manager

and we can see that we have styled
All Body pages, All H1s, All paragraphs,

All quotes, we have a class called
playground inside it we have a combo

class called dark.

And just the same, looking at this
the tree and the hierarchy of classes

works the same as the Navigator,
things start to stack and align with

parents and children within each of
these sections.

But this is just the starting point for us
to start referencing our styles and

using and utilizing them in our design.

Let's go ahead and jump in to our
next class which is going to start

looking at the structure of the website.
I'll see you there.