Builderius CSS Framework has Been Released

July 29, 2024
CSS Framework

While rebuilding Builderius from the ground up, we faced a fundamental question: how should global styling work in a visual builder that’s meant to give you complete control?

Most page builders solve this with theme settings panels or preset systems. We took a different approach. The new Builderius site builder ships with a built-in minimal CSS Framework that serves the same function, but with much greater flexibility and user choice. This route allows you to tweak and extend the built-in framework or replace it entirely with one you already use.

Today, we’re releasing the Builderius CSS Framework as a standalone project for testing and community feedback.

What makes this framework different

  • Built for visual builders – Most CSS frameworks assume you’re writing HTML and CSS by hand. This one is designed specifically for the visual building environment, aligning with how the UI actually works.
  • Classless foundation – Drop any HTML element into the canvas and it looks good and responsive out of the box, without requiring specific classes.
  • Low specificity by design – Uses modern selectors like :where() to keep specificity low, making local overrides simple without fighting the framework.
  • Token-based variables – Structured CSS variables that organize themselves in the Builderius interface, essentially creating your own “theme settings” through naming conventions.
  • Figma integration ready – Built around design tokens that will sync with Figma files and plugins (coming soon).

Key features included

  • Elegant HTML reset that’s responsive, lightweight, and semantic – buttons, [input=submit], [role=button] and .button all receive the same styles automatically.
  • Fluid typography using clamp() for sizes that scale smoothly across all screen sizes.
  • Structured color system where primary colors generate 12 shades automatically, and grayscale gets subtly tinted with your brand color.
  • Smart variable organization – The way you name CSS variables determines how they’re grouped in the Builderius interface. Name them --form--button--active and --form--input--focus and they’ll group under “Form” in the UI.
  • Essential utility classes like .flex-row, .flex-column, .grid, .card to get started quickly.
  • Quick Start Cheatsheet – Complete reference guide covering all available variables, classes, and usage patterns at css-framework-cheatsheet.md

This is meant to be extended

The framework provides the foundation, but it’s designed for you to build on top of. Add your own classes, modify the variables, or replace sections entirely. The token system and variable naming patterns make it easy to create your own organized design system.

If you prefer working with frameworks you already know – Tailwind, Bootstrap, your own custom setup – you can replace this framework completely while keeping all of Builderius’s visual building capabilities.

We need your feedback

This framework needs to serve real-world use cases, and that means learning from how you actually build websites.

  • Test it out and tell us what works, what doesn’t, and what’s missing.
  • Give feedback at the GitHub repo
  • Join the discussion in our Facebook community

Let’s build this together

CSS frameworks are deeply personal tools. Everyone has preferences about how styling should work, what utilities matter most, and how much control vs. convenience they want.

We’ve built what we think is a solid foundation, but the best framework will come from understanding how you actually work. Your feedback shapes not just this framework, but how global styling works in Builderius itself.

Ready to dive in and help us get this right?

Avatar9
Elvis Krstulović Lead Product Design, co-founder

Ready to build like a professional?

Transform your WordPress workflow with professional-grade visual development. No more compromising between speed and quality.