.webp)
You may have noticed that a few weeks ago, Finsweet (the most well-known Webflow agency in the world) released a new version of Client-First.
For those interested, we highly recommend reading our article about the Client-First method.
The development method optimized for Webflow has evolved with this V2, introducing new concepts and features. One of the biggest updates in this version concerns the Folders system. This is what we will briefly present in this article.
How to benefit from the Client-First Folders system
First and foremost, it is essential to know that in order to take advantage of the Folders feature in Webflow, you must develop your project according to the Client-First V2 principles.
Additionally, before starting your Webflow project, we strongly recommend cloning the Client-First project from "Made In Webflow" to ensure a solid foundation.
Finally, you will need to download and install the Finsweet extension for Webflow on your browser. This extension allows you to optimize your productivity during Webflow development, and grants access to our class folders. To access them, you need to click on the extension in your project's Designer, then on "Client-First" and finally on "Folders".
What is a Folder?
Folders help organize all the classes in your project. When using the Client-First development method, we must adhere to a specific naming convention for our classes.
This naming convention will allow us to create custom folders within our project.
It is important to note that there are two types of folders:
- Folders for custom classes
- Folders for utility classes
1. Folders for Custom Classes
First, a custom class is a class we create specifically for our project. It is designed to give a specific style to an element or a group of elements.
In Client-First V2, we distinguish custom classes from utility classes because they use an underscore (_) in their name. Whenever we use an underscore in one of our classes, a folder is automatically generated in our project.
For example, in my section home-header, if I add an image and name it home-header_image, a new folder home-header will be created. I will also see all classes that start with home-header_.
It’s also worth noting that we can nest our folders. For instance, I could have a class home-header_content-left_image. Thus, we'd have a first folder home-header, followed by a second nested folder content-left and finally our class inside. While this practice is not always recommended, we can nest folders infinitely.
2. Folders for Utility Classes
The utility classes are classes that are used throughout the project and in almost all projects. Utility classes are specific combinations of CSS properties. They can be applied to style elements in our project. For example, we can use the class text-color-blue to give our text a blue color.
Unlike custom classes, utility classes do not use underscores but dashes (-).
Utility classes operate based on keywords. A folder will be created (and potentially nested) for each keyword. For example, in text-color-blue, we have three keywords (text, color, and blue). Thus, we will have a folder text, followed by a nested folder color, and finally our class blue.
This results in a clear organization of utility folders, where I can find my class text-size-large within the folder text and then in size.
By default, there is already a utility classes folder (Utility Classes) where we find the utility classes from the Style Guide.
The Benefits of Client-First V2 Folders
That all sounds great, but what are folders really good for?
There are several advantages to using folders in Webflow:
- Having an overview of all classes used in our project
- Renaming a folder allows you to change the root of all classes within that folder
- Optimizing your site by removing unnecessary classes and organizing our naming structure
- Quickly copy-pasting class names
- See which pages are affected by our classes
For the beginning of V2, this is everything that folders allow us to do. However, we are confident that in the near future, folders will enable us to optimize our Webflow projects even further through new features!
That's it for this quick overview of Client-First V2 folders! If you want to learn more, stay tuned, as surprises await you 😉
