On this Webflow lesson we take a look at the utility classes. How to use Webflow's overlay guides correctly and how to space elements inside a flex layout using Webflow.
Take a moment to download this Webflow Template so you can practice, experiment and use however you want!
All our project files for you to practice and play with along with some bonus materials.
Student reviews coming soon
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.
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
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
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.
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
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.
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.
Access our premium community including all courses, resources & offline downloads.UNLIMITED ACCCESS