📖Overview

Use this page to learn about the Base System and why it might be useful for you.

1.0 Introduction

Development in Webflow can be complicated - what system should I use? what is the best way to space elements? what is the optimial page structure? how should I name my classes? what's the best practise for this? the list goes on and on.

The Base System was built to help answer some of these questions, and provide a simple and powerful framework and system for building websites using Webflow. You can learn all about the Base System from this page, and get started exploring the framework through the links below.

2.0 Key Features

Here we summarize some key features and philosophy behind the Base System and why we think it's worth your time and consideration as a Webflow developer.

2.1 Human-focused classes, understood by beginner to professional

Base system classes are straightforward and written in plain English. Designed specifically for visual development, class names reflect this simplicity and clarity. The Base System seeks to let go of some traditional development approches, embracing Webflows visual nature and moving towards a visual future.

Learn more about how we think about class naming in Webflow.

2.2 Optimized framework for layouts, with minimal wraps and combo-classes

The Base System features a clear and optimize framework for approaching layout creation without the need for deep nesting of div-blocks, or deeply nested combo-classes. The Base System approach is not only simple and effective but also provides comprehensive global control across an entire project, ensuring uniformity and ease of management.

Preview a read-only layout using the base system here.

2.3 Foundational classes

The Base System offers a comprehensive set of foundational classes that can be used repeatedly across your projects. These are classes for your sections, containers, typography and more. we encourage the use of custom classes to suit specific needs. Adhering to the general naming structures outlined in the documentation will help you maintain consistency and control over your custom classes.

2.4 Synergy between designer & developer

The Base system employs universally repeatable classes that can be seamlessly integrated across various platforms and style guides. These classes are designed with simplicity and human readability in mind, optimizing them to support the foundational aspects of your site and fostering smooth collaboration between designers and developers.

2.5 Easy to learn, easy to master. Simple & Powerful

The Base system is designed to be intuitive, making it easy for beginners to learn and adopt quickly. Its straightforward approach ensures that even complex designs can be managed with ease. The simplicity of the system does not compromise its power; it provides all the necessary tools and flexibility to create sophisticated and dynamic layouts.

2.7 Approved method for Webflow & Framer Template marketplaces

The Base system adheres to the best practices and guidelines set by Webflow and Framer template marketplaces. This ensures that templates built using our system meet the required quality standards for submission and approval. By following our structured approach and naming conventions, you can create templates that are not only visually appealing and functional but also compliant with marketplace requirements, making them easier to publish and sell.

2.8 Minimal Combo Stacking

While many development systems utilize deep combo-class stacking to achieve results, the Base System looks to simplify this in many areas, and take an approach to development that reduces combo class usage.


Follow the links below to learn about the system and how to get started using it.


Support & Feedback

If you have any questions, feedback or would like to just say hi, you can get through to us via the following channels:

Last updated