Timeline Component

My website has a "zig-zagging" timeline with my work history –which, by the way, needs to be updated... both that work history and the website in general. But that's a different story–, and a person shared some interest in it. The timeline is built with grid and it is so old, that to avoid issues with gap, I added a an additional column to the layout.

So, I decided to give it a try and make it more modern and generic (link to CodePen demo):

• Semantic HTML: what is a timeline but an ordered list of events?

• Native CSS: grid, relative colors, sibling-index (with fallback in HTML)

• No JS: Add it if you need it... I guess?

• Customizable: via CSS custom properties and HTML data-attributes

• Responsive: 1-column in smaller screens, 2-columns in larger screens

• Internationalization support: logical properties and some :dir magic

• Cross-browser: Chrome, Safari, Firefox...

The result is a timeline that looks like a stack of cards in smaller screens:

And in larger screens it looks like a two-column layout with cards "zig-zagging" across the timeline:

Not only it will adjust to the size of the screen, but also in right-to-left and even top-to-bottom. This was an interesting challenge that required removing all the left/right/top/bottom properties and use the logic options instead with inset. Also, and this was more of a pain, the translate transform does not vary based on direction, so I had to replace it for the logical borders. That did the trick!

You can find the code for the component on CodePen: https://codepen.io/alvaromontoro/pen/YPymqyg

Check it, test it, give me your (constructive) feedback!