Template Walkthrough | Client-First Style-System for Webflow

In this video, we dive deep into the Client-First template and see how Client-First is used in this real-world example. 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. The template is cloneable and is available in our resource center for the clone. The template is a nice, beautiful, clear web design and it is absolutely free.
TIMESTAMPS:
00:08 - Introduction
00:51 - Designer overview
01:44 - The core structure overview
03:58 - Section-home-header overview
16:26 - Section-home-stats overview
22:20 - Section-features overview
26:27 - Section-home-service overview
28:35 - Section-process overview
33:28 - Section-home-review overview
35:33 - Section-home-blog overview
37:40 - Section-newsletter overview
42:25 - Footer overview
42:51 - Summary
Client-First Style-System for ‪@Webflow‬: One naming convention for every person, for every project.
See all videos from the playlist: • Client-First Live Builds
-----------------------------------------------
// RESOURCES FROM THE VIDEO
Client-first style system: www.finsweet.c...
Client-first resources: www.finsweet.c...
Subscribe to Finsweet: www.youtube.co...
-----------------------------------------------
// ABOUT US
We’re Finsweet - a Webflow enterprise partner, badass product creator, and educational content powerhouse. We are taking Webflow to a new level and sharing everything with you along the way!
🙌 Join our community - finsweet.com/f...
🛍 Shop our merch store - finsweet.com/m...
💪 Superpowers for your Webflow website - finsweet.com/a...
🧰 Your toolkit for Webflow - finsweet.com/e...
-----------------------------------------------
// SOCIAL
Facebook: / thatsfinsweet
Twitter: / thatsfinsweet
Instagram: / thatsfinsweet
Dribbble: dribbble.com/t...
Behance: www.behance.ne...
Webflow: webflow.com/te...
-----------------------------------------------
// TAGS
#Webflow #Design #System
-----------------------------------------------
Thanks for your support! 🤟

[@mohammadabdelrahman786]

Just a small critique, it's better to reference both the design & components at the same time. Show where each component is located on the website layout so that things would be clearer to the person following this as of this date writing this comment, this template is no longer available.

[@Londya]

It would've been nice if you had minimized the navigator section a bit more, so we can follow along with the highlighted sections in the design as you go through it. I think I got the jist though. Thanks

[@otterguyty]

Thanks for a great tutorial

[@shubh2310]

Finsweet, you are God's gift to mankind. Really. This is brilliant ! Thanks a billion. :)

[@Finsweet]

Glad you found it useful. Be sure to pass the resource on to someone else who might need it.

[@Alicebail12789]

Wow thank you so much for such an awesome walkthrough ❤

[@andreaso.1549]

16:33 you say 'section-home-stats' is another component. However, it is not named with component naming convention - why not?

[@AlanBlanquicet]

Hello Andreas, the 'section-home-stats' is the section. The component is 'home-stats_tile-row', what is not clear to me is why it is not nested inside a 'home-stats_component' as is in the case of the 'section-home-header'. My guess is because the design probably required it. It'd be nice if the @Finsweet team could clarify.

[@analytics8237]

Amazing but didn't see any color styles on any of the components?

[@goppidy504]

why are you naming the sections without underscores?

[@shaimoom]

How do you decide between using a "component" keyword suffix in the outermost element vs simply using a "wrapper" keyword suffix?

[@marcos-rodriguez]

The suffix "component" is meant to be a parent div of all the content that is inside a section. While a suffix "wrapper" is meant to be a parent div of a distinct piece of content inside a section...usually for images and text. So you might have a team "component" with a team_image-wrapper wrapped around the team member's image. Then a team_content-wrapper wrapped around their name, a description, and their role. So wrapper keyword is useful to wrap related pieces of content together while component keyword is used for the whole content in the section.

[@olivedrab]

Finally catching up on this now. Loving the direction and this is much needed for Webflow to standardize style naming convention. Speaking of which, when beginning your website build out (let's say you start on home page) and coming up with a class names, how do you know whether or not a component will be used on other pages just yet? Do you start with the "home-header_..." first and then rename it later to a more universal name if the component gets repeated on other pages? What has been your experience with this? Thanks!!

[@olivedrab]

In short, when coming up with component class names when first starting off with your build, how do you know if that component will be on other pages yet? Since that information will dictate whether or not you have to have "home-review", for example.

[@Finsweet]

There are different approaches here honestly. There is really no wrong way, as long as the site is scalable and clear. This could mean renaming the component, or starting in a more general way and working up to the custom elements. All depends on your preference as well as the design structure itself.

[@olivedrab]

@@Finsweet Kinda figured it would be done either one of those ways. Do you personally prefer one way or the other? Or do you end up doing it both ways anyway?

[@crisdimarco]

@@olivedrab the same doubts that I am having at the beginning. but if I have not misunderstood, it is that there is nothing that should be taken 100% literally. For example, if in a section we create a component giving the name of the section, if we have to reuse it, nothing prevents us from renaming it with a more specific name for more reuses. I hope I'm not right.

[@inkiadhaider3929]

14:18 very good meme content

[@DSOrton]

Hi there, I'm loving the Finsweet CMS library for Webflow so far, it's been working great for my site. I asked a question in the slack channel because I wanted to solve a problem I'm having with filtering. But I was told that they are too busy with other tickets and it's a lot of effort to help. Is there a way I can solve this problem 1-1 or anyway at all of getting it solved?

[@Finsweet]

Unfortunately we do not offer 1-1 level support for this stuff at the moment. We offer basic support through slack, but anything custom is hard to account for. Especially as we move the CMS Library functions over to our new attributes system. www.finsweet.com/attributes

[@awwman240]

If i designed website using webflow and i want to sell it to my client who can't use webflow what should i do?.

[@Finsweet]

This is probably a problem you should solve before building the site. There is no way to easily transfer a Webflow site to another platform or export anything other than the core code for external hosting. You could try to retrofit Udesly and transfer the site to WordPress or Shopify, but that brings its own hurdles. Seems like you are between a rock and a hard place.

[@emmafierling9400]

Sell them a website maintenance package instead? :P

[@antonmostert7469]

I think he means they don't know how to build in Webflow. Which is fine. They will only edit the content. You can charge them an hourly rate to make any cosmetic / functional changes to the site after its built if they request that.