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 (https://x.com/srikat/status/1806213247831527508) 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);
}

Responsive Layout Toggle Component for Bricks

Buy the Component

Leave the first comment