Introduction
Welcome to the Base System, a visual development system and framework designed specifically for Webflow designers and developers.
What is the Base System?
Webflow development can be overwhelming—How should I name and structure my classes? What’s the best way to create and manage reusable elements? What’s the optimal page structure? How should I handle spacing? The list of questions goes on.
At Flowbase, we faced these same challenges while building components and templates. We needed a system that could provide predictability and consistency across all our products, enhancing usability and navigation for our users.
The Base System provides a structured approach to building in Webflow. It includes:
Class Naming Conventions: A predictable and easy-to-understand way to name classes.
Content Structuring Guidelines: Organize your pages with a focus on clarity and scalability.
Typography Management: Easily control and customize text styles.
Spacing Systems: Manage spacing between elements with precision.
Reusable Design Elements: A library of components and styles that save time while maintaining consistency.
Why should I learn the Base System?
The Base System acts as a foundation for your website or application, enabling you to create professional, cohesive designs quickly while maintaining the freedom to customize and innovate.
Consistency: Ensures a cohesive look and feel across your entire project.
Scalability: Makes it easy to grow your designs as your project evolves.
Efficiency: Reduces time spent reinventing solutions, allowing you to build faster.
Flexibility: Adapts to your unique project needs without locking you into rigid templates or workflows.
Seamless copying from Flowbase: All components are built using the Base System naming conventions. Using xsync class merging tool you can avoid duplicate class issues.
Core Features
Easy to learn
The Base System is designed to be incredibly easy to get started, while providing all the frameworks you need to create beautiful websites for small and large clients. Base system classes are straightforward and written in plain English. We use class names like Container Small, or Container Large, or H1 Heading or Paragraph Small. The Base System uses columns and rows instead of spacing blocks or margin wrappers. This approach will be instantly familiar to those using Figma and their auto-layout system. Learn more about spacing wrappers.
Doesn’t require a starter kit or style guide to function.
Works without embedding global CSS styles.
Avoids breaking due to CSS specificity issues.
Base System is approved for Webflow and Framer template marketplaces.
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 traditional development approches, embracing Webflows visual nature and moving towards a visual future.
Controvesial right? Learn more about our thoughts on class naming in Webflow.
Optimized framework for layouts - minimal wraps and combo-classes
The Base System features a clear and optimize framework for building layouts in Webflow. The system is deeply focused on repetable and clear structure without deep nesting of div-blocks, or deeply stacked combo-classes. The Base System approach is clear, logical and effective while providing all the comprehensive global control you need across an entire project.
Preview a read-only layout using the base system here.
Powerful Flex Gap Spacing System
A core feature of the Base System is its innovative approach to spacing, achieved through the use of the flex-gap. This approach provides a highly effective and intuitive way to control spacing within your designs, and will be instantly familiar to those using Figma and their auto-layout system.
We truely think this will be a game-changer for you, no more insane spacing blocks, or endless margin wrappers, use gap-spacing utility elements to create the perfect spacing while creating clear and logical groups of content.
Also a little controvesial right? Learn more about our thoughts on spacing in Webflow.
Purpose of this Document
This guide aims to:
Introduce you to the Base System and its core principles.
Share how we approach development in Webflow.
Provide step-by-step guidance to help you start building with or integrating the Base System into your projects.
Whether you're a seasoned Webflow designer or just starting out, the Base System will streamline your workflow and elevate your designs. Let’s get started!
Learn More:
Learn how to get started with the Base System
Preview a layout built using the base system (read-only link)
Clone the starter project for Webflow
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:
Email us at support@flowbase.co
Last updated
