Structure | Productivity Series for Client-First Webflow Style System

[@paulirwin2678]

A helpful quick and simple overview - thanks!

[@roerover]

Thanks for this - very useful. I'd love to see a simple overview like this for how to use and organise style folder structure. CF has really helped to bring some focus and structure to my WF builds. Still learning but it is an amazing system.

[@jkl.guitar]

this really explained a lot of my confusion about client-first thank you! I guess now you can only hope somebody will hand you a webflow project with it to avoid going crazy... wish the webflow team woulda mentioned it earlier on lol

[@mindfulmagician7550]

I just watched a portion of one of your videos comparing Wizardry with Client-first. I was really intrigued. I completed my first Webflow project last year but had such a hard time with naming so many different classes and managing combo classes. I also had issues with responsiveness in the design and saved the Wizardry tutorial for a future project. My projects are designer-first types projects and I learned Webflow in order to bring them to life. I've always felt that because of my lack of experience in HTML and CSS, I'm at a disadvantage. I'm glad that I've stumbled on these videos and look forward to learning more and incorporating this system.

[@georgy.design]

Glad I’ve stumbled upon this video today (it was in my “Learning” playlist for awhile). I’m partially using Client-First in my projects - and I always tried to create understandable classes since the first time I’ve used Webflow. However, today I understood why CF uses “padding-vertical” and “container-large” as separate divs, not combo/stacking classes - thanks for the explanation! That being said, I think I’m not wrong if I say that CF is not for literally every project, but you can still use it in all of them - just keep in mind that sometimes you need to breakdown the structure and create new classes specifically for certain unconventional sections.

[@des7638]

Helpful. Thank you!

[@EdgarAntonioHez]

Great introduction to CF!

[@Finsweet]

Thank you Edgar!

[@derartas]

Great video!

[@Finsweet]

Thanks Der

[@geeksy2278]

I love this way too much! This is so helpful!

[@DANNFIGDESIGNS]

This is the video I’ve been waiting for. 🙏🏼

[@konohadesign1471]

so basically the "padding vertical" is creating the hight of the section? Because if i leave everything on height: auto, somehow its not getting bigger, regardless the content i put inside of it... am i doing something wrong?

[@hyweltthomas]

I Love the system, especially where it encourages reusable elements like padding, but feel it's slightly over the top when it comes to text. Why have text-style-italic or text-style-white when you just add a sub class called italic or white? Surely that's even simpler?

[@andreaso.1549]

Where does this leave us in terms of sementic html? Seems like we will have a lot of nested divs..

[@valdiszhvaginsh]

Thanks!

[@Finsweet]

🙌🏽

[@chakhmanmohamed9436]

I still can't figure out how CF work.

[@Finsweet]

Check out the full documentation and spend some time watching all the videos. Once you get the basic structure, it will all start making more sense. www.finsweet.com/client-first/docs/intro Another thing to mention is that if you do not have a full understanding of global classes, and how Webflow works, then Client-first may be a lot to take in. Hard to offer more help than that without more specific feedback. Let us know if you have any questions.

[@joaolucaswork]

Good advice: get out of theory and get your hands dirty! You'll see it's simpler than you think ( A good start is to clone projects that use finswet's client first in webflow, and understand how it was structured)