client-first-webflow

---
name: client-first-webflow
description: Applies, teaches and audits Finsweet's Client-First naming convention and page structure for Webflow projects. ALWAYS use when the user mentions "Client-First", "Finsweet", class naming in Webflow, "cum denumesc clasa", "structura paginii în Webflow", "utility classes", "combo class", "is-", "section_", "padding-global", "container-large", reviews a Webflow class list or Navigator structure, or plans a new Webflow build and needs a class system. Teaching mode explains the why, step by step.
---

# Client-First for Webflow

Always note: this reflects Client-First as generally documented by Finsweet; for edge cases, verify against the official docs at finsweet.com/client-first/docs.

## Core ideas (explain these when teaching)
1. **Names describe purpose, in plain English**, so a client or another dev understands them.
2. **Two kinds of classes:**
   - **Custom classes** — use an **underscore** to create a "folder": `folder_element`. Example: `header_content`, `team_list`, `team_item`, `footer_link-list`. Use one underscore only; dashes separate words inside the element name.
   - **Utility classes** — **no underscore**, dashes only; reusable across the whole site: `padding-global`, `container-large`, `text-size-large`, `heading-style-h2`, `margin-bottom`, `margin-medium`, `max-width-large`, `hide-mobile-landscape`.
3. **Combo classes use the `is-` prefix** for variants/states: `button is-secondary`, `button is-small`, `nav_link is-active`.
4. **Sizes in rem**, consistent scale (tiny/xxsmall … large/xlarge/xxlarge) instead of random pixel values.

## Global page structure
```
page-wrapper
  (global styles embed / navbar)
  main-wrapper
    section_[name]            ← custom, e.g. section_hero
      padding-global          ← horizontal page padding
        container-large       ← max-width
          padding-section-large  ← vertical section spacing
            [name]_component  ← e.g. hero_component, then hero_content, hero_image-wrapper…
  footer
```

## Spacing system
- Direction + size as **two utility classes**: `margin-bottom margin-medium`, `padding-top padding-small`.
- Vertical section rhythm via `padding-section-small/medium/large`.
- Avoid adding margins directly on custom classes when a utility does the job; keep custom classes for layout/visual specifics.

## Typography
`heading-style-h1…h6` (visual style decoupled from the semantic tag), `text-size-*`, `text-weight-*`, `text-style-*`, `text-color-*`, `text-align-*`.

## Common keywords for custom classes
`_component` (outermost wrapper of a component), `_wrapper`, `_list` / `_item` (CMS collections), `_content`, `_image`, `_layout`, `_grid`.

## Modes
- **Teach:** introduce one concept at a time with a tiny example, then a quick exercise ("how would you name the card grid in a blog section?") and feedback.
- **Name it:** user describes a section/element → return the Navigator tree with class names and which are custom vs utility.
- **Audit:** user pastes class names or a structure → table of `current name | issue | suggested name`, grouped by severity: breaks convention / inconsistent / fine. Flag deep nesting, pixel-based one-off classes, variants made as new classes instead of `is-` combos, and names describing appearance (`blue-box`) instead of purpose.
- **Plan a build:** from a sitemap/Figma description → list of sections, components and the utility classes needed, before touching Webflow.

## Rules
- Prefer reuse of utilities over new custom classes; prefer a new custom class over stacking many combos.
- Keep names short but meaningful; avoid abbreviations a client wouldn't understand.
- When unsure whether something is official Client-First, say so instead of presenting it as a rule.