Lets Build: 1, 2 step

For today I wanted to show you one thing that I was doing and ended up thinking it was pretty smart. This way you will learn not only how to build this, but also some nifty tricks that you can use to impress your peers. This component is a known design pattern called a wizard. Usually a series of steps that the user needs to complete in order to accomplish a goal. Or as you’re probably familiar with, those annoying things where you go “Next, next, next” faster than the speed of light.

This is what we’re building today. It seems simple, doesn’t it? Heck yeah, I love it simple. We will also focus only on the barebones and ignore animations and all the flashy stuff. But first, here is the soundtrack for the rest of this post.

Get some structure

Since starting a house by the ceiling often leads to a bad outcome, let’s just sketch a basic HTML structure for this thing. Now I’m feeling this wizards has a bunch of steps, so that’s probably a good starting point. A step has two things: a number (or a ✔) and some text. I’ll add some basic styling but nothing fancy. We’ll go over the fancy bits later. This is what I came up with.

This seems pretty dumb, but getting the foundation right is the first step to a solid work.

Make me pretty

This is when we grab the CSS hammer and start playing with it until we’re happy with the result. As far as the wizard is concerned, it means rounding the round thingy, and centering the text thingy, as well as all the components.

What? centering and CSS on the same paragraph, what is this madness?

Why yes, let me show you a little thing called…. FLEXBOX! So if you don’t know FLEXBOX!, you should not read the spec, but instead absorve all the knowledge from this Complete Guide to Flexbox. Now let’s get serious, read the spec if you have time, at least diagonally to grasp why things are the way they are.

The first thing you need to know about flexbox is it centers stuff. And is pretty good at that. Just slap these three magic lines:

.some.div.boy {
  display:flex;
  align-items:center;
  justify-content:center;
}

and BA-BAM, you have yourself an element centered both vertically and horizontally. We are totally overusing flexbox here but I don’t really care. It’s easy, looks cool and CSS is already pretty hard as is.

Absolute that boy

Now this is where we roll our sleeves because we have an issue to solve. Our approach has some things that were not well thought. What will define the width of the step is the size of the text. That means we have two problems to tackle:

• The steps are not evenly spaced if the text has different widths.
• The center of the step is not on the center of the round thingy, which means that is not trivial to center other content like the step separator that designers love.
• That separator will also look tacky because it cannot overflow the text.

Ideally we would float the object so it’s position would be relative to the parent. We can do that with a beautiful position: absolute. That will remove the text from the document flow, while keeping it close enough to the round thingy. Of course we have to add enough space to the container since the text height is not taken into consideration for the total height of .steps . We could be smart with variables so everything would be “automatic” but you know what? I’m feeling lazy.

This is also why we didn’t use semantics with <ol> <li>…</li> </ol> . We would have the same problems with the separator and would have to render the numbers in the li:after . Regardless, here is a final solution that uses a more semantic approach.

Drawing the rest of the owl

And guess what? It’s 90% done. How easy was this? very. The smart part was a position absolute mixed with flexbox. more like flexboss am I right?

Anyway, the most satisfying part comes now. You did the thing. The CSS is simple enough with (apparently) no hacks. We just beautify the thing so the designer doesn’t kill us and 🛳 it! We’ll add some classes for the different states but that just for completeness.

And this is it. Just the basics. No JavaScript. No animations. Just a solid foundation with some nice decisions. Hope you enjoyed reading this post as much as I enjoyed writing it. Until next time, if they don’t cancel the series after one episode.

João Campinhos is a Senior Internet Connoisseur Extraordinaire disguised as a Frontend Developer. Emoji expert since the day he was born, João soon developed a love for all things web, including internet memes. If you find him in the wild, his default behaviour revolves around screaming at his screen because CSS refuses to cooperate, React is rendering everything 100 times, or the tests are failing. In reality, he just doesn’t know how to quit vim.