Classes docs read to you
Don't want to read? In this video, we explain everything to you.
Classes
Scale your website without developers and empower your marketing team to market your brand. No abbreviations, no shorthand, no confusion. Read a class name and know what its purpose is.
Be clear, informative, and descriptive in your class naming. Give the reader as much context into the purpose of that class.
Be clear, informative, and descriptive in your class naming. Give the reader as much context into the purpose of that class.
Structure
We defined the core basics so you can build the complex with less effort.
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.
Core structures and max width
Use the this structure to create most pages:
page-wrapper
main-wrapper
section-[section-identifer]
page-padding
container
...(e.g. components, elements, etc.)
section-[section-identifer]
page-padding
container
...(e.g. components, elements, etc.)
page-wrapper
No styles required. Styles are optional.
Outer most parent of all elements on the page.
Primary use case:
- Quick 'copy all elements on the page' that will 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 and do not want to style the body tag.
main-wrapper
Accessibility <main>
No styles required. Styles are optional.
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
Primary use case:
- Accessibility
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.
Primary use case is to identify a section on a page from the Navigator panel. This is a pure Designer UX decision with flexibility for use.
We found it more difficult to onboard our clients to their Webflow without a visual or 'sitemap' of the page. Having each section as 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 so we can quickly navigate through the page through the Navigator panel.
For example,
A homepage may have sections like header, about, how it works, testimonials, contact. We can name our section classes like this:
We found it more difficult to onboard our clients to their Webflow without a visual or 'sitemap' of the page. Having each section as 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 so we can quickly navigate through the page through the Navigator panel.
For example,
A homepage may have sections like header, about, how it works, testimonials, contact. We can name our section classes like this:
page-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 page wrapper. When opening up Navigator, we're ready to navigate through the page!
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, I would not make a habit of it. Client-first is always flexible and specific to the site you are building.
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, I would not make a habit of it. Client-first is always flexible and specific to the site you are building.
page-padding
padding-left: value
padding-right: value
Primary use case is to create global horizontal spacing site-wide. This class is specifically for the outermost spacing of the left and right of the site. It's not for spacing inside elements.
With one reserved class that manages horizontal spacing, we can make powerful global updates to padding site-wide on all mobile responsive levels.
With one reserved class that manages horizontal spacing, we can make powerful global updates to padding site-wide on all mobile responsive levels.
page-padding
Our recommended structure for page padding is this:
page-wrapper
section-[section-identifer]
page-padding
container
...(e.g. components, elements, etc.)
There is flexibility!
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 class, we are always locked into page padding when using a container. Containers have a different core cause. To contain the content.
Decoupling padding will allow us to add page-padding as a parent of container, as a child of container, or as global add-on to container. Each can result in a different end result. Based on our website build, any of the three may be ideal.
Our official default that should be used for most sites is the structure above.
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 class, we are always locked into page padding when using a container. Containers have a different core cause. To contain the content.
Decoupling padding will allow us to add page-padding as a parent of container, as a child of container, or as global add-on to container. Each can result in a different end result. Based on our website build, any of the three may be ideal.
Our official default that should be used for most sites is the structure above.
container + optional max-
margin-left: auto
margin-right: auto
width: 100%
max-width: - (optional on container)
Primary use case is to create a unified global container for your content on the page. All, or most, elements on page content can go inside the container class.
If all, or most, of our page content follows the same max width on the page, we can optionally set a default max-width value on the container class. Max width is not required to be on the container and can be managed with the global max- add-on to establish a max-width.
In either case, if a container is with or without a default max-width, we can optionally use the max- classes.
Adding max-small , max-medium , max-large , etc. to container will give our core container different max-width variants without writing new unique combo classes or custom styles for each container.
Using max- add-ons can keep our container class clean so we maintain a powerful global class free of unique customizations.
If all, or most, of our page content follows the same max width on the page, we can optionally set a default max-width value on the container class. Max width is not required to be on the container and can be managed with the global max- add-on to establish a max-width.
In either case, if a container is with or without a default max-width, we can optionally use the max- classes.
Adding max-small , max-medium , max-large , etc. to container will give our core container different max-width variants without writing new unique combo classes or custom styles for each container.
Using max- add-ons can keep our container class clean so we maintain a powerful global class free of unique customizations.
value label
container
margin-left: auto margin-right: auto width: 100%
value label
max-full
value label
max-xxlarge
value label
max-xlarge
value label
max-large
value label
max-medium
value label
max-small
value label
max-xsmall
value label
max-xxsmall
A real life example of the flexibility
Below is an example page structure.
Notice how we describe a web page without seeing any visuals. Start to see the power of human naming.
We will call out all of the visual changes that we can make to each section by rearranging the order of our pre-written classes.
Notice how we describe a web page without seeing any visuals. Start to see the power of human naming.
We will call out all of the visual changes that we can make to each section by rearranging the order of our pre-written classes.
main-wrapper
section-home-header
page-padding
container
...(e.g. components, elements, etc.)
This is our homepage header. It has padding left and right. It has content inside a container with our default max-width.
section-home-about
page-padding
container max-medium
...(e.g. components, elements, etc.)
This is the homepage about section with the same details as the section above. In this section we add a max-medium class to container. This will adjust this containers max-width to the medium size, which is likely less than our default.
section-home-how-it-works
container max-full
background-layer background-blue
page-padding
container max-large
...(e.g. components, elements, etc.)
Here's where it gets interesting.
We added a second container outside of our page-padding. We added a new layer too!
The container is now given a max-full add-on. The section is 100% across the entire page. This is a full-width section!
We added a new div layer with background-layer and background-blue classes, which must give the section a background that is blue. Our background-layer expands the entire size of the parent, so our blue background expands the entire section.
Inside the background, we have our page-padding that gives us our universal left-right page padding.
Inside the page-padding , we have our page content container with a max width of large max-large. This is our 'how it works' section, so I can guess there is 'how it works' content inside.
This section has a full-width blue background and max-width content about 'how it works'.
We added a second container outside of our page-padding. We added a new layer too!
The container is now given a max-full add-on. The section is 100% across the entire page. This is a full-width section!
We added a new div layer with background-layer and background-blue classes, which must give the section a background that is blue. Our background-layer expands the entire size of the parent, so our blue background expands the entire section.
Inside the background, we have our page-padding that gives us our universal left-right page padding.
Inside the page-padding , we have our page content container with a max width of large max-large. This is our 'how it works' section, so I can guess there is 'how it works' content inside.
This section has a full-width blue background and max-width content about 'how it works'.
4pt system
Client-first uses a 4pt system. It allows to stay tight with our spacing between elements and sections.
Client-first comes in pixels by default.
If your design requires it, you can use a different sizing system. If you have no reason to change it, use our 4pt pixel-based system.
Can you use em? Yes, you can. If that's what's best for your build and handoff, then go for it. We find that some clients who want heavy control over Designer find the concept of em difficult. This creates a learning curve. It is up to you as the developer to deliver a clean and organized website. If you can do that with em, go for it.
Can you use vw? Yes, you can, but it's not recommend. There are a lot of hidden rules and 'gotchas' when using vw. We find this to be much more difficult for clients to work with. We only use vw in special circumstances on elements that need a vw sizing value.
Can you use em? Yes, you can. If that's what's best for your build and handoff, then go for it. We find that some clients who want heavy control over Designer find the concept of em difficult. This creates a learning curve. It is up to you as the developer to deliver a clean and organized website. If you can do that with em, go for it.
Can you use vw? Yes, you can, but it's not recommend. There are a lot of hidden rules and 'gotchas' when using vw. We find this to be much more difficult for clients to work with. We only use vw in special circumstances on elements that need a vw sizing value.
The values are the preferred sizings for all spacing and element sizing.
4px
8px
12px
16px
20px
24px
32px
40px
48px
56px
64px
72px
80px
96px
128px
160px
192px
256px
320px
384px
448px
512px
640px
768px
896px
1024px
1152px
1280px
1440px
1536px
1920px
2560px
Client-first suggests working these these values only. There is one exception. Using 14px for font-size is common and recommended when 16px is too large. 12px font-size is often too small for typography.
Typography
Typography organization keeps your brand professional
We have a global system for typography sizing, coloring, and customizations. We encourage the use of meaningful Heading tags applied to the tag itself.
When Heading sizes don't match with your page design, use heading- global classes.
Use the text- prefix global classes to add common customizations to text for your website.
When Heading sizes don't match with your page design, use heading- global classes.
Use the text- prefix global classes to add common customizations to text for your website.
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.
If you don't understand this, check out the "Classes" video on the top of this page. We show you how to apply to styles to the tag.
value label
H1
value label
H2
value label
H3
value label
H4
value label
H5
value label
H6
Styling text
It's recommended to have one H1 per page with H2, H3 placed throughout the page in a logical sense. Using the official Heading tags is important.
Use class prefix heading- to H1, H2, H3, or any other piece of text to make that text take the size and style of an official Heading style.
Use class prefix text- to smaller size text to make common global updates to text and content throughout the site. We use sub-prefixes to further classify some common text classes. For example, text-size- , text-weight , and text-align .
Use class prefix heading- to H1, H2, H3, or any other piece of text to make that text take the size and style of an official Heading style.
Use class prefix text- to smaller size text to make common global updates to text and content throughout the site. We use sub-prefixes to further classify some common text classes. For example, text-size- , text-weight , and text-align .
value label
heading-xlarge
value label
heading-large
value label
heading-medium
value label
Paragraph text - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
value label
text-size-large
value label
text-size-small
value label
text-size-tiny
value label
text-linkvalue label
text-quote
value label
text-italic
value label
text-strikethrough
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. Each time you make one, it's a new class you have to update when you want to change typography styles globally.
Font weight
Style font-weight css to make text or more less bold.
value label
text-weight-xbold
text extra bold
value label
text-weight-bold
text bold
value label
text-weight-semibold
text semibold
value label
text-weight-normal
text normal
value label
text-weight-light
text light
Text alignment
Style text-align css to make text, or other elements, align left, center, or right.
text-align-left
text-align-center
text-align-right
Buttons
Buttons should be as universal and global as possible.
By default in Client-first we give you three unique button classes. If there are three unique button classes. You can do this.
You can also use an add-on combo class to create button variations from the primary button.
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.
Tip: Use grid-row gap-small/medium/large as a wrapper to put the space between two buttons
By default in Client-first we give you three unique button classes. If there are three unique button classes. You can do this.
You can also use an add-on combo class to create button variations from the primary button.
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.
Tip: Use grid-row gap-small/medium/large as a wrapper to put the space between two buttons
Use add-on class .invert-colors when placing button on dark background
Spacing
Spacing system that keeps vertical and horizontal spacing global on your website.
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.
marg- and pad- on tablet and mobile for improved Designer search
We break one of our important rules! No abbreviations!! More abbreviations = higher learning curve. We're breaking it for this use case. For more powerful search! This concept is shown visually in the Classes walkthrough above.
The text explanation: By removing the 'in' in margin, we are able to improve our desktop building workflow when using the margin keyword. If we type in 'margin' you will be returned with desktop options only, which is usually what you need to access as you're building a website. The 'in' is going to show/hide our tablet and margin searching. This does not ruin our tablet or mobile margin searches. As we type 'tablet-marg' to we will return all of our tablet margin classes. The learning curve here is that if you type 'in' in your tablet/mobile margin, your search results don't show. Since the results show and hide immediately after typing the 'in', we think this abbreviation is appropriate.
The text explanation: By removing the 'in' in margin, we are able to improve our desktop building workflow when using the margin keyword. If we type in 'margin' you will be returned with desktop options only, which is usually what you need to access as you're building a website. The 'in' is going to show/hide our tablet and margin searching. This does not ruin our tablet or mobile margin searches. As we type 'tablet-marg' to we will return all of our tablet margin classes. The learning curve here is that if you type 'in' in your tablet/mobile margin, your search results don't show. Since the results show and hide immediately after typing the 'in', we think this abbreviation is appropriate.
What is margin? What is padding?
margin-... is the outer space of an element
padding-... is the inner space of an element
Vertical spacing between elements using margin
Global use of margin-bottom and margin-top
We like to use margin for spacing elements and components!
Margin bottom default
margin-bottom-
Global add-on
value label
margin-bottom-xsmall
value label
margin-bottom-small
value label
margin-bottom-medium
value label
margin-bottom-large
value label
margin-bottom-xlarge
Margin top default
margin-top-
Global add-on
margin-top-xsmall
value label
margin-top-small
value label
margin-top-medium
value label
margin-top-large
value label
margin-top-xlarge
value label
Tablet margin bottom
tablet-marg-bottom-
Global add-on
value label
tablet-marg-bottom-small
value label
tablet-marg-bottom-medium
value label
tablet-marg-bottom-large
value label
tablet-marg-bottom-xlarge
Tablet margin top
tablet-marg-top-
Global add-on
tablet-marg-top-small
value label
tablet-marg-top-medium
value label
tablet-marg-top-large
value label
tablet-marg-top-xlarge
value label
Mobile margin bottom
mobile-marg-bottom-
Global add-on
value label
mobile-marg-bottom-small
value label
mobile-marg-bottom-medium
value label
mobile-marg-bottom-large
value label
mobile-marg-bottom-xlarge
Mobile margin top
mobile-marg-top-
Global add-on
mobile-marg-top-small
value label
mobile-marg-top-medium
value label
mobile-marg-top-large
value label
mobile-marg-top-xlarge
value label
Horizontal spacing between elements using margin
Global use of margin-left and margin-right
We like to use margin for spacing elements and components!
Margin left default
margin-left-
Global add-on
value label
margin-left-xsmall
value label
margin-left-small
value label
margin-left-medium
value label
margin-left-large
value label
margin-left-xlarge
Margin right default
margin-right-
Global add-on
value label
margin-right-xsmall
element
value label
margin-right-small
element
value label
margin-right-medium
element
value label
margin-right-large
element
value label
margin-right-xlarge
element
Tablet margin left
tablet-marg-left-
Global add-on
value label
tablet-marg-left-small
value label
tablet-marg-left-medium
value label
tablet-marg-left-large
Tablet margin right
tablet-marg-right-
Global add-on
value label
tablet-marg-right-small
element
value label
tablet-marg-right-medium
element
value label
tablet-marg-right-large
element
Mobile margin left
mobile-marg-left-
Global add-on
value label
mobile-marg-left-small
value label
mobile-marg-left-medium
value label
mobile-marg-left-large
Mobile margin right
mobile-marg-right-
Global add-on
value label
mobile-marg-right-small
element
value label
mobile-marg-right-medium
element
value label
mobile-marg-right-large
element
Equal spacing in sections using padding
Global use of section padding horizontally and vertically
We like to use padding for spacing sections and sub-sections!
Padding equal default
padding-
Equal padding around the element. The same value is applied to all 4 sides.
value label
padding-small
value label
padding-medium
value label
padding-large
value label
padding-xlarge
Tablet padding equal
tablet-pad-
Equal padding around the element at tablet responsive level. The same value is applied to all 4 sides.
value label
tablet-pad-small
value label
tablet-pad-medium
value label
tablet-pad-large
value label
tablet-pad-xlarge
Mobile padding equal
mobile-pad-
Equal padding around the element at mobile responsive level. The same value is applied to all 4 sides.
value label
mobile-pad-small
value label
mobile-pad-medium
value label
mobile-pad-large
value label
mobile-pad-xlarge
Padding vertical equal default
padding-vertical-
Padding-top and padding-bottom is applied on the element. The same value is added to the top and bottom.
value label
padding-vertical-small
value label
padding-vertical-medium
value label
padding-vertical-large
value label
padding-vertical-xlarge
Tablet padding vertical
tablet-pad-vertical-
Equal padding around the element at tablet responsive level. The same value is applied to all 4 sides.
value label
tablet-pad-vertical-small
value label
tablet-pad-vertical-medium
value label
tablet-pad-vertical-large
value label
tablet-pad-vertical-xlarge
Mobile padding vertical
mobile-pad-vertical-
Equal padding around the element at mobile responsive level. The same value is applied to all 4 sides.
value label
mobile-pad-vertical-small
value label
mobile-pad-vertical-medium
value label
mobile-pad-vertical-large
value label
mobile-pad-vertical-xlarge
Padding horizontal equal default
padding-horizontal-
Padding-left and padding-right is applied on the element. The same value is added to the left and right side.
value label
padding-horizontal-small
value label
padding-horizontal-medium
value label
padding-horizontal-large
value label
padding-horizontal-xlarge
Tablet padding horizontal
tablet-pad-horizontal-
Equal padding around the element at tablet responsive level. The same value is applied to all 4 sides.
value label
tablet-pad-horizontal-small
value label
tablet-pad-horizontal-medium
value label
tablet-pad-horizontal-large
Mobile padding horizontal
mobile-pad-horizontal-
Equal padding around the element at mobile responsive level. The same value is applied to all 4 sides.
value label
mobile-pad-horizontal-small
value label
mobile-pad-horizontal-medium
value label
mobile-pad-horizontal-large
Remove all spacing
Sets margins and paddings to 0. Useful for removing native Webflow component spacing.
value label
spacing-clean
Colors
Use colors globally
If there are colors that should be globally managed, keep them in a global class system. In Client-first we use classes to change the color and background-color CSS properties. This same mentality can be used on any element where it makes sense to have a globally managed color.
Text color
Add to sections, containers, and elements to change the text color.
We have the standard black, white, grey colors pre-written into this system. Add more of these classes with your project-specific colors to easily switch between hex values on your site.
We have the standard black, white, grey colors pre-written into this system. Add more of these classes with your project-specific colors to easily switch between hex values on your site.
text-color-white
text-color-grey
text-color-black
text-muted - adds opacity to text
Background color add-ons
Add to sections, containers, and elements to change the background color.
background-white
background-grey
background-black
Flex and grids
Use CSS Flexbox and CSS Grid to build layouts on your website!
We do not recommend a fully global managed flex or grid class system. We encourage custom class creation for flexbox and grid throughout your build.
Why don't we use a global layout class naming convention?
It increases the learning curve on our website. We don’t want to force anyone to learn our flex or grid system. We don’t want to teach abbreviations or industry-terminology.
For example, we don’t want to see flex-a-l-j-c flex-mobile-a-c. Is there a reason to update a ‘flex align left justify center’ style globally? Do you need to make a site-wide change to this class? Most likely not.
Forbid we have to make a unique customization as a combo class on top of your global system!
flex-a-l-j-c flex-mobile-a-c how-it-works-custom. No!
We want our system to be flexible and something anyone can update. Global flex and grid systems require many classes, many add-ons, many globals, and the use of unnecessary combo classes. That’s why we aren’t using it in our system. It’s confusing and doesn’t offer much value for making global updates.
We can use the power of global classes if we have recurring grids or flex sections that would benefit from being updated universally. We do not want to build our entire grid/flex system out of global classes.
Instead, create a custom class when you’re designing a new grid or flex element. This will allow your clients, or any new developer, make changes to layouts without understanding the global system to build it.
Below we have built a really simple universal grid system for this Client-first Style System build. This grid system works for this website project and helps us manage vertical and horizontal spacing of our content on a global level.
This grid system has a total of 10 classes with no mobile responsive add-ons. The goal of this grid setup is to help us build really simple and universally spaced content throughout this build. This mini system should not be used for complex layouts and should not have many add-on classes added to it.
It’s used for our simple documentation pages. We use grid-1-col with an optional .gap-small/medium/large everywhere in this documentation. It allows us to space elements vertically without requiring custom classes or hundreds of .margin-top- classes on individual elements.
When we get to the homepage of this project, we have more custom layouts, elements, and requirements. Therefore, we do not use this simple global .grid- system. Instead we use custom classes for full design control and future edits.
IMPORTANT:
These grids are in here as an example. If this example doesn't fit well in your build, don't use it. You can completely remove this grid section. You can never touch css grid and switch entirely to flex. You can keep css grid and change the naming and organization based on the design.
See this Grid section and .grid- naming examples as more of a guide to building your own naming system based on your website requirements. For example, team-list_grid-1-col with css grid styles to create the grid layout. You can also go full custom with your naming, team-list_people-content. The use of 'grid' or 'flex' is not required anywhere in your build.
It increases the learning curve on our website. We don’t want to force anyone to learn our flex or grid system. We don’t want to teach abbreviations or industry-terminology.
For example, we don’t want to see flex-a-l-j-c flex-mobile-a-c. Is there a reason to update a ‘flex align left justify center’ style globally? Do you need to make a site-wide change to this class? Most likely not.
Forbid we have to make a unique customization as a combo class on top of your global system!
flex-a-l-j-c flex-mobile-a-c how-it-works-custom. No!
We want our system to be flexible and something anyone can update. Global flex and grid systems require many classes, many add-ons, many globals, and the use of unnecessary combo classes. That’s why we aren’t using it in our system. It’s confusing and doesn’t offer much value for making global updates.
We can use the power of global classes if we have recurring grids or flex sections that would benefit from being updated universally. We do not want to build our entire grid/flex system out of global classes.
Instead, create a custom class when you’re designing a new grid or flex element. This will allow your clients, or any new developer, make changes to layouts without understanding the global system to build it.
Below we have built a really simple universal grid system for this Client-first Style System build. This grid system works for this website project and helps us manage vertical and horizontal spacing of our content on a global level.
This grid system has a total of 10 classes with no mobile responsive add-ons. The goal of this grid setup is to help us build really simple and universally spaced content throughout this build. This mini system should not be used for complex layouts and should not have many add-on classes added to it.
It’s used for our simple documentation pages. We use grid-1-col with an optional .gap-small/medium/large everywhere in this documentation. It allows us to space elements vertically without requiring custom classes or hundreds of .margin-top- classes on individual elements.
When we get to the homepage of this project, we have more custom layouts, elements, and requirements. Therefore, we do not use this simple global .grid- system. Instead we use custom classes for full design control and future edits.
IMPORTANT:
These grids are in here as an example. If this example doesn't fit well in your build, don't use it. You can completely remove this grid section. You can never touch css grid and switch entirely to flex. You can keep css grid and change the naming and organization based on the design.
See this Grid section and .grid- naming examples as more of a guide to building your own naming system based on your website requirements. For example, team-list_grid-1-col with css grid styles to create the grid layout. You can also go full custom with your naming, team-list_people-content. The use of 'grid' or 'flex' is not required anywhere in your build.
Grid columns
Recurring simple grid layouts
grid-1-col
grid-2-col
grid-3-col
grid-4-col
Grid rows
Create horizontal spacing between items.
grid-row
item
item
Add-ons to 'Grid rows'
Add these classes in addition to the grid-row classes above for flexible spacing.
grid-row gap-small
item
item
grid-row gap-medium
item
item
grid-row gap-large
item
item
grid-row gap-xlarge
item
item
Simple row and column (flex)
row
item
item
col
item
item
Responsive visibility
Simple list of show/hide classes for each responsive level
Show and hide elements by screensize
Hide classes to set display:none
hide - hide on all devices
hide-tablet - hide starting from tablet resolution
hide-landscape - hide starting from landscape resolution
hide-mobile - hide starting from mobile resolution
Show classes to set display:block
show - show on all devices
show-tablet - display starting from tablet resolution
show-landscape - display starting from landscape resolution
show-mobile - display starting from mobile resolution
Icons
Icon classes
icon-xsmall
icon-small
icon-medium
icon-large
icon-xlarge
icon-1x1-xsmall
icon-1x1-small
icon-1x1-medium
icon-1x1-large
icon-1x1-xlarge
Inline 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.
Webflow Elements
Forms, buttons, dropdown, tabs, slider, and more.
Here are all of the components we find inside Webflow Designer. The classes applied to these elements show the Client-first recommended naming for these elements.
Forms
Webflow native form elements
Slider
Tabs
Dropdown
Dropdown
Lightbox
Search
Utility classes
Special add-ons to bring unique components to your site.
Built for developers. This section requires Webflow and CSS knowledge.
z-1 - Bring an element closer on the z-index. Sets z-index to 1.
z-2 - Bring an element closer on the z-index. Sets z-index to 2.
full-size - No maximum width on a container. Sets max-width to none.
full-size-tablet - full-size on tablet. Sets max-width to none on tablet.
full-size-mobile - full-size on mobile. Sets max-width to none on mobile.
align-center - Centers a container on max-xxx the screen. Sets margin left and right to auto.
div-square - Creates and maintains a 1:1 dimension of a div. CSS magic.
layer - Add to div to make it expand the entire size of the parent element. Make sure the parent div has 'position: relative'.
clickable-off - Prevents all click and hover interaction with an element. Sets pointer-events to none.
clickable-on - Enables all click and hover interaction with an element. Sets pointer-events to auto.
crop - Prevents overflow of a container. Sets overflow to hidden.
Questions
ALL comments, suggestions, and notes about this Style System are welcomed. Thank you.
Please post all feedback on https://client-first-secret-beta-feedback.webflow.io/