Utility class systems

Intro

Client-First cloneable includes utility classes and styles that help us start any Webflow project.

These classes are not specific to any website, design, style, or layout. Utility classes manage important CSS properties used throughout many pages, sections, or elements.

Some utility classes allow us to make powerful global changes to elements throughout the build. For example, a class that applies universal horizontal padding.

Some classes are for improved workflow. For example, a class that applies display: none.

All utility styles inside Client-First are optional. If the build requires us to organize spacing differently or use a unique structure for the outer page, we may do it. We find that most projects work very well with the utility classes inside Client-First.

Most important utility systems

Client-First comes with three primary global utility class systems: core structure, typography, and spacing.

We have identified these as our most essential global-use classes when building in Webflow. Each global utility class system has a dedicated strategy page to explain how we use it.

Structure

Defined and flexible Core Structure we can use on all or most pages.

Global horizontal padding

Global horizontal padding manages the left and right padding of a page's content.

• padding-global

Values are managed in the Layout collection in the Variables panel.

Container size

Global max width values that serve as ^max-width containers for content.

• ‍container-large
• container-medium
• container-small

Values are managed in the Sizes collection in the Variables panel.

Learn more about core structure in Core structure strategy.

Section padding

Section padding manages a global vertical spacing system for sections.

padding-section-small
padding-section-medium
padding-section-large

By default, section padding is applied directly to section_[section-identifier] through variables. Use these classes when padding is kept as a separate layer inside the section. Learn more in Core Structure strategy.

padding-section-[direction]-[size] applies section padding to a single direction.

padding-section-top-small
padding-section-top-medium
padding-section-top-large
padding-section-bottom-small
padding-section-bottom-medium
padding-section-bottom-large

Section padding uses its own size values, separate from the margin and padding scale. padding-section-small and padding-small are not the same value.

Values are managed in the Layout collection in the Variables panel.

Typography

Client-First includes a global utility system for headings, typography sizing, coloring, and customizations.

HTML tags

We always use the HTML tag to define default Heading styles.

• ^body
• ^H1
• ^H2
• ^H3
• ^H4
• ^H5
• ^H6

Heading style swich

Change the default Heading style.

Use class prefix heading-style- on ^H1, ^H2, ^H3, or any other piece of text to change the text to a specific H heading size. For example, if we have an ^H2 that should be styled like an ^H3, we can use ^H2 for SEO purposes and apply heading-style-h3 to the element.

• ‍heading-style-h1
• heading-style-h2
• heading-style-h3
• heading-style-h4
• heading-style-h5
• heading-style-h6

Text size

Use class prefix text-size- on a text element to change the size of the text.

• ‍text-size-large
• text-size-medium
• text-size-regular
• text-size-small
• text-size-tiny

Values are managed in the Typography collection in the Variables panel.

Text style

Use class prefix text-style- on a text element to change the style of the text.

• text-style-allcaps
• text-style-balance
• text-style-pretty
• text-style-italic
• text-style-link
• text-style-muted
• text-style-nowrap
• text-style-quote
• text-style-strikethrough
• text-style-1line
• text-style-2lines
• text-style-3lines

Text weight

Use class prefix text-weight- on a text element to change the weight of the text.

• ‍text-weight-xbold
• text-weight-bold
• text-weight-semibold
• text-weight-medium
• text-weight-normal
• text-weight-light

Text alignment

Use class prefix text-align- on a text element to change the alignment of the text.

• ‍text-align-left
• text-align-center
• text-align-right

Text color

Use class prefix text-color- on a text element to change the color of the text.

• ‍text-color-primary
• text-color-secondary
• text-color-alternate

Values are managed in the Theme collection in the Variables panel.

Buttons

Use class prefix button- to use a button style.

• ‍button
• button is-secondary
• button is-text

Learn more about typography in Typography strategy.

Spacing

Spacing system that keeps vertical and horizontal spacing global on our website.

To learn more about margin and padding classes, review the Spacing strategy page.

Margin and padding size

margin-[size] applies margin to all sides. padding-[size] applies padding to all sides.

margin-0 ^0rem
margin-xxtiny ^0.25rem
margin-xtiny ^0.5rem
margin-tiny ^0.75rem
margin-xxsmall ^1rem
margin-xsmall ^1.25rem
margin-small ^1.5rem
margin-medium ^2rem
margin-large ^3rem
margin-xlarge ^4rem
margin-xxlarge ^5rem
margin-huge ^6rem
margin-xhuge ^8rem
margin-xxhuge ^12rem

padding-0 ^0rem
padding-xxtiny ^0.25rem
padding-xtiny ^0.5rem
padding-tiny ^0.75rem
padding-xxsmall ^1rem
padding-xsmall ^1.25rem
padding-small ^1.5rem
padding-medium ^2rem
padding-large ^3rem
padding-xlarge ^4rem
padding-xxlarge ^5rem
padding-huge ^6rem
padding-xhuge ^8rem
padding-xxhuge ^12rem

Margin and padding direction

margin-[direction]-[size] and padding-[direction]-[size] apply spacing to a single or opposite direction. Here are some example classes:

margin-top-small
margin-bottom-small
margin-left-small
margin-right-small
margin-horizontal-small
margin-vertical-small

padding-top-small
padding-bottom-small
padding-left-small
padding-right-small
padding-horizontal-small
padding-vertical-small

Every size in the scale above is available for each direction.

How it works:

Values are managed in the Layout collection in the Variables panel.

Gap

gap-[size] applies gap to a flex or grid parent.

gap-0 through gap-xxhuge, using the same size scale.

Values are managed in the Layout collection in the Variables panel.

Remove all spacing

Sets all ^margin and ^padding to 0. Useful for removing native Webflow component spacing.

• ‍spacing-clean

Learn more about spacing in Spacing strategy.

Useful utility systems

Utility classes we like to use in most of our projects to build faster.

Responsive hide

Show and hide elements by screen size.

• ‍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

Inherit

Inherit classes pass a value down from the parent element instead of setting their own.

text-color-inherit sets ^{color: inherit}
text-size-inherit sets ^{font-size: inherit}
text-weight-inherit sets ^{font-weight: inherit}
text-decoration-inherit sets ^{text-decoration: inherit}
border-radius-inherit sets ^{border-radius: inherit}

Use case: text, a link, or a span that should carry its parent's styling instead of its own.

Grid

Grid classes create responsive columns that adjust to the available space.

Auto-fit collapses empty columns so the remaining ones stretch to fill the row. Auto-fill keeps empty columns in place.

grid-autofit uses Webflow's native auto-fit property.
grid-autofit-css applies auto-fit through custom CSS, for anyone who prefers to control it in code.
grid-autofit-[size] sets the minimum column width for auto-fit.
grid-autofill-css applies auto-fill. Webflow does not support auto-fill natively, so this class only exists as a custom CSS version.
grid-autofill-[size] sets the minimum column width for auto-fill.
grid-span-full forces a grid item to stretch across the entire width of its grid parent.

Column width sizes are managed in the Sizes collection in the Variables panel.

It is ideal to apply a custom class first, then add the grid class on top as a combo.

Display inline and inline flex

Apply display properties as utility classes.

display-inline-flex sets ^{display: inline-flex} at the base desktop breakpoint.
display-inline sets ^{display: inline}.

Use case: display: flex causes elements to take up 100% of the space by default, which makes it difficult to use flexbox for buttons. display: inline-flex allows elements to behave as inline while keeping flex capabilities inside them.

Display contents

display-contents sets ^{display: contents}.

Use case: removes the element's own box from the layout while keeping its children in place. The children become direct items of the parent flex or grid, so a wrapper div does not break the parent's layout.

Max width

Add ^max-width to any element on the page.

Use container- classes for the primary outer content max width. Use max-width- classes for max width use cases nested within the container-.

• ‍max-width-xxlarge _80rem
• max-width-xlarge _64rem
• max-width-large _48rem
• max-width-medium _32rem
• max-width-small _20rem
• max-width-xsmall _16rem
• max-width-xxsmall _12rem

Values are managed in the Sizes collection in the Variables panel.

Max width full

Sets ^{max-width: none}.

• ‍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

Icon sizes

Sets a height or height and width of icons. Icon 1x1 sets both width and height values. Useful for social icons, company logos, footer assets, etc.

• ‍icon-height-small
• icon-height-medium
• icon-height-large
• icon-1x1-small
• icon-1x1-medium
• icon-1x1-large

Values are managed in the Sizes collection in the Variables panel.

Background colors

Background colors help apply a recurring ^{background-color} CSS property to elements in our project.

• ‍background-color-primary
• background-color-secondary
• background-color-tertiary
• background-color-alternate

Values are managed in the Theme collection in the Variables panel.

Useful utilities to build with

More advanced uses. Not required to use.

• ‍z-index-1 - sets ^{z-index: 1}
• z-index-2 - sets ^{z-index: 2}
• align-center - sets ^margin-left and ^margin-right to ^auto, centers an element inside its parent div.
• pointer-events-none - sets ^{pointer-events: none}, which prevents all click and hover interaction with an element.
• pointer-events-auto - sets ^{pointer-events: auto}, which enables all click and hover interaction with an element

• overflow-hidden - sets ^{overflow: hidden}
• overflow-scroll - sets ^{overflow: scroll}
• overflow-auto - sets ^{overflow: auto}
• overflow-clip sets ^{overflow: clip}
• overflow-visible sets ^{overflow: visible}

• disable-select sets ^{user-select: none}, which prevents text from being selected
• text-area-vertical sets ^{resize: vertical} on a text area, so it can only be resized up and down
• aspect-ratio-square - sets ^{aspect-ratio: 1 / 1}
• aspect-ratio-portrait - sets ^{aspect-ratio: 2 / 3}
• aspect-ratio-landscape - sets ^{aspect-ratio: 3 / 2}
• aspect-ratio-widescreen - sets ^{aspect-ratio: 16 / 9}

Global embed

Client-First comes with a Global / Styles component that holds our global site-wide custom CSS. This component should go on every page of the project.

The component contains two embeds.

global-styles_default holds the CSS that comes with the Client-First cloneable.
global-styles_custom is where we add CSS specific to our project.

The split is for organization. Keeping default and custom code separate makes it easy to see what came with Client-First and what we added.

Custom CSS styles are best implemented through the native embed block — not Page Settings or Site Settings custom code.

Styles are added to an embed so we can see the CSS inside Designer

The ability to see our CSS inside the Designer canvas is the primary reason we use the component instead of Site settings.

When the code is in Site Settings, we can only see the CSS on the published site.

When the CSS styles are in an embed inside Designer, we can see these styles visually while we work inside Designer. In most cases, it's preferred to see custom CSS styles directly inside Designer.

Update a few Webflow default styles

We have several styles inside the component that overwrite default Webflow styles, which we prefer not to have in our project.

Built for adjustments and updates

The Client-First utility styles and the global embed styles can be changed based on our project.

The cloneable starter project includes comments for each style inside global-styles_default. If you are unsure what the custom CSS does, leave it and do not delete it. Each line in the default embed is there for a reason and is likely beneficial to the project.

Learn more about the Global embed

The Global embed page explains each CSS snippet inside global-styles_default. Understand each snippet's use case and why it's part of the Client-First cloneable.

‍