Class Folder Structure

In Client-First, classes are organized into "folders" — logical groupings based on naming prefixes. This makes large Webflow projects easy to navigate and maintain.

The Two Types of Classes

Custom Classes (Component-specific)

Custom classes describe a specific component and use underscores as separators:

hero_heading
hero_paragraph
navbar_logo
footer_link
cta_button

The part before the underscore is the component name (the folder), and the part after is the element name.

Utility Classes (Reusable)

Utility classes apply reusable styles and use hyphens:

padding-section-large
margin-top-medium
text-color-white
max-width-large
text-size-medium

These can be applied to any element across the site.

Folder Organization

Think of your classes as folders in a file system:

📁 hero
  ├── hero_wrapper
  ├── hero_heading
  ├── hero_paragraph
  └── hero_button

📁 features
  ├── features_grid
  ├── features_card
  └── features_icon

📁 padding (utility)
  ├── padding-section-large
  ├── padding-section-medium
  └── padding-section-small

📁 text-size (utility)
  ├── text-size-large
  ├── text-size-medium
  └── text-size-small

What You'll Build

Create a page with at least two distinct sections, each using properly organized class names:

1. Custom component classes with underscore convention
2. Utility classes with hyphen convention
3. Consistent lowercase naming throughout

Instructions

1. Create Two Sections

Build at least two sections (e.g., a hero and a features section). Each section should have its own component namespace.

2. Name Your Custom Classes

For each section, prefix all classes with the component name:

• Hero section: hero_wrapper, hero_heading, hero_text
• Features section: features_grid, features_card, features_title

3. Add Utility Classes

Apply utility classes for spacing and typography:

• padding-section-large on your section padding wrappers
• margin-top-medium where you need spacing
• text-size-large for heading sizes

4. Keep It Consistent

• All lowercase
• Underscores for custom classes only
• Hyphens for utility classes only
• No default Webflow names

5. Publish and Submit

Publish your site and submit the URL below.

Common Mistakes

• Using the same class for different purposes across sections
• Mixing underscores and hyphens in the same class
• Creating utility classes that are too specific (like hero-padding instead of padding-section-large)