Classes

fs-play-icon
3min24s
Close video
  • Empower a non-technical person to manage your website.
  • Be clear, informative, and descriptive in your class naming.
  • Give the reader as much context into the purpose of that class.
  • Read a class name and know what its purpose is.
  • No abbreviations, no shorthand, no confusion.

Global class systems

There are three primary global class systems that come with Client-first. We have identified these as our most important global-use classes when building in Webflow.
Close

Global class systems

We like to use global class and style systems for these reasons:

  1. To unify and standardize styles
  2. To update and manage styles globally
  3. To improve or speed up our build process
  4. To prevent applying the same exact styles to different classes
  5. To help our clients understand their new website

You can make any style global. However, as you add more global rules to your project, the higher the learning curve is.

If you have a global system for spacing, you have to teach someone that system for them to be able to use it and edit it. As we need to teach more and more systems, our build needs more and more training to properly use.

We have identified three global systems that we believe are the most important in Webflow - Structure, typography, and spacing.

Structure

The outer wrapping elements on the page that give us an organized, strong, and flexible page structure.

Typography

A global text- class system that organizes text customizations so our site's typography stays unified. All of our site's text copy should be styled using the global typography system.

Spacing

A global margin- and padding- class system that allows us to add spacing throughout our website. This saves us time in the build, helps us stay in the 4pt system, and prevents the creation of custom classes created specifically for spacing.

No layout, grid, flex, column classes

Important: Most style systems have a layout, grid, or flex class system that allows you to build layouts using stacked global classes. We have not added a a grid system in Client-first because we believe it increases the learning curve of Webfow significantly.

When you use a global layout system, the person using your project (a client or another dev) must understand how css works and how your class system to use the css works. This is an unrealistic request of our clients and we find that none of our clients care to learn this. Clients and beginners want to use Webflow visually. Instead of using difficult-to-manage stacked globals to create our layouts, we create custom classes so layouts can be changed by anyone at any time, regardless of their css knowledge. This is Client-first.

Keep reading the docs to learn more.

Custom classes

Every class shouldn't be global. We encourage custom class creation in Client-first. Client-first has a set of guidelines to name and organize your custom classes inside your Webflow project. Learn more in The Mindset.
fs-structure-icon

Structure

fs-play-icon
6min27s
Close video
We defined a flexible core structure you can use on most pages.

Core structure

Use this structure to create most pages:
page-wrapper
nav_component
main-wrapper
section-[section-identifer]
page-padding
container-large
...(e.g. components, elements, etc.)
section-[section-identifer]
page-padding
container-medium
...(e.g. components, elements, etc.)
footer_component
Close

Core structure

Most of our pages can follow the same structure and use the same global classes to create the outer parent layers of the page.

Our core structure is made up of Webflow Designer UX improvements, accessibility requirements, universal padding styles, and other layers that can help us establish the base of our page.

Please review each layer of core structure individually to make sure you understand how our core structure works.

Primary use case of our core structure:

  • Establish a unified and well-defined structure that we can use across all Client-first websites. Small sites, big sites, beginner sites, advanced sites can use this same structure. Experienced Client-first users will know your site's core structure quickly. Clients will be able to read human-readable terms and understand what each layer is doing.

Class explanations

page-wrapper

No styles required. Styles are optional.
Outer most parent of all elements on the page.
Close

page-wrapper

Outer most parent of all elements on the page. This wraps every div and element on the page.

Styles:

We do not need to have styles applied to .page-wrapper. However, we can apply styles to this class if needed.

Primary use cases:

  • Quick copy to clipboard for all elements on the page. This page can then be 'pasted' to a different page.
  • We have a global class available in the event that we do need to apply a style to the entire page. For example, applying overflow: hidden to prevent horizontal scroll.
  • To prevent applying styles and attributes directly on the body tag.

main-wrapper

No styles required. Styles are optional.
Primary purpose is accessibility. The main content of the page. Use a <main> tag that wraps all or most of your website content sections. The nav and footer should not be inside this <main> tag.
Close

main-wrapper

The main content of the page. Use a <main> tag that wraps all or most of your website content sections. The nav and footer should not be inside this <main> tag.

Styles:

We do not need to have styles applied to .main-wrapper. However, we can apply styles to this class if needed.

Primary use case:

  • Accessibility and search. This layer of our core structure is here to help screen readers and search engines understand where our page's content is.

How to add a tag:

Add a div to the page, go to the Div Block Settings and select Main from the Tag dropdown.

section-[section-name]

No styles required. Styles are optional.
Section identifier for organization and efficient navigator use.
Close

section-[section-name]

Section identifiers! The goal is to create a sitemap of your page for easy navigation in the Webflow Navigator panel.

Styles:

Although you can add custom styles to any section class, it is recommended to keep them unstyled. The more you rely on custom section styles, the further away you move from a global managed site.

Since each section class is unique, adding unique styles for each section class will give you many custom styles that can probably be avoided by a strong core page structure. Using our global margin, padding, and structure methods, you should be able to keep these section- classes clean and style-free.

If you need to add styles to a section class, you can do it. However, do not make it a habit. Client-first is always flexible and specific to the site you are building.

Primary use cases:

Identify a section on a page from the Navigator panel. This is a pure Designer UX decision.

We found it more difficult to onboard our clients to their Webflow without a visual or 'sitemap' of the page. Having each section as a global class of section gives us global power of each section, but it loses ease of use in Navigator.

We would rather see descriptive words describing the section inside the Navigator panel. Descriptive words can help us quickly navigate through the page.


Example:

A homepage may have sections like header, about, how it works, testimonials, contact. We can name our section classes like this:

main-wrapper
section-home-header
section-home-about
section-home-how-it-works
section-home-testimonials
section-home-contact

We can see each of these human readable as the first set of children inside the main wrapper. When opening up Navigator, see the sections of our page, and click through the page as if we were anchor scrolling!

page-padding

padding-left: 2.5rem padding-right: 2.5rem
Global and universal left right padding.
Close

page-padding

Global horizontal spacing site-wide. This class is specifically for the outermost spacing of the left and right of the site. This is not for spacing smaller inner elements of your page. This is your 'master outer padding'.

Styles:

padding-left and padding-right are the only css properties styles on the .page-padding class. It is highly recommended against adding other style properties to this class.

Primary use cases:

Updating the page-padding class will make a site-wide change for all left-right padding across responsive levels. If you use page-padding correctly, this is a really powerful global style update. Updating padding for each responsive level requires only one style change per responsive level.

More explanation:

There is flexibility in how we can use page-padding. Our recommended structure for page-padding is this:

main-wrapper
section-[section-identifier]
page-padding
container-large
...(e.g. components, elements, etc.)

There is flexibility in where can place page-padding!

We decouple page-padding from other classes and style so it can be used with or without other important page structures.

If we add padding to our container-large class, we are always locked into page padding when using a container. We want containers to do what they were created to do - to contain the content.

Decoupling padding will allow us to add page-padding as a parent of container-large, as a child of container-large, or as global add-on to container-large. Each can result in a different end result. Based on our website build, any of the three may be ideal for a specific section.

Our official default that should be used for most sites is the structure above.

container-[size]

margin-left: auto
margin-right: auto
width: 100%
max-width: [small/medium/large]
Client-first comes with 3 defined container sizes - small, medium, and large.
container-large
margin-left: auto
margin-right: auto
width: 100%
max-width: 80rem
container-medium
margin-left: auto
margin-right: auto
width: 100%
max-width: 64rem
container-small
margin-left: auto
margin-right: auto
width: 100%
max-width: 48rem
Close

container-[size]

A unified global container system for content on the page. All, or most, elements on page content can go inside the container- class.

Styles:

- margin-left and margin-right set to auto for centering the div on the page.
- width 100% to assure we're always taking up 100% of the available space.
- max-width value to contain the content within a certain width.

Primary use cases:

To help us center content on the page and set a global max-width for our content.

All or most page content will fit into one of these global container classes. They will help us unify the content containers on our website.

We can set 2, 3, or 4 different container classes depending on our build. Client-first comes with 3 containers by default - small, medium, and large max-width sizes. These can be customized for your project.

fs-typography-icon

Typography

fs-play-icon
8min22s
Close video
Typography organization keeps your brand professional
We have a global system for headings, typography sizing, coloring, and customizations.
Close

Typography

Global system for headings, typography sizing, coloring, and customizations of our website's text.

Heading tags

Always use the HTML tag to define default headings styles.

Keeping your headings class-free is recommended if your heading text fits in the default sizing. The HTML tag styling is our recommended way to apply any and all styles to your default Heading text. This keeps your defaults neat, organized, and clear.

headings-gif

Ideally, most heading tags don't have any additional classes on top of them. H1, H2, H3 maintain the same size and style throughout the build. However, this rarely happens 100% of the time throughout your build. Oftentimes we will need to change the default size of out heading tags.

When heading tag styles don't match with your page design, use heading- global classes. The heading global are specifically for changing the default text-size of heading tags or making a text block appear like a heading.

For example, if an H1 has to be smaller, you can apply heading-small to the H1.

For example, if an H3 needs to be large (like an H1), you can apply heading-large to the H3.

For example, a text block that should not be a heading tag for SEO reasons but needs to match our large heading sizes. You can apply heading-xlarge  to the text block.

Styling text

Use the text- prefix global classes to add common customizations to text for your website. We can keep all of our text customizations under the text- prefix.

We use sub-prefixes to further classify common text styles. This allows us to search our project for our already created text classes.

For example:

text-size-
text-style-
text-weight-
text-align-
text-color-

Typing in  text-weight- in the styles panel will return all of your classes related to the weight of your text.

Typing in  text-size- in the styles panel will return all of your classes related to the size of your text.

This method of prefixes and prefixes will improve class search in the styles panel.

Rich text

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.We have created a default text-rich-text class that will hold the default styles for our rich text element.

Limit your custom class rich text classes. Only create new rich text classes if you need to. Each time you make one, it's a new class you have to update when you want to change typography styles globally.

Text 'style' subprefix

We use a text sub-prefix called 'style' to classify 'other' text styles that don't fall into size, weight, align, color.

For example:

text-style-italic
text-style-strikethrough
text-style-allcaps

Text color

Text colors should be globally managed.

Sometimes it does not make sense to use this text-color- class on an element. Sometimes it makes more sense to apply to color directly to the custom class. This is ok. Swatches will save you for color changes.

When you do apply a custom class, be sure to use the 'color' sub-prefix to help us when doing 'color' searches in styles panel.

Regardless if your color is attached to a class, always use Webflow color swatches [show visual] to add another layer of global management to your text colors. Keep your swatches neat and organized!

Buttons and links

Buttons should be as universal and global as possible.

By default in Client-first we give you three unique button classes. This works well to have unique buttons across the site.

You can also use an add-on combo class method to create button variations from the primary button. For example buttonis-large or  buttonis-reverse

Better editor usability

Use the 'Button' or 'Text Link' element inside Webflow Designer. These elements are Editor friendly so clients will love them.

'Link Block' is not Editor-friendly. It's easy to use for us, but not for our clients in Editor.

Only use 'Link Block' and this Editor solution if you must use 'Link Block' based on design. If there is an icon in the button, such as an arrow, consider using a 'Button' with a background image and padding-left instead of a 'Link Block' with multiple elements inside.

Heading tags

Always use the HTML tag to define default headings styles.
font-size: 4rem

H1

font-size: 3rem

H2

font-size: 2rem

H3

font-size: 1.25rem

H4

font-size: 0.875rem
H5
font-size: 0.75rem
H6

Heading text

Use class prefix heading- on H1, H2, H3, or any other piece of text to change the text to a specific H heading size. Notice how H1 = heading-xlarge, H2 = heading-large, etc.
font-size: 4rem
heading-xlarge
font-size: 3rem
heading-large
font-size: 2rem
heading-medium
font-size: 1.25rem
heading-small

Text size

Use class prefix text- on a piece of text to change the size of the text.
font-size: 1rem

<p> paragraph tag - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales dictum nulla, non venenatis nunc. Mauris laoreet neque sed tempus fringilla. Aenean et tincidunt justo.

font-size: 1.5rem
text-size-large
font-size: 1.25rem
text-size-medium
font-size: 1rem
text-size-regular
font-size: .0875rem
text-size-small
font-size: 0.75rem
text-size-tiny

Text style

Style font-style css to change the text styling.
text-decoration: underline
<blockquote>
text-style-quote
font-style: italic
text-style-italic
text-decoration: line-through
text-style-stylethrough
text-transform: uppercase
text-style-allcaps
white-space: nowrap
text-style-nowrap
opacity: 0.5
text-style-muted
Apply "..." after 2 lines of text
-webkit-line-clamp: 2;
text-style-2lines
Apply "..." after 3 lines of text
-webkit-line-clamp: 3;
text-style-3lines

Text weight

Style font-weight css to make text more or less bold.
font-weight: 900
text-weight-xbold
font-weight: 700
text-weight-bold
font-weight: 600
text-weight-semibold
font-weight: 400
text-weight-normal
font-weight: 300
text-weight-light

Text alignment

Style text-align css to make text, or other elements, align left, center, or right.
text-align: left
text-align-left
text-align: center
text-align-center
text-align: right
text-align-right

Text color

Text colors should be globally managed when possible. These global colors should be changed based on the colors in your project.
text-color: #ffffff
text-color-white
text-color: #000000
text-color-black
text-color: #808080
text-color-grey

Rich text

Webflow native rich text element. Our default name is text-rich-text.

h2

h3

h4

h5
h6

Paragraph. The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Quote element
  • bullet point one
  • bullet point two

Text link

  1. Number one
  2. Number two

Buttons and links

Buttons should be as universal and global as possible.
fs-spacing-icon

Spacing

fs-play-icon
16min27s
Close video
Spacing system that keeps vertical and horizontal spacing global on your website.
Close

Spacing

Keep vertical and horizontal spacing as global as possible. Reduce the amount of custom classes created for spacing.

By default, Client-first uses 4pt spacing. This can be changed if required by your build. If the spacing system isn't well defined by the designer, default to the 4pt system.

What is margin, what is padding?

fs-margin-padding-img
margin-  is the outer space of an element
padding-  is the inner space of an element

Closed beta users: Why the big change in spacing?

Compared to our spacing system released in closed beta, we have reduced the number of spacing classes from 384 to 42. This is 89% less classes, less to learn, and less confusion for our clients. This leads to faster global update times for ourselves and our clients. We have also found that this new system leads to faster development time for our Webflow developers. We had unanimous Finsweet team support for this update.

How Client-first spacing works:

Client-First comes with margin/padding [directions] and margin/padding [sizes].

  1. Apply a direction
  2. Then apply a size

Use them together to create a certain amount of margin or padding on a certain side of the element.

Below are three examples of applying spacing direction and then spacing size. These classes are applied to a 'spacing div'. The spacing div is going to hold the global classes that control spacing for the nested element.

In the example below we apply a small padding bottom. First we add the padding direction, second we add the padding size. The nested element inside this spacing div will have a small padding below it.

fs-screenshot-classes-2

Our margin and padding sizes will have default size changes across breakpoints. For example, margin-xlarge may be 4rem on the desktop default breakpoint. On tablet this changes to 3.5rem. On mobile landscape it changes to 3rem.

Most of our elements using global spacing should fit into the default breakpoint changes as we go through responsive levels. This will not happen 100% of the time. Most website designs will require you to have unique spacing on some elements across different breakpoints.

For example, our default margin-xlarge is 3rem on mobile. This is exactly what we need for most elements with margin-xlarge. However, one or a few items need smaller margin on mobile.

Create a custom spacing combo class! Create is-small-mobile combo class on top of margin-bottom and margin-xlarge. This combo class will change the margin value to 0.5rem on mobile.

fs-screenshot-classes-3

is-mobile-small is more general in naming. This is something we may want to continue adding throughout our build. This may be used many times throughout our build. Useful!

There may be an instance that is really specific to an element. In the example below, we are adding a special customization to home-hero_is-custom-mobile. We know exactly how and why this custom combo creation is created. You can use component underscore naming in your combo class name if the customization is related to that component specifically.

fs-screenshot-classes-4

Power notes:


❌  Do not use spacing globals like this: ❌

1. Do not stack spacing globals on top of custom classes or other global classes unrelated to spacing.

  • This can make your build significantly more difficult to edit and manage
  • Over-stacking your build = bigger learning curve
  • We should only be stacking spacing globals on top of spacing globals.

2. Do not use spacing globals to create the size of visual elements on the page.

  • For example, we should not use padding to create the inner padding of our blog CMS items.

✅  Spacing divs should be used to separate sections and elements from each other. ✅

This saves us a lot of custom class creation and works for many layouts and elements.

Below is an example of a generic 'layout 6' component that uses margin-top to separate a title from a subtitle, as well as a features grid from the subtitle.

fs-screenshot-classes-5

You can read that navigator html tree and imagine what this content section looks like.


❌  Don't use global spacing everywhere just because you can ❌

Using the global system for every margin or padding on your site is not advised. The global system should help you, not make your job more difficult. The system will work in most in places throughout your build, but not everywhere. It is possible that the global spacing system makes your layout more difficult to build and manage, (ie, when working with child elements of flex or grid styles).

If the spacing globals don't work for the custom section/element, apply margin and padding directly to the custom class(es) needed to create the custom layout.

Over-stacking spacing classes on classes unrelated to spacing makes changes difficult. Don't let the spacing system work against you, let it work for you.



✅  Example of improved updating workflow with this new spacing convention: ✅

- In the existing spacing system, updating the 'large' value of margin from 5rem to 6rem would require an update on every direction class for every responsive level. The value update must be made to all 4 margin sides for each of the 4 responsive levels we used. That's a total of 16 classes to update.

- In this new system, the same update of margin 'large' from 5rem to 6rem would require 1 total edit. margin-large needs to be updated. That's it! This is the only class that are holds our 'large' value.

Margin

Margin direction

Global use of the direction of your margin. For example, margin-top.
.margin-[direction]
margin-top
margin-bottom
margin-left
margin-right
margin-horizontal
margin-vertical

Margin size

Global use of the size of your margin. For example, large (48px).
.margin-[size]
margin-0
Desktop
0px | 0rem
Tablet
0px | 0rem
Mobile Landscape
0px | 0rem
Mobile Portrait
0px | 0rem
margin-tiny
Desktop
2px | 0.125rem
Tablet
2px | 0.125rem
Mobile Landscape
2px | 0.125rem
Mobile Portrait
2px | 0.125rem
margin-xxsmall
Desktop
4px | 0.25rem
Tablet
4px | 0.25rem
Mobile Landscape
4px | 0.25rem
Mobile Portrait
4px | 0.25rem
margin-xsmall
Desktop
8px | 0.5rem
Tablet
8px | 0.5rem
Mobile Landscape
8px | 0.5rem
Mobile Portrait
8px | 0.5rem
margin-small
Desktop
16px | 1rem
Tablet
16px | 1rem
Mobile Landscape
16px | 1rem
Mobile Portrait
16px | 1rem
margin-medium
Desktop
32px | 2rem
Tablet
24px | 1.5rem
Mobile Landscape
20px | 1.25rem
Mobile Portrait
20px | 1.25rem
margin-large
Desktop
48px | 3rem
Tablet
40px | 2.5rem
Mobile Landscape
24px | 1.5rem
Mobile Portrait
24px | 1.5rem
margin-xlarge
Desktop
64px | 4rem
Tablet
48px | 3rem
Mobile Landscape
32px | 2rem
Mobile Portrait
32px | 2rem
margin-xxlarge
Desktop
80px | 5rem
Tablet
64px | 4rem
Mobile Landscape
48px | 3rem
Mobile Portrait
48px | 3rem
margin-huge
Desktop
96px | 6rem
Tablet
80px | 5rem
Mobile Landscape
56px | 3.5rem
Mobile Portrait
56px | 3.5rem
margin-xhuge
Desktop
128px | 8rem
Tablet
96px | 6rem
Mobile Landscape
64px | 4rem
Mobile Portrait
64px | 4rem
margin-xxhuge
Desktop
192px | 12rem
Tablet
128px | 8rem
Mobile Landscape
72px | 4.5rem
Mobile Portrait
72px | 4.5rem
margin-custom1
Desktop
- px | - rem
Tablet
- px | - rem
Mobile Landscape
- px | - rem
Mobile Portrait
- px | - rem
margin-custom2
Desktop
- px | - rem
Tablet
- px | - rem
Mobile Landscape
- px | - rem
Mobile Portrait
- px | - rem
margin-custom3
Desktop
- px | - rem
Tablet
- px | - rem
Mobile Landscape
- px | - rem
Mobile Portrait
- px | - rem

Padding

Padding Direction

Global use of the direction of your padding. For example, padding-top.
.padding-[direction]
padding-top
padding-bottom
padding-left
padding-right
padding-horizontal
padding-vertical

Padding size

Global use of the size of your padding. For example, large (48px).
.padding-[size]
padding-0
Desktop
0px | 0rem
Tablet
0px | 0rem
Mobile Landscape
0px | 0rem
Mobile Portrait
0px | 0rem
padding-tiny
Desktop
2px | 0.125rem
Tablet
2px | 0.125rem
Mobile Landscape
2px | 0.125rem
Mobile Portrait
2px | 0.125rem
padding-xxsmall
Desktop
4px | 0.25rem
Tablet
4px | 0.25rem
Mobile Landscape
4px | 0.25rem
Mobile Portrait
4px | 0.25rem
padding-xsmall
Desktop
8px | 0.5rem
Tablet
8px | 0.5rem
Mobile Landscape
8px | 0.5rem
Mobile Portrait
8px | 0.5rem
padding-small
Desktop
16px | 1rem
Tablet
16px | 1rem
Mobile Landscape
16px | 1rem
Mobile Portrait
16px | 1rem
padding-medium
Desktop
32px | 2rem
Tablet
24px | 1.5rem
Mobile Landscape
20px | 1.25rem
Mobile Portrait
20px | 1.25rem
padding-large
Desktop
48px | 3rem
Tablet
40px | 2.5rem
Mobile Landscape
24px | 1.5rem
Mobile Portrait
24px | 1.5rem
padding-xlarge
Desktop
64px | 4rem
Tablet
48px | 3rem
Mobile Landscape
32px | 2rem
Mobile Portrait
32px | 2rem
padding-xxlarge
Desktop
80px | 5rem
Tablet
64px | 4rem
Mobile Landscape
48px | 3rem
Mobile Portrait
48px | 3rem
padding-huge
Desktop
96px | 6rem
Tablet
80px | 5rem
Mobile Landscape
56px | 3.5rem
Mobile Portrait
56px | 3.5rem
padding-xhuge
Desktop
128px | 8rem
Tablet
96px | 6rem
Mobile Landscape
64px | 4rem
Mobile Portrait
64px | 4rem
padding-xxhuge
Desktop
192px | 12rem
Tablet
128px | 8rem
Mobile Landscape
72px | 4.5rem
Mobile Portrait
72px | 4.5rem
padding-custom1
Desktop
- px | - rem
Tablet
- px | - rem
Mobile Landscape
- px | - rem
Mobile Portrait
- px | - rem
padding-custom2
Desktop
- px | - rem
Tablet
- px | - rem
Mobile Landscape
- px | - rem
Mobile Portrait
- px | - rem
padding-custom3
Desktop
- px | - rem
Tablet
- px | - rem
Mobile Landscape
- px | - rem
Mobile Portrait
- px | - rem

Custom responsive spacing

Each margin/padding-[size] has spacing changes across breakpoints.

For example, margin-xlarge has 4rem on desktop, 3 rem on tablet, and 2 rem on mobile landscape. We recommend keeping this breakpoint spacing throughout your website when possible.

Your build will rarely be perfect to default 100% of the time. When spacing is not default across all breakpoints, create a combo class for this instance. This combo class can be reused in spacing classes elsewhere - or it can be a single instance for a specific element.

For example, we may have combo classes like

margin-top + margin-xlarge + is-tablet-small
margin-top + margin-xlarge + is-mobile-0
margin-top + margin-xlarge + is-header
margin-top + margin-xlarge + home-contact_is-form-margin

Remove all spacing

Sets margins and paddings to 0. Useful for removing native Webflow component spacing.

margin: 0rem; padding 0rem
spacing-clean
fs-globals-icon

Useful globals

fs-play-icon
7min10s
Close video
Globals we like to use in most of our projects to build faster.
Built for developers, yet accessible to non-technical people. Some of this section requires Webflow and CSS knowledge.

Responsive visibility

Show and hide elements by screensize
display: none
hide - hide on all devices
hide-tablet - hide from tablet resolution
hide-mobile-landscape - hide from mobile landscape resolution
hide-mobile-portrait - hide from mobile portrait resolution
display: block
show - show on all devices
show-tablet - show from tablet resolution
show-mobile-landscape - show from mobile landscape resolution
show-mobile-portrait - show from mobile portrait resolution

Max width

Add max-width to any element on the page
Close

Max width

Classes that can be used to set max-widths on elements, text, or visuals in your build.

How they should be used

They can be used as the only class on an element. For example, a piece of text with max-width-small

They can be used as a global add-on class to any global class in your build. For example, background-blackmax-width-medium

We advise that you use max-width- classes specifically for elements inside a section, not for containing all of the content of an entire section.

How they shouldn't be used:

Max width classes should not be used to contain an entire section. We want to reserve this job for our container- global classes as part of our core structure.

Max width classes should not be used as add-ons to container classes. Don't do this container-largemax-width-small. If you need a new container max width, create a new container- class.

We may not want to add them to custom classes. If we need to create a custom class to apply styles to an element, apply your max-width directly to your custom class. For example, apply max-width to home-hero_image-wrapper.

Why? Applying global max-width classes to custom classes may cause you to over-stack classes, making your project more difficult to manage. Adding direct to the custom class gives us freedom to quickly edit our custom class. A global class after a custom class acts as a blocker to that custom class. This is a decision that should be made on a case-by-base basis.

max-width: 1280px | 80rem
max-width-xxlarge
max-width: 1024px | 64rem
max-width-xlarge
max-width: 768px | 48rem
max-width-large
max-width: 512px | 32rem
max-width-medium
max-width: 320px | 20rem
max-width-small
max-width: 256px | 16rem
max-width-xsmall
max-width: 192px | 12rem
max-width-xxsmall

Max width full

Sets max-width to 'none'.
max-width: none; width: 100%
max-width-full - sets max-width to none
max-width-full-tablet - sets max-width to none on tablet
max-width-full-mobile-landscape - sets max-width to none on landscape
max-width-full-mobile-portrait - sets max-width to none on portrait

Icons classes

Sets a height or height and width on your icon. Great for social icons, company logos, footer assets, etc. Avoid using on elements that likely need unique customizations on tablet or mobile.
height: 1.25rem
icon-small
fs-logo
height: 2rem
icon-medium
fs-logo
height: 2.5rem
icon-large
fs-logo
height: 1.25rem; width: 1.25rem
icon-1x1-small
fs-logo
height: 2rem; width: 2rem
icon-1x1-medium
fs-logo
height: 2.5rem; width: 2.5rem
icon-1x1-large
fs-logo

Useful SVG icons

Find more icons here https://simpleicons.org and add property fill='currentColor' inside of <svg> tag to control color of the icon through font color style.
svg embed with fill ="colorCurrent"
LinkedIn icon
Twitter icon
Facebook icon
Instagram icon
Slack icon
Dribbble icon
Pinterest icon
YouTube icon
SoundCloud icon

Useful classes as you're building

More advanced. Not required to use.
z-index-1 - bring an element closer on the z-index, sets z-index to 1
z-index-2 - bring an element closer on the z-index, sets z-index to 2
align-center - sets margin left and right to auto, centers an element inside its parent div
div-square - creates and maintains a 1:1 dimension of a div. CSS magic
layer - sets absolute position with 0% on all sides - add this class to a div to make it expand the entire size of the parent element, and make sure the parent div has 'position: relative'
clickable-off - sets pointer-events to none, prevents all click and hover interaction with an element
clickable-on - sets pointer-events to auto, enables all click and hover interaction with an element
overflow-hidden - sets overflow to hidden
overflow-scroll - sets overflow to scroll
overflow-auto - sets overflow to auto

Colors

Use colors globally. Use global swatches.
In Client-first we use classes to change the color and background-color CSS properties. These should be updated in your project based on the colors of your website. Text color is shown in the Typography section.
Close

Colors

If there are colors that should be globally managed, keep them in a global class system.

Always use Webflow color swatches [visual]. Keep your swatches neat and organized. You can use Finsweet Extension to do this.

fs-screenshot-colors

Based on your project, you may want to:

  • Change, add, or remove these color options
  • Use global color classes for other properties, like border
  • Use global color classes for custom elements in our build
  • Anything you want to help stay organized and easily manageable for the next person using Designer

This same color naming mentality can be used on any element where it makes sense to have a globally managed color.

[element]-color-[color]

Describe your element, use the color prefix, describe the color name. The static 'color' keyword is great for a 'color' search in styles panel.

fs-component-colors-2


background-color: #xxxxxx
background-color-grey
background-color: #ffffff
background-color-white
background-color: #000000
background-color-black
fs-globals-icon

Global embed

Close video
Client-first comes with a 'global' symbol embed block. This embed block goes on every page and holds CSS styles that are used everywhere in the project.
The global styles symbol has several purposes

Add CSS styles that should be applied to every page of the project
We can manage and view the 'global' CSS styles in one single embed. This symbol should be on every page of the project. Making an update to it (as a symbol) will update every page in our project. Can the same be achieved with Site Settings code? Not really!

Styles are added to an embed so we can see the CSS inside Designer
When the code is in Site Settings, we can only see the CSS on the published site. This may be OK for some situations, but it also may lead to unexpected behavior on the published page. It's always preferred to see CSS directly inside Designer. When the CSS styles are in an embed inside Designer, we are able to see these styles visually while we work inside Designer. This is a huge benefit for styles that apply a visual update to the project.

Update a few Webflow default styles.
We have a few styles in that that overwrite default Webflow styles that we prefer to not have in our project. When you use our cloneable starter project, we add comments to each CSS style we add to explain what it does.

Utility classes of CSS properties that are not supported in Designer.
We can add utility classes for styles that are not supported natively in Webflow (like "clickable-off" which adds pointer-events: none). The only way to add unsupported CSS properties is to add them to an embed or Custom Code. We add them to the embed so we can see them working in Designer!

Built for you to update and add to
These global styles are meant to be changed. If you don't want some of the styles that we add, you can remove them globally with one edit to the symbol. If you want to add styles, add it once to the symbol. As with everything in Client-first, it's important you update your Webflow project to fit the use case.
fs-components-icon

Components

fs-play-icon
9min23s
Close video
There are zero component classes that come with Client-first. Components are custom to the website you're building.
See full explanation in "The mindset: Components"
Use Client-first recommended keywords when naming "The mindset: Keywords"
Close

Components

Examples of components in live projects

A team component on the company page called company-team_
The header of the homepage calledhome-header_
The primary footer_ component
A generic layout component with a generic name of layout1_
fs-component-screenshot-1
See full explanation in "The mindset: Components"
Use Client-first recommended keywords when naming "The mindset: Keywords"
fs-layouts-icon

Layouts

fs-play-icon
3min31s
Close video
There are zero flex or grid classes that come with Client-first. We do not recommend a fully global managed flex or grid class system inside Webflow. We encourage custom class creation when using flex or grid.
See full explanation in "The mindset: No layout system by default"
Use Client-first recommended keywords when naming "The mindset: Keywords"
Close

Layouts

No layout, grid, flex, column classes

Important: Most style systems have a layout, grid, or flex class system that allows you to build layouts using stacked global classes. We have not added a a grid system in Client-first because we believe it increases the learning curve of Webfow significantly.

When you use a global layout system, the person using your project (a client or another dev) must understand how css works and how your class system to use the css works. This is an unrealistic request of our clients and we find that none of our clients care to learn this.

Clients and beginners want to use Webflow visually. Instead of using difficult-to-manage stacked globals to create our layouts, we create custom classes so layouts can be changed by anyone at any time, regardless of their css knowledge. This is how Webflow was made to use. This is how we approach Webflow in Client-first.

Examples of layouts in live projects

Creating a layout with css grid on the component class
fs-layout-screenshot-1
Using flex to create the layout for our pricing_component
fs-layout-screenshot-2
Using flex to create our column layout in footer_layout
fs-layout-screenshot-3
Applying css grid to create a team grid layout. We use the keyword 'list' to indicate there are child content items inside.
fs-layout-screenshot-4
See full explanation in "The mindset: No layout system by default"
Use Client-first recommended keywords when naming "The mindset: Keywords"

Next: Sizes

Read about the 4pt system and pixel to rem conversion
fs-arrow-icon