TL;DR: I did a thing with Flexbox. Here’s the standalone demo if you’re into DevTools and view:source, and the CodePen.

A couple days ago I was asked to create a the a page for that would display our roadmap. Which I did. It looks like this:

In order to make this design fully responsive, the step-based list showing the various stages of development needed to grow with the outer container. Here’s an animation to visualize the behavior:

I solved it, of course, by utilizing Flexbox. But first, I wanted to support very simple, no frills markup, like so:

<ol class="steps"> <li data-description="Step 1 description"> <ul> <li>Substep 1</li> <li>Substep 2</li> <li>Substep 3</li> </ul> </li> <li data-description="Step 2 description"> <ul> <li>Substep 1</li> <li>Substep 2</li> </ul> </li> </ol>
Code language: HTML, XML (xml)

I won’t go too much into detail, but here’s an excerpt of the CSS where the magic happens (I removed all visual styling), with comments that describe why something is needed and what’s going on:

.steps { ... /* enable flex, wrap all items. * - align-items' and align-content's default are set to 'stretch', * so li's automatically evenly distributed and stretched */ display: flex; flex-wrap: wrap; .... /* alternative to built-in list style that we can style */ list-style-type: none; counter-reset: steps; } /* the steps (li) */ .steps > li { ... /* gives items an explicit width, so we do things like * like ellipsis in overflowing text.. */ flex: 1 1 100%; ... border-left: 3px solid; counter-increment: steps; } /* the smallish description label next to the bubble */ .steps > li::before { /* show number + description from attribute in heading */ content: "Step " counter(steps) ": " attr(data-description); ... } /* the bubble with the number in it */ .steps > li::after { ... /* show the number from the counter in the pseudo element */ content: counter(steps); }
Code language: PHP (php)

Flexbox is often described as scary and difficult to grasp, but this I think is a decent example of how to use the defaults of Flexbox to your advantage. In fact, the only flex property we really need is the display: flex; and it just magically works. Everything else is smart styling, pseudo elements, counters etc.

And here’s the end result:

Go wild and use as you like (code licensed as public domain), and let me know if you’ve used it for something cool!

Reply with a tweet or leave a Webmention. Both will appear here.

Leave a Reply

Your email address will not be published. Required fields are marked *