Client-First

Quick Guide
Classes
Strategy for how to identify, use, and manage classes inside Webflow as a platform.

Utility Show in docs Custom Show in docs Meaningful & Show in docs

A utility class is created for a specific combination A custom class created for a specific and complete naming
of CSS properties, which can be applied to identifiable component, page, grouping of Class names should say what they do. The name of a
elements across the project. elements, or single element. class should answer these questions:

Utility classes use dashes ‘-’ only. Custom classes use an underscore ‘_’ to define the "What is the purpose of this class in the project?
“custom folder name”. "How can I give the most context into what this
text-size-large class is responsible for in the project?"

background-color-primary header_background-layer
Give classes meaningful names.
testimonial-slider_headshot
testimonials_wrapper Yes

Don not use obreviations.

col-2-d flex-mobile-a-c No

Updating a utility class will update all instances in

General → to → specific

the project that use the utility class. It is ‘global’ by Better for maintaining a project as it’s more flexible
nature. to changes. Avoid over-stacking classes and making
class naming convention
site-wide mistakes.

text-size-large
This class is used to style a text
is always can be element.

This class is used to style the size

add-on of a text element.

Global Show in docs Combo Show in docs This class is used to make the text size large.

A global class is intended for use across the entire A combo class is a variant to a base class. It inherits
project. It is a further classification of the purpose of styles from the base class and adds more styles on
a class. Utility classes & custom classes can be top of it. team-list_headshot-wrapper
global classes.
Custom class folder name. This is
Use prefix ‘is-’ to define a combo class. the “team list” component related
A global class can use ‘-’ or ‘_’ to the team page or a team section.

button is-brand This class is used for the

header_background-layer headshot element in the team list.
header_content is-home
faq_item This class is used for the element wrapping
the headshot element.

Use this naming approach to stay organized.

Custom classes for the “team list” component are
grouped in the same folder.

team-list_component
Useful for adding additional styles for a specific
instance. team-list_headshot-image
team-list_headshot-texture-layer
team-list_headshot-background

Page structure
Strategy for the core structure of each web page. Show in docs

page-wrapper Outermost parent of all elements Helps to copy/paste the entire page to a different
on the page. page or apply CSS styles to the entire page.

navbar The nav element specifies a list of <nav> HTML tag is placed outside of the main-wrapper
navigation links. since its content is not for page-specific content.

global-styles Global custom CSS for the project. Organizes all custom CSS snippets for the entire
projects. Stored in a Webflow HTML embed as a symbol.

main-wrapper The “main” or page-specific Use a <main> HTML tag for accessibility best
content of the page. practice.

section_[identifier] Wraps an entire section of content. Helps to organize Webflow Navigator panel. HTML
<section> tag is recommended.

padding-global Horizontal spacing of a page's content Used for site-wide left and right outer
padding of each page.

container-[size] Sets a max-width for all page content Includes 3 sizes of max-width small ,
and centers the content on the page. medium , and large .

Client-First version 2.1 Update padding-section-[size]

The padding-section-[si ze] utility class should be used on

size It helps to manage top and bottom padding
the div block with the padding-global class applied to for sections globally throughout the project.
reduce nesting elements as example below:

padding-section-small 3rem
padding-section-medium 5rem
padding-section-large 8rem

Client-First uses REM S tacking

Build accessible, fluid responsive websites Less stacking gives more control

Use rem Show in docs Accessibility benefits Show in docs Minimal stacking Show in docs

What is rem? The rem unit is based on one thing Browsers can zoom normally when a project is built strategy
— HTML root font size. By default it’s 16px in REM. Build a maintainable project and avoid
“deep stacking” classes.
Browser font size settings that are modified by end-
users will be respected.

* V W, VH values are not respected for full

Apply rem to all elements in Client-First, including accessibility compliance.
typography, spacing, widths, and anything else
that requires a size unit.

Fluid responsive Show in docs

generator How to avoid deep stacking?

Use one single custom class
V isually scale all elements on the page as the user
changes the size of the browser. text-size-medium text-color-secondary
Maintain design and layout across all browser sizes. text-weight-light text-style-italic

1rem = 16px (font size of the root element).

Merge combo classes
Use Client-First / PX to REM Calculator
text-style-alternative

Use Finsweet Extension to merge classes.

2. Create combo class with required styles

faq_item background-color-primary

text-color-primary text-style-italic

faq_item is-dark

Merge stacked classes to a combo class.

3. Nest another Div block

You can also make a calculation straight in the text-color-secondary
Style field by typing ‘value/16 rem‘ and hit enter.
The fluid responsive strategy is an optional add-on.
Add it, or don't add it, to any project. The max-width-large
implementation requires no workflow change.

Fluid responsive can be added at the end of the

Pro tip: Use ‘PX to REM migrator’ in Finsweet project after everything is developed.
Useful for avoiding stacked utility classes.
Extension to convert existing projects to rem. Recommended when stacking utility classes of
different types, like typography and max-width.

Typography
Strategy for project typography using utility classes Show in docs

Tags Heading classes Text size Text alignment Custom typography classes
H1 heading-style-h1 4rem Use text-size- classes to change the size of Use text-align- classes to align the text. Create a custom class if the typography
H2 heading-style-h2 3rem a text element. instance is very unique, requires deep
text-align-left
stacking or is better managed outside of the
H3 heading-style-h3 2rem text-size-large 1.5rem
text-align-center utility system.
H4 heading-style-h4 1.5rem text-size-medium 1.25rem
text-align-right
Deep stacking typography classes:
H5 heading-style-h5 1.25rem text-size-regular 1rem
H6 heading-style-h6 1rem text-size-small 0.85rem More text utility classes
Use the correct HTML Heading tag based text-size-tiny 0.75rem More utility classes to help maintain a global
on the Heading’s hierarchy on the page. typography system for the project.
Use heading-style- classes only to Text color
override the default Heading tag style. text-style-2lines Truncate the text
Use text-color- classes to change the
text-style-3lines Truncate the text
color of a text element. It is encouraged to
If the H1 on the page should be styled text-style-allcaps e.g. ALL CAPS
add more utility class colors based on the
like an H1, don’t apply any class to it.
project styles. text-style-italic e.g. italic Merge classes to a custom class. Use
If the HH11 should be styled like an H3
H3 ,
text-style-strikethrough e.g. strike Finsweet Extension to merge classes
text-color-primary color: #000
for example, you can use a heading-style
text-style-muted opacity: 0.7
class. text-color-secondary color: #fff
text-color-neutral color: #707070
H1 heading-style-h3 S tack typography classes

Always respect heading hierarchy.

Text weight Create unique, yet global combinations of
typography styles.
Good for SEO. Use text-weight- classes to change the
weight of a text element text-color-blue text-weight-semibold
Correct Wrong
Avoid stacking non-typography classes with Avoid creating too many custom classes for
H1 H1 text-weight-light weight: 300
typography classes. typography. However, it is allowed to
H2 H2 text-weight-normal weight: 400 improve maintainability of the project.
H3 H4 text-weight-semibold weight: 600
Examples of custom classes
H4 H2 text-weight-bold weight: 700
footer_copyright-text
H2 H5 text-weight-xbold weight: 800
footer_link
H3 H3
hero_subtitle
team_user_description

S pacing
Strategy for consistent spacing Show in docs

Utility classes Show in docs Content sections Custom classes Show in docs

Two methods: “Spacing wrapper” and “Spacing block” padding-section-[size]

Create custom class to an element when it
requires unique spacing that is not covered
Spacing Wrapper S pacing Block V alue in rem
in the utility system.
It helps to manage top and bottom padding
padding-[direction] padding-[size] spacer-[size] for sections globally throughout the project. Example:
form_input
padding-top padding-tiny spacer-tiny 0.125
has unique space margin-bottom: 0.75rem
padding-right padding-xxsmall spacer-xxsmall 0.25
padding-bottom padding-xsmall spacer-xsmall 0.5
Benefits
padding-left padding-small spacer-small 1
padding-vertical padding-medium spacer-medium 2 Global spacing updates for the recurring
element
padding-horizontal padding-large spacer-large 3
padding-section-small 3rem It can include more styles → helps to
padding-xlarge spacer-xlarge 4 avoid combo classes and overstacking
padding-section-medium 5rem
padding-xxlarge spacer-xxlarge 5 Easy to maintain without affecting utility
padding-section-large 8rem
padding-huge spacer-huge 6 classes

padding-xhuge spacer-xhuge 8
padding-xxhuge spacer-xxhuge 12 spacing_clean
padding-custom1 spacer-custom1 1.5 Remove native Webflow component
padding-0 0 spacing.

Margins are also included as spacing

wrappers. Margins follow the same
structure as padding.

margin-[direction] margin-[size]

S pacing strategy
Spacing blocks Show in docs Wrappers Show in docs Grid / flex Show in docs

How it works
Add block between elements to add spacing. Add content inside a Div block with Spacing utility classes. Add content inside wrapper with grid
or flex styles applied.
spacer-[size]
padding-bottom testimonials_content

padding-medium

padding-medium

How it looks

Heading padding-bottom

Heading
padding-medium testimonials_content

Heading
spacer-medium

padding-bottom padding-medium This is some text inside of a div block.

This is some text inside of a div block. This is some text inside of a div block. Text link
spacer-medium

Text link
Text link

Navigator

Folders
Control and organize classes with Folders Show in docs

Folders help us group, search for, and access

Create
elements in a project.
Add underscore to a class name to create a folder.
Underscore equals one custom class folder: One underscore is one folder.

folder-name_element-name folder-name_element folder-1_folder-2_element

The first word of the classname is the folder name.

Rename
Renaming the hero_ folder to team_ , will apply
a new name to every class inside the folder.

Custom classes Example of a page built with Utility classes

folder-name_element-name custom classes and utility classes element-name

Custom classes (underscore) are organized by the word Utility classes (no underscore) are automatically
before the underscore. organized inside the Utility folder.

More utility systems

Additional utility classes included in Client-First

Buttons Show in docs Icons Show in docs

button button Set height size Set height and width

button is-secondary
icon-[size] icon-1X1-[size]
button is-text
icon-small icon-1x1-small 1rem
Pro tip: Add style flex or grid with gap 0.5em icon-medium icon-1x1-medium 2rem
to a button with label and and icon.
icon-large icon-1x1-large 2.5rem

button-group

Create horizontal space

between two buttons.

S ets of utility classes Show in docs

Hide element Overflow Limit width of an element Useful stuff

hide overflow-hidden max-width-xxlarge 80rem pointer-events-none Turn on mouse events on the element
hide-tablet overflow-scroll max-width-xlarge 64rem pointer-events-auto Turn off mouse events on the element
hide-mobile-landscape overflow-auto max-width-large 48rem z-index-1 Turn on/off mouse events
on the element
hide-mobile-portrait align-center max-width-medium 32rem z-index-2
max-width-small 20rem align-center margin: 0 auto
Background color max-width-xsmall 16rem layer position: absolute, top, right, bottom, left: 0

background-color-primary #f5f5f5 max-width-xxsmall 12rem display-inlineflex Allows elements to behave as inline, while
maintaining flex capabilities inside them.
background-color-secondary #fff
‍max-width-full
background-color-dark #000
max-width-full-tablet
max-width-full-mobile-landscape
max-width-full-mobile-portrait

S upporting content Show in docs

Global Styles embed S ales strategy Resources

Global Styles embed is the embed code that comes How you can leverage Client-First to win more V H - Viewport Hight is a unit that is relative to the
with the Client-First cloneable and it has necessary projects and keep your clients happy. With a great entire scree n

code snippets of the system. project comes great documentation.

Client focused goals:

L V H, SVH, DVH - The Large, Small, and Dynamic
Viewports are the units that represent the currently
Make big changes to the Webflow project usable space

Read most classes in the project and understand

their purpose
Scale the website based on the organization in
the project
11:23 11:23

Learn Client-First if they wish to do so

Continue working with you effectivel
Maintain the project with a different Webflow
developer

ales points:
100VH 100SVH 100DVH 100LVH
S

Maintenanc
Scalabilit
Accessibilit
Community recognize
Inclusivity - available on 6 languages [Link]

Global Styles embed component must be applied to [Link]

every page in the project

Show in docs Show in docs Learn more like this in docs