Build Webflow sites you’re proud to ship

Client-First is a set of guidelines and strategies to develop organized and maintainable Webflow projects. Built and managed by Finsweet.

Get the Cloneable

Read the Docs

The most used Webflow build convention

Used by people and teams to unify project development

CHALLENGES

Challenges in Webflow

be_predictable

How do I deliver a project my clients love?

BENEFITS

Like thousands of developers, you will love using Client-First

Client-First help us build more efficiently as Webflow developers

Amazing
benefits

fs_styleguide

Easy to update Style Guide

Create a project organization system to work faster with less effort.

All classes you need are ready to use

Easy to style and share with your client

Standardize processes across pages

fs_class-name

Know how to name your classes

Create clear and specific names for classes.

Intuitive naming convention

Component approach

Easy to find classes

fs_folders

Folders view of the structures

Folders help us group, search for, and access elements in our project.

Organize your project

Easy to find classes through the project

Multi-level folder

fs_spacing

Flexible spacing system

Make intelligent spacing decisions inside Client-First.

Spacing block strategy

Spacing wrapper strategy

CSS Grid strategy

fs_team

Unify a build strategy as a team

Creating a project that allows for scalability

Standardize structure shared across all pages

Scalable and easily manageable

Anyone understand the project

fs_variables

New color system using variables

Explore the power of color variables in Webflow for consistency, global changes, and enhanced project organization

Consistency across the project

Ease of maintenance

Improved readability and organization

Context for usage

EDUCATION

Deep Documentation

The most important topics of Client-First.

Read the
docs

DOCS

Quick Guide

Intro to Client-First with an overview of the essential principles.

DOCS

Intro

Strategy for how we identify, use, and manage classes inside Webflow as a platform.

DOCS

Utility Classes

Explanation of rem units and approved rem values in Client-First.

DOCS

Typography strategy

Build and maintain a unified typography style system across the project.

DOCS

Access full Documentation

Make intelligent spacing decisions inside Client-First.

Become Client-First certified expert.

Apply for the official Client-First certification. Get reviewed by Finsweet and become a certified professional.

Apply now

EDUCATION

Learn with Live Builds and our Clonables

Find live builds and Clonables of Client-First.

Check real
projects

Finsweet

Video

Global styles productivity

Learn about Global Classes in Client-first. This is an important topic to improve the productivity in Webflow. Global Classes are used in multiple instances in the build, so we don't need to create a new class every time when we need to style elements. Instead, we use Global Classes with specific functionality.

Finsweet

Video

How to update Client-First V1 to V2

Want to learn how to convert a @Webflow project from Client-First V1 to V2? Watch this tutorial video as Joe Krug updates a V1 template project!

Finsweet

Video

Client-First folder structure of large Webflow project

Learn how Finsweet organizes a large project with Client-First. Join Joe Krug and walk through the Client-First V2 documentation project.

Finsweet

Cloneable

Template 11

Clean and fully customizable template built using the Client-First system for Webflow.

Community

Cloneable

Better Form

Better Form is a SaaS template.

Finsweet

Cloneable

Wireframe 2

Light and clean wireframe UI kit that's based on GitHub’s Primer design system, built using the Client-first system for Webflow. It consists of 45 components.

Client-First Library Figma to Webflow Kit