SkeleBricks is built on an opinionated yet simple design system using native Bricks Builder capabilities.
It combines CSS variables, Theme Styles, and consistent naming conventions to create a scalable and maintainable foundation.
Here’s a deep dive into the core DNA of SkeleBricks – from our “Theme Styles first” philosophy and semantic variables to BEM class naming. Discover how we leverage native Bricks features to keep your builds light, consistent, and maintainable.
CSS Variables
SkeleBricks uses clean, semantic variable names like --text-*, --space-*, and --primary to keep things readable, intuitive, and fast to work with.
Using semantic variable names like --dark is more flexible, compared to something like --black which represents a fixed color, whereas --dark can adapt across themes and contexts without needing to be redefined.
Most of the SkeleBricks variables are inspired by Core Framework, using industry-standard naming that’s clean and intuitive.
Instead of adding prefixes that create noise and slow down development, it leans on a consistent design system where variables are centralized and controlled.
In real-world use, collisions are rare and easily managed, while clear, standardized naming significantly improves usability, scalability, and long-term maintainability.
These opinionated decisions help to keep SkeleBricks simple, accessible and intuitive to work with. But perhaps most importantly of all – lightweight and dependency free.
SkeleBricks variables are built with Bricks’ native Style Manager. Colors are generated using the Color Manager, while typography and spacing use Bricks’ fluid generators.
SkeleBricks variable framework is organized into the following categories:
🎨 Colors
SkeleBricks comes with a simple yet versatile and scalable Bricks native color palette. The colors are generated using Bricks Color Manager and variable names are kept semantic and simple.
Most colors include generated light, dark, and transparent variants to ensure depth and accessibility across any layout.
| Variable | Value / Description |
--primary | Main brand color |
--secondary | Accent / Neutral brand color |
--bg-body | Main page background |
--bg-surface | Card/Section surface background |
--text-title | Heading & Title color |
--text-body | Primary paragraph color |
--light | Neutral light (swaps in dark mode) |
--dark | Neutral dark (swaps in dark mode) |
--always-light | Force light regardless of mode |
--always-dark | Force dark regardless of mode |
--border | Default UI border |
--shadow | Base shadow color |
--muted | De-emphasized UI elements |
| States | success, danger, warning, info |
| Modifiers | *-l-* (Light), *-d-* (Dark), *-t-* (Transparent) |
🔤 Typography
A fluid scale of text sizes from --text-xs to --text-4xl. These use clamp functions to automatically scale font sizes based on the viewport, ensuring perfectly readable type on mobile devices and large desktop monitors without manual media query adjustments.
| Variable | Usage |
--text-xs | Fine print / Captions |
--text-s | Small body text |
--text-m | Standard body text |
--text-l | Sub-headings / Large body |
--text-xl | Small headings |
--text-2xl – --text-4xl | Hero & Main headings |
📏 Spacing
The backbone of SkeleBricks’ white space system. This fluid scale ranges from --space-4xs for tight internal padding up to --space-4xl for large section margins. Like typography, these values adapt dynamically to the screen size to maintain visual rhythm.
| Variable | Usage |
--space-4xs – --space-2xs | Fine-tuned internal padding |
--space-xs – --space-s | Standard element spacing |
--space-m – --space-l | Grid gaps & Component margins |
--space-xl – --space-4xl | Section padding & Hero spacing |
--space-* variables can be used for any size-related property (margin, padding, width, height, etc)
🖥️ Layout
Defines the core boundaries of the system. These variables establish the minimum and maximum screen widths, ensuring that the fluid calculations for typography and spacing remain within a controlled, production-ready range.
| Variable | Value | Description |
--max-screen-width | 1440px | The upper limit for fluid scaling. |
--min-screen-width | 360px | The lower limit for fluid scaling. |
⊞ Grid
A collection of CSS Grid shortcuts for building complex layouts instantly. This includes a standard 12-column grid and various asymmetrical fractional ratios (e.g., 2-1, 3-4), allowing you to define column structures directly within the Bricks “Grid Template Columns” field.
| Variable | CSS Template Value |
--grid-1 – --grid-12 | repeat(X, minmax(0, 1fr)) |
--grid-1-2 / --grid-2-1 | 1/3 and 2/3 fractional split |
--grid-1-3 / --grid-3-1 | 1/4 and 3/4 fractional split |
--grid-2-3 / --grid-3-2 | 2/5 and 3/5 fractional split |
--grid-1-4 / --grid-4-1 | 1/5 and 4/5 fractional split |
✨ Design
Handles the tactical UI details like border-radii and box-shadows. From subtle xs rounding to full pill-shaped buttons, these variables ensure consistent decorative elements across all components and sections.
| Variable | Description |
--radius-xs – --radius-xl | Responsive border radius scale |
--radius-full | Perfect pill-shape/circle rounding |
--shadow-xs – --shadow-xl | Layered elevation shadows |
Theme Styles
SkeleBricks uses Bricks Theme Styles as the foundation for global design control. Core elements like sections, containers, typography, buttons and forms are styled centrally, then powered by a minimal set of CSS variables. This keeps everything consistent, easy to manage, and instantly adjustable across the entire site – without relying on extra classes or overrides.
Bricks automatically applies the most specific styles to your site. Theme Styles are preceded by page settings (as they are more specific). And page settings are preceded by elements settings on an individual page. This allows you to easily mix and match styles to your exact requirements.
BEM Methodology
Every SkeleBricks layout is crafted with thoughtful BEM class naming, ensuring a clear and modular structure. This approach keeps styling organized, reusable, and easy to extend – ideal for building scalable, long-term projects.
Examples
A Hero Section
.hero(The Block).hero__container(An Element).hero__heading(An Element).hero__description(An Element).hero--dark(A Modifier for a dark-themed variant)
A Card Component
- .
card(The Block) - .
card__img(An Element) - .
card__heading(An Element) .card__text(An Element)- .
card--featured(A Modifier for a unique style)
