Learning everything finsweet
Summary
In this episode we’re going to take a deep dive into everything finsweet. We’ll clone their style guide that has preloaded classes, we’ll read through their documentation to try and get a deeper understanding of the client-first methods.
Watch Here
Listen Here
Weekly tips
Combo class are not global addon classes
Avoid descriptive names that may change
Separate words with “-” and “_” for components
Use finsweet client-first class structure
Form elements can only be in the form block
Use the class “wrapper” when holding elements
Transcript
Joseph: In this video, we're going to cover all of the fins sweet stuff. So you've downloaded the extension. We are going to figure out the clonable and then we are going to start going through the docs. That sound good. Got some learnings. Yeah. All right. We're gonna switch screens. So this is still your, this is your screen.
So we're going to download they're clonable so if you go up to the showcase tab in the very top of the browser so this is where you can search for every other designers clonable so you'll see the tab in the right on the right side, right there, where it says all sides are clonable.
Joel: Middle, right?
Joseph: Yeah. If you click quotable. Yup. So then these are all sites that you could clone that people have built and then left open for other people to come in and copy. So in the search tab, we're going to specifically look for the, so it's client dash first. So if you want to search for that.
Joel: All right. And there it is.
Joseph: It's the very first one. So you can just click it.
All right. So you'll see a couple settings. So there's the open live site, the open-end web flow and clone project. So we're going to do is clone the project
and this, now we'll add it to your dashboards yet you can rate the project and then you can name it.
all right. So now this is our same designer browser. I'm actually joined, hit command minus. So we can just zoom back out a little bit. Okay. So this is the home page. So you can grab that page wrapper and delete it. Actually opened it up real quick. Just open the page wrapper, grab that global styles thing and drag it all the way up to the body or right underneath the body.
Yup. And then delete the page rapper.
All right. So if you go up to the pages on. The tabs where you switched between pages worth is page home.
All right. So right now you'll notice there two pages on here. So this is the homepage where we'll build the website and then there's the style guide. So if you want to click to the style.
So this is the backend without we were talking about where you will, when you first started project, this is the first thing you'll tackle. You'll come in and set what font you're using, what header sizes you're wanting. If you scroll down, you can look at some different stuff in here. So this is your, all your H ones, three, six additional heading classes.
How you want your text to look, you can keep scrolling down.
So most of these classes in here, our classes we will learn about in the client first. So all the different texts, classes, there's all name stuff.
Joel: So they've already pre set up a set of social media icons then to use by default.
Joseph: You can use some of those, or you can bring in your own that sometimes it's just for sizing. So this is just the bare minimum template. When you're coming in and setting up the style guide, you might want a different set of icons and you can bring them in.
So that's this, let's switch over now to the client first instructional. Okay. All right. So if you just want to start working through this, we'll see how it How we end up recording this or whatever, putting it out. So if you just want to start you can read through to yourself and then anytime you have questions just let me know.
So we'll want to start and watch the videos and just start at the very top and we'll work our way down. And when you have questions, let me know.
Joel: All right. Sounds good.
Joseph: All right. So there are, I guess as you're probably reading, so there's three main styles of classes we're going to want to mainly learn. And that is your page structure, which is the first one. And we'll go. And once, once we've gotten through that class, we'll go and actually implement that on our home.
But, so this is the kind of where we were talking about stacking dev. So each one of these is a dev. So what we could do is if you want we can, you can look at the top one and then you can go to the actually I think we'll wait till we get actually into struck or into classes to go into them at that to be just want to finish scrolling down through this page, make you just are getting it.
So just work through one of them.
Joel: So if I clicked on these blue boxes, will that take me somewhere or is that just more for
Joseph: that would copy it. If you clicked copy, you could then paste it into the styles panel. So you're looking at the, I'll just walk us through while we're here then. So you've got the page wrapper and that'll surround your whole page.
And that's, you can drag everything over the main wrapper is what will hold all of your session content. So what we'll go outside of the main wrapper is. The navigator and the global style symbol that they already have in the project. The page padding gives you that two to 3%, when we tried to add some of the ramp on the width, that's what the page padding does.
They have it outside of the sections, but I actually put it inside the section. So actually put the section first, because if you have one of the sections that got an image that you want to go all the way. You don't want that too. You don't want them to over arch all of your sections. So we'll actually go page padding main wrapper section, and then inside the section, if we want that padding, we'll put that in there and then we'll do the container.
Okay. So that's your rough core structure and then a topography. So when you have a text element open, you can, there's three different ways to To add classes to that. So it goes either. So like you can see heading large. So if you're working on headache, you would just type in heading large there's ways to do color.
So when we're in that style guide, anytime you add a new color, we'll create a class text, dash color dash, whatever the color is. And so whenever you're going into your styles panel, looking for the class, you can just type in, all I'm looking for a color for my texts. Auto text. Gray text, color white, and then anything where you're styling the text.
It'll be texts dash style. So bowl taluks crossed out. So it's either text dash color, text dash style, and then you can go from there. Okay. All right. So for the spacing there was a couple ways, so they actually, the way they set up their spacing is really clever. You can either set margin and margin or padding.
So you will say first what you want. So you either want the margin or the padding, then you're going to say the direction. So you either want it top bottom, vertical, horizontal. So vertical is the top and bottom or horizontal we'll do the sides. So all you do the first class is you just apply that first class.
If you wanted margin on top of something, you would apply margin depth. Now that would not do anything that is just a preset class to then add how much margin you want. So margin dash, top plus a combo class of margin, large or margin.
Joel: Interesting.
Joseph: So the first one sets up the what type of, is it a margin or padding and what direction it does. So in there, how this actually works is it actually turns everything else into zeros. So when you say margin top, it automatically goes in and sets left, and bottom to zero. And then you give the quantity for the top.
So anytime you're doing margin are padding, it'll be two classes. So that's a combo.
Does that make sense? So
Joel: when it's a combination, it's the others are zeros. Okay. All right. Interesting. So
Joseph: you have to use both. So if you just type in margin top, it wouldn't do anything has to be margin top plus margin, small, medium, or large, or extra large or something.
Joel: All right. That'll take some, getting used to some thinking, getting used to all right.
Joseph: So I believe here's why I think it's done like that. So when you have, let's say a headache, okay. Or a, or an image that did block becomes the name margin. If you had a class where it was margin 40 pixels or market margin, 60 pixels, you would have to go rename that diblock every time, but now you're now, I'm going to put margin on the top.
And so you can name that dip block the first class, and then when you're scrolling through your navigator, you'll know exactly what that is doing without having to reference the combo class. Cause if it was just margin. And then margin large. You wouldn't know where that margin is going. So the div block in the navigator becomes margin top or padding top.
And so it really helps when you're going through a project to see what it looks like, because it doesn't show the combo class in a navigator who had for the
Joel: div block itself is the margin top plus margin line. Your actual deadlock is the margin. Wow. All right.
Joseph: So you'll see how that works once we get into the project.
Okay. All right. So you can keep scrolling down if you want responsive visibility. That's cool. So you can, instead of having to go in and you're like, we had that hide option, like when you hide. So let's say you were going to go create a custom nav bar. You're have to navigate. Instead of, that little slider where we went and set where that the burger menu came up, it's very common when you're creating complex nav bars, where it has dropped down menus or sub menus to build two separate menus.
So instead of manually going in and hiding one and showing the other, you just add a combo class of, hide tablet. So if you type in high tower, it hides everything beneath. And if you ha, if you put show tablet, it'll show everything beneath the tablet. Okay. So that's how that works. Yeah. Then you got your max width.
That's if you can't do if you're not just building like a container, so you had an image or something and you wanted it, a max with whatever, max it with larger medium, instead of applying. Padding, if you don't want them to know, you're not naming the padding large or something. So that's how you would apply width.
And I believe that is built in rats and automatically scales down. So when the other day when we went and did you know max with in percentages, this is one of their solutions to try this first cause that this is Ren base. So if you do max with medium, large, it they've already worked out the math on how it will scale down.
Background color. That's another one you'll set up in the style guide, any type of color you'll use as a background, whether it's for a section or just an inner div, we'll just go up and create the background colors once in the style guide. And that's how you access them. Okay. A couple of things we didn't talk about is the Z index.
And that'll tell you if you've gotten multiple items let's say you had three images. Let's see. I can give us one, two and three. You can set their Z index higher and that's how close, which one appears in front of the other. So you could have the middle one appear over the other ones. So you'll use your Z index to determine how something comes closer for.
And then the hit overflow hidden and some of the other stuff we've already talked about and that I'm not even sure we'll use. So if they talk on it later, we'll read into it. But I don't think we need to go over it now. All right. So the custom classes, so they use dashes to separate words.
So anytime you have a word, use a dash to separate it and you use an under. When, so for example, you've got the home header component and the inside that is the home header content. You use an underscore between them. So it's always home header. So that way, when you're in that custom section of home header, or let's say we had a section that was
Holly Holm. Nessie form everything we put inside that is also home dash C form. So that way, anytime you're in that section, all classes related to that section have the same reflex.
Joel: So it's a dash to separate words,
Joseph: underscore to separate components. And then yeah, the bottom section doesn't really matter. So if you want, you can move on to the mindset.
All right. So this is a lot of texts. So this is a lot of reading now here. So if you just want to start reading through it, you can zoom in if you want to make the text a little larger. And then I guess there's a two minute video, a little player icon here.
All right. I would say so, depending on how much you want to go into it do you want to go into, to a medium level, deep dive, very skinny.
Joel: I'm not a intellectual studious learner. I like to at best skim read stuff, sometimes a highlighter would help, but that might not be effective on screen.
Joseph: All right. Let's go down to on the left side of the tab, go down to pre-written classes. Okay. Yeah, this is a good, important one for the structure.
Joel: I'm assuming this is pretty important stuff of the whole stack versus camo classes.
Joseph: Yes. So because you are using global classes and you're stacking dibs every section. So when you make a section. Nessie footer. That is a custom class. So any changes you make to that won't apply to any of the other sections.
So this is saying if you have all of these items, you're going to add to that custom class, you should add it right off the bat. So if you had, let's say you were just going in and naming everything section you now can't make any changes to it because it'll affect every other second. Class. So you start off anytime.
You're going to make multiple changes. You make one custom class and just apply all of the changes to it, because like it says right here, if you go to background absolute and then a pass the low, and then texture one, if you want to change the passing of the high, you have to delete texture.
One, you have to delete opacity low. You have to reset it to a passively high, and then you can reset your. So instead of just being able to have a custom class where you can now just go on the styles panel and change the opacity.
So this section is talking about anytime you're making an element, let's say on your homepage, you create a contact form. You wouldn't necessarily name that home dash contact form because you will use it more places than just on the home. So any element that you're going to use on multiple pages, you make it a component.
So it would be contact form, and then you understood it's contact form header, contact form button, and then you just named everything related to that contact form. Now, if it was, if you were building a custom contact form for the homepage, you certainly can do home dash contact.
When you need something wrapper that is directly holding the content. You don't want to be applying internal padding or margin to something that's a rapper. You want that to hug exactly the content. So you would either put the margin or Patti on its pyramid parent element. So on the team list, whatever you might apply the margin there.
And then you do the headshot wrapper that literally might just be a div with, the headshot and, uses obviously an image, texture layer, hover effect, those all just sit inside the.
And this section avoid or be careful using these. Sometimes. Yeah, you don't want to name things grid or flex or whatever, because during the project you might realize they need to change in responsive levels. So it might start out as a grid on your desktop, but by the time you're down to landscape, you like, oh, it's just needs to be a one straight down to naming a grid or flex can get confusing, or you might end up changing it and you don't have to go back and rename the class.
So one of the strategies they use for camo classes. So that complicated header thing we talked about if you had, four or five styles applied to something in one class, instead of a redoing that class and changing one of the elements, most of the times when you do a custom column class you want to use is dash.
So that way, when you're going through, that combo class is specific to that element. So when you're inside the website and you have a global class called blue that's sometime you can apply that to backgrounds, you can apply it to the text. You can apply it to a lot of things.
If you have a class like that, customer. And you've got that same class, but you're changing one of the things you can add that combo class and be like is opaque or is whatever. And that way, that is specific to that item.
Or any add-on class is a class that was created uniquely, so that class can stand by itself in a combo classes made on top of another class.
So you would not use. So for example, that is opaque. On that button or on that background, you're not, it's not just in a peak setting for everything. It's an opaque setting just for that button. And so you could only use that. You could only pull up that class when it's being applied to the class. It was created out.
Whereas an add-on class is if you go and sit in a class by itself is opaque. That's the very first class you're making. And then you go apply that 30% opacity where you can now apply that is opaque or sorry, just plain opaque to anything because that class was built by itself. But if you go build that custom header and then add that is opaque, that can only be applied to that class because it was humble.
Not an add on class. So for example, now, if you type in is blue, is dashed blue or blue doesn't matter. Alright. Then go style
that blue the background. Okay. Now delete both of the classes. We'll make sure it's. Both.
All right. Can we both now type in is blue doesn't exist? Nope. You just create it now. You just created that. So undo command Z type. It is blue without entering it. It does not exist. So it says create. So when you made that is blue, it was the second class applied. That is a combo class. You can't apply that to anything else. So you could now go make just a blue.
So if you don't backspace all the way and then type in blue and create that is now a global. Add on class because you can now apply blue to something else does. It was the first one. If you now type in something else and now is is opaque it. So if you type in is opaque, now you're going to have to create this class.
And then now you could go down and change the past if you wanted.
Which I think they are the bottom near the very bottom. Oh, there's yeah. Yup.
Joel: Okay.
Joseph: So the week that class now is opaque.
Now we've got to first actually give you the background of blue because we didn't make it, give it a color for the class.
All right. Now type it is. Okay. I have to have the dip selected, and there's an existing group. Go back, actually go back real quick, back up, back that up. All right. It says existing combo class. So that is opaque applies to it because it's a combo class, four blue is now if you click is opaque, it'll picks it up. Now, if you do command E and that.
Yep. And then add a line center. I actually do want to drag that did outside the other block did block. Yeah, that did block right there that you named the line. Sibling element. Yep. That's fine. All right. So now align center, you can give blue is blue because that is a combo class of that one.
Joel: What does that mean is a combo class.
Joseph: You created it after you created that class after the alarm center class, it's an in combination to another class. It can't be used on any other class because it was built on top of another.
Joel: Right there. That phrase, I guess I don't even understand that phrase. What phrase is a combo is created that class on top of another class.
Joseph: Delete that is blue real quick.
Joel: All right.
Joseph: Now Adam, just blue, tight blue.
All right. So that made the change to. If you go to the dip block underneath it and delete those classes and try to type is blue. It won't work. So you have to create a new class. It doesn't exist.
Joel: So what's the difference between is blue versus blue.
Joseph: So when you made the class. That was the very first class in the selectors. Like right now, when you type something in that first word you type in is a global class. Cause it was the first one you typed in. So as soon as you added a class, okay. So now type in any class, it doesn't matter.
Joel: Okay. Yep.
Joseph: So that is a global ad-on class. Any styles you make to this? You can apply to a different element because it was the first one in the navigator or in the styles thing and the naming convention. Okay. If you now type in another one after this. It becomes a combo class seat, new combo class.
Yep. So if you type something after the first class has already been applied, it's a combo last, right? Yeah. So that means it can only be applied to this class.
Okay. So that green now, whatever you put in on this, the green, if you make it green, you can not go to the blue box and type in. You have to type in baby, whatever baby blue
Joel: first
Joseph: like that green class does not exist. All right. So here's how there's three layers to it. Any class that it goes as the very first class, or it has to be the first class because they global class.
Okay. It means it's the first type thing I put into the box. You can apply it to anything because it was made
Joel: for. All right.
Joseph: All right. So if you've got, I'm trying to think of how you do this. All right. So if you've got five different types of food, you've got pizza and a bug to go to. You got pizza and a burger. Okay. Yeah. If you create a pizza and then you create a burger, all so you can apply either of those to someone's dish. So someone's got an empty plate. Do you have an empty canvas?
Now, if you make a piece. And then you do a combo class of burger two. It is now a pizza burger. Yep. You cannot just take that burger out and put it on someone's plate on someone's plate has to go pizza burger. So that is a combo class because you created the team and then you added you chopped at the burger on top of the pizza.
That's a combo class.
Joel: Backed back up one step, and this is where, so you create a pizza and you have a burger. Yep. And if you're going to with you and somebody wants to order two things,
Joseph: they're only ordering one thing
Joel: and they want to order one thing, but you want to give them both to something.
Come on.
You can combine it and make, give them a burger pizza. Yes. All right. So then you can't just give them a burger.
Joseph: You can, cause that's a global class. You can give them just a burger and you can give them just a pizza, but you cannot give someone the, so when you make the pizza burger, the burger.
You are chopping up those pieces of burger and putting it on the pizza. You cannot now just go give someone chopped up burger. It doesn't exist because that was a combo class to the pizza.
Joel: All right. Yes, I
Joseph: understand that. But now if you create two global classes and be burger and pizza, you can do a global add on class and that's all right.
Here's burger. Here's a slice of pizza on top of it. That's a global add on. But both of those things have to be made individually, so you can go make the pizza and you can go make the burger first. And those are global classes. Global classes can stack on top of each other and become a global add on class.
But a combo class is when you start grinding up the burger and put it on the pizza that ground up burger can't be used as the first item anymore. The ground burger is not on the menu.
Joel: So let's slow down with the terminology for just a second. You have the glow. So you have the global. Yup.
Is the pizza on the burger? Yeah. Okay. All right. So then we did the then what happened to the of the combo is is a, either one with the.
Right.
The combo class. You needs a burger pizza. Yeah. So you could have a burger with a slice of pizza in it or pizza with a ground up to
Joseph: ground up burger on it.
And a better way of explaining it would have been saying. So the combo class, instead of grinding up the burger, a combo classes, mushrooms, and if you apply mushrooms to burger, that's a combo class. So it's burger mushrooms. Okay. But now if you went back to the pizza, because the mushrooms were a combo class of the burger, you have to go create a new combo class.
That's now pizza mushroom. You can't just pull mushrooms. However, if you also make a mushroom, a global class, so you now say, all right, now we're going to serve pizza. We're gonna serve burgers and we're served mushrooms. You can now put those mushrooms on either of the items because it's a global add on class.
But if you just add the mushrooms to the burger, you can't go back and add it to the pizza. You have to create a new class.
Joel: So you could add mushrooms as a combo class to a burger. Before you've made it a global class. Yes.
Joseph: So that's what you just did on the display you made is blue. Before you went and made blue, global class.
You just did that. And that's why, when you typed in blue, nothing came up because you had made it a combo class, not a global class, but once you make something, a global class, you can now add it on.
Joel: So by typing, so align center was just something somebody else had already gone in and out.
Joseph: Yeah, that was on the w when you were on the, yeah.
So that's like global class that they talked about on one of the add-on cloud or the
Joel: in a little list. I think somebody, if somebody's on a fence we'd already added as a global class. All right. So this is starting to make a little bit more sense to me, or quite a bit more sense.
Joseph: All right. So if you want to start and go back to the website and we can add the page rapper, so want to delete the line center and our baby blue, your classes we added.
So we've got.
Joel: Let's see, how do I how do I rename these?
Joseph: So that is the class. The class has the name
Joel: over here. Yeah.
We do.pay trapper. I don't
Joseph: think so. I think it's just page, maybe dash wrapper. It's already in there. These are ball. Yep. There it is something she grabbed the existing one. I do that. I don't know. I didn't see. I guess I hit delete it. Go back to it and do.
Represented just quick and you can use the debt. Yeah, I think when you're typing duct grabs. All right. Now you can add your next one.
Joel: Can I hear, can I do I can already do do I want to already do, or do I want to just add to.
Joseph: Do what? Sorry.
Joel: Do I want to add like the section one or was this where I don't want to
Joseph: choose? Yeah, so we never, yeah, we never used the pre formatted, but you're all you need to yeah. Just to diblock you need to do so first as the main wrapper, so div block.
So Pedro wrapper,
Joel: main wrapper.
Joseph: And then you can delete that to block, right? Inside one, I would bring in the nav
and throw that above the page. Wrapper, not in it. Right then you can drag the global styles down right above the nav bar.
Yep. Perfect. All right. So in our main rapper, this is now where we add dibs and name them, section,
Joel: whatever.
So if we don't have a strategy, yet we just leave him section something a main or
Joseph: yeah. Yeah. I You could do for, if you've got any ideas you want, you can do main and then you can
So what I would just do, I'd grab the section main and I would take command C. And then just paste it several times and then that's fine for now. We can go in and change those later. Oh actually, sorry. Delete all those. Sorry. Delete all of those. Except for the first one inside, we want to add the other stuff.
So we want to add the page padding and then the container size.
Joel: So we want to add two blocks. Oops.
So we want to call this hello container,
Joseph: page padding.
Joel: Yeah.
Joseph: And then inside the next one we'll want to do container. And I think, I would probably just do container large. I believe that class already exists
Joel: paying their large
Joseph: boom. And so now you can copy paste that section over and over.
Okay. All right. And the last one we'll do is we can do a flitter, which I don't think a template or a thing exists for that. So what I would just do is grab another div and call it footer.
Joel: And so that we want to be in the let's see, we want to be in where, in the main
Joseph: rapper. Nope. We want to be read outside of the main wrapper.
So I would close all. I'd do that little spring to close all the tabs club. And then open the, just the page rapper to start. Got it. And then right in there, that'll go at the bottom.
Joel: Is there a footer?
Joseph: No. So just type in a div. Yeah. And we'll make a footer later
Joel: and then we're going to call this footer.
Joseph: Yup.
Okay. All right. So this rough section, this whole thing, that's now paid rapper. I was building a 10 page website. I would make this a symbol because what you can do then is paste to this symbol. And then just unlink it, which means you can change stuff, but we don't need to for this example right now cause we'll make symbols out of the other stuff we need.
All right. So now you can go back to the instructional.
Joel: Okay.
Joseph: So if you'll notice there's an, a rating in the bottom, yeah, that shows you how accessible that font is based on the background. So if you change it to near white, that's a Pasadena, but I guess the other work too. Yeah. If you change it to near white, it'll tell you at what point it's going to be hard for someone to view it.
So we always want to be an a or AA or AAA sex.
So that's an important thing just to remember is, but that's really cool that Webelos built that in to help you. See the color stuff. A couple of other things it talks about is making sure everything's named properly like the images and stuff. And that's why they use brands. That's another thing for accessibility of, somebody's hard of seeing if you set a.
A header two 16 pixels. It will stay 16 pixels. If you set it to one REM and they in their backend setting said that, say every regular pixel is two pixels. Your screen, your heading will come up twice as big.
Joel: Yeah.
Joseph: So that's pretty much the rest of the accessibility thing. And then the other two tabs are really just nothing related to all that we're doing. So that is the overview of the suite that I say as this resource does exist. So for you to come back and know checks in the documentation check some of the naming stuff, we can come in and do that.
But really, so now you've learned how you set up the style or sorry that the structure of the website, and we'll, hopefully we dive into understanding classes, combo classes, which really helps with naming stuff. So really at this point we just need to, I think what we'll do is we're going to come up with some design elements that we're gonna want to do, start getting assets, figure out the flaunt figure out what are the sections going to be.
And we'll go and put all that together. Maybe that'll be our next video. And then the following video, we'll start implementing it.
