📒Overview

Learn about the general philosophy behind the base system

1.0 General Philosophy

The Base System is designed to simplify the complexities of Webflow development by providing a structured, intuitive, and powerful framework for building websites. Whether you're a beginner or a seasoned professional, the Base System offers a clear and straightforward approach to design and development, allowing you to focus on creativity rather than getting bogged down in technical details.

Human-Focused Design

At the core of the Base System is a commitment to human-focused design. Class names are written in plain English, making them easy to understand and use across all levels of expertise. By embracing Webflow's visual nature, the Base System moves away from traditional development practices, paving the way for a more accessible and visual approach to web design.

Optimized Structure

The Base System promotes an optimized layout and section structure with minimal wraps and deeply nested combo-classes. This approach ensures that your projects are not only simple and effective but also maintain uniformity and ease of management. By focusing on global control, the Base System provides a solid foundation for building scalable and maintainable websites.

Foundational Classes

With a comprehensive set of foundational classes for sections, containers, typography, and more, the Base System encourages the use of custom classes to suit specific needs while maintaining consistency and control. Adhering to the general naming structures outlined in the documentation ensures that your custom classes integrate seamlessly with the system's core principles.

Designer-Developer Synergy

The Base System is designed to foster seamless collaboration between designers and developers. By utilizing universally repeatable classes that are simple and human-readable, the system supports the foundational aspects of your site and enhances the synergy between design and development teams.

Simplicity and Power

The Base System is easy to learn and master, making it accessible for beginners while providing the tools and flexibility needed for complex designs. Its simplicity does not compromise its power, allowing for the creation of sophisticated and dynamic layouts with ease.

Marketplace Compliance

Adhering to best practices and guidelines set by Webflow and Framer template marketplaces, the Base System ensures that templates built using this framework meet the required quality standards for submission and approval. This compliance not only makes it easier to publish and sell templates but also guarantees that they are visually appealing and functional.

Minimal Combo Stacking

In contrast to many development systems that rely on deep combo-class stacking, the Base System simplifies this approach by reducing the need for excessive combo classes. This streamlined methodology contributes to a cleaner, more efficient design process.

2.0 Glossary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec maximus faucibus orci eget vestibulum. Nam id auctor massa, eu placerat ipsum. Donec porta condimentum odio, sed rhoncus erat gravida ut. Ut urna lacus

Word	Description
Wrapper	Wrapper is an element that is used to give a content structure, it is typically not the content itself. It is useful to avoid name conflicts with classes and is always a higher level than the element itself. For example "Card Wrapper" contains the cards but is not the card.
Outline	Outline is used to describe an element that has a border applied. For example, "Social Link Outline", "Card Outline". We do not use "Border"