Client-First

Quick Guide Client-First is a set of guidelines and

strategies to help us build Webflow
websites. Built and managed by Finsweet.

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-gray header_background-layer
testimonial-slider_headshot Give classes meaningful names.
testimonials_wrapper Yes

Do not use abbreviations.

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

General → to → specific

Updating a utility class will update all instances in Better for maintaining a project as it’s more flexible class naming convention
the project that use the utility class. It is ‘global’ by to changes. Avoid over-stacking classes and making
nature. site-wide mistakes.
text-size-large
This class is used to style a text
is always can be element.

add-on This class is used to style the size

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
a class.
styles from the base class and adds more styles on
top of it. team-list_headshot-wrapper
Custom class folder name. This is
Utility classes & custom classes can Use prefix ‘is-’ to define a combo class. the “team list” component related
to the team page or a team section.
be global classes.
button is-blue This class is used for the
headshot element in the team list.
A global class can use ‘-’ or ‘_’ header_content is-home
This class is used for the element wrapping
the headshot element.
header_background-layer
faq_item 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

P age 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 di erent
/ ff

on the page. page or apply CSS styles to the entire page.

navbar The nav element specifies a list of <nav T tag is placed outside of the main-wrapper
> H ML

navigation links. since its content is not for page-specific content.

global-styles Global custom CSS for the project. O rganizes all custom CSS snippets for the entire
projects. Stored in a Webflow T embed as a symbol. H ML

main-wrapper The “main” or page-specific Use a main < > H ML T tag for accessibility best
content of the page. practice.
section_ identifier
[ ] Wraps an entire section of content. H elps to organize Webflow Navigator panel. T
H ML

< section tag is recommended.

>

padding-global H orizontal 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 sizes of max-width small ,
3

and centers the content on the page. medium , and large .

Pro tip: Use Finsweet extension to add core
structure in one click: {F / Client-First / Add Core padding-section- size [ ] Vertical spacing between Padding and top and bottom in sizes 3

P age Structure sections. small , medium , and large .

Client-First uses REM Stacking

Build accessible, fluid responsive websites L ess 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
T root font size. By default it’s 16px
H ML in RE . M
Build a maintainable project and avoid
Browser font size settings that are modified by end- “deep stacking” classes.
users will be respected.
* VW, VH values are not respected for full text-size-small text-color-grey 1 or 2 = Great
Apply REM to all elements in Client-First, accessibility compliance.
text-weight-light 3 = k O
including typography, spacing, widths, and
anything else that requires a size unit. text-style-italic 4 = Avoid
text-style-2lines 5 = Do N T O

Fluid responsive Show in docs

How to avoid deep stacking?
generator
Visually scale all elements on the page as the user Use one single custom class
changes the size of the browser. text-size-medium text-color-grey
M aintain design and layout across all browser sizes. text-weight-light text-style-italic
1rem = 16px (font size of the root element).
M erge combo classes
Use Client-First X to RE Calculator
text-style-alternative
/ P M

Use Finsweet Extension to merge classes.

2. Create combo class with required styles

faq_item background-color-black
text-color-white text-style-italic

faq_item is-dark
M erge stacked classes to a combo class.
3. Nest another Div block
You can a lso make a calculation straight in the text-color-grey
Style field by typing ‘value/16 rem‘ and then Enter.
The fluid responsive strategy is an optional add-on. max-width-large
Add it, or don't add it, to any project. The
implementation requires no workflow change.
Pro tip: Use ‘PX to REM migrator’ in Finsweet Fluid responsive can be added at the end of the Useful for avoiding stacked utility classes.
Extension to convert existing projects to rem. project after everything is developed. Recommended when stacking utility classes of
di erent types, like typography and max-width.
ff

Typography
Strategy for project typography using utility classes Show in docs

Tags Heading classes Text size Text alignment Custom typography classes
Use text-size- classes to change the size Use text-align- classes to align the text. Create a custom class if the typography
H 1 heading-style-h1 4rem
of a text element. instance is very unique, requires deep
H 2 heading-style-h2 3rem text-align-left stacking or is better managed outside of
text-size-large 1.5rem text-align-center the utility system.
H3 heading-style-h 2rem 3
text-size-medium 1.25rem text-align-right
H 4 heading-style-h4 1.5rem Deep stacking typography classes:
text-size-regular 1rem
H 5 heading-style-h5 1.25rem
text-size-small
More text utility classes
0.85rem
H 6 heading-style-h6 1rem
text-size-tiny 0.75rem
Use the correct T eading tag based
H ML H M ore utility classes to help maintain a
on the eading’s hierarchy on the page.
H global typography system for the project.
Use heading-style- classes only to Text color text-style-2lines Truncate the text
override the default eading tag style. H

Use text-color- classes to change the text-style- lines3 Truncate the text
If the 11 on the page should be styled color of a text element. It is encouraged to
HH
add more utility class colors based on the text-style-allcaps e.g. A CA S
like an 1, don’t apply any class to it.
LL P
H
project styles. text-style-italic e.g. it ic M erge classes to a custom class. Use
Finsweet Extension to merge classes
al

If the 1 1 should be styled like an

HH ,
H3
H3
text-style-strikethrough e.g. strike
for example, you can use a heading-style text-color-black color: #000
class. text-color-white color: # f ff
text-style-muted opacity: 0.7
1 heading-style-h text-color-grey color: #707070
Stack typography classes
H 3

Always respect heading hierarchy.

Good for SE . O
Text weight Create unique, yet global combinations of
typography styles.
Correct Wrong Use text-weight- classes to change the
weight of a text element text-color-blue text-weight-semibold Avoid creating too many custom classes
1 1 for typography. owever, it is allowed to
Avoid stacking non-typography classes
H
H H

text-weight-light weight: 00 improve maintainability of the project.

with typography classes.
3
2 2
weight: 400
H H
text-weight-normal Examples of custom classes
4
text-weight-semibold weight: 600
H3 H

4 2
weight: 700
footer_copyright-text
text-weight-bold
H H

H 2 H 5 text-weight-xbold weight: 800

footer_link
H3 H3 hero_subtitle
team_user_description

Spacing
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” Create custom class to an element when it
padding-section- size
requires unique spacing that is not
[ ]

Spacing wrapper Spacing block Value in rem

H elps to manage top and bottom padding covered in the utility system.
padding- direction padding- size
[ ] [ ] spacer- size
[ ] for sections globally throughout the Example:
project.
padding-top padding-tiny spacer-tiny 0.125 form_input
padding-right padding-xxsmall spacer-xxsmall 0.25 has unique space margin-bottom: 0.75rem
padding-bottom padding-xsmall spacer-xsmall 0.5
padding-left padding-small spacer-small 1 Benefits
padding-vertical padding-medium spacer-medium 2 Global spacing updates for the
padding-horizontal padding-large spacer-large 3
recurring element
padding-xlarge spacer-xlarge 4 padding-section-small 3rem It can include more styles → helps to
padding-xxlarge spacer-xxlarge 5 avoid combo classes and overstacking
padding-section-medium 5rem
padding-huge spacer-huge 6 Easy to maintain without a ecting
padding-section-large
ff
8rem utility classes
padding-xhuge spacer-xhuge 8
padding-xxhuge spacer-xxhuge 12
spacing_clean
padding-custom1 spacer-custom1 1.5
padding-0 0
Remove native Webflow component
spacing.

margin- direction margin- size M argins are also included as spacing wrappers.
argins follow the same structure as padding.
[ ] [ ]
M

Spacing 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 Add content inside wrapper with grid
classes. or flex styles applied.
spacer- size [ ]

padding-bottom testimonials_content
padding-medium

padding-medium

How it looks

Heading Heading
padding-bottom padding-medium

Heading
testimonials_content

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 View the Folders decision DF P

Folders help us group, search for, and access

elements in a project. Create
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-1_element folder-1_folder-2_element
The first word of the classname is the folder name.
Rename
Renaming the team_ folder to card_ , will apply
a new name to every class inside the folder.

Custom classes Example of a page built with Utility classes

folder-name_element-identifier custom classes and utility classes foldername-property-identifier
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 button-group Set height size Set height and width
button is-secondary Create horizontal space icon- size [ ] icon-1X1- size [ ]

button is-text between two buttons.

0.5em icon-small icon-1x1-small 1rem
P ro tip: Add style flex or icon-medium icon-1x1-medium 2rem
grid with gap to a button icon-large icon-1x1-large 2.5rem
with label and and icon.

More utility class systems Show in docs

Hide element Ov erflow imit width of an element

L Useful stuff
hide overflow-hidden max-width-xxlarge 80rem pointer-events-on Turn on mouse events on the element
hide-tablet overflow-scroll max-width-xlarge 64rem pointer-events-o ff Turn off mouse events on the element
hide-mobile-landscape overflow-auto max-width-large 48rem z-index-1
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 div-square 1:1 dimension of a div
background-color-grey 555
#f f f
max-width-xxsmall 12rem layer position: absolute, top, right, bottom, left: 0
background-color-black # 000
max-width-full
‍
background-color-white display-inlineflex Allows elements to behave as inline, while
#fff
max-width-full-tablet maintaining flex capabilities inside them.
max-width-full-mobile-landscape
max-width-full-mobile-portrait

Supporting content Show in docs

Global Styles embed Sales strategy Resources

Global Styles embed is the embed code that comes How you can leverage Client-First to win more VH - iewport ight is a unit that is relative to the
V H

with the Client-First cloneable and it has necessary projects and keep your clients happy. With a great entire screen

code snippets of the system. project comes great documentation.

Client focused goals
L VH, SVH, DVH - The arge, Small, and Dynamic L
:
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

earn Client-First if they wish to do so

L

Continue working with you e ectivel ff

Maintain the project with a di erent Webflow ff

developer
Sales points :
100 VH 100S VH 100D VH 100 LVH

Maintenanc
Scalabilit
Accessibilit
Community recognize
Inclusivity - available on 6 languages https: [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