Getting Started
How to get started using the Base System
Last updated
How to get started using the Base System
Last updated
The Base System is designed so that components can be copy and pasted into new projects and will still work without starter styles, global styles embed or specificity issues.
That being said, If you are starting a new project, we recommend cloning our starter project, which contains all the classes and variables setup to get you started right away.
If you plan to use Flowbase components or wireframes, we recommend installing the Flowbase Chrome Extension to enable class merging. This prevent classes duplicating when a class with the same name but different styles is being pasted into your project. As all components and wireframes are built using the Base System system, incoming classes should merge seamlessly into your project.
Clone Starter Project
Choose from either Pixels or REM Starter Project depending on your preference.
Update Site Settings
Inside Settings General > Update the following settings
Project name
Domain
Add a favicon
Webclip image
Install fonts
Customize Style Guide
Update the style guide to match your branding such as typography, buttons, variables and more.
Start Building!
Build beautiful scalable websites with ease using the Base System.
If you are converting an existing project to the Base System, this process can be a bit more difficult depending on the size and complexity of your project.
Copy Style Guide
Clone our starter project and copy the style guide and paste it into your project.
Our style guide does not rely on CSS specificity so you can simply copy and paste the entire style guide into a new page on your project.
Update Style Guide
It is likely your project has been built using its own naming and development conventions. To avoid having to manually delete and update all your projects classes, we recommend replacing the Base System class with your existing classes where possible, and simply changing your existing class name to match Base System naming. For example, if you have a button class that is used primarily throughout your project, this class can simply be renamed to "Button Primary".
Webflow University
Flowbase Advanced Tips & Tricks
