Broke Bricks is an innovative child theme for Bricks Builder, designed to supercharge your building experience with enhanced flexibility, performance, and creativity. It's perfect for developers and designers who love to craft their components and interfaces with precision and semantic structure.
Broke Bricks comes packed with features that make it a powerhouse for web development:
- Autogenerated Admin Options for Scripts: Easily enqueue or dequeue JavaScript files right from the theme settings. 📝
- Framework Presets: Includes popular frameworks like Alpine, HTMX, GSAP, and more, ready to be enabled with just a click. 🏗️
- Alpine & HTMX Core.js: Recommended for creating highly interactive and custom interfaces effortlessly. ⚡
- HTMX Hot Swap with Bricks Components: Enhance your Bricks components with HTMX hot swapping. 🔄
- Semantic Structure Building: Focus on creating components using semantic HTML. 🛠️
- Bricksbender Plugin Compatibility: Easily import any pre-made HTML/Alpine structures. 🧲
- Tailwind Mode: Strip away all default Bricks styling for enhanced performance. 🌪️
- Disable "bricksJS" on the Frontend: Gain more control by disabling "bricksJS" when using libraries like Alpine or HTMX. 🔌
- Toggle Elements On/Off: Effortlessly manage which elements appear in the Bricks builder. 🎛️
- Timber/Twig Integration: Access Timber and Twig within the Bricks editor or from the theme level for unprecedented control and flexibility. 🌲
- Cwicly Migration Mode: A new admin setting option that brings in Cwicly's CSS/JS, enhancing the experience when using Tailwind Mode. Recommended for seamlessly transferring components from Cwicly to Bricks. 🔄
Utilize "Cwicly Migration Mode" in conjunction with the Bricksbender plugin to easily migrate your components from Cwicly into Bricks. Follow these steps for a smooth transition:
- On your Cwicly site, disable all performance plugins.
- Navigate to the page you wish to convert, and open it on the frontend.
- Use the inspector to copy the section/component from the DOM.
- Use Bricksbender to paste it into Bricks.
- Dynamic components will need to be set to dynamic.
- Post-specific styling, such as on dynamic items, will not be applied. Consider adding a Tailwind grid/flex layout to the element.
- Remove any additional dynamic items, ensuring only 1 item is repeating in the query.
- Any other post-specific styling required will either need to be switched to Tailwind, or you can copy over the styling into the child theme and enqueue it.
Read the Cwicly Bricks Migration Guide for more detailed information.
- Remote Data Requests: Fetch and display data from any source directly within your Bricks pages.
- Custom Function Granularity: Gain detailed control over your site's functionality with custom PHP functions.
- Custom WooCommerce Queries: Implement custom queries with better naming conventions for a smoother WooCommerce integration.
- Timber Context Access: Tap into the Timber context at any time for greater control over page conditions.
Note: Live preview for Twig in the Bricks Editor is a planned feature and will be available in future updates.
To harness the full power of Broke Bricks, we suggest:
- Enabling Alpine and HTMX: Build interactive and responsive interfaces with minimal effort.
- Activating Tailwind Mode: Ensure your site is as lightweight and fast as possible.
- Disabling Default Bricks Styling: Boost your site's performance and customize your design approach.
- Exploring Semantic Building: Build components from scratch for a more tailored experience.
For more detailed information on each feature and tips on getting the most out of Broke Bricks, refer to our documentation.
We welcome contributions! If you have suggestions or want to improve Broke Bricks, please feel free to submit a pull request or open an issue.