CSS Superpower & Recipes – Advanced Themer

Fortunately, there’s a powerful tool that can help streamline your process: Advanced Themer.

In this tutorial, we’ll focus on one of Advanced Themer’s standout features: the CSS Superpower function. We’ll also explore how to use this function in combination with the Recipes feature to automate everyday tasks and speed up your design process.

What is Advanced Themer?

Advanced Themer is a plugin that enhances your Bricks Builder experience by providing advanced styling options, reusable code snippets, and more. It’s a must-have tool for anyone looking to improve productivity when building websites with Bricks.

If you’re new to Advanced Themer, check out my previous video (linked in the description) for a more in-depth overview. But for today, we’ll focus on using the Advanced CSS and Recipes features to solve common design issues.

The Problem: Unwanted Spacing and Non-Clickable Cards

Let’s start by identifying the problem we’re going to solve. This example shows a typical blog listing with multiple card designs. However, there are two key issues:

• Unwanted Spacing: Since the cards are set up as an unordered list (<ul>) with list items (<li>), there’s extra space on the left-hand side of the cards.
• Non-Clickable Cards: Only the title of each Card is clickable, which isn’t ideal for user experience or accessibility. We want the entire Card to be clickable.

While you could manually adjust these issues, automating the process using Advanced Themer’s CSS Superpower and Recipes is much faster and more efficient.

Step 1: Fixing the Unwanted Spacing

Creating a Recipe to Reset List Styles

First, let’s address the unwanted spacing caused by the unordered list. We’ll create a custom Recipe in Advanced Themer to reset the list styles.

1. Open Advanced CSS: In the Bricks Builder interface, go to the AT (Advanced Themer) menu at the top and select Advanced CSS.
2. Create a New Recipe: Switch to the Recipes tab in the Advanced CSS panel. Click the button to create a new recipe and give it a name, such as Reset List.
3. Add the CSS Code: In the code editor, paste the following CSS to remove the list styles and padding:

/*
Begin List None
*/
%root% {
    list-style:none;
    padding-inline-start: 0;
    margin-block: 0;
}
/* End List None */

This code removes the default list styling and ensures no extra padding or margin.

4. Save the Recipe: Click Save and Close to save your new recipe.

Applying the Recipe to the Unordered List

Now that we’ve created the recipe let’s apply it to the unordered list in our design.

1. Select the Unordered List: In Bricks Builder, select the unordered list (<ul>) that contains your card items.
2. Apply the Recipe: Make sure the class is selected in the CSS section of the Bricks panel. Then, in the SuperPower CSS field, type the @ symbol followed by the name of your recipe (Reset List). Hit the Tab key to apply the recipe.
3. Save and Preview: Save your changes and preview the page. You’ll notice that the unwanted spacing is gone, and the list items are correctly aligned.

Step 2: Making the Entire Card Clickable

Next, let’s make the entire Card clickable, not just the title. This is important for both user experience and accessibility.

Creating a Recipe for Clickable Cards

We’ll create another recipe to make the parent card element clickable.

1. Create a New Recipe: Return to the Advanced CSS panel and create a new recipe. Name it something like Parent Clickable.
2. Add the CSS Code: Paste the following CSS into the code editor:

%root% {
  position: relative;
}

%root% h3 a::before {
  content: ' ';
  inset: 0;
  position: absolute;
  z-index: 1;
}

%root%:focus-within {
  outline: 1px;
}

%root%:focus-within :focus {
  box-shadow: none;
  outline: none;
}

This code ensures that the entire Card becomes a clickable area by positioning the link (<a>) element over the whole Card.

3. Save the Recipe: Click Save and Close for your new recipe.

Applying the Recipe to the Card

Now, let’s apply the clickable card recipe to the card element.

1. Select the Card Element: In Bricks Builder, select the card element you want to make clickable.
2. Apply the Recipe: Select the class for the Card in the CSS section. Then, in the SuperPower CSS field, type the @ symbol followed by the name of your recipe (Parent Clickable). Hit the Tab key to apply the recipe.
3. Save and Preview: Save your changes and preview the page. The entire Card is clickable, including the image, title, and content.

Why Use Advanced Themer?

By using Advanced Themer’s CSS Superpower and Recipes, you can significantly speed up your workflow. Instead of manually writing and applying CSS for each element, you can create reusable recipes that can be applied with just a few keystrokes. This not only saves time but also ensures consistency across your designs.

Key Benefits of Advanced Themer:

• Reusable Code: Create custom recipes that can be applied across multiple projects.
• Faster Workflow: Apply complex CSS with just a few keystrokes.
• Consistency: Ensure that your designs are consistent by using the same recipes across different elements.
• Scalability: Stack multiple recipes on top of each other for more complex designs.

Conclusion

Advanced Themer is a powerful tool that can help you streamline your web design process in Bricks Builder. The CSS Superpower and Recipes features allow you to automate repetitive tasks, improve your workflow, and ensure consistency across your designs.

If you’re serious about speeding up your web design process, Advanced Themer is a must-have in your Bricks Builder toolbox.