Webflow Box Model and Global Styles

Before we start working with our
playground I wanna introduce to

you guys the way that websites are
typically build, in the previous course

we learned about auto layout.
Auto layout resembles a lot how

the websites are build, and the way
websites are build currently is utilizing

something called the box model, almost
every single site uses this model to build

around boxes so notice how every
element as I move my mouse over is

contained within a box, within a box,
within a box, so the same idea can be

applied to how we are going to build our
site, and if you remember with Figma

auto layout automatically scales and
resizes things based on spacing between

elements and adding this margins and
paddings around the top vertical and

horizontal, this is exactly how the
web works.

So, with Webflow is no different,
we want to start utilizing the components

that Webflow gives us to start building
out and stacking each one of these

boxes across.
All right cool, so the first thing I am

going to do is, I'm going to create
a new page, I'm gonna call this page

playground, and the playground it's just
a simple, it's a temporary site or is a

temporary page where we will place
all of our core elements, like typography

and buttons, and we can start styling them
to try to match what we did with Figma

in our VR design system.
So notice we have a couple of headings

we have a paragraph, a quote and we even
have some buttons.

So let's just start simple, and start just
adding all those elements one on

top of the other using the box model,
so I'm going to go into add, and I'm gonna

select typography, and simply start adding
headings, this one is an H1 heading, I can

copy this and paste it, and then just have
this changed on the properties panel,

change this to an H2, and I can do the
same thing for the H3.

So just like that I have created 3
different boxes, or in this case headings.

If I open the navigator I have the 3
headings over here, so the next one

is gonna be a paragraph, and the next
one is gonna be a quote, and the next one

is going to be a button.
All right cool.

Notice that the first thing Webflow does
when it adds new elements, it has some

properties pre-defined into this buttons
so, this style classes, for example notice

how there is this little orange icon here
it means that there is some details added

to this button.
If I click on backgrounds for example

the color of this button is by default
blue, because that's what Webflow is

adding by default, but I personally like
to start reseting all the styles, so for

me to do that I would have to go into
each one of these elements and start

looking around at the different
properties, for example spacing in

the block quote is set to all this padding
values, including some margin.

It also has some default size settings like
size 18px and height 22px.

But in general because we have already
establish a style including the fonts

that we are going to be using, in
this case Archivo Narrow, notice

I have Archivo Narrow used across
all the fonts, so let's go ahead and simply

start by adding the font Archivo Narrow
to all these elements at once.

To do that I wanna select the style
panel and click on the + icon in the

selector section, and then I'm going
to use the HTML tag Body,

so what this does it's going to apply
any changes that I make here it's

gonna apply them across the entire
website.

So right now I want all the body pages
to utilize the font Archivo Narrow.

And boom... just like that I see the
updates to all the fonts.

All right, I can also do the same idea
but applied to specific elements,

so for example H1s, H2s and H3s
all have the same concept of I clicking

on the + icon I can select all H1
headings across the website and

start adapting and changing its
properties, I'm gonna do that

manually with H1 and change it to
Sovereign which is the font we

previously installed.

Cool, the next thing is the colors,
I wanna apply the color that we are

using in our Figma styleguide, so
I'm gonna select the color, go back

to Webflow* and on the Body do the
same thing again and click on

Body (All pages) I want all the colors
to use this nice dark purple-ish

and the cool thing about this is that
I can actually add this and save it

as a swatch, so now this dark slate blue
is being added just by creating the swatch

and anytime I need to reference it
I can just go back to selecting color

and selecting the swatch I just made.

Let's continue by adding some spacing
around this because, if we remember

I wanna make this as clean as possible
and I wanna be able to reference it also

on the web, so in order for me to do that
I'm gonna simply add a section, one of

this layout components here, I'm gonna
click section and on this section I can

start adding or dragging each of these
components into it, just like that.

And, what would happen is, it would
just stack things one on top of the

other just like we talked on the box
model, right.

So, the problem with this is that
it's kind of clunky, like if I start

adding things in here it's a little bit
harder to align and I would have to like

move things around but what I can do
is actually select the navigator and make

sure that the order of the items are
in the correct way that I need.

All right, now that everything is in
a section or within a box, we can select

the section either by using the bottom
breadcrumbs over here and notice

the blue outline highlights that I am
actively selected on that element.

I can click the + and notice how there
is not a global section class so I can't

do the same thing I did with the H1s and
H2s, so what I wanna do is create a

class specifically for this section,
and I'm gonna call this just playground.

Within playground I have some properties
I wanna change so the padding, I can

start playing with the padding spacing
and if I click SHIFT I can start applying

that same spacing across all 4 sides
so top, right, bottom and left.

I think I'm gonna stick with 60
I think that's a good number right there.

So, now everything's starting to look
a little bit better because it has some

spacing between the sides, so
playground then there is the Body.

Remember, the Body, notice right now
if I see this little orange label that

means that the values that we are
seeing are inherited by the Body (All pages)

style that we have selected, it does not
show up here, but if you click on this

and then selected again you'll have
access to modifying those values.