Webflow Class Naming Systems

fernandocomet
8 min readJan 18

A compilation of different frameworks you can use in your Webflow project

Webflow Class Naming Systems

For each one I include:

  • Creator info
  • Documentation
  • Figma and YouTube video if available
  • Link to Cloneable
  • Other info
  • Some have also Components, maybe you are interested on them also

Not sure how to name them, there are people calling them in different ways such as:

  • Class Naming Systems
  • Naming Systems
  • Frameworks
  • Style Guides
  • Webflow Naming Systems
  • UI Systems

Name them as you wish

How to choose a Class Naming System? Check all this:

  • Background: It is not the same if you can from Design, Code or Marketing, or maybe you are a NoCoder integrator.
  • Your Webflow knodwledge: Do not go for an advanced naming system if you are just beginning. Go step by step. Also I recommend for example to test one Class Naming System on simple site or a landing page.
  • Learning curve: Some of them are for advanced users, others you can learn in some hours
  • Community Support
  • What do you want to build: It is not the same to build a Landing page than an e-commerce shop or a site with many CMS collections
  • Price: Is it free or paid?

Check Class Naming Systems Cloneable or read the list:

Refokus Style Guide

Having a pre-define Style System allows us to keep things organized, keeping to our high-quality standards, and allowing our clients to scale their Website with proper guidelines. After using this in hundreds of projects, we are now sharing it with the world. Have fun!

Get Cloneable

Documentation

Finsweet Client-First v2

fernandocomet

Design Technologist. FrontEnd | DCO | Display | Webflow | UXR | UXDesign | Writing | NoCode | Lifelong learner | Photographer | Runner | Traveller