Home/

...

/

Building the CSS Variable Booth 🤣

Building the CSS Variable Booth 🤣

In case you missed it, below is what we’ll build.

Type any color values within the red boxes, and move the range slider on the top right too!

This is a superb example of updating CSS variables with Javascript and the reactivity that comes with it.

Let’s see how to build this.

The Markup

Here are the necessary components.

  1. A range input
  2. A container to hold the instructions
  3. A section to hold a list of other boxes each containing input fields
widget

The markup turns out to be simple.

Here It is:

<main class="booth">
   <aside class="slider">
     <label>Move this 👇 </label>
     <input class="booth-slider" type="range" min="-50" max="50" value="-50" step="5"/>
   </aside>
   
   <section class="color-boxes">
     <div class="color-box" id="1"><input value="red"/></div>
     <div class="color-box" id="2"><input/></div>
     <div class="color-box" id="3"><input/></div>
     <div class="color-box" id="4"><input/></div>
     <div class="color-box" id="5"><input/></div>
     <div class="color-box" id="6"><input/></div>
   </section>
   <footer class="instructions">
     👉🏻 Move the slider<br/>
     👉🏻 Write any color in the red boxes 
  </footer>
</main>

Here a few things to point your attention to.

  1. The range input represents values from -50 to 50 with a step value of 5 Also, the value of the range input is the minimum value, -50 If you aren’t sure how the range input works, check it out on w3schools
  2. Note how the section with class .color-boxes contains other .color-box containers. Within these containers are input fields. It is perhaps worth mentioning that the first input has a default value of red.

Having understood the structure of the document, go ahead and style it like so:

widget
  1. Take the .slider and . Instructions containers out of the document flow. Position them absolutely.
  2. Give the body element a sunrise background color and garnish the background with a flower in the bottom left corner
  3. Position the color-boxes container in the center
  4. Style the color-boxes container

Let’s knock these off.

The following will fix the the first task.


/* Slider */
 .slider,
 .instructions {
   position: absolute;
   background: rgba(0,0,0,0.4);
   padding: 1rem 2rem;
   border-radius: 5px
 }
 .slider {
   right: 10px;
   top: 10px;
 }
 .slider > * {
   display: block;
 }
 
 
 /* Instructions */
 .instructions {   
   text-align: center;
   bottom: 0;
   background: initial;
   color: black;
 }

The code snippet isn’t as complex as you may think. I hope you can read through and understand it. If not, drop a comment or tweet.

Styling the body is a little more involved. Hopefully, you understand CSS well.

Since we aspire to style the element with a background color and a background image, it’s perhaps the best bet to ...