General

WF Weekly - Episode 23

Curious about Webflow's native class naming framework, Flowkit? Join me as I explore Flowkit, compare it to Client-First, and attempt to build a page from scratch.

Julian Galluzzo & Duncan Hamra·Contributors
|
November 14, 2025·1 min read

What is Flowkit?:

__wf_reserved_inherit
Curious about Webflow's native class naming framework, Flowkit? Join me as I explore Flowkit, compare it to Client-First, and attempt to build a page from scratch to see if it's the right choice for your next Webflow project. Discover Flowkit, Webflow's powerful class naming framework, in this in-depth review and tutorial. We dive into the documentation, demystify its structure, and compare it head-to-head with the popular Client-First methodology. Learn how Flowkit utilizes hyphens, underscores, utility classes, and combo classes for efficient Webflow development.Watch as I attempt to build a hero section and a tabs component using Flowkit's principles. This video breaks down how Flowkit handles responsive design, spacing, and component styling, providing practical insights into its implementation. See the nuances of its class structure and how it aims to streamline your Webflow workflow.Ultimately, we weigh the pros and cons of Flowkit versus Client-First, focusing on developer experience, site optimization, and technical advantages. If you're a Webflow designer, freelancer, or agency owner looking to build more lightweight and optimized sites, this comparison will help you decide if Flowkit is your next go-to framework.

Finding Flowkit Documentation:

__wf_reserved_inherit
Now, I would love to have like some templates, a starter project or something that I can kind of dive into and see how it works because, you know, if you know me, you know I don't like reading or education for that matter, unless it's me testing something on my own.

Hyphens & Underscores in Flowkit:

__wf_reserved_inherit
Anyway, so here we are in the documentation. And what it gets into right off the bat is how to use hyphens and underscores. And I will say it is quite similar to client first in that regard, which for me is actually a great thing because it means I don't need to learn anything new.

Understanding Class Types:

__wf_reserved_inherit
So for example, if you have like nav, you would just have nav and then your logo would have the class nav logo to indicate like a folder that this logo is a part of the nav. Same thing with card body, footer, link, whatever it may be. And along with that, it says connecting utility properties with their values.

Utility Classes & Responsive Variants:

__wf_reserved_inherit
So now we have different class types. So there's four main types of classes. Component, utility, combo, responsive modifiers. So those things we all pretty much went over already.

Combo Classes & Modifiers:

__wf_reserved_inherit
Okay, so now we have an explanation for how combo classes worked...That is very similar to client first. That makes perfect sense to me.

Building a Hero Section with Flowkit:

__wf_reserved_inherit
Off the bat, I will say this clearly uses more utility classes, but it doesn't feel so foreign to me as a client first user, which is great. So, now let's head on over here. And like I said, I can't find a single starter project like at all. So, what I'm using is this AI generated site that I made in last week's episode as my starter.

Building a Tabs Section with Flowkit:

__wf_reserved_inherit
And then I'm going to add in a section. I'm going to call this section as all the sections are called in Flowkit, which I'm a big fan of. And then we'll do is accent secondary. Sure. You know what? I was confused when reading the docs about all this like accent, secondary, tertiary stuff. So, let's go ahead and use it and see what happens to us.

Flowkit vs. Client-First: Final Thoughts:

__wf_reserved_inherit
I've been using client first for years and to use anything else just feels like scary to me because I'm just so used to client first. But my thoughts on Flowkit are this is a much more standard. Like this is how you would when you're just writing CSS, much much closer to how you would write CSS. It's also lightweight, so there's a lot less combo classes and there's a lot less nested divs. From a technical point of view, I would say that this is definitely better than client first.

Written by

Julian Galluzzo & Duncan Hamra

Contributors

Related Articles

General

What is Vibe Coding? Benefits and Risks Explained

Vibe Coding offers major benefits including speed, accessibility for non-coders, and rapid experimentation, but introduces risks around security, maintainability, and debugging.

Neal

Dec 15, 2025

General

WF Weekly - Episode 26

Discover how Webflow's new beta AI tool, AppGen, revolutionizes coding custom features directly in your Webflow site. In this hands-on tutorial, I build an AI-powered financial glossary for my production budgeting tool website, tackling real challenges like API setup and component integration to del

Julian Galluzzo

Dec 12, 2025

General

WF Weekly - Episode 25

Discover the latest updates to Webflow MCP with Claude 4.5 Opus in this hands-on test!

Julian Galluzzo

Dec 12, 2025