Technical Implementation & Styling Standards

Download Global Variable Style Sheet

Documentation

Last updated: February 21, 2026

Core Architecture: Class-Based Styling

To ensure your project remains scalable and free of specificity conflicts, Template Banana components are built with a Class-First philosophy.

  • No ID Styling: We usually avoid styling on the ID level. This allows you to stack, move, and reuse components without fighting hardcoded overrides.
  • BEM-Influenced Naming: Our classes follow a logical structure, making it easy to identify which styles belong to which block.
  • Centralized Custom CSS: Look for the element in the structure panel with brackets in the name (e.g., (CSS)). All complex layout logic is stored here under Bricks > Styles > CSS. We place variables at the very top of this code block so you can customize the section instantly in one place.

Understanding the Two Variants

We provide two distinct versions for every component. It is vital to use the one that matches your specific environment:

  • ACSS Variant: Engineered for the Automatic.css ecosystem. It utilizes native ACSS tokens for spacing, typography, and color.
  • Vanilla Variant: Built using standard CSS variables following the Template Banana naming convention.

Note on Custom Variables: If your site uses custom-named variables (e.g., –brand-primary), our components will not inherit them by default. You must either map your variables to ours within the CSS block or download our Global Variable Style Sheet to sync the design system perfectly.

Slider Implementation & Script Signing

Our sliders are optimized and often require a quick manual step to activate after import. Depending on the complexity, a component might include a Custom Slider setup using these features:

  1. Custom JSON Options: For components using the native Bricks slider, we often use the Custom JSON field to power advanced behaviors (autoplay, custom arrows, etc.). You can find and edit these parameters directly in the slider settings.
  2. Code Element & ID Mapping: When a slider relies on a Code Element for logic, you must map the Slider ID in the code to the actual ID of the slider element on your page.
  3. Signing the Code: If the Code Element displays a red fingerprint icon, it means the script is not yet authorized to run. To fix this, ensure your ID mapping is correct, then click the “Sign Code” button (represented by the thumb/fingerprint icon) within the Bricks code editor to execute the script.

Best Practices for Customization

  • Target the [CSS] Element: Always check the bracketed element’s CSS tab first. Most structural changes, like gaps or widths, are controlled by the variables at the top of that script.
  • Variable Sync: For a 1:1 match with our demo designs in a Vanilla build, ensure our Global Style Pack is active in your theme styles before pasting the component JSON.
Back to Home

Contents

Frequently asked questions

Everything you need to know about the Template Banana WordPress section library. We’ve engineered the best bricks builder templates so you can stop guessing and start shipping.

The logic for every section is centralized. Look for the element in the structure panel with brackets in the name, such as (CSS). Navigate to Bricks > Styles > CSS on that specific element to find the primary variables and layout code.

If the slider relies on a Code Element, you must map the Slider ID in the script to match the ID of your slider element. Additionally, if you see a red fingerprint icon, click the “Sign Code” (thumb icon) button in the Bricks code editor to authorize and execute the script.

For components using the native slider with advanced logic, check the Custom JSON settings field. You can modify parameters like autoplay, speed, and transitions directly within that JSON block.

The Vanilla Variant is built using standard internal variable names. If your site uses custom names (e.g., –my-color), the component won’t automatically inherit them. You will need to map your variables or use our Global Variable Style Sheet.

If you have the Automatic.css plugin active, the ACSS variant is optimized to pull directly from your framework tokens for spacing, typography, and colors, ensuring a 1:1 integration with your existing system.

No. The element labeled with brackets contains the core custom CSS and logic variables. Deleting it will strip the component of its styling and functional layout.

Before importing components, ensure your theme styles are configured or import our Global Style Pack. This ensures all global colors and typography variables are defined so the imported ready-made website templates look correct instantly.

No. While we provide a dedicated ACSS version, our Vanilla frames are built as high-performance primitives that can be easily adapted to the Core Framework by updating the variables.