Webflow Utility Classes

One thing to know is that you can toggle
also the guide overlay.

Right now it only let's us use the
Webflow's by default overlay which

is a very common 12 column grid layout
and what they do is they have a 12 column

grid with a width of 60px and a gutter of
20px in total is about 940px wide of

all the columns included, so that kind of
helps us when we start designing our

blocks we can use that layout grid and
sizes, so it's just a little bit easier for us.

Now, if I preview quickly this whole
text needs, it needs to be split into 2 pieces

right, so that this goes first and then
this goes second, and also I feel like

this whole thing is outside of the grid
that we have.

We wanna have all these elements inside
another container and guess what,

Webflow has a component called "Container"

so if we actually start putting all of our
elements inside this container, like this

Then, the container itself is gonna match
the size that the Webflow guide has, right

let's just call this container, and set the
border radius to have 1px solid with a

color red, notice what's gonna happen
is it's gonna show now a border red

in the main section, and we have a border
red on the container.

So we have 2 boxes, a section and a
container, one within each other.

All right.

So now we can see that the video on
demand is actually starting to adapt

itself based on the container, in this
case the container that we just created

but we still need to split it up, so a
simple way to do this is to select the

Video on demand right here with the header
and notice I get a couple of additional

settings to make it bold, italic, add a
link or wrap it within a span tag

and this is actually something from HTML
is just a simple span tag that is created

around to wrap this, but for now I'm
just gonna make this a bold and in the

settings if I click outside of this I can
actually select the bold text that I

just made, now that I have selected that
bold element I can decide how I want

to stylize it, and remember back in our
previous lesson we talked about

displaying blocks fully to it's container
VS inline blocks.

What we wanna do is make this bold
display block so that it expands all the

way across the container, right so the
container that we just added.

So, just like that we have split these
into 2, and we have this looking

pretty good.

Now, you are probably wandering how
comes the container changed the size?

Well, the way that Webflow uses the
container component is that the

container itself has by default a
Max Width size, so it won't expand

more than that, so containers have a
Max Width but they do not have a

Width or a Height attribute, so they
actually adapt to whatever is inside of

them.
Ok?

All right, what I wanna do now is try,
to add the spacing between these elements.

The way we do it over here is simply by
selecting each element

we can give them each one a class so
that we have some space to play with

but because these spaces that we are going
to be adding are going to be repurposable

we are gonna be using this margins
across multiple times.

We don't necessarily want to create
specific class just you know "logo"

and then "tittle" and then "paragraph"
because those tittles, this particular

spacing class that we wanna create is
global, we wanna be able to re-use

these classes multiple times.

All right,
so the first class I'm gonna say is

going to be margin, so the way I
would do it is margin-bottom and then

I would put the number right, so
margin-bottom-4px but a shorter

way to write this down would be
just mb which stands for margin

botton an then here I can say how
many pixels I want this to be,

so 4, I can get rid of the px, and I
know that the mb-4 it's always gonna

space out 4px downwards right.

So we wanna be able to make that clear.

And then the same here would go for
the actual heading

I'm gonna call this one mb
margin bottom 8.

that would be 0.5rem

That's about 8px, and then for the
paragraph we continue to add this

mb-12 and this would be of course
12/16 rem.

All right, so you get the point, I'm
actually creating classes based on

the amount of margin that I'm
going to be utilizing.

And because these class names are
global clases, if you look at our

style panel, we have these already
in there, we can start utilizing them

across multiple areas even elements
that have combo clases, so for example

this combo class has button and
primary as this combo class I can

actually refer to the global style
that we've establish mb-8 and

it doesn't create another combo class
what it does it's refer back to the global

class if it finds it or if it exists.
So, notice that I've added mb-8

and that actually adds a small
spacing between the container and

the button itself, this is actually
inspired by utilities used in

Bootstrap frameworks, if you are
familiar with that go ahead and

check that out but it's just the
idea that you are recycling and

repurposing this class names and
utilizing it only when you actually need

them for things like spacing and
padding and stuff like that.

All right so, Im just gonna create a
couple of more of these.

So mb-16.

and boom..
now we have in our stylesheets we

have these global margins or these
spacers that we might be able to use

in other scenarios.

All right so let's start to apply this in
scenarios based on our design right.

So we have the logo, between the logo
and the title that's the 32 so we can go

back here and say I want this to be
32 and I want this one to be 16

and this one actually I don't want...
let me see what the sizing is here...

this one is actually pretty big between
this and that so, we can say 40

and this one we don't need to add the
global class mb anymore.

Our style guide is staying clean, we are
not crowding it with a lot of stuff and we

can start jumping in and polishing some
of the text elements.