In this video I’ll be showing you how to set up a layout switcher in Bricks. No extra plugins needed, just Bricks interactions, CSS and a tiny bit of JavaScript for accessibility.
I have to credit Sridhar Katakam for the original idea behind this tutorial. And just like it did for me, I hope this opens your eyes to what’s possible just by playing with CSS classes and the Bricks interactions feature.
Javascript for accessibility
function toggleAriaPressed() {
// Select the button with the class .view-toggle
const button = document.querySelector(".layout-toggle");
// Check if the button has the aria-pressed attribute set to true or false
const isPressed = button.getAttribute("aria-pressed") === "true";
// Toggle the aria-pressed attribute
button.setAttribute("aria-pressed", isPressed ? "false" : "true");
}CSS snippet
%root% {
--toggle-space: 0.8em;
--toggle-icon-size: 1.5em;
padding: var(--toggle-space);
gap: var(--toggle-space);
border-radius: 10rem;
border: 2px var(--neutral) solid;
}
%root%::before {
content: "";
width: calc(var(--toggle-space) + var(--toggle-icon-size));
height: calc(var(--toggle-space) + var(--toggle-icon-size));
background-color: var(--action-light);
z-index: -1;
position: absolute;
top: calc(var(--toggle-space) / 2);
left: calc(var(--toggle-space) / 2);
border-radius: 10rem;
transition: translate 0.3s;
}
%root%.is-active::before {
translate: 100%;
}
%root%__icon {
width: var(--toggle-icon-size);
height: var(--toggle-icon-size);
}