Naming strategies + finsweet
Summary
In this episode we’ll learn class naming strategies, adding global glasses, stacking divs, page wrappers, and download the Finsweet extension.
Watch Here
Listen Here
Weekly tips
Start your website build with global classes
Avoid combo classes when possible
Use a div to wrap your entire page
Don't make adjustments to global classes
Stacking divs won't slow down your site
Blue = class styles amber = inherited styles
Transcript
Joseph: All right, what's going on. Good day. This is a video number four in our series, teaching web flow to my dad. You excited for this one?
Joel: I am ready to go. Let's do it. All right.
Joseph: So this will be our last video before you can take the reins. So we're going to try to cover a lot here. And then next time or next video, we'll let you just start dabbling.
No pressure. We've got a lot to cover, so let's jump right into it. All right. So since our last video, there are two things we've added. So the first one in our assets panel, which is right here, I added just a couple of Nessie images. So that way, when we're going through the project, we'll have some assets that we can use.
And second, go ahead.
Joel: That means I got to add my first dad. Because what would teaching web flow to my dad be without a couple of quick dad jokes. And the first one I got to throw in would be just a quick, and you almost brought this on, I almost brought it on when you were naming this project, but you named this, the nasty site and.
Oh, just in, we were first dabbling it and I thought, really, we need to rename this project, the messy sighting.
Joseph: Ooh. All right now. All right. Clever. There we go. Alright. We'll know when we make our clone because we're gonna end up cloning a site for like our background or our backend style guide.
You can name it. So we'll give you that one. All right. So we've added just a couple of assets. These are not assets we're gonna use in the actual project. Just a couple. And the second one, you'll notice there's this new symbol or a year. Oh, and it's the alphabet. So this is a thing. Suite is a company that builds on top of the web slope platform.
So they've got great content. Great. Integrations to web. So we're actually going to be using their actually several things from them. We're going to be using their their naming structure or their naming convention, their structure convention. A bunch of their combo classes, which are going to be set up, we're going to end up using their prebuilt style guide and that's something we're going to clone.
And they've also got this really cool extension, which has a lot of features and we're not going to get into them all right now, but we're going to definitely utilize some of them when we build our project. So some of them end up being a lot of CMS filters. They can, they help they have a calculator for like pixels to REM.
They've got this really cool fluid design generator. Now this is a little advanced right now. We're going to touch on it though, but this, because we're going to build this project in REMS, this snippet of code that you can create right here, just by changing things. These. These draggers, whatever you call these things allows you to change the standard REM value across different screens.
So this will automatically give you like smooth scrolling. So as you, as we pan in and out of a project, it'll gradually decrease the overall size of all the elements. So it's pretty cool. Definitely have to get into that later on. So those are the two things we've added. Actually we are going to go into your.
Joel: I've seen you where something with their symbol, that logo on, on either your hat or I did not know what it meant. So now I finally
Joseph: know. Yeah. Big fan of theirs. Shout out to them, their contents. Pretty good. All right. So I just went in and add their added their spacing system. So this is something you'd put into a project that you didn't start with.
They're quotable. And then when we do have a clonable already a pre-built oh, we'll see if we can add the core page structure or just the spacing stuff. All right. Okay. Did add all of these classes. Okay. So a couple of interesting things, and I don't know, there's like a lot to unpack here, so I'm trying to figure out where that, where to start.
Let's just add a different quick,
and then let's X out of this. Let's go back to full screen. Okay. So a couple of things I mentioned that they, that we're going to utilize it there. So the very first one is a naming company. Like we talked about before that you don't want to just have random elements in your project, like named dev block did block one block two.
So when you are naming something, you are trying to create a systematic approach so that when you're in the navigator, you know what you're entering in. And number two, your naming convention is tied to your classes. So when you name something, you are giving it that class, that name becomes the class. So whenever you have global elements, so if you have a section or a div that you create into a section, that'll wrap, just sections of content throughout your webpage, you will want to style that.
Has it, that's a global class. And then you will you'll know whenever you make a change to it, it's going to affect the entire website. So if you have a section, let's say you make an element that defines the width of your project. And you're like, all right, my entire project actually let's do that right here.
So this diff we're going to name it section. And so we're going to give this a max width, actually, we'll just give it a max width of 1,280 pixels. And because we're following rim, we're going to divide that through a hundred to 1280 divided by 16 REM. So this now has a max width of 80 REMS allows our standard rack.
We're going to be utilizing as our max width. So every outcrop of a section we'll have that set to it. Does that make sense? Yes. Okay. So when we are making a specific section that we'd want thinner, so maybe a thousand or let's see, 80 Ram 60 REM, we would give it a separate class. So let's add in another div real quick.
We don't want it inside the previous one. And we are going to name this container.
And we're going to give that a max width of 60 I'm just typing in REMS. Is that the pixels? So you'll notice that actually we're actually gonna use this center technique and that worked this time, didn't work before in the headache. So when you first start a project, you want to make very broad.
Classes that when you apply to something, you're not going to change on that element. So let's say we went in and added a heading and we come down here and we had a head. All right. Now we're at another dip block and we're going to throw another heading and then she's easy to open those. All right.
So right now, you'll know. That the first and the third look similar, even on this, hasn't been given class worksheet. I use the command minus and you'll see that kind of changes the perceived pixel value up here. So as I zoom out, I can now pretend to view the screen from a larger thing. So this okay.
We didn't, oh, we didn't send you that. Yeah. Do you have right there?
So this section right here has not been given a class. Now, if we want it to have the same parameters as either of these classes, we will assign the class to it. However, if we want to make any other changes, let's say we want to have an extra padding on the side. You'll notice that right now, it created a new class.
Cause you can't have something without a class. But so if I give it the class of. And I start making changes to it. It's going to change every other section attached to it. So you need to very carefully determine if you're making a unique change to that class. So this section is getting a unique change.
I can't just use, I can't leave it on my global. So instead of giving it a section class, I can give it a combo class. So here's the first way you can adjust something. So it doesn't ruin it. So I could get named this section and then I'll do third header. Boom. All right. So now when I make a change to it, it will not ruin the whole.
However, because it also still has the first class of shit of section, any elements, how seal that changed to blue right on over here. Yep. That means it's styling or it's taking that cue from the most recent class. So you'll notice everything else is orange. So even though it has two classes, if I now go over to the header, the first section class right here at the first section, and I now add.
Margin on top. You'll notice it also is affecting this class because it CA it's cascading to both of these. So any changes you make to the first class also affects that one and then the overrides stays in place. So you'll notice now it has this pixel value, which I added from the previous one. If I didn't want that, I can now go in and make changes.
So when we're first starting a project, creating. Our canvas. We only want to go in and implement global classes if we can. And we will wait till we're past the first few phases of design to start implementing combo classes. So that way, if we have to make major changes to the website, we don't have to go back and change things.
Does that make sense? Yes. All right. So that's how your rough classes in combo classes. Let's clear.
Joel: Can we insert a break here?
Joseph: All right. So now we know that there's a specific strategy to trying to name things. So that way a, you can clearly find them in the navigate. Okay. B that when you have a new element, so when you add a dead block onto the page, you want to know it. Let's say you ha you have made a style that you want to apply to it.
You want to be able to type in that name and find it so it can be overwhelming to find a naming solution. So luckily sweet. Let's go. Let's see if they got forward slash. That's fierce. Yeah, that's pretty cool. All right. So thin suite has a naming strategy called client first. So it is a detailed guide on how w web flow users should name all of their classes.
This is what we will be learning and implementing. So I don't know if we're going to go through all of this. There's a lot of documentation in here on how you name everything, but this is how we'll be building our website. And so it probably will learn this. Yeah. There's a lot of, yeah, a lot of good stuff, but once you start using it, it's actually very simple.
It's very simple and very intuitive. But there's a lot of reading. And so we'll probably tackle that off the screen. We'll talk about the concepts of it. So there's a couple things to know. So the first is obviously the naming convention. We're in a name thing strategically. Let's see if we can find And everything.
So they have a rough yet. Here we go. They're global class system. So they have three types of things we're going to be learning. So we're going to learn the structure, which is essentially how you're going to name stuff too. You're going to name or learn how to turn topography into classes. So that way your whole project, you can have a small amount of custom classes for your texts and apply them very quickly.
And the third is. So one of the things that fin suite teaches is that you do not want to have a lot of combo classes. So here I'll show you a reason. So let's say we have our heading, okay, let's close the side thing and we've got a heading. All right. So let's say I want to start doing stuff. So let's say I want to change this heading to a different color.
Now, remember this class, this base class is going to be applied everywhere to the. So I want just this one to be blue, so we would make a combo class and we're going to call it blue. And so then we'll go down to our tight graphy color and we'll just grab a blue color. All right. The next thing I want to do is I want to center it.
So I'm going to make a combo class and call it centered just in case I have other blue texts that I don't want centered. I can't just apply it to the blue thing. I have to. And then let's say I wanted to do something else. Let's say I wanted to change the size. Now I'm going to make it a common class and call it large.
And now I'm going to increase this. We're gonna go through REM cause not using pixels. Let's go for REM. All right. And now you'll notice that while I got the solution and I have a bunch of new classes. If I now want to change the color, if I change the color. It will now change the color. Anytime somebody uses the large class, because whatever class is the last one, any changes you make will apply from those sections.
So you'll notice now it's blue here. So it's taking it from that class. So to do this correctly, I would have to now go and delete these other classes. And so now I have to go, now that it's on blue, it would, now I can go in and change this color. To read or something, even though class is blue and now I can go grab those other combo classes.
I can grab center and I can grab large. And now it does the same thing. So I had to go back and do all those steps. That gets extra complicated. When you start talking about structure elements to the website, like your dip blocks and stuff. So let's say I started out with nothing here. We're in doing this.
We're gonna do community. We're gonna do a div. We now have a second. So we have a section and inside our section, we're at another div block, actually not here. What we'll do is we'll turn our section into a grid and inside this grid, we're gonna get rid of one rose. We're gonna add the community. We're going to have another div, and we're going to call this now left grid and.
Let's add a color to this. So let's say we add a wait, I need a background color, not a you'll notice that only went and changed it inside this one. Diff so if I want to do it for the whole section, I'd have to come in here and searching, changing the color here. All right. So let's say I wanted to change actually.
And reset it. All right. So this is the easiest way to do it. I set one color class on the back of the first section. Now, if I wanted to color these intersections differently, I could now apply them to the next layer down. Because if you look at this in our style panel, I've got a left grid and a section.
So instead of now applying multiple classes or multiple combo classes to the same thing, you can just add in a new dev. And add the next class to that. So we'll notice any time we want to add padding or margin, we'll do it on a separate section than we would. Anything else. So let's say I'm going to try to make a good example for this.
All right. Let's say I had two seconds on the command C command V. I've got now two sections. All right. So let's say in this first element, so I've got a double. Inside my left grid inside my section, which is a grid. Does that make sense how those are sorted? Okay. All right. So I want to make a change.
Let's say I want to, let's actually add an image here. So in this last of we're an at an image, and then we're going to choose our image and we're going to grab this little guy and in this div or another image, and we're going to choose oops. Setting. Choose image. We're going to grab this guy. All right.
So let's say we just want this Nessie 20 pixels off the left. Okay. So if we now go into our left grid and now add in some spacing, you'll see, it's going to start changing the previous one. No. All right. So we might not want that. So we will now need to go just to the actual element and we'll name this second, Nancy.
And now we can add some padding to that. However, you'll notice. So if we look back at our navigator, so we've got this, there they're duplicates, the images are named differently. That's actually a first messy. Alright. So we noticed we made a CUDA. We added the class, the styles to this class, the unique class.
Okay. So if we wanted, let's say both of these sections to be a different color, we can then apply it to the actual element they have in common, which is the left grid. Okay. So if I go to Vista block and I changed the color to.
Open the topography, or you go down to background. If I change this to blue, it will only change that because this is a custom class. It's not duplicated like left grid is not made of the same. So if I know want them to be the same color that didn't work on this diff, so I need a command Z. I'll undo that if I go to the left grid and now apply a color to it, it now takes those changes.
So that is the beauty of stacking dip blocks. It doesn't take much computer load, but it allows you to make changes that you can say, oh, I want to go find the highest Dave that they have in common and I'll make changes to that sort of applies to both. And you can also unique dams under the common dibs, if you just want it to apply to that.
So we still want them to be named that we still want them to have common parent elements. So that way, when we want to make big changes to the website, let's say we decide, you know what this whole element should be further off from the left side, or let's say closer to the left side. So we might want to grab it.
Let's see if I close that we might want to grab our left grid and say, you know what? We want the images, all the thing all the way over here. So we might go in and grab some of the margin and we're going to pull it all the way to the grid. Okay. And that only worked because they had a comp a class in common.
So a really great technique for when we get into actually designing stuff is to stop. Did blocks. And that is something that you'll notice right here that they do for their core structure. So this is their structure that they use on every page. So we're going to now go implement that. I hope fully explained why there's the benefit to having a stacked classes so that you can go make Y changes to your website.
So I wanted to just show you this and how it actually would apply in a thing before I go. And we're going to mimic this core structure. So we're going to go delete both of these sections. All right. So the first thing you'll notice, we're just going to make this from scratch, but when we clone the project this will already be, this will already be done, but I just wanted to build it from scratch.
So you see how it works. So the first thing you do on every page is we're just going to make a open and grab a dish. And you're going to make something called the page wrapper. So we're gonna change this name to page wrapper. All right. So all of our content will now sit in this page wrapper. So when you open up a new page, when you open this project up, you'll see body and then page wrapper, and you will not see anything else.
If we had a new div that's now inside of this, so we'll have to click to open it. So it makes it very clean. So if you now wanted to cover. This whole page, you could now do one copy. You can copy this one element and bring it to a new page versus having to do it multiple times over. And then you could turn this whole page wrapper into a style.
All right. So the page wrapper is the biggest global class besides the body. So the only thing we will apply to a page. Is a call, I think a couple of things. So we may do an overflow hidden. So nothing will show from the outside of the website. If you ever been on one of those websites where they had like an image that was like twice as wide as the rest of the site.
And it would do like the weird scrolling. Yeah. That is because they did not overt. They did not hide anything that overflowed the bounds of their website. So on a page wrapper, we might do overflow. We might do all right, the maximum size we want it for the entire website is a hundred grand or something like that.
We might apply that year. We might also determine that we want margin on the entire website. So it's, there's a little bit of spacing on the outside of the website. That's something we might want on the entire website. There might also be times where we want images to a, but the website. So invested is a truly global Lloyd where it'll apply everywhere.
We won't add it on. So inside of our page wrapper, that's the very first section that the next item they have inside of it is their nav. So we are actually going to do committee. I'm gonna grab up a NAF boomer as in the nav bar X, you know what? I don't want this dip block sitting here. All right.
Then the next thing they do is add a main rep. So this main wrapper, we'll be wrapping the rest of the content for our website. So we're going to know and we are going to name this main wrapper. All right. And now inside of our main wrapper, they've got a very interesting way to organize information. So you'll notice it goes to the main wrapper section.
Paige padding container large. And I'll explain what that does. So we're going to go and build this real quick and I'll explain as we go. So now we are going to add a Oop, we don't use the regular section. We're going to add a diff and we're going to call this section and we're actually going to clear all of the classes that we had put on there during, before we should not have built dues that class.
All right. So this section on the take off. Back to regular. This section will represent a chunk of content on our website. So whether it's an about section, a contact form, section a hero section, we will use a section as the, every chunk of website will have, will be inside of a section. So we are now going to create several of these.
We're going to make five. Then let's say you had an about section, a contact section, a, an se section or whatever you're gonna do. You'll have. Now, inside of a section, you're going to add an a diff and inside this, the first DIB, we'll tell you, we'll give you the width of the entire project. So you might come in here and I'd say for the map, max width of vertical, this container dash large.
And we're going to at the max with, for this is 80 REM and it's going to be. And then in our next section, we're going to add another dev and we're going to give this a class of Taner medium and we're going to go 60 round and Cindrich, and you'll notice that spinner than the previous. So now in the next section, we can be like, all right, how wide are we going to want?
This section is going to be something we want very narrow. We want to take up the full width. If we wanted to take up a full width, we don't give it a container class. We would just leave it and start adding stuff in. So let's say, all right, we're going to add a div in here and you know what I want, I don't want this to be too wide.
So we're going to type in container. And this time we're going to add a class. We're not creating class where I quick container medium. And now we've given this. Down here. We're an additive and we're going to give it, we're going to give it the class of container large. I'm just typing in. It's automatically populating.
And so you'll notice now we've got these Lobel classes. So if you want to make a change on the width of this section right here, the one where my mouse is, you will not go in. You wouldn't go in and just start, you know what? I want to make this a little or to make it a little small. I'm going to go through.
Because now it's going to change every other section on your website. So we want to be very conscious that when something is a global class and we'll learn about these over here. We are giving it a very wide parameter to work within. We're not making small tweaks. So when we build a website, you're gonna start with very large sweeping styles and you're going to slowly ratchet it down.
So each of these sections, when we actually go and build it, so we're going to end up wearing a quick duplicate class. We're gonna name this. Is this the first section? All right, so we're in a name. One second. We're going to section DAS dash section dash Nessie images
in the GEs. All right. So now this is a combo class. This is a custom class. So we can now go make any changes to this Nessie images. Like we can now go change the background color, and it will not affect any of the other sectors. Because it's a custom class just to this once with all of the sections, we'll have the accustomed class, that you'll name, section dash, whatever it is.
So when you go over the navigator, let's close this all you open up the page wrapper, you'll see the nav bar, you'll see the main wrapper and then we'll add the footer beneath, but then you'll go in here and be like, all so this is the first section we have a name. So let's drag this one up. All right.
So this is the section for Nessie and images. All right. So we're going to make for an open up. And I want to add a grid of our two, two of our images. So I could, while I'm on this diff this container medium, I could turn this into a grid, except that when I do that, it now turned this one into a grid. And I don't want that because container medium was Hey, a global class.
So I'm going to go in inside the container medium and I'm add just another. Okay. So now here, I've got a diff and I'm going to name this div Nessie image grid.
All right. So now I can change this to a grid and we're move one of the rows. Cause we just went to images and you'll notice it did not affect any of the other classes on our page. So when in doubt, start by using large. Global classes. And if you notice, and even potentially, because you could have classes on other pages that might get affected, if you're making a cust a change to a class, it either needs to be a custom class.
So it's the only thing that has that name. Or you need to add another div block and rename that. So it's fine to have something 10 div blocks deep it's much better than having it all on one class and then accidentally changes and changing classes on other things. All right. So inside of our Nessie image grid, we've got two sides, two sides.
We could just go and add an image to each of them, but we already learned in one of the previous videos that if you want to change something to a flex box, it's better to add a, another div. So we're gonna add another diff and in this dif, we're gonna name this what was this? Our Nessie. So we're gonna name it left.
Copy wrapper. All right. So in here, I'm going to do command E I'm going to add a heading and I'm going to add command E and I'm not a paragraph, and we're actually going to change this background because it is hard to see that we're just going to make it off white. And then on this right side, I'm going to.
So let's just make this a little bigger so we can see what's going on over here. I just want to grab this. I'm going to do commit E I'm going to go to dev and I'm going to name this dev right. Image wrapper. And I'm going to do command a command E and I'm going to add an image section here. I'm going to choose our image and we are going to add just one of our images.
All right. So now let's say we want this centered luckily enough for us, we added the, a, just a div to this. So we can now change this to flex box right here and we can align it in the center. And now that's over here. We can now line up this whole thing in, let's see a wand. There we go. I don't want that one.
I don't like that. That, all so just building that simple, this little simple thing seemed like a lot, cause it doesn't look that pretty. We added a bunch of classes now we could have just done is we could have just made just the one container and then we could have given it a class and we could have given every section, just we could just start naming stuff as we go.
The problem is if you ever wanted to duplicate this section, any class or any changes you make to it? Section as like styles on it. If you go and just start naming it randomly, when you're on the second page, your website, you're never going to remember what you built on the first website. So while a naming system is a lot to learn upfront, it really will save you a lot of time and hassle when we're going down the road.
So that is like an introductory to the naming classes. How you do the core structure of the. So that's how you'll structure everything. That's what you'll name, the classes and how you'll structure it. So that's the first element. That's the structure we learned. The rough basics of that typography is is very similar.
So the one thing that the fin suite clone has is a style guide. Web flow. It is very common for the very first page you build not to the homepage, but a style guide. So it is somewhere where you will outline every element in your building, on the website. And there'll be one copy of everything on that.
So every text element, every paragraph, every section, every button, your navigator, your footer, your symbols. And so that way, anytime you want to make a change to something, and you're not sure where it might be on the website, you just go to your styles guide panel and you change it. Oh, the second one, it was very handy.
The second thing it does is it allows you to tackle a lot of the project before you even started building the canvas. So let's say you were going to build a website and it was gonna be on a black background and all the texts needed to be white. So instead of going to, into every text thing and changing it to white, you'll just make a global class for texts and say, all texts on this website is going to start out being white and you can always specify as black leaders.
But that'll be on your style guide. And once we, when you get control of the, on the next video, when you're playing with stuff, we'll actually pull out their style guide. And so you can play around and we'll just, we'll goof off in there, but you'll see how that works. So that is the style guide relearn.
A lot of the, where you can implement the light is a lot of the topography. So it's how you size, like all the text stuff. If you want different styles. The weights of it. So if you want bold here, just going to type in a class. So they've already, so for example, right here, instead of going to say, alright, I want to go and change this heading to bold, and I've got to go down here.
I got to find the weight and I got to go in here and change it. You can just type it. You'll be able to type in you'll know that you'll learn that. And so you'll just think art text, weight bold, and it actually gets very intuitive. Cause you'll be like, all right, I want to change the text, weight, blah, blah, blah.
You'll be able to click it right away. It's already down there. So we're going to go through both video and we're going to go through all this documentation and that'll get it. So the last thing in there, their classes is spacing. So you know how to make sure. You know how to change styles to copy and text and stuff.
The next thing is how do we go in and change spacing? So right now, if we see this element, you'll notice that Nessie is touching the top and the bottom of his element. And this, if this was an actual section of a website, we probably want it to take up 50% or 75% of, the top of the screen. So the one way we can go and do that is we could go and make the actual Section larger.
So we can say the minimum height is going to be 40 REM. All right. So now we'll notice it's weird. It's still going to pull it down into it. It's because we have another section inside this section. So we'll have to go look at our container media and we already know we don't make styles to our army.
Our main class. Cause if we do a change here, it's going to affect whatever the other one. So we can either add another one. So what we would do, and I think we did not add this already, so we're going to do a committee or we're going to do a diff. And so we'll just drag this diff now up here and we're going to put the container in this diff and so on.
This div is where we'll actually apply how tall we want the section. Not on this is if I put it here, it doesn't help us change any of this content. So we're actually going to now get rid of this height. We're going to go to this diff and we would actually name this vertical padding. And we're now going to give it 10, maybe 10 REMS of Patti year and 10 round of padding there.
And now it's in the. All we did is we utilized and that class, that vertical padding class already exists. And we'll learn that in this basic thing, but suddenly we could actually change this to twenty-five grand and it might be too much. Let's go hold the command or the alt button command Z or to hold the old button, or we want to take up, this is not quite how we do it later on, but suddenly now our website.
Could look like this. Oh, so we didn't have the full width of the Pedro Africa. You want to center that?
All right. So that's how that section would start looking. So it doesn't have to great, but that is some of the basics. So we're going to use global, we're going to learn about global classes that we can easily and quickly make changes to our web. On the whole page. And then later on down the road, when you like, you know what I want to actually move this heading over 10 pixels one way or the other, you'll make those final changes on the very last round of your website build.
So there's a structure convention, which is always stacking div blocks inside other dip blocks. So that's the first that the first like takeaway is anytime you're in doubt, stack another double. The second thing is you want to have a really clear naming convention. And when we download the clone of theirs, they'll already have all the texts to spacing all of the sections pre named.
So you'll just have to memorize. All right. I want to start with the section. I want to then go to the container, the padding. And once you get that down, you'll just search for it in the class larvae pre-built with the settings that you won't change because they are global ones. The next thing is their actual I guess what would you call this?
A widget? So they've got a bunch of cool things in here about doing changing break points removing color swatches, just a bunch of really cool things in here that we may utilize. But this, because fin suite is an integration to web flow. This is something we will learn as we utilize it. Unlike web flow, all like all the style panels and stuff where we just went and learned it, we'll save those for, as we learn it.
And then we also discussed adding classes and applying settings to classes. So one good, just rough takeaway about when you're working in the designer or web flow designer is be very methodical. You're a lot of times it's gonna be a puzzle of like, all right, I want Nessie. I want Nessie in the middle right here.
How do I get it in the middle of the page? Like right now we wouldn't add it in like padding there's ways where we could actually let zero. So before, when we, when added the section, let's say we went and added the, when we went and added the margin before
we CA there's many ways through it's for example, we could create. That's the inside container medium. The Nessie grid is a custom class, so we can make changes to that. We can do different styles about how it's sorted. We could go to Flexbox and we can have it stack vertically, and we can have it aligned in the center and in the center of the page, we can change all sorts of things about how its layout is using Flexbox grid and the the regular block element.
So once once you've got the outer. Where you want it to be. There's ways to treat, tweak the content inside of it. It's if you want it side by side, you're like, Ooh, I do want a grid. If you want it stacked, it might be weird to let's say, delete a column and have a two by two grid. You could, but now you're going to have, they're going to be like the same height.
So it might be easier just to you know what I'm going to do flex box. I'm going to do verticals. So there's numerous ways to get to the same answer. In Webflow. It, the best question is how can I, whatever solution I use, how easily will I be able to understand what I did when I look back? And that's one of the things I had a hard time with is when I, the first website I built in web flow, I didn't use the gin suite naming tools, and I would go back a week or two later and have to make changes for the client.
And I'd be like, What was I doing here? What was it? What were they doing? This where this class? I didn't know where I applied the padding to. I didn't know where the margin was coming from. I didn't know where the spacing was coming from and it's like right now, if I let's close this all, I can now open up the F this main rapper.
Oh. The first section is gonna have my Nessie images. Okay. There's padding. So now I know there's me padding to the section. Okay. There's a container that has all the content in it. Ooh. All right. Now there's an se. Okay, so now I have copy on the left and a wrapper on the right. Obviously we changed this from grid, so we'd want to, and if we do, we've added in a column.
And so even though this looks like it's now 10, 20 layers, deep it's makes much more sense when you come from nothing. So you just open up one at a time. It's very different than just like seeing a hole. Now I'm like, wow, what is all this. But as soon as you realize that every time it goes down a layer, you're just going to apply one one styling to each class.
So the first one's just going to wrap it. And it's your custom name? So you can change the background without changing the background on other sections. The next one is going to give you the height, the padding on it. The next one is going to determine how wide it is. The next one is going to determine is it because this is a custom class, you can either give it a grid of Flexbox or just a regular And every time you go down, you're just making one decision at a time.
All right. How tall is the section? How wide is the section? How much padding is there as soon as you realize, oh, wait, I only have to make one decision at a time. It's not a very complicated, it's a man. I have to come up with 10 blocks. You're realizing that you're going to go through. It's like a little puzzle, a little decision tree.
How tall do I want the section? All right. How wide do I want the section? And that is the benefit of having this client. First classes is it allows you to make one decision at a time and come up with really good layouts instead of starting at a blank canvas wow, where do I even start? I've got an image of some.
So that's the really cool thing about the classes. So we're going to off camera, maybe we'll film a little time-lapse or something. We're going to go through a lot of this, just so you can learn the fin suite strategy. And that'll probably fill in the gaps. A lot of the stuff I talked about.
So we're in a. We are then going to, maybe we'll probably clone it in the next video. Surveillance can see how to clone something as well. And then once we've cloned that we're just going to let you go in and play. And there's, we're not trying to build anything. You're just going to go around and now fiddle with the stuff we talked about, because even just knowing where to find something is the first, battle we want to win.
We don't want to have to like, alright, now you're going to go build this section. So I think that's what we'll do. I. I think we're at a good place to stop and now take a deep dive off camera into all of this stuff
Joel: and what will become quickly, what will be come quickly. Obvious is how big of a fan I am of swimming since we is, if I come back with some gear as well, I come back with the fence.
We've had them to the people that like, yeah, this really caught on.
Joseph: I, for me, when I first started learning web flow over WordPress, probably the first year of, dabbling, just building some of the smallest, some smaller sites in it. It was like, wow, this is a lot of work. It is so much harder, so much more complicated than WordPress.
And yes, sure. You can do things that you can't and WordPress and, your imagination is almost the limit, but it was really until I found the fin suites like their structure, that it became so much easier to manage a project, like you feel so much more confident going into tackle it because you have all of that backend.
So it is definitely a steeper learning curve, but once you get over the learning curve, like did, you're like holy smokes, this is so much simpler than I thought it was going to be.
Joel: So that's one of the things you're really good at to begin with is that strategy component and you Excel at anyway.
Joseph: And I definitely, yeah, definitely for me, I would rather spend a hundred hours upfront learning something and becoming really efficient than having to spend three times as long building a project.
Okay. All right. We're going to do some learning and then by the time we come back, you'll be a master of professional. And then we'll go from there. We'll have some fun sounds great. Thank you, Joe. All right, bye.
