'Client-first' Webflow Style System

.clearly-named-classes

Marketer-friendly

Global styles that matter

Pixel-based sizing

Beginners welcome

Class abbreviations

Developer lingo

Math-based sizing

Unnecessary utility classes

Web dev knowledge

Open Style SystemWelcome video on YouTube

Why should you use Client-first?

It’s proven by many different people working on many different websites.

  • We use Client-first for our big enterprise builds.
  • We use Client-first for our smallest projects.
  • Our beginner Webflow people use Client-first.
  • Our experienced 5 year+ Webflow people use Client-first.
  • Everyone likes it, and you will too.

One naming convention for every person, for every project.
‍
That’s Client-first.

'Client-first' CSS naming convention

CSS classes with meaningful naming. No abbreviations, no shorthand, no confusion. Read a class name and know exactly what it does.

View naming system

Simple logic for creating class names

Understand how to name classes to stay organized in Designer's style and navigator panels. We make decisions based on how Webflow works.

View naming system

Global-driven system for styles that matter

Styles should be universally and globally controlled. Everything else can be custom. 'Client-first' identifies the most important global styles for power use while leaving you room to build whatever you want.

View classes

Components and custom classes

Organize custom classes by creating 'components.' Use the component name as a prefix for each element inside of it. Custom classes are encouraged!

View classes

Structure

We defined the core basics so you can build the complex with less effort.

Spacing

Spacing system that keeps vertical and horizontal spacing global on your website.

Typography

Typography organization keeps your brand professional. We take global control of typography.

Colors

Add-on classes to customize elements to your brand colors

Responsive visibility

Show and hide elements by device.

Webflow Elements

Webflow native elements. Form, dropdown, tabs, slider, and more.

Utility

Helpful classes that can be added to any element in the build.

Components

Stay organized with custom classes by using our component naming convention.

Brand guide

Company assets such as logo, icons, and pdfs. All in one place.

Start using Client-first

1. Clone

Clone this project

2. Customize

Customize for your build

3. Build

Clone Webflow project
(coming soon)

Scale your Webflow builds

Our goal is to set you up with a system that easily allows you to grow and scale your website without developers while empowering your marketing team.

Understand our naming convention