Symbols & Global Color Vars - Webflow for Frontend Developers

Hey everyone.

Welcome to episode two of Webflow for Front
End Developers.

Today we're gonna be talking about two things.

One is symbols, how do use symbols and what
symbols are as well as color variables.

We'll have a little color variable thing at
the end there, just to kind of tack it on

since we didn't cover it in the last one.

So the thing I'm referring to is this little,
um, 3D cube here called symbols.

And really what symbols are, is are a way
to effectively take and wrap a bunch of dom

and CSS in a block and reuse it along, um,
across pages.

So the most common use case, what is this?

It's gonna be a global nav or global footer.

Um, but it, it can be extended a bit further
than that.

I'm gonna show you kind of how to do that.

So what I've got in the middle of the page
here is a basic three column layout.

And so it's following the bootstrap container
row column.

You know, we've got a combo class for the
row and column and some text in each one of

those.

And so this is the case that if you've got
a layout that's gonna be leveraging three

column layouts, a lot maybe centered text
or not, it's kind of nice to start from, um,

a certain amount of do, they're gonna be reusing
all the time.

Now, it is pretty fast to create this every
time, right?

We showed with the command E key, you can
nest three divs pretty quickly or use copy

paste and do that, but there's even a faster
way, which is through symbols.

So effectively what we wanna do first is select
what divs or blocks of content we want to

create a symbol from.

So I'm gonna actually, select the parent
here that just is called container.

And what it's gonna do is grab everything
within it, everything nested in it to create

the symbol.

So once I'm, once I've selected, I can create
new symbol and I'm gonna call the three column,

three column.

And so what that's gonna do is make this little
instance block of that, and then, uh, if I

go back into symbols now I'll see that this
little block exists and I can drag it on the

page and I can even use command E and start
typing three.

And sure enough, it's gonna show, show up
there.

So, okay, this is great.

So now I can, I can add three com layouts
wherever it is.

If I've got a really rigid grid and I'm using
three com layouts all the time that are using

a certain class structure, I can do that.

Now, of course, you know, given we've got
the word column and all three of these, and

we're gonna be swapping these out, the easiest
thing to do from there is to right click and

go to unlink instance.

And what that's gonna do is allow you to customize
the content and the containers and everything

that's in there, because everything we change
in one of these linked instances is gonna

change throughout.

So you see how I've bolded that, or I can
nest a div in there and it's gonna change

across the board.

But, um, if I hit unlink, then I can do whatever
I need to do with this one.

Let's say there's, there's gonna be an image
in this column and different text and everything

else.

So I wanted to show that first is that you
can make your Legos, your, your specialized

building blocks for your site very quickly
and almost use this as your, you could almost

use this.

I've seen this used as almost like a global
style pattern guideline.

I wouldn't go as far as creating like all
your different custom text headers and all

that.

I, I, we generally have a dedicated page for
that kind of thing.

But if it's components where you've got a
lot of nested elements, I think it think it

makes sense to use this in that manner.

So there's a little bit extra power that can
be added to this, which is if I hit the little,

um, pencil to edit the symbol, there's something
called override fields, which is a pretty

cool concept.

So if I add one here, what I can say is, um,
there's different types.

There could be images or links.

These are like URLs or rich text.

But if I create an override, I can actually
call this, I'm gonna call, uh, column one

text and we can insert some default text in
here.

<laugh>, I'll just do that so you can see
what this looks like.

So then what happens is I can link it to this
particular point in the, um, in the symbol.

So I've selected this bold text, and now I'm
going to, I'm sorry, I've selected this, uh,

text block and now I'm going to select this
little purple plus icon.

And this is going to link it to that, that
symbol field.

So I'll show you what that looks like now.

So all the instances when I click on them
are gonna have now this column one text.

And if I change it here, this is the, the
first column.

You'll see that only the first column, even
though these are linked, these are both the

same symbol.

Um, only the text and the first column is
highlighted here, just the second.

And so no matter how many times I add this,
whether I copy and paste or whatever, I can,

I can effectively change this to be what I
want.

And now I can go further if I said, you know,
actually it's the case that we've got multiple,

I might add another one here.

Call it column two text.

And then all I have to do is link this through
the purple symbol.

Um, here we go.

Uh, whoops, I, I kind of, uh, name that different,
but you can see how this kind of works.

And so now I have access to this second link.

So if, if it's a component that isn't being
reused, like a maybe a newsletter form or

something where the background's gonna change
on certain pages or, or certain variables,

uh, you can effectively do that and customize
it, uh, both for editors and yourself.

So again, you, you're getting the best, best
of both words, which is the redundancy in

the blocks as well as, uh, in the CMS for
the editor.

The second thing I wanted to show you guys
pretty quickly here is working with color

variables in the css.

There is a way to set this, um, through any
place that you're adding color right now.

I've got, um, a background color on my column
so I can, so you guys can see sort of what's

happening.

But if I actually select on the color I've
created, um, you'll see that I can effectively

open a palette that allows me to change the,
the alpha channel and the color and things

like that, which is updating globally.

But I can also add, um, actually name and
add this as a variable.

So they call them swatches.

I think that might be the official term, but
it's gonna bring in its best guess of what

we should call this.

We can call it anything brand, uh, brand brand
blue.

And if I create that, then I can reuse that
in the system, um, anywhere their color can

be added.

So I'll have now access to that, um, in the
Color for fonts or in the color of borders.

So I just wanted to show that from a speed
perspective, you can name color variables

as well, uh, as a way to speed your workflow.

So that's all, all for today.

Symbols are really cool you guys.

Um, for our team, like I said, we, we use
bootstrap a lot.

So sometimes we'll start with a bunch of symbols
for two column or flex grids or, you know,

certain components.

So we can build really quickly and unlink
certain areas.

And then there are instances where we can,
you know, do a na, a global navr footer where

we're maybe on certain pages changing some
of the language.

Okay, everyone that concludes today's episode.

Uh, make sure to put a comment or a, like
on this one if you, uh, like the contour and

let me know if you'd like to see something
different.

We're gonna continue to walk through the interface
through the lens of front end development

and speed in your workflows.

So, um, that's it for today.

You wanna say, bye-Bye bye.

Okay, Byebye, we'll see you next time.

‍