On this Webflow lesson we take a look at the Box Model and Global Styles. We bring our knowledge from our the previous Figma course and apply it in Webflow. How to prepare our global typography styles using Webflow.
All our project files for you to practice and play with along with some bonus materials.
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
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.
Coming Soon
Access our premium community including bonus tutorials, project files & weekly resources.
LIFETIME 💎 ACCESS