Used by 50,000+ Teams & Agencies
$128,000,000+ earned
Free until launch. No credit card needed.
Used by 50,000+ Teams & Agencies
$168,000,000+ earned
Vibe Code
with Memberstack →
Memberstack Blog

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.

Try Memberstack For Free!
November 14, 2025
0
Views
TABLE OF CONTENTS
Julian Galluzzo & Duncan Hamra

What is Flowkit?:

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:

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:

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:

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:

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:

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:

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:

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:

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.

Add memberships to your project in minutes.

Learn more

Over 200 free cloneable Webflow components. No sign up needed.

View Library

Add memberships to your React project in minutes.

Get started

Related Webflow Components

Clone over 250 free Webflow components - no registration needed!
No items found.
What is Memberstack?

Auth & payments for Webflow sites

Add logins, subscriptions, gated content, and more to your Webflow site - easy, and fully customizable.

Learn more
Start building

Try out Memberstack & discover what you can build!

Memberstack is 100% free until you're ready to launch - so, what are you waiting for? Create your first app and start building today.

Start free trial