GETTING STARTED

V1 to V2 guide

Essential updates in Client-First V2.

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 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 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.

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.

padding-section-small
padding-section-medium
padding-section-large

Heading

Heading

Heading

Heading

Heading

Heading

display-inlineflex