3 mistakes devs make implementing cookie consent in Webflow

Miss blocking native videos in Webflow.

Forget to upload Google Fonts manually.

Don't know native Lightbox may set cookies.

Run a free scan to see which ones your Webflow site makes:

No signup

100% free

Report in minutes

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

Live Build 2

PS5 DualSense Wireless Controller page created with Client-first in Webflow.

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

Client-First V2 live build of Apple Podcasts Website

In this episode, Joe Krug will recreate the Apple Podcast website in Webflow using Client-First V2!

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.

Finsweet

Cloneable

Wireframe 3

A dark wireframe UI kit based on IBM's Carbon design system. It's built using the neat and clean Client-first system for Webflow and consists of 40 components.

Finsweet

Cloneable

Template 2

Clean and fully customizable template built using the Client-first system for Webflow. It features 10 Static and 3 CMS Pages and can be used for all types of businesses.

Client-First Library Figma to Webflow Kit