Class Tips | Productivity Series for Client-First Webflow Style System

In this video, we learn how to speed up class selection, and deal with long class naming. We will learn some general tips as well as specifically address the Spacing System, classes of the Client-first Style System, the Typography Classes, and Global Classes.
TIMESTAMPS:
00:00 - Intro
00:29 - Live Example
12:53 - Thank You
CLIENT-FIRST STYLE SYSTEM: This is ‪@Finsweet‬’s CSS naming convention in ‪@Webflow‬ for any person and any project. Client-first is a set of guidelines and strategies to help you build Webflow websites in a clear, organized, and scalable way that any human can understand.
See all videos from the playlist: • Productivity Series fo...
-----------------------------------------------
// RESOURCES FROM THE VIDEO
Client-first style system: www.finsweet.com/client-first
Client-first official starter project: www.finsweet.com/client-first...
Client-first templates & wireframes: www.finsweet.com/client-first...
Subscribe to Finsweet: kzbin.info?su...
-----------------------------------------------
// 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/fin-pro
🛍 Shop our merch store - finsweet.com/merch
💪 Superpowers for your Webflow website - finsweet.com/attributes
🧰 Your toolkit for Webflow - finsweet.com/extension
-----------------------------------------------
// SOCIAL
Facebook: / thatsfinsweet
Twitter: / thatsfinsweet
Instagram: / thatsfinsweet
Dribbble: dribbble.com/thatsfinsweet
Behance: www.behance.net/thatsfinsweet/
Webflow: webflow.com/team/Finsweet/
-----------------------------------------------
// TAGS
#Webflow #Design #System
-----------------------------------------------
Thanks for your support! 🤟

[@mariamsmadness]

The kind of video I was looking for as a webflow beginner. Superb

[@pixelida]

⚡️ These are super power tips to apply classes at light speed! Client first nerd speak: marbo, padle, marla, padme, mute, maxl, contme and wism. 😂 Thanks Simon 👍

[@Pavel555]

However, all these spacing classes will harden the maintenance of a website. If a client or a developer would overuse them to add/change some spacing for elements, then the code (and we write code in Webflow in the end) will quickly become messy :( It's better to use BEM methodology. Because just using blocks, elements, and modifiers will keep the code safe from antipatterns.

[@amarmuric6083]

Well done, watching all of them :)

[@nicolaspettini3143]

Great tips thanks!

[@valdiszhvaginsh]

Thanks!

[@veosixyans4934]

Awesome tips! I humbly suggest putting more timestamps for each advice - will be great for UX.

[@Grifanos]

Agree with you Simon, why I did not see this tips before🙂 And even that I know about Emmett for VS Code, I completely forgot to use this ppa, mola, etc shorthand😂 Thanks for reminder. One small thing that always confused me, I most of the time working with already prepared design from client that they have in Figma, and using a spacing system is very difficult as this is can be very specific. How is your workflow is look when you work with Figma to Webflow workflow? And I very like your explanation, your English is very good to understand, keep going😉

[@xamznerol]

Great Video, would be awesome, if finsweet could integrate flex in the client first system :)

[@infiltretor287]

Do you manually add flex to your client-first builds?

[@xamznerol]

@@infiltretor287 yes, I'm just curious, what the best way would be

[@vianneypercq]

HI! Have a look at Finsweet Client First doc: Classes / layout "No layout, grid, flex, column classes ‍Important: Most style systems have a layout, grid, or flex class system that allows you to build layouts using stacked global classes. We have not added a a grid system in Client-first because we believe it increases the learning curve of Webfow significantly. When you use a global layout system, the person using your project (a client or another dev) must understand how css works and how your class system to use the css works. This is an unrealistic request of our clients and we find that none of our clients care to learn this. Clients and beginners want to use Webflow visually. Instead of using difficult-to-manage stacked globals to create our layouts, we create custom classes so layouts can be changed by anyone at any time, regardless of their css knowledge. This is how Webflow was made to use. This is how we approach Webflow in Client-first."

[@xamznerol]

@@vianneypercq Thank you very much for your detailed answer. I appreciate your work!