Builderius CSS Framework

Build Beautiful Interfaces.
Ship Faster.

BCSS is a token-based CSS framework for Builderius. Zero dependencies, native dark mode, and a comprehensive component library that gets out of your way.

0 Dependencies Native Dark Mode ~18kb Gzipped OKLCH Color Space CSS Custom Properties
0 JavaScript Dependencies
50+ Utility Classes
12 Component Types
100% CSS Custom Properties
Why BCSS

Everything you need, nothing you don't

A well-balanced approach between CSS variables, utility classes, and progressive enhancement — built for the modern web.

Token-Based Design

Every value is a CSS custom property. Swap your entire palette, spacing scale, or type system by updating a single root variable — no rebuilds required.

CSS Variables

Dark Mode Built-In

Automatic dark theme via prefers-color-scheme, plus explicit overrides. The OKLCH color space keeps contrast ratios perceptually consistent across both modes.

OKLCH Colors

Composable Classes

Combine utility classes with semantic components. Use .grid.grid-cols-3.gap-xl alongside .card and .badge-tonal — they were designed to work together.

Utility First
Design Tokens

Color System

BCSS uses the modern OKLCH color space for perceptually uniform shade generation. Every palette is derived from a single --color--primary--original variable — just change that one value to re-theme your entire site.

Primary

50 --color--primary--50
100 --color--primary--100
200 --color--primary--200
300 --color--primary--300
400 --color--primary--400
500 --color--primary--500
600 --color--primary--600
700 --color--primary--700
800 --color--primary--800
900 --color--primary--900
950 --color--primary--950

Base (Neutral)

0 --color--base--0
50 --color--base--50
100 --color--base--100
200 --color--base--200
300 --color--base--300
400 --color--base--400
500 --color--base--500
600 --color--base--600
700 --color--base--700
800 --color--base--800
900 --color--base--900
950 --color--base--950
1000 --color--base--1000

Semantic

Error

light --color--error--light
original --color--error--original
dark --color--error--dark

Success

light --color--success--light
original --color--success--original
dark --color--success--dark
Typography

A Fluid Type Scale

Every type size scales fluidly between viewport breakpoints using pure-CSS clamp(). You define only the min and max sizes as tokens, and the preferred value (the slope) is computed live with tan(atan2()) — so overriding a size token recomputes automatically, with no hand-tuned magic numbers to maintain. Body text, badges, and buttons have their own independent scales.

It relies only on widely-supported CSS (clamp(), the vi viewport unit, and trigonometric functions), so it works in every current browser with no JavaScript and no polyfill.

The framework uses a special class .page-content for the wrapper with actual content. Why it matters? Because we reset default browser's styling, like margin for paragraphs etc. Yet we keep consistent spacing for content specific elements inside an element with class .page-content.

Getting Started with BCSS

Installation & Setup

Include the framework stylesheet in your HTML <head>. No build tools, no package managers — just a single CSS file that does the heavy lifting. The framework is designed to work out of the box with sensible defaults while remaining completely customizable through CSS custom properties.

Customizing Your Theme

Override --color--primary--original on the :root to shift the entire primary palette. Every shade from 50 to 950 recalculates automatically via CSS relative color syntax — no Sass, no PostCSS, no preprocessor required.

BCSS was built on the premise that a good CSS framework should accelerate your work, not constrain it. Sensible defaults with full escape hatches.

Working with Dark Mode

Dark mode is handled automatically via prefers-color-scheme: dark. You can also force a specific theme by setting the data-theme-default attribute on the <html> element — useful for user preference overrides.

Inline elements: bold text, italic emphasis, underlined, strikethrough, inline code, highlighted text , and hyperlinks.

Heading Level 5

Used for fine-grained content hierarchy within a section. Pairs well with a supporting paragraph.

Heading Level 6

The smallest heading level — typically used for metadata labels, captions, or sidebar annotations.

Documentation

Latest from the Docs

Browse All Articles →
Guide

Getting Started with BCSS

Set up BCSS in under five minutes. Learn how to include the stylesheet, set your primary color token, and start building responsive layouts with the grid system.

Team · Mar 2024
Read →
Deep Dive

Mastering the Dark Mode System

Everything you need to know about BCSS's dual-theme architecture. Understand how OKLCH color shades invert for dark mode and how to override preferences per-element.

Vitalii · Apr 2024
Read →
Reference

Typography Scale Deep Dive

A complete walkthrough of the BCSS type scale — from the fluid clamp() sizing powering each heading level to fine-tuning line-height and letter-spacing.

Team · May 2024
Read →
Components

Badges & Buttons

Components shown in realistic UI contexts, not isolated on a blank canvas.

Notification Center

Real-time build and deployment status

Build #142 — main branch Passed
Build #141 — feature/dark-mode In Progress
Build #140 — fix/color-vars Failed
Deploy #89 — production Queued
Deploy #88 — staging Draft

Article Editor

Publishing workflow — all button variants in context. Size: default, .size-sm, .size-lg

Filled
Tonal
Outlined
Ghost
Contact

Have a Question About BCSS?

We're happy to help with integration questions, feature requests, or bug reports. For urgent issues, check the GitHub repository first — someone may have already found a solution.

Email support@builderius.io
GitHub github.com/builderius
Documentation docs.builderius.io

Send a Message

Support

Frequently Asked Questions

How do I install BCSS?

BCSS is a single CSS file with no build step required. Download framework.css and include it in your HTML <head>. For Builderius users, the framework is already included in the standard starter, no actions is needed. That's it — no npm, no webpack, no configuration files.

Can I customize the primary color?

Yes — update the --color--primary--original CSS custom property on :root (or any parent element). All 11 primary shades (50 through 950) are computed automatically using CSS relative color syntax and the OKLCH color space. Use the live color picker in the Customize panel on this page to preview changes in real time.

Does BCSS work without Builderius?

Absolutely. BCSS is a plain CSS file that works in any web project. The builderius-menu-builder.css companion file is the only Builderius-specific piece — everything else (framework.css) is framework-agnostic and works with vanilla HTML, WordPress, or any other CMS.

How does the dark mode system work?

BCSS listens to prefers-color-scheme: dark and remaps all color shades — so --color--primary--100 becomes the darkest shade and --color--primary--950 becomes the lightest. You can override this by setting data-theme-default="light" or data-theme-default="dark" on the <html> element, which is exactly what the theme switcher in the Customize panel does.

How do I contribute to BCSS?

Open an issue or pull request on the GitHub repository. Before submitting, check the existing issues to avoid duplicates. New component proposals should include a working HTML/CSS example. For bug reports, include a minimal reproduction case with the affected browser and OS version.

Data

Component Reference

All BCSS component classes at a glance. Use the .striped-rows modifier on any table for alternating row backgrounds.

Component Class Variant Description
Button btn-filled Primary Filled button with primary background color
Button btn-tonal Tonal Muted tonal background, primary text
Button btn-outlined Outlined Transparent background, primary border and text
Button btn-ghost Ghost No border or background, text only
Badge badge Filled Small status label with filled primary background
Badge badge-tonal Tonal Light tonal badge for low-emphasis labels
Card card — Bordered container with padding and subtle shadow
Grid grid grid-cols-N — Responsive CSS grid with explicit or auto column counts
Accordion details / summary — Native HTML disclosure element with BCSS styling
Pagination pagination — Page navigation with active, disabled, and current states
Dialogs

Modal & Cookie Notice

BCSS styles the native HTML <dialog> element. The cookie notice appears fixed to the bottom-right corner of the viewport.

Stay up to date

Get notified about new BCSS releases, component additions, and breaking change migration guides.

Cookie Settings

BCSS uses essential cookies to remember your theme and color preferences. With your permission, we'd also like to set analytics cookies to understand how developers use the framework.