Classes
- 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
Global class systems
We like to use global class and style systems for these reasons:
- To unify and standardize styles
- To update and manage styles globally
- To improve or speed up our build process
- To prevent applying the same exact styles to different classes
- 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
Structure
Core structure
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
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
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]
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:
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
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:
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]
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.
Typography
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.
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:
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 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
H1
H2
H3
H4
H5
H6
Heading text
Text size
<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.
Text style
Text weight
Text alignment
Text color
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
- Number one
- Number two
Buttons and links
Spacing
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?
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].
- Apply a direction
- 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.
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.
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.
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.
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
Margin size
Padding
Padding Direction
Padding size
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
Remove all spacing
Sets margins and paddings to 0. Useful for removing native Webflow component spacing.
Useful globals
Responsive visibility
Max width
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 full
Icons classes
Useful SVG icons
Useful classes as you're building
Colors
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.
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.
Global embed
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.
Components
Use Client-first recommended keywords when naming "The mindset: Keywords"
Components
Examples of components in live projects
Use Client-first recommended keywords when naming "The mindset: Keywords"
Layouts
Use Client-first recommended keywords when naming "The mindset: Keywords"
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
Use Client-first recommended keywords when naming "The mindset: Keywords"
Next: Sizes
