Features / Client-First naming

Client-First class names, automatically

If your Webflow projects use the Finsweet Client-First convention, enable Client-First naming. Then the generated classes use underscores for the component structure (hero_heading, pricing_card), not dashes.

Add to Chrome, free →See the demo
Selectorhero-cardis-largepadding32px 24pxdisplaygrid:hoverbg #146ef5
[IN]1 section, 2 name styles
Default:       hero  hero-heading  hero-button
Client-First:  hero  hero_heading  hero_button
[OUT]What you get in Webflow
  • Generated names use the pattern component_element
  • FlowPaste keeps your own class names as you wrote them
  • FlowPaste names combo classes for the change that they make (is-light, is-large)

Steps

  1. Open the FlowPaste panel.
  2. Select Client-First class names.
  3. Click Convert & copy.

Limits

  • FlowPaste does not add Client-First utility classes (padding-global and others) automatically.

Questions

Is FlowPaste affiliated with Finsweet?

No. Client-First is the class name system of Finsweet. FlowPaste only uses the Client-First pattern for generated names.

Try it with your own code.

Free: 3 conversions each day. You do not need a credit card.

Add to Chrome, free →