To build our page configurator, we'll combine old-school CSS techniques with modern CSS features like custom properties and container queries.

What We're Building

Without further ado, let's take a look at the final project. Click the setting icon to the left of the screen to access the controls panel:

1. Begin with the panel markup

Begin by defining a toggle button and the panel configurator. Inside the panel, we'll place five form wrappers -- we'll go over each of them later.

By default, the configurator panel will sit off-screen. As soon as we click the button, it'll glide smoothly from the left side.

Let's now discuss in more detail what customization options our configurator will allow.

For simplicity, we'll skip most of the CSS stuff and show only the essential parts.

Note that we won't download all fonts together but upon request by following the Google Fonts API. That's why you'll see an instant flickering happen the first time you select a new font. You can check the downloaded font files in your browser's Network tab.

The base font size will be 18px. We can decrease or increase it via buttons or typing inside the target input. At any point, the base font size cannot be less than 18px or greater than 36px.

Notice that we define an initial size in the root element, and then, using the rem units, we apply the desired font size across the target elements.

By default, all images won't have any effects. However, we can opt for one of the following:

Of course, you can implement a fallback solution for wider browser support.

That's all, folks! I hope this page configurator has inspired you to build something similar in your projects. Feel free to extend by adding more features like a reset button or the ability to copy to the clipboard the selected options for easier reuse.

If you have any questions or need something extra, comment in the demo area.