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.
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
...
