CSS Variables & Live CSS in BeBuilder
Learn how to master Live CSS and CSS Variables in BeBuilder! 🎨
In this step-by-step tutorial, I’ll guide you through:
1. Enabling Developer Mode and opening the Live CSS panel
2. Understanding the difference between Global CSS and Current Page CSS
3. Using the Live update toggle for faster workflow
4. Creating and managing CSS Variables to style your site more efficiently
5. Applying variables for border-radius and color across multiple elements
6. Updating styles site-wide with just one change
Whether you’re looking to speed up your workflow, maintain consistent design, or learn how to manage custom styles without leaving BeBuilder, this tutorial has you covered.
⚠ Important: Avoid using the --mfn prefix for your own variables unless you’re familiar with Betheme’s internal variable system, as it may cause layout issues.
Timecodes
0:00 Intro
0:34 – Live CSS
1:57 - CSS Variables
4:52 - Outro