What is Client-first?

Client-first is a set of guidelines and strategies to help you build Webflow websites in a clear and scalable way that any human can understand. 



Clients, marketers, Webflow developers, and anyone who opens your Webflow project should be able to read a class name and understand what that class is responsible for doing.

Recommended global classes

Core Structure

page-wrapper
main-wrapper
page-padding
section-features , section-team ...  .section-[name]
container-small, container-large...  .container-[size]

Typography

heading-large , heading-medium ...  .heading-[size]
text-color-blue , text-color-orange ...  .text-color-[color]
text-style-link , text-style-italic ...  .text-style-[style]

Spacing

margin-top + margin-large ...  .margin-[direction].margin-[size]
padding-top + padding-large ...  .padding-[direction].padding-[size]

Other global classes

Responsive visibility

show-tablet , show-mobile-landscape ...  .show-[responsive-level]
hide-desktop , hide-tablet ...  .hide-[responsive-level]

Max width

max-width-large ...  .max-width-[size]
align-center ...  .align-[horizontal-direction]

Icons

icon-small , icon-medium ...  .icon-[size]
icon-1x1-small ...  .icon-1x1-[size]

Background colors

background-color-black ...   .background-color-[color]

Useful classes

z-index-1 , z-index-2 ...  .z-index-[number]
div-square
layer
clickable-on , clickable-off
overflow-hidden , overflow-scroll , overflow-auto

Custom classes

Example of classes in components

home-header_component
home-header_content
home-header_title-wrapper
...(e.g. heading, paragraph, button, etc.)
home-header_image-wrapper
home-header_image

Example of classes outside of components

item-border-shadow
header-accent-image
animation-scroll-into-view
layout-option-a
header-show-text-trigger
...