Documentation

Global Styling

SkeleBricks is designed to be a “invisible” framework. Because it relies on native Bricks features rather than proprietary engines, customization happens exactly where you’d expect: within the Bricks Style Manager.

Customization Hierarchy

To maintain a clean site architecture, we recommend customizing in this specific order:

1. Variables: Update CSS variables for brand-wide DNA (Colors, Spacing, Typography, etc).
2. Theme Styles: Set global defaults for native elements (Sections, Buttons, Form, etc).
3. BEM Classes: Use BEM classes for section-specific styling.

Variables

The “DNA” of your site is controlled via CSS variables found in the Bricks Style Manager. Changes here apply across the entire site instantly. You can change colors, spacing and typography scales to match you brand. You can also update your site’s max container width.

– Colors

SkeleBricks colors are mapped to the native Bricks Color Palette. To change your brand colors:

• Open the Color Manager in Style Manager.
• Update --primary and --secondary and others to match your brand.
• The system will automatically apply these to the generated light, dark, and translucent variants (e.g., --primary-l-1, --primary-t-2).

– Fluid Typography & Spacing

Instead of managing hundreds of media queries, update the base values for your fluid scales.

• Scales: Adjust the min/max values for --text-m or --space-m.
• Boundaries: Use --max-screen-width and --min-screen-width to define where fluid scaling starts and stops.

Theme Styles

SkeleBricks leans heavily on Theme Styles to handle global element styling. This keeps your DOM light by reducing the need for utility classes on every element.

• Typography: Set your global font families, line heights, and colors for body and H1-H6 tags.
• Sections: Define default inner padding for all sections globally. If a specific layout needs more breathing room, you can simply apply a spacing variable locally.
• Elements: Define the primary look of your buttons, dividers, forms and other native elements. SkeleBricks layouts will inherit these styles automatically.

Theme Style customization allows you to reshape the entire design without touching individual sections.

Working with Classes (BEM)

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.

Rename Classes (Optional)

Use the built-in BEM Rename feature to match your own naming convention before importing layouts.

This is especially useful when:

• Integrating into an existing project
• Following a custom naming system
• Keeping large projects organized

Customization Best Practices

• Don’t Fight the Style Manager: Always try to update a global variable or Theme Style before reaching for custom CSS.
• Keep BEM Intact: When adding elements to a pre-built section, follow the naming convention (e.g., .block__new-element) to keep your structure panel searchable.
• Avoid ID Styling: Style through classes (.hero__title) rather than IDs (#brxe-123) to ensure your styles remain portable and easy to manage.

Basic Edits (Content & Assets)

Start by replacing placeholder content inside the layout:

• Text content (headings, paragraphs, labels)
• Images and media
• Links and buttons

If needed, you can extend layouts further using native Bricks features:

• Add custom CSS to classes or elements
• Use interactions, animations, or dynamic data
• Extend functionality with code or integrations

SkeleBricks doesn’t restrict you – it simply provides a clean foundation. All layouts are built using native Bricks elements, so everything can be edited directly in the builder without any extra setup.

Building Pages

Layouts are modular and designed to work together.

• Combine multiple sections to build full pages
• Mix and match layouts freely
• Maintain consistency through shared variables and styles

Because everything follows the same system, sections fit together without additional adjustments.

Dark Mode

SkeleBricks comes with native dark mode support built entirely on top of Bricks’ built-in color system. No extra scripts or hacks needed – just clean, variable-driven theming that works out of the box.

SkeleBricks is built to leverage the native color system introduced in Bricks 2.2 so global theming remains centralized within the Style Manager > Color Manager.

How It Works

Dark mode in SkeleBricks is powered by Bricks’ Color Manager. Each color can have a light and dark value, allowing the entire design to switch seamlessly between modes.

To set this up:

• Open Style Manager → Colors
• Select a color and enable “Dark mode”
• Define an alternate value for dark mode

When enabled, Bricks automatically switches between the two values based on the active mode.

SkeleBricks Setup

SkeleBricks includes a pre-configured color system with dark mode enabled for key variables:

• --primary, --secondary
• --bg-body, --bg-surface
• --text-title, --text-body
• --light, --dark, --border

This ensures all core UI elements – backgrounds, text, and accents – adapt correctly between light and dark themes without additional setup.

Not every color requires a dark variant. Colors without dark mode enabled will remain the same in both modes, which is useful for brand colors or fixed UI elements.

Important Notes

For dark mode to work correctly:

• Set a background color using --bg-body
• Ensure text colors (--text-title, --text-body) are defined for both modes
• Additionally, set variables like --bg-surface, --border, etc, if needed.

SkeleBricks relies on these variables to maintain contrast and readability across themes.

Preview in Builder

You can preview dark mode directly inside the Bricks editor:

• Use the light/dark toggle in the top bar
• Instantly switch between modes while designing

Frontend Behavior

Control how dark mode behaves on your site:

• Go to Style Manager → Settings → Default Mode
• Choose:
  • Light (default)
  • Dark
  • Auto (matches user’s system preference)

To allow users to switch modes manually, add the native Toggle – Mode element (typically in the header).

Always Light/Dark

Some sections or elements shouldn’t switch between modes (e.g. logos, images, or specific UI blocks).

For this, SkeleBricks provides:

--always-light and --always-dark

Use these variables to lock elements to a specific appearance regardless of the active theme.

SkeleBricks’ dark mode is designed to be simple, flexible, and fully integrated with native Bricks – giving you complete control with minimal effort.

Custom Code

SkeleBricks prioritizes native Bricks functionality as much as possible, keeping custom code to an absolute minimum. We only implement code when essential to enhance UX or provide advanced logic that goes beyond standard builder features.

The custom code is kept clean, minimal, and aligned with native Bricks workflows. For styling, most is handled through Theme Styles and variables, additional section specific styles are either applied via Bricks UI or custom CSS when necessary.

Some sections may include essential custom code to power advanced functionality. To ensure these execute correctly, you must enable Code Execution in Bricks Settings under Custom Code. Please ensure any imported code is reviewed and signed within the builder to go live.

When needed, additional code can be added at different levels in Bricks.

• Global Code: Add site-wide CSS, JS, or scripts via Bricks settings. Best for analytics, global styles, or shared functionality.
• Page-Level Code: Add code inside individual page settings to keep things scoped. Useful for page-specific scripts or styling.
• Element-Level Code: Apply custom CSS directly to elements or classes. Use %root% to keep styles scoped and predictable.
• Code Element (Advanced): Insert HTML, JS, or PHP anywhere in your layout for custom logic.

Interactive Logic

Smart Dismissible Banners

SkeleBricks banners (with a close icon) feature native Persistent Dismiss logic. Once a user clicks close, the banner stays hidden via LocalStorage – even after a page refresh.

• BEM-Ready: Uses Data Attributes and Self-Targeting, so functionality won’t break if you rename your classes.
• No Code: 100% native Bricks interactions.

Troubleshooting

If something looks off, it’s usually due to missing global settings:

• Ensure Theme Styles are imported and active
• Confirm Variables (colors, spacing, typography) are set
• Check if classes were modified or removed

SkeleBricks relies on its global system – once that’s in place, everything works as expected.

Best Practices

To keep your Bricks sites lean and your Google PageSpeed scores in the green, follow these best practices for assets, fonts, icons, and organization.

Assets Optimization

• Pre-Upload Compression: Never upload “raw” images. Use tools like TinyPNG or Squoosh to compress files manually before they reach WordPress. This ensures your library stays lean from day one.
• Automated Optimization: For high-volume projects, leverage industry-standard plugins like ShortPixel, Imagify, or Optimole. These handle the heavy lifting of background compression and serving “Next-Gen” formats.
• Modern Formats: Prioritize WebP or AVIF. These formats offer significantly better compression-to-quality ratios than traditional JPEGs, resulting in faster load times without sacrificing visual clarity.
• Dimensions & Sizing: Resize your images to match their intended display size. Uploading a 4000px wide hero image when it only displays at 1440px creates unnecessary bloat and slows down your Largest Contentful Paint (LCP).

Custom Fonts

For maximum performance and GDPR compliance, SkeleBricks advocates for locally hosted fonts. Avoiding external calls to Google Fonts can shave hundreds of milliseconds off your load time.

• Self-Host Fonts: Upload your fonts directly to Bricks > Custom Fonts or Font Manager inside the builder. This eliminates third-party requests and gives you total control over font-display properties.
• Use WOFF2 Only: Modern browsers fully support .woff2. It offers significantly better compression than .ttf or .otf. If you have other formats, convert them using a tool like CloudConvert before uploading.
• Preload Custom Fonts: Enable “Preload custom fonts” in Bricks > Settings > Performance to avoid FOUT (Flash of unstyled text).

SVG & Iconography

Icons should be sharp, scalable, and – most importantly – lightweight.

• Sanitize SVGs: Before uploading SVGs to WordPress, run them through SVGOMG. This strips out hidden metadata, editor “junk” (from Illustrator or Figma), and reduces the code size by up to 60%.
• Inline vs. File: Use the Bricks SVG element for icons that need to change color dynamically (via your --primary variables). For static decorative illustrations, use the Icon element to keep the HTML document size small.
• Icon Sets: Avoid loading massive icon libraries like FontAwesome if you only need five icons. Disable unused icon libraries in Bricks and hand-pick your SVGs from sources like IconBuddy and upload them individually.

Structure Panel Discipline

A clean structure panel is the difference between a project that’s easy to hand off and a maintenance nightmare.

• Rename Everything: Don’t leave elements named “Block” or “Div”. Rename them to match your BEM classes. If the class is .hero__grid, the element in the structure panel should be named Grid.
• Mirror the DOM: Keep your structure as flat as possible. Every extra “Div” or “Container” adds weight to the DOM. If you don’t need a wrapper for styling or layout logic, don’t use one.

Performance

Ensure Bricks settings are optimized for performance.

Bonus Tips

Following these tips will ensure that the library works seamlessly across diverse projects and design systems.

• Use variables in Theme Styles for consistent, scalable and maintainable global styles.
• Use Bricks Theme Style for global styling rules.
• Avoid hardcoded, static pixel values.
• Keep structure consistent across pages.
• Extend variables for custom needs.
• If you’re building a site for a client, include a “Style Guide” page. This shows off all the headings, buttons, and colors in one place, making it easy for the client to visualize the design system.