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.

Support our Open Source products

Support us

Support Finsweet's free products if they have been helpful to you in any way.
Your support will help us make our free products even better.
Feel free to subscribe for a month and cancel afterward if you'd like to help just once.

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

I Rebuilt Webflow's Website

Join us for a live build in Webflow with Joe Krug. On today's episode, Joe will build the hero section of Webflow's homepage. Be sure to tune in and ask questions in real time!

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

Video

Live Build 3

The Outline homepage created with Client-first in Webflow.

Community

Cloneable

Apple Notes Rebuild

Clone this feature-packed rebuild of Apple Notes lovingly made in Webflow. It's powered by Make, Memberstack, F'insweet Attributes, and a sprinkle of code.