.png)
V2 updates
Everything is explained more clearly in V2
We introduce the [Topic] strategy approach.
The most significant update to Client-First V2 is how we explain Client-First concepts. V1 lacked organization of content and clear explanation for some topics.
V2 introduces a new content organization method to help us better understand Client-First. Each topic has a more precise explanation.
The more essential topics are organized as "strategies" —
Folders
Folders will redefine how we visualize classes inside our Webflow project.
Client-First folders will allow us to organize classes in a flexible folder structure.
Use the underscore character to create a custom folder. Organize utility classes by dashes only.
Folders will only work with Client-First + Finsweet Extension. Learn more in Folders.
Components are better defined
In V2, we will be more specific when we are using components — and more specific when using underscores!
V1 Initial release
underscore in class name = component
V2 release with Folders
underscore in class name = folder
[folder-name]_component = component
Using an underscore in the class name does not necessarily mean the folder is a component. We now use underscores for organization or groupings of elements in Folders.
Components now have a specific classification. If we want an element to be considered a component, we use the word "component" for the element identifier.
Learn more in Folders strategy.
Class types are better defined
Custom class, utility class, global class, combo class are better defined and explained in Classes strategy 1.
By better understanding class types, we can make better decisions while building.
page-padding is now padding-global
Our project's most important padding value is now called padding-global. This name change results in better organization of our folder system.
Instead of putting our padding class in the page- folder, we put it in the padding- folder.
Learn more in Core Structure strategy.
section-[identifier] is now section_[identifier]
Section classes now use the underscore character instead of the dash.
Our new Folder update assures that Utility classes are the only classes that use dashes. Custom classes use underscore. Section classes are classified as "custom classes", which means they need an underscore in the class name.
The underscore places the "section classes" inside one custom class folder — section_.
All section classes will be in the section folder. Learn more in Core Structure strategy.
New padding-section-[size] establishes global section padding
We have added a new utility class system to manage global spacing across sections. This spacing system update aims to limit the number of spacing options we have for sections + keep them unified across the entire project.
Learn more in Core Structure strategy.
New padding-section-[size] classes (3 classes) — copy to clipboard.
New heading-style-[h#] maintains unified Heading styles
When the styles of a Heading tag need to display as a different Heading tag, we can use our heading-style-[h#] class.
For example, if we need an H2 for SEO purposes, but the text should follow the styles of H3, we can apply heading-style-h3 to the H2 to change its style while maintaining the proper semantic HTML tag.
Learn more in Typography strategy.
New heading-style-[h#] classes (6 classes) — copy to clipboard.
New display-inlineflex utility classes
Apply CSS property display: inline-flex, which is not a supported CSS property in Webflow.
Use case: Using the CSS property display: flex is usually important in our project. However, display: flex causes elements to take up 100% of the space by default. This makes it difficult to use flexbox for buttons. display: inline-flex allows elements to behave as inline, while maintaining flex capabilities inside them.
Learn more in Utility class systems.
New display-inlineflex classes (1 class) — copy to clipboard.
Removed show- utility classes
Removed show- utility classes. Show classes applied display: block at different responsive levels.
We found that show- classes were very limiting, only worked for a small amount of use cases, and may lead to unwanted responsive issues.
Instead of applying "show" classes to elements, we can apply display properties directly to the custom class.
Additionally, we can apply any display properties to a combo class. For example, modal_component is-visible-tablet.
New strategies for spacing
V2 expands on how we can use utility classes and custom classes to space elements throughout the project. We have added new methods for implementing spacing.
Spacing with utility class system
- Spacing wrappers (V1)
- Spacing blocks (new in V2)
Spacing with custom classes
- On the element (V1)
- CSS Grid on the parent (new in V2)
Improved custom CSS in Global Styles embed
There is a full overview of each CSS snippet included on the Global Styles embed page.
Totally new pages in V2
V2 adds new content pages for topics not covered in V1
- Intro outlines the most important topics of Client-First.
- Learning path gives us a 7-day path to learning Client-First.
- Big docs helps motivate us to learn Client-First in full.
- Folders and Folders strategy gives us a full explanation into our new class visualization method.
- Semantic HTML tags gives us a better understand of how to properly build in HTML.
- CSS Specificity gives us an explanation into why margin and padding classes don't work when you copy and paste elements and components.
- Global embed helps us understand the purpose of the custom CSS added to the Client-First cloneable.
- Sales strategy gives us methods to use Client-First in our sales process to win more projects.
- Convert past projects gives us information about converting past projects to Client-First.
From Client-first to Client-First
Finsweet recently released a new logo. This logo replaces the lowercase "f" to an uppercase "F".
We will follow the same trend for Client-First.
Client-first V1 features a lowercase "f". In V2, we formalize the capital F across the brand. This update changes Client-first to Client-First.
Interested in Finsweet's move from f to F? Watch our live stream here.