Blog/WF Weekly/WF Weekly - Episode 23

WF Weekly#WF Weekly

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.

Topics

#WF Weekly

Written by

Julian Galluzzo & Duncan Hamra

Contributors

Contents

Finding Flowkit Documentation:
Hyphens & Underscores in Flowkit:
Understanding Class Types:
Utility Classes & Responsive Variants:
Combo Classes & Modifiers:
Building a Hero Section with Flowkit:
Building a Tabs Section with Flowkit:
Flowkit vs. Client-First: Final Thoughts:

Share

Explore Memberstack

All Features
Customer Showcase
Templates
Find Experts
Pricing
Help Center

Related Articles

WF Weekly - Episode 29

Discover how a leading low-code dev house is navigating the AI revolution in web app development.

Julian Galluzzo

How Flow Ninja Became the Biggest Webflow Agency in the World

Read here how did Uros Mikic start Flow Ninja with nothing but determination and a love for building and turn it into a wildly successful company.

Neal

WF Weekly - Episode 28

Learn how to overcome integration issues with Webflow components and create production-ready apps that leverage your CMS data for seamless functionality.

Julian Galluzzo

Product

Full Feature List
User Accounts
Gated Content
Secure Payments
API & Integrations
Data Tables
Memberstack & Webflow
Memberstack & Claude Code
Memberstack & WordPress

Create a new account
2.0 Log in
1.0 Log in
Pricing

Learn about Memberstack

Showcase
Testimonials
Why Memberstack
Memberstack vs Outseta
Memberstack vs Memberspace
Memberstack vs Webflow Memberships

Company

About
Careers
Changelog
Partnerships^(email)
Contact Us^(email)
X
LinkedIn
"Do Not Sell My Data" Promise

Resources

Vibe Coding
Templates
Components
MemberScripts
Data Attributes
Find Experts
Hiring Guide
Webflow Slack Community
WordPress Slack Community
Support Forum
Help Center
Blog
llms.txt (for AI)
llms-full.txt (for AI)

AICPA
SOC

SOC 2 TYPE 1

CERTIFIED

GDPR

COMPLIANT

CCPA

COMPLIANT

Privacy Policy Terms of Service Cookie Policy Security Policy

© Memberstack Inc. 2018 - 2025. All rights reserved.