Template Walkthrough | Client-first Style-System for Webflow

[Music] welcome to a client first template walkthrough i'm going to walk through how we built this web page how we built this template with client first we'll be going into designer deep dive into the class structure deep dive into real working live examples of client first and of course you can clone this this is available in our resource center for clone let's get a look at this nice beautiful clear web design and absolutely free we have a whole resource center we're going to continue growing this with beautiful websites using client first for you to clone learn and use let's get into designer and see how this is built we're inside designer we're going to go through every single element on this page we're going to see how client first is used in this real world example and we're going to get a really good understanding of how to use our component naming our custom class naming and how it all comes together for a very clear and organized site we just looked at the visuals 25 seconds ago in this video you saw the visual of this page and we're not going to look at the visual anymore client first should be so clear to us that we can open up everything in navigator read through it and understand exactly what it is on the page so that's our goal here we're going to review everything we're going to be super clear about how to use this in the real world all right before we open up everything i'm going to start with the outer structure the core structure one of the three recommended global class systems of client first and that starts with our page wrapper this is really good for copying pasting to other parts of your site it's also really good for applying an overflow hidden to prevent horizontal scroll if you're not using css sticky you can apply this overflow hidden and there will be no horizontal scroll on your page really really useful as i open up we'll see the nav and the footer outside of our main wrapper because remember the main wrapper is all about wrapping the primary page content what this page is about the hero header the testimonial section the reviews section and of course the reason for this main wrapper is tag main remember this tag main this is the accessibility add-on this is the reason why we have this main wrapper let's zoom back in let's keep going deeper we have the sections section dash section name so we have our section home header section home stats section feature section home service section process notice how we're using the home keyword prefix when we are doing something specifically for the home this is a section just for this home page this is a section just for this home page a section just for this home page and notice how these don't have the name home in it it's just section features it's also a symbol which is telling me this is probably going to be used throughout the build so notice how that one keyword of home is telling me this is for the home page or this has potential to be used elsewhere in the build really really helpful already we haven't even gotten into this inner page structure and already i have a lot of context about what's reusable on this page and what's custom to the home page let's continue going deeper in here we can see our page padding and let me get back to the styles panel here with the zoom out and we have our page padding look how global this is 11 on this page 40 on other pages and we have our universal padding if i were to change this it would change globally for the build so every single time that we want this left right overall padding for the page we're going to use our page padding we decouple page padding from other classes like section classes like container classes so that we have the ability to not add this to a section maybe we want a full size section maybe we want a full-size image in the background and we want to further nest that page padding deeper inside our structure that's why we decouple it that is why it is all on its own let's keep going deeper we have our container with large this is going to center this content on the page with a margin left auto and a margin right auto and it's going to apply a max width this is 80 rem if you don't know what ram is go ahead into the docs go to the sizes page and we have a video explaining why we're using rem and a nice conversion chart showing you exactly what this is if you're new to rem give it a build or two and you'll be a pro do not worry let's keep going deeper inside our container now is where we get into our components so we've just finished the review of the core structure page wrapper main wrapper our section our page padding our container width and now inside that's when we're going to get into more custom classes that's when we may get into more symbols that's where we're going to see more of the visual side of the page and we start that off with the home header component look at how we're naming this component home header is the component name underscore in client first is indicating that this is a component and that home header is the component name and we're always going to put that outer parent wrapper with the component with the component keyword so we know when we see this component keyword this is the outermost parent and if i were to copy paste this i can copy paste the entire component to another page or another section awesome now this happens to have styles on it this has a grid layout it doesn't necessarily need to have classes just because we're putting a class on something doesn't mean it needs to have styles this one has styles i'm sure that we're going to get to a component that does not have styles applied to it that's okay we'll get to that when we get to it home header top row home header bottom row so if i'm on the home header i can probably tell that there's a top section and a bottom section that's exactly what this is saying the top row the bottom row and if we go deeper in we continue to see this really clear prefix of home header this class is created for the home header for the top row of the home header this is created for the content wrapper of the home header and i can continue opening this up let me just open up the entire section here so now we can actually go through the individual elements in here so we have our top row we have our content wrapper we have our square box and this square box is specific to this home header you'll see as we go through this build we actually have a global a new global that's added just for this build that handles some of the square design in this page this one is specific to the home header so it gets the class for the home header awesome we have our heading right on the tag we don't need any classes on this it's our default home h1 look at this margin top with the margin medium nested with our global text typography class this is part of one of the recommended three global class systems our typography classes and we have our text style muted cool and look how frequent this is used 21 on this page 49 on other pages so this is a super super global class if we if the client says hey this is actually a little too low in opacity no problem we can actually just go and increase this for many times throughout the build awesome so this is a perfect execution of using this global typography class system then we have our margin top nested right inside is our primary button now this is another benefit of separating these spacing classes from the actual elements instead of applying these margins direct on the element we have this beautiful symbol that is nested right inside of our spacing so if we wanted to go and change this we could say great let's go ahead and change it bam we have now changed the spacing from margin large to margin medium with no effect on this symbol let's keep going our home header image wrapper we have our home header image this is super super clear as to what this is if you were to look at the home header and you look and you see an image that's what it is it's right there there's no other explanation needed if there were two images maybe we'd need to be more specific image left image right image large image small or image team image product whatever we can be as specific or as not specific as needed but if i look in the home header i'm going to see the image and i know exactly what this class is created for cool now this is a great great great example of creating a new global class system inside the build let's look at this this is not part of the home header component there is no home header prefix here there is no underscore this is a custom class and this custom class is actually going to be used as more of a global class system throughout all the pages let's look at the stripe vertical wrapper box stripe vertical so we have some add-on classes this one is specific one on this page but look how we have more on other pages is left out and we have five on this page five on other pages so we have stripe vertical wrapper now let's look at what this is doing for us stripe is a keyword that we are using for these graphic visual elements on the build box stripe horizontal box stripe vertical stripe horizontal wrapper stripe vertical wrapper i've now just returned really valuable classes when i'm deciding if i want to add more of these graphic elements inside the build so maybe i'm brand new to the build maybe i'm picking up somebody else's work on the team and i see this box stripe this stripe vertical these kind of keywords i can go and search for those keywords inside the class panel and i will return a lot of very useful information for me to go and continue building in this site so let me undo this we're going to continue looking at examples of this let's look at the box stripe vertical look at this 15 on this page 15 on other pages so this is clearly not for the home page it's clearly not for the header it's not specific to any of those it's a new type of class it's not a component it's custom we're going to fit it into a global system and look what i have when i search box box box corner box group corner box square small box stripe horizontal box stripe vertical really useful return of class search so as i continue going through this build as i continue trying to reuse these important visual classes i have a really nice list of returned classes from this really good use of keywords so let's go and put this back in there we're definitely going to see more of these throughout the page so i'm going to continue moving forward here where were we box stripe vertical bam cool all right good good good now we're on the bottom row that's it for the top row we have again back to this home header we can mix and match these other global classes inside just because it's a custom class inside the home header component doesn't mean it needs to have the home header component tag the home header component keyword but now we're back into the home header this class is created for the home header we have one on this page it's not going to be on other pages and that's what this is about so that's why we've named it as so we are continuing to name things and this is a great example of something that doesn't have a class doesn't have a style excuse me there is no style on this but we have named it with the component name with a very clear description of what it is and here's why we did need an inner class here we absolutely needed this and because of that we do not want to leave div block we never want to have a blank div block inside our build why because when we hand this off to a client or when a newbie comes in to go and edit they're going to go and make a change and then we see that this is the death of your webflow build this is the double death of your webflow build and we don't want that so if you need to put an element on the page don't leave it blank instead name it as something and then you can go and continue building make sure you give it a name so that when somebody goes in to make that change we don't have a new class it makes sense you can continue working with a lot of clarity great and as we open this up we don't need any custom classes in here we have our text size small and our text size medium working wonderfully into our global typography system let's go into the home header here home header client logo row it's telling me exactly what this is and this is the client logo great now that's the entire home header component we just went through everything every single thing in here is named so i understand what is going on if you hand this off to somebody that's never seen the website they can have a pretty good idea of what this home header looks like and maybe even they can draw out this home header of how descriptive it is we know there's a logo row we know there's a logo we know there's a top part we know there's a bottom part we know there's an image we know there is a a piece of content we know there's a heading we know there's muted text we know there's a primary button i bet you you could draw this out without seeing the design and that's what client first is about class names that are so clear that you actually can visualize the design by just reading the class names let's continue and we'll see how this continues to work throughout this page we're in the home stats section and home stats again is another component on this page it's for the home page it's for the stats section of the home page so we have our section home stats go further in we have our outer structure outer structure outer structure and we have our text style subheader perfect so this is a great example of a class that this developer has created and it's not even part of our default client first clonable this was created specifically for this build they created this sub header because in the design there is a sub header and they want to continue reusing that style throughout the build so this was created really good job love it let's continue into the home stats title row inside we have a heading large awesome this is a change of the normal h3 size so we have a default size on our h3 that's going to be 2.25 awesome and this one happens to be a bit different this one's larger than normal h3s in the design so we give it a heading large class on top of that tag homestats component with an alt title wrapper that's going to be wrapping an h4 again with a size variation and we have our margin top nice global spacing use with our text style muted awesome then we have our home stats image row it's telling us exactly what this is it's the row of images we have a wrapper around images and you'll see inside our builds we like to put a by default a div wrapper around all images there's a few reasons to do this number one in case you want to change the element type you can do that very quickly maybe i want to make it a link very quickly i can go ahead and do that also if i want to apply some type of visual outside of the image we like to do that on a separate div so you'll see throughout a lot of client first that we have an image wrapper div around pretty much every img tag awesome so we have this image wrapper this one actually does have some styles applied to it and we have a stats image awesome look how clearly name this is clearly name clearly named we have our stripe our box stripe our vertical it's all right here being used again in this section we saw the same thing in the home header just above cool cool now we're on the bottom row so again very clearly we have a top row we have a bottom row if you're looking at this visual you know this is the top this is the bottom the class is telling us this home stats bottom row and in this instance the developer did want to put margin top directly on this custom class this is allowed you can do this remember client first is not about strict rules it's about guidelines and strategies so there is a reason why there is a margin top on here maybe because they're using a parent wrapper that has flex or a parent wrapper that has grid or for whatever reason we do not want to wrap this entire bottom row in a spacing wrapper that's okay i can go ahead and apply this i don't want to do this for every element i want to really take advantage of my my spacing classes but if i need to apply it direct to a custom class i can go ahead and do that no problem home stats number row again really clear look at this we have a symbol it does not have the home keyword but it has the stats keyword so before i even jump into this i'm thinking well this has to do with stats but it's not necessarily specific to the home page and we have a symbol which is telling me even more that it's not specific to this section or this page so if i open this up i'll see we have our stats underscore number wrapper so this is our stats component not our home stats component but it's related it's using that same keyword i have some relation to the home stats and the stats and this is being used on other pages so look at how we are using naming we're using component naming to relate this to this home stats but clearly show that it's being used elsewhere in the build and to encourage a new developer or a client that has some webflow skill to go and reuse this stats component somewhere else not on the home page awesome so there we go this is a great great execution of symbols of new components of more global components of symbol awesome love it love it love it we have our text size extra large with an add-on class of text weight semi-bold again great use of this typography global right here and we see again our horizontal i think before we were looking at vertical so there we go we are using the same structure our box prefix we have our stripe keyword and now we're going horizontal instead of vertical awesome so we have this same thing with our stats wrappers and then we have our text button and this one is specifically for a piece of text that is a link awesome let's get into our section features and this one is a symbol let's continue going deeper in here deeper deeper deeper nice we have our features component so this one it's telling me as a developer jumping into this build this is not specific to the home page i don't see any home page keyword i do see a features keyword and since it's just features there's no more context into what type of features or where the features are that this is features that can be put anywhere that if i want to drop the features component on a page i can go ahead and do that features is a very global term and a global name and that's what that's telling me based on this naming so and actually there we go one on this page two on other pages that's exactly what this is for we can see our grid layout applied direct to this remember client first does not have global flex system does not have a global grid system does not have a global column system we recommend applying this direct to the custom classes why if you want to make edits to this whether it's on desktop or mobile later on in your build somebody else comes in that doesn't understand your system that's a mess i want to be able to go in here and say i'm editing the features component for every single page right now no roadblocks no learning a system to make this very important change and i can very freely edit on desktop tablet and mobile awesome so we have our component remember this component name is the outermost parent of this component you can see it's nice cutting this content real well and i can continue going into this features component with the title wrapper with the nice again this use of the sub header the heading margin top with class so look at this beautiful use of our global typography and global spacing so we don't have to make a custom class for every single element features list features square box okay so we saw some box keywords that's a a keyword that we're using throughout the build but this one in particular has to do with our features component it's not part of this global system that we have up here for box or stripe we have our features square box cool that's okay it's telling me that this is specific to the features if i edit this i'm only going to be editing the square box inside the features component not every square box on the site cool let's keep it going features item features icon wrapper features icon totally clear that is very clear it's an item there's an icon wrapper inside and there's an icon and then there's text probably right under that icon or to the right or left of that icon and we'll continue going in going in great use of the global typography and continuation of this features component and all of these look to be the same awesome with again our stripe horizontal wrapper great great great see look how look how global this is there we go and because it's so global we are not creating a component around it although we could create a component around it if we wanted to organize ourselves like this that's the beauty of client first that it's all about organizations all about being able to search for things it's all about being able to understand what something is doing and that's exactly what this is doing for me and look at this look at how we use our combo classes here is second box is third box great all right let's continue going where'd i go here there we go home service we're now in a different section here we have our page padding our content with large padding vertical that's our content are what the heck is that that's our structure our core structure and now let's get into the actual component here we have our home service component inside using the max with small global class system this is different from the container with large we like to use our classes of container with size specifically in our core structure to max with the entire set of content this max width is more about containing a single element or a few little elements to stay within even more of a max width inside of the container max large and this is being used wonderfully look at this we have a max width small giving it a smaller max width of 48 rem and i can continue going in here to see our home service cta wrapper and a nice sub header a margin with a little bit of space a nice heading and a call to action so i can read through this and i know what's going on here this is a call to action section with a piece of text another piece of text and a button great let's get into this home service list home service item home service icon wrapper look how clear and organized this naming is great use of our icon global class system this is one of the useful or other global classes this is going to help you really quickly size icons and keep those sizes universal throughout the build awesome we have our home service text wrapper good good good great use of components great use of components and i think these are all the same here yeah item item item awesome so all of these are identical we just went over that great let's go into the process here we'll get deeper into the core structure deep deep deep and there we go we got the process component i can go copy paste this to another page it is even a oh yeah this is part of a symbol so you can apply symbols direct to the component you can apply symbols to the section of a page so this is on a section this is saying i want a component with all of the page padding with the content max with and so on so i can go and take this entire section and put it on on another page i can also or i can do this instead i can put a component on i can put a symbol on the actual component so we have process component i can symbol this and then i can optionally change the type of padding that's on the outside or change the container with us on the outside or decide to add page padding or not so you can put symbols anywhere here we don't have any rules about symbols but you have a lot of flexibility by putting the symbol either on the component or the section so great use on the section here i can reuse this anywhere in the build and because we do not have that home page keyword it's telling me this is not specific to the home page this is the process and the process can be put anywhere in the build so we have our process component we have a title row and inside the title row we have max with small again great use of that max with global system that is inside our container with large cool we have the sub header we have a margin with a heading large with a paragraph nice box group corner again with our boxes this is great so let me go and just refresh our memory here we have all of these really nice box classes that we can search for so the group corner this is telling me that this is a group of boxes that's what i would guess here let's go and remove that let's open this back up and let's look deeper into this box group class the box classes here look at this we have a box corner we have a nested box corner with more box corner classes with combos let's look at these you can see box group corner is top right this is telling me what this is it's telling me exactly where it is it's telling me what it's doing it's grouping boxes in the corner and it's on the top right let's see if we have other combos available to us great so anytime i want a box group corner i can say is it small is it on the top left is it on the top right so this one was on the top right then we have our box corner clasp which gives us a nice box percentage base really cool so that the group corner can actually change the size of whatever these box corners are the box group corner can change the size of the box corners and in here box corner with an add-on combo of inner box awesome so look at this use of the box class is bottom box is right box this is a whole global mini system for this box visual design so this is a really really good example of taking client first and then adding more to it based on your build this developer is taking the concepts of client first the keyword concepts the search concepts the combo class concepts and transforming it into a mini global system that works for this site awesome let's keep going and we have our process list with a whole bunch of items and in between each is a process connector so these are being created specifically for the process component and look at this we're using our hide mobile landscape right here we're able to optionally hide or not hide these with this add-on class this is part of the re of the global of the useful global classes for responsive visibility let's open up this process item check this out all of these are being created these classes exist for the process component great great job very clear it's telling me exactly what this is doing awesome let's get into here continue going and where am i section home review this is telling me that this is the review section of the home page super important we have that home keyword telling us it's for the home page and you guessed it all of these are named with this component home review title wrapper content left we have the image wrapper the image list anytime we are creating these classes for the use of our home review we now can organize them inside this component name and let's look how powerful this is inside client first if i go home review i can return all of the classes that have to do with home review so every single one of these classes is created in this build for the right of home review so if i need to clear my classes or clean up my classes or reuse my classes i can go and do a class search for every class that's created for home review or maybe i want a home header and i can search all through my home header classes or i want to search through my process classes this is the power of keywords this is the power of searching for your components and this is why we do it incline first so you can actually search for a complete list of all the classes that have to do with a certain component or a certain concept a certain keyword and that is why we do it really really powerful and a really good way to stay organized remember there are no official rules with component naming when to have a component when to have a global system it's all about your organization based on your website and making sure the next person that goes into your build has a really good understanding of how it works let's get back into this navigator panel again and continue through this page as we continue through this build we have our blog section now we have our home blog this is very clearly telling us that this is the home page and the blog great example of not needing to have the section name the exact same thing as the component name inside of it this is telling us home blog but this is not saying home blog that's okay this is giving us context into what this section is and this is actually not specific to the home page because i don't see this home keyword this is something that's either being used on other pages already or has the potential to be used on other pages throughout the build and you can see here one on this page one on other pages this is not part of the home page so we do not have that class of home blog or blog home component this one is being called the blog author list component and this is telling me that this is a blog component that specifically does not have the author in it maybe this is a client request that just in this specific list we're not going to show the authors and that's why we're calling it the blog author list and we see this on another page this is totally totally part of client first and okay to name it's all about organization so if blog author list is the best way to describe what this blog component is this is a very appropriate name here so we have the list wrapper the list this is how we want to name our dynamic lists list wrapper list item perfect very clear we have our item link we have our image wrapper our image our content wrapper we are using our global spacing and our global typography really really clear really nice component i can go and copy paste this blog authorless component anywhere throughout the build and it's going to work just fine awesome let's open up this newsletter and inside the newsletter we have our core structure awesome and then we have our newsletter component great again a very general name not specific to the home page and this tells me i can go use this newsletter elsewhere throughout the build and maybe it already exists one on this page two on other pages perfect we have our box globals right here awesome we're using our max with awesome great love it love it newsletter component this class is being created for the goodness of the newsletter and we have our form wrapper our form success message error message okay i'm really glad we come through this example let me show you what this means so you may notice this is not part of the component system and actually i'm going to change this this one should be this is not so let's see what this means this is newsletter form wrapper this is a class that's created for the newsletter component and this is a class that's created for the newsletter component this does not have newsletter in it it does not have a component name in it it's just form dash input so what does that mean what is that telling me that's telling me this is more global than the newsletter component this class is not created for the newsletter component it's created for a form it's not even a component form it's just the form so that's telling me that this is being reused on all different types of forms and look at this five on this page 19 on other pages it is telling me it's global by not having that component and by just having the form keyword if this said home form input then it would tell me that it's part of the home page this form input is specific to the home page but it's just form input which is a really really general term which is telling me it's a really really general class excellent same thing here form message success form state content form success icon wrapper and this is global created classes for the form elements inside our form inside our newsletter component really powerful here this is a great way to do it this is how we can stay organized incline first and tell the person that's editing the site be careful before you're editing this this is not specific to the newsletter this is something more general here really good then we have a pop-up this where did the pop-up go okay this collapsed we have a contact pop-up component awesome so this is a component on this page for contact pop-up again not specific to the home page i know this can be used on other pages so we have the modal we have the close the close button the close icon the title wrapper awesome awesome love it love it using again a component but a different component this is the contact pop-up component and nested inside is our contact form wrapper now this can be used elsewhere it's telling me that this is a component that maybe it's inside the contact pop-up maybe it's inside the newsletter maybe it's inside some other part of the page it's a super general term it's being used on other pages this is very clear to me that it's not specific to a page or a section it's the contact awesome great use of the form again with this form dash we're not putting this in a component it's telling me that it's a super a super general class here and super general class super general class it's not inside of this contact component it's not created for the goodness and for the use of the contact component it's created for the general use of all things forms awesome love it love it love it and all of this is really general for our form great okay so this is hold on don't forget the footer here we have our footer component we have our page wrapping inside we have our container with large top wrapper we got these boxes awesome all of the correct principles are being followed here great so we have the bottom wrapper the top wrapper all of these classes are being created specifically for the footer and that is why they are named like this great so we just did a full review of this page this was a really nice example of using client first in the real world in a real example on a site that could be built for a client on a site that could be built as a template you can go ahead and clone this change the component names as needed maybe you want this home header to be the about header go ahead and change that all those component class names from home header to about header and go ahead and maybe the process is specific to the features page so you can do features process component you can go ahead and change these names that's the beauty of client first and the beauty of using these unified keyword component names if you have more questions keep watching these videos there's a lot of documentation here read through the mindset read through the classes go check out those videos in the classes page check out the videos in the mindset and as you continue using client first it's going to get more easy and more easy as we continue building more resources they will all be inclined first so if you learn this system you are going to be a pro at everything that finn suite releases we'll be here we're listening if you have changes if you think something is great or think something needs to be improved let us know this is a constant ongoing project for us

Channel: Finsweet

Views: 2,634

Keywords: webflow

Id: 4jGxQlEEGqo

Length: 44min 29sec (2669 seconds)

Published: Tue Aug 17 2021